SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot Shpook's Avatar
    Join Date
    May 2007
    Location
    Hollywood, FL, USA
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ANOTHER IE complaint....help!

    Okay, well I'm creating a horizontal nav menu for a friend, and ran into a little problem. Of course in Firefox it displays fine, but in IE6 it looks like the <ul> defaults to a block display, with the <li>'s stacked vertically. I thought I'd be able to find my answer through google, but had no luck. Any advice?
    Life would be so much easier if we
    could just look at the source code.
    -Dave Olson

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What does your code look like (bear in mind I'm under a tornado watch right now, and severe weather is heading directly for me, so if I don't answer and I appear offline, you know why)?

  3. #3
    SitePoint Zealot Shpook's Avatar
    Join Date
    May 2007
    Location
    Hollywood, FL, USA
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I'm sorry, I forgot to post the link. Here ya go: http://www.stylehorizons.com/navmenu/index.html

    And be careful with those tornados. They scare the crap out of me.
    Life would be so much easier if we
    could just look at the source code.
    -Dave Olson

  4. #4
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Kravvitz turned me on to this solution. And you're probably aware of this one-stop shopping for horizontal menus, but perhaps someone reading this thread is not. I spent a ton of time hunting for horizontal menu solutions, and the Dynamic Site code is very nice. Centers, too.

    Off Topic:

    My wife survived the Xenia tornadoes from what, 30 years ago? And I watched an F2 tornado cakewalk down the street in Memphis one summer, tossing cars and ripping off roofs. We all respect tornadoes around here. I've got my fingers crossed for you, Dan.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    I once saw an F4 forming right outside of my house when I was living on the far west side of Aurora once - called 911 to report it, gave its heading, rate of rotation, and current location, and asked them to forward it to the National Weather Service in Romeoville. Fortunately, despite crossing nearly half the city (Aurora is the largest city in Illinois, right after Chicago), it never touched down.

    And no, that was not the first twister I ever saw. It was my third.

  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)
    It's doing that in IE6 because you gave #wrapper width:0 and #navigation width:100&#37;.

    BTW, it looks like you need to trigger hasLayout on the <a>s in that menu. To understand what hasLayout is, read some of these: (I discourage the use of the underscore hack, which the first one recommends though.)
    http://www.satzansatz.de/cssd/onhavinglayout.html
    On Having "Layout"
    "HasLayout" Overview
    A TripSwitch? - set hasLayout to true without a dimension
    IE/Win: inline-block and hasLayout
    Clarification of inline-block and hasLayout
    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
    SitePoint Zealot Shpook's Avatar
    Join Date
    May 2007
    Location
    Hollywood, FL, USA
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Kravvitz...why in the world I put width:0 in #wrapper I don't know, but I'm sure I meant to put padding:0 instead. I believe I've got the behaviour I've been looking for as far as layout. The inline-block trick worked.

    Now I'm having other issues. IE related, of course. First off, I'm trying to keep all the <li>s the same size using min-width. I know this is an ongoing problem with IE, and I've been trying to find a fix for it. I looked into Stu Nicholls' method, but it seems to require a little more code than I would like to use. I could be wrong, but I believe I would have to wrap each <li> element in it's own <div> to specify individual border widths. I'm not sure if I can just wrap the <ul> in a <div> with the declared border width, but I don't think that will work. Also, having to use a negative position the place text inside the border seems like it will restrict the ability to keep the text centered.

    Also, for the :hover pseudo class, the background image only seems to auto wrap the text, and not expand to the size of the <li>.

    I feel like I should be able to either fix these on my own, or find it on google. But my brain is failing me.
    Life would be so much easier if we
    could just look at the source code.
    -Dave Olson

  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)
    You're welcome

    No, you can't wrap a <div> around an <li>. Only <li>s may be (direct) children of <ul>s and <ol>s. You could of course, however, put a <div> inside each <li>.

    If you use white-space:nowrap and set a width on the <li>s in IE, you might not need min-width functionality.
    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
    SitePoint Zealot Shpook's Avatar
    Join Date
    May 2007
    Location
    Hollywood, FL, USA
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Will this allow me to keep the <li>s equally proportioned and fluid regardless of resolution and browser size?

    Right now I'm defining a width in terms of &#37; to keep every <li> the same size, and min-width to keep them equal size at minimum browser size/resolution.

    The hard part is trying to get the menu down to a minimum size of 550px wide. With the amount of <li>s and the titles used, I don't see this being possible unless I make the <li>s auto wrap the text. Some people are just too picky...
    Life would be so much easier if we
    could just look at the source code.
    -Dave Olson

  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)
    display:table-cell would be a better option, but IE doesn't support that.

    Perhaps you should tell this to your friend: Web design is not print design. There are way more variables that have to be taken into account. This means that things have to be flexible and won't always look the same.
    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
    SitePoint Zealot Shpook's Avatar
    Join Date
    May 2007
    Location
    Hollywood, FL, USA
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I think I'm going to try a few different designs and tell him that what he wants isn't feasible. There are a few options though. I can make the <li>s fit to the width of the text, but that won't quite look right with the design of the site. A couple of other possibilities would be to make it a two line menu, or redesign from seperate buttons to a solid bar and text(probably not going to happen). I think the best way to make both me and him happy is to cause the <li>'s to wrap down to the next line in a graceful manner. This way he can still achieve 550px minimum width for the site, keep the wording he has and keep it readable, and still have equally proportioned <li>s. It will also make my life easier with IE(I hope).

    Now, I have another question: Is there a way to set how many <li>s will wrap down to the next line at a certain width? For example, that navigation menu has 7 items. Say I hit 650px browser width, could I make 3 of the <li>s wrap down, even though only one is required?

    Thanks for you patience Kravvitz. I'm learning CSS as I go, and although I've been taking my time to learn everything the correct way, I've still got a long way to go.
    Life would be so much easier if we
    could just look at the source code.
    -Dave Olson


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
  •