views:

133

answers:

2

Well hi, guess what, I have an IE positioning issue! This is in 8, so god know what's going on in the other versions (checking later)

Both the boxes call the same class, why is IE being so difficult?

Here's how it's meant to look:

right

And here's how it does look:

wrong

CSS: (removed comments for ease of reading)

div .roundbigboxkunde {
    background-image:url(../../upload/EW_kunde_info.png);
    background-position:top center;
    padding:10px;
    padding-top:10px;
    padding-bottom:20px;
    width:560px;
    height:1%;
    border-width:1px;
    border-color:#dddddd;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    z-index:1;
    position:relative;
    overflow:hidden;


}

div .roundbigboxkundei {

    margin-top:10px;
    padding:10px;
    padding-top:10px;
    padding-bottom:10px;
    width:760px;
    height:1%;
    position:relative;
    overflow:hidden;

And HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 

    <div class="roundbigboxkunde"> 
    <div class="roundbigboxkundei"> 

<p id="nyk">&nbsp;</p> 
<div id="bg_box2"></div> 
<p class="required"> 

       <label for="billing_firstName"><span class="label">Fornavn:</span></label> 
       <fieldset class="error"><input name="billing_firstName" class="text" type="text" value="Kyle"/> 

    <div class="errorText hidden"></div> 
    </fieldset> 
</p> 

CONTENT CONTINUES

        </fieldset> 

Here is the page

+1  A: 

Given that you have some content which looks like it's appearing inside other content, if I were you I'd start by double checking that all your tags are closed (i.e., that you don't have a <div> that's missing its </div>).

But it's hard to tell from what you've posted . . . If the page is hosted somewhere and you can link to it, that would make it easier to debug.

Tim Goodman
God, of course! Sorry I forgot the link... Long day.
Kyle Sevenoaks
And the thing also is, it works fine in all browsers but IE, should I just change some setting in the IE CSS (already using cond. comments) or is it something else? Bashed my head up against it all day.
Kyle Sevenoaks
It depends.... sometimes things are broken in IE because of IE not complying to CSS standards (although in my experience IE 8 is much better about basic CSS compliance than previous versions -- not that that's saying much). In that case, sure, you could stick some new CSS in a conditional comment. Other times though it could be that you've made a genuine mistake -- such as my suggestion that you might be missing a closing tag -- and it's just that the other browsers you're testing on are doing a better job guessing what you *meant* to say. In that case, you'll want to actually fix the bug.
Tim Goodman
Ok thanks Tim, I'll go through and check it all with a fine toothed e-comb.
Kyle Sevenoaks
A: 

I added:

<div class="clear"></div>

with the css:

.clear
{
    clear: both;
    width: 100%;
    height: 0;
    overflow: hidden;
    float: none !important;
}

Between the two boxes. Fixed it right up :)

Kyle Sevenoaks