SitePoint Sponsor

User Tag List

Results 1 to 19 of 19

Hybrid View

  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't get menu to display correctly in IE

    www.deronsizemore.com/test/index.html


    The navigation menu on the right seems to drop down below the two left columns in Internet Explorer. I assume it's a padding issue, but I can't seem to fix it. I've don't actually have padding specified on any <div> where there is also width specified. I've got an extra <div> inside the container with the conten to specify padding, so to get around the broken box model (or so I thought).

    I tried to simply remove all padding from the page and still got the same result.

    Can anyone point me in the right direction here?
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suggest you read this: Curing Float Drops and Wraps

    Remove the extra <div> in #navmenu, you don't need it. Any padding you want can be put on the <ul>. Also you only put some top padding on the extra <div> and since you didn't specify a height on #navmenu, you don't need an extra element to avoid box model issues.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the link. I'll have to read it closer tomorrow.

    Am I correct in that what's happening with my layout is a "float wrap"?

    Thanks for pointing out that extra div also!
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome

    Yes, for some reason IE is calculating the widths of the elements so that float doesn't have enough room, so it is wrapping below the element taking up the extra room.

    You could try floating it left and giving it a negative left margin of 2px or 3px, but you would need to use a CSS hack or two or conditional comments to show that rule to IE5-6/Win only.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kravvitz,

    I changed a few things around in the stylesheet and the layout seems to work now. All I did different was float all three content areas left instead of having a two left and the naviagtion right. I fixed the menu simply by removing the 2px padding that was added to the left side. So now it seems to work in IE 6 and FF. Can you check it out and see what you think? Would there be any issues with floating all three left opposed to what i had before?

    Also now that I've done this, there seems to be two other small problems.

    1. In IE in the nav menu, if you look under "links" there is the three letters "nks". I guess this is some bug, because I have no idea where that "nks" is coming from.

    2. The #wrap div has 50px margin on top and bottom. The bottom is there to separate the top section of the page, from the #secondary section of the page. In FF, there is no separation on the bottom, dispite the 50px margin. IE displays this correctly.

    Thanks
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome

    1) I think you're seeing IE's Duplicate Characters bug.

    2) You need to clear the floats.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    You're welcome

    1) I think you're seeing IE's Duplicate Characters bug.

    2) You need to clear the floats.

    Hey, sorry I've taken so long to get back here for a response. I've been trying to work this #secondary div out, but can't seem to fix it.

    That IE duplicate character bug is crazy. It was freaking me out. Weird that -3px right margin will fix it on the last left float.

    As far as my #secondary div having no separation from the top #wrap div, I still can't seem to figure that one out. I know you said to take a look at clearing floats (which I did take a look at that link) and used "option 7" to try and clear the floats so that #secondary div has some space between it and #wrap (like it renders in IE) but did not work. I tried to add "height: xx;" to the clearer that I added and it worked in FF, but it just made the gap that much bigger in IE, so it still looks off. I thought I had it right anyway since I "clear:both;" the #secondary div as well as #footer, but evidentely not.

    Have anymore links in your bag that I can look at to sort this out? I don't want the answer, I'd like to work it out myself, but everything I try seems to be a dead end.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why did you pick option 7?

    Where did you put the clearing <p>?

    I suggest you read all of all three of those articles on clearing floats.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I'll read the rest of them tomorrow. I just read the first because it said "clearing space beneath floats" which is what I was wanting.

    I put the clearing <p> tag right above the #secondary div.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  10. #10
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It won't do any good there. It needs to be the last element in #wrap.

    I really recommend options 1 and 2 instead of 7.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  11. #11
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, I've finally got it working right. I ended up going with option #2 (althought I'm still working through exactly what it all means). I only went with option #7 the first time because the publisher of that site said that is the option he currently went with.

    I can't thank you enough for your help!
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  12. #12
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update:

    I thought everything was great, until I checked out the site on a monitor in a class I'm taking today. It's IE 6.0 at a resolution of 1024x768 but when I check out the site, the menu is really spread apart, almost like each link has about 15px margin under each one. Weird since I've got IE 6.0 at home also and it displays fine. Could it just be this monitor? It is an older CRT monitor.

    EDIT: Well it's not the the older CRT monitor (didn't think so, but you never know). Seems it's doing it here on my monitor as well and wasn't before. I'm going to try to find my mistake in the code, because it was fine and then all of a sudden, not fine. So must be something small.
    Last edited by deronsizemore; Jun 14, 2006 at 16:57.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  13. #13
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome

    That's a bug I often run into. You need to trigger hasLayout on those <li>s.
    Read these to learn about hasLayout:
    http://www.satzansatz.de/cssd/onhavinglayout.html
    http://dean.edwards.name/weblog/2005/06/layout/
    http://msdn.microsoft.com/library/de...ie20050831.asp
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  14. #14
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    You're welcome

    That's a bug I often run into. You need to trigger hasLayout on those <li>s.
    Read these to learn about hasLayout:
    http://www.satzansatz.de/cssd/onhavinglayout.html
    http://dean.edwards.name/weblog/2005/06/layout/
    http://msdn.microsoft.com/library/de...ie20050831.asp

    Thanks. I used the _height: 0; attribute and that seems to have worked, although IE still shows a little more space between links in that list than does Firefox. What do you think? Is it just me trying to be to perfect?
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  15. #15
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome

    Ugh. I forgot they recommend the underscore hack. I recommend the Holly Hack instead.

    I think it looks close enough. Most people won't look at it in more than one browser at the same time anyway.

    Since it's good to be planning ahead for IE7, I recommend you read this article.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  16. #16
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    You're welcome

    Ugh. I forgot they recommend the underscore hack. I recommend the Holly Hack instead.

    I think it looks close enough. Most people won't look at it in more than one browser at the same time anyway.

    Since it's good to be planning ahead for IE7, I recommend you read this article.

    Well I've implemented the Holly Hack and all seems to be fine.

    I have discovered one more thing that puzzles me. I'm sure it's simply because I don't understand the rule for it, but anyway, if I specify a width to the navigation menu, it seems to jump down under the #middle-content in IE. As you can see now from the source, I've got the widths for the #navmenu commented out, but if you take the comments off the navigation drops down below #middle-content. If my math is correct, the 440px for the left content, 170px for the middle, and 150px for the navigation equals 760 total which is specified for #wrap. But for some reason when I actually specify 150px for the navigation it jumps down, with it commented out it's fine, what's the difference here? Either way their still is 150px of space there right? The padding I have on the left content and middle content shouldn't be a factor as I've applied the padding to an inner #div as to get around the box model.

    -Deron
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  17. #17
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Geez! You're awesome. How do you come up with all of these articles!?

    I'm pretty sure you've just become my new best friend here at SitePoint.

    I'll give the Holly Hack a whirl
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  18. #18
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In Firefox the width seems to be 146px when you don't have it set to 150px.

    Try removing the negative right margin.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  19. #19
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    In Firefox the width seems to be 146px when you don't have it set to 150px.

    Try removing the negative right margin.
    Yeah, FF is fine either way though, whether I have it set at 150px or not. IE is mucking it up (imagine that)

    I have that negative right margin in there to take care of IE's duplicate character bug. I took the negative margin out and used conditional comments so that IE cannot see the comments making the bug and it works fine for the duplicate character bug, but taking the negative margin out did nothing for the layout in IE. With 150px width specified, the menu still drops down below the middle content and without 150px specified, everything is fine. I'm about to just call it a take and just not specify a width, but I'm worried it might cause some other problem later down the road? It's just really not making much sense to me since I have no other padding/margins that could be making the width wider.

    EDIT: I took the 150px width off of #navmenu ul li a and that seems to be what was triggering it. Seems okay now that I've done this.

    Thank you very much!
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore


Bookmarks

Posting Permissions

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