View Full Version : Getting frustrated w/ CSS. Looks great in FF and DW but not IE..??

04-27-2006, 06:11 PM
I'm finally kinda, sorta getting the hang of CSS. I've figured how to use floats to layout my Photoshop designs pretty well, but now I'm having a heck of time figuring out how to layout content within the pages w/o using tables.

Take this page for example: http://www.kennysmdi.com/hardwoodFlooring2.asp

If you look at that in Firefox it looks perfect. It also looks perfect in Dreamweaver as you can see with this screenshot: http://www.kennysmdi.com/temp/dwLayout.jpg

In IE, though, it's completely jacked! I can't figure out for the life of me why IE doesn't like this.

If I change the margin on those divs to padding instead, then it looks fine in both, however, it doesn't look all nice and neat in Dreamweaver. the divs end up all stretched out with all that padded space in them instead of fitting snug with whatever is inside that div and the whole thing moving over like margin does.

It seems to break right when I add the margins to each of these divs.

First I have this:

<li><a href="https://secure.kennysmdi.com/kennyshardwood/prefinishedHardwood/">Prefinished Hardwood</a></li>
<li><a href="https://secure.kennysmdi.com/kennyshardwood/prefinishedHardwood/maple.asp">Maple</a></li>
<li><a href="https://secure.kennysmdi.com/kennyshardwood/prefinishedHardwood/whiteOak.asp">White Oak</a></li>
<li><a href="https://secure.kennysmdi.com/kennyshardwood/unfinishedhardwood/">Unfinished Hardwood</a></li>
<li><a href="https://secure.kennysmdi.com/kennyshardwood/unfinishedhardwood/ash.asp">Ash</a></li>
<li><a href="https://secure.kennysmdi.com/kennyshardwood/unfinishedhardwood/birch.asp">Birch</a></li>
<li><a href="https://secure.kennysmdi.com/kennyshardwood/unfinishedhardwood/cherry.asp">Cherry</a></li>
<li><a href="https://secure.kennysmdi.com/kennyshardwood/unfinishedhardwood/elm.asp">Elm</a></li>
<li><a href="https://secure.kennysmdi.com/kennyshardwood/unfinishedhardwood/hickory.asp">Hickory</a></li>
<li><a href="https://secure.kennysmdi.com/kennyshardwood/unfinishedhardwood/kempas.asp">Kempas</a></li>
<li><a href="https://secure.kennysmdi.com/kennyshardwood/unfinishedhardwood/maple.asp">Maple</a></li>
<li><a href="https://secure.kennysmdi.com/kennyshardwood/unfinishedhardwood/redOak.asp">Red Oak</a></li>
<li><a href="https://secure.kennysmdi.com/kennyshardwood/unfinishedhardwood/walnut.asp">Walnut</a></li>
<li><a href="https://secure.kennysmdi.com/kennyshardwood/unfinishedhardwood/whiteOak.asp">White Oak</a></li>

And that puts my image on the far left with the list on the far left right below it. So in order to get the list up to the right of the image I add float left to both of those divs:

<div style="float:left;"><a href="http://www.kennyshardwood.com"><img src="images/kennysHardwoodLogo.jpg" alt="Kenny's Hardwood Flooring - Prefinished and Unfinished Wood Floors" border="0" /></a></div>
<div style="float:left;">
list stuff

This gives me the image to the far left and then the list directly to the right of it, but too close to the image. So, to fix that I add a margin to the list div:

<div style="float:left; margin:0 0 0 25px;">

Which then moves the list over a little bit and looks a lot better next to the image. So now I've got the image to the far left and the list to the right with some space between them. Looks good so far and looks good in both browsers. Next, I'd like to move these divs over so they're centered within my content area and aligned with the graphic that is in the div above them. So, I add a margin to the image div to push it over from the far left of the page:

<div style="float:left; margin:0 0 0 200px;"><a href="http://www.kennyshardwood.com"><img src="images/kennysHardwoodLogo.jpg" alt="Kenny's Hardwood Flooring - Prefinished and Unfinished Wood Floors" border="0" /></a></div>

Right there is when the 2 browsers start conflicting! In Dreamweaver and in Firefox this pushes both of the divs over 200 pixels and they end up looking centered right below the graphic above them. In IE, though, these 2 divs end up way over on the far right side.

At this point, I tried to add a margin to the right side of the list div to push it back over to the left since it was showing up all the way to the right in IE. Well, this still looks good in DW and in FF but then in IE the list gets moved down and ends up on the far left below the image as you see it now when you view the page with the link provided.

If I change the left margin on the image to 100 instead of 200, then it looks centered in IE like it should be under that graphic above it (in FF it's too far to the left then) but back to IE, that pushes the 2 divs and the div above them down and leaves a big gap above it all.

Any information on this would be greatly apprecited. It's driving me crazy!!! thanks!!

04-27-2006, 06:57 PM
this book will teach you how

04-27-2006, 08:32 PM
IE requires that you give an element a width when floating it.

04-27-2006, 08:56 PM
Not when there's an image inside that floated box. According to everything I've read anyway.

I did find the fix. Apparently it's a bug in IE that doubles the margin when you add it to a float next to the edge like I am here. Adding display: inline; to that div fixed it.