Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Getting frustrated w/ CSS. Looks great in FF and DW but not IE..??

    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:

    <div>
    <li><a href="https://secure.kennysmdi.com/kennyshardwood/prefinishedHardwood/">Prefinished Hardwood</a></li>
    <ul>
    <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>
    </ul>
    <li><a href="https://secure.kennysmdi.com/kennyshardwood/unfinishedhardwood/">Unfinished Hardwood</a></li>
    <ul>
    <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>
    </ul>
    </div>


    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
    </div>

    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!!

  • #2
    Regular Coder oldcrazylegs's Avatar
    Join Date
    Feb 2004
    Location
    East Moline Illinois USA
    Posts
    414
    Thanks
    4
    Thanked 5 Times in 4 Posts
    this book will teach you how
    http://www.idest.com/csshacks/

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    IE requires that you give an element a width when floating it.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hmmm..

    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.

    http://www.positioniseverything.net/...oatIndent.html


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •