CSS Layout in IE

[jaymac]

Hi,

I finally understand what everyone's talking about when they say IE stinks! I'm trying to figure out CSS layout, and everything looks fine in Opera, FF and Netscape, but IE7 reads the page differently. I found a hack _ that works for position but it doesn't seem to work for padding. If anyone could offer any advice it would be greatly appreciated.
http://www.geocities.com/jdmcelwaine/index.html

Thanks in advance for any help.

Jason

[achtungbaby]

A good starting point would be validating your code: http://validator.w3.org/check?verbos...ine/index.html

It's not essential (depending on who you ask) but knowing your code is valid means one less unknown variable.

[Paul O'B]

Hi,

You have a number of problems going on there. First of all your server is dumping loads of code on the page which will make it invalid and make ie6 run in quirks mode. In quirks ie6 will use the broken box model among other things.

The other main problem is that you are relying on the default margins of elements in order to place them and you shuld be taking control explicitly. For example firefox applies a default top margin of about 1 em to p tags but Ie applies none which is why ie is a bit higher up. This is the same for all elements and varies between browsers.
Reset all the padding and margins to zero with this.

[ccode]
* {margin:0;padding:0}
[/code]

You will see that things are much closer now. If you give the p#toplinks tag a margin top of about 12px then both browers will be much the same apart from the changes that follow.

Next get rid of the margins where you have used pts and use pixels instead as they are exact. Also get rid of the margins where you have said 0.5 as there is no such thing as half a pixel.

Once you've done that then you can set the exact top and bottom margins that you need on all the elements you use.

Also validate your code as mentioned above as you have some errors. You can't wrap a span around a form element because a form is bl;ock level and a span is an inline element.

Consider using lists for your menu rather than bare anchors which is bad for accessibility.

You only need to use a hack when you encounter a known bug. Most of the time it will be something you are doing wrong so find out why first

Hope it helps.

[jaymac]

Thanks for solving my massive headache! I have a quick question about the span/form thing. Does this mean I'll need to use something other than span, or can I just move the <form> outside the span and put the <input(s)> inside the span.

P.S. I bought Sitepoint's CSS Anthology today and I'm psyched to finally be moving (slowly) away from tables...

[jaymac]

one more thing...

I cut and pasted the code into the validator to avoid server produced code and it keeps telling me "This page is not Valid XHTML 1.0 Transitional!" Is this a standard message for sites that don't validate or should I be declaring the document something else?

[Paul O'B]

Hi,

No the validator is saying its not valid because of the errors it lists below.

I've corrected the errors in the html and this code is valid:

<div id="wrapper">
    <div id="main">
        <p id="toplinks"> HOME&nbsp;&nbsp;<img src="images/spacer3.gif" width="1" height="7"  alt="" /> &nbsp;SITEMAP&nbsp;&nbsp;<img src="images/spacer3.gif" width="1" height="7"  alt="" /> &nbsp;CONTACT </p>
        <div id="header"> <a href=""><img src="images/home1.png" width="100" height="30"  class="logo2 domroll images/home2.png" alt="" /></a> <a href=""><img src="images/about1.png" width="100" height="30"  class="logo domroll images/about2.png" alt="" /></a> <a href=""><img src="images/contact1.png" width="100" height="30"  class="logo domroll images/contact2.png" alt="" /></a> <a href=""><img src="images/search1.png" width="100" height="30" class="logo domroll images/search2.png" alt="" /></a>
            <form action="submit">
                <div class="strapline">
                    <input class="username" name="" type="text" value="username" />
                    <input class="password" name="" type="text" value="password" />
                    <input class="submit" type="submit" value="log in" />
                </div>
            </form>
        </div>
    </div>
</div>
<script src="chrisdomroll.js"  type="text/javascript">
/****************************************************
* DOM Image rollover v3.0: By Chris Poole http://chrispoole.com
* Script featured on http://www.dynamicdrive.com
* Keep this notice intact to use it :-)
****************************************************/
</script>
</body>

A form should have a block level element as its direct child so use a div instead of the span. It will make no difference to the display because you are floating it anyway so they will both behave the same.

You also missed the closing tags of the inputs. Apart from that (and the server code) it was more or less valid anyway.

You should look into using lists for that menu though as it is much neater and more accessible although it is slightly harder to code. I'll leave that for you to look into