Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Mar 2011
    Posts
    6
    Member #
    27192
    [COLOR=rgb(108, 111, 115)]I've got my site displaying correctly in Safari, Firefox, Chrome, IE8, but in IE6 and IE7, it looks really messed up. The main problem is the horizontal navigation bar is displaying vertically. If anyone would like to take a look at the code, here is the link to the site:[/COLOR]
    [COLOR=rgb(108, 111, 115)]http://www.slimekids.com/[/COLOR]

  2.  

  3. #2
    Junior Member
    Join Date
    Mar 2011
    Posts
    16
    Member #
    27272
    According to W3, only 9% use those browsers today. You can live without them.

  4. #3
    Junior Member
    Join Date
    Mar 2011
    Posts
    6
    Member #
    27192
    That may be so, but for my website the numbers are different. Over 70% of my users use IE and of those, well over 40% use IE6 or IE7 (mostly the latter). So my site is not functional for about 30% of the total visitors.

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    iPwn: W3C's figures are based on mostly techie users, so they'll always be skewed in favor of things like say FF and Chrome. So the low IE6/7 number there is all but meaningless. fine0023's numbers ar closer to accurate for a consumer site in general.

    fine0023, there are three things that may be causing your issue:

    1) You haven't got a clearly defined width for your #nav li elements.
    Code:
    #nav li {width:  148px;}
    Add that in somewhere.

    2) Do the same for #nav li a:
    Code:
    #nav li a {display:  block;  width:  148px;}  /* this will help ensure that the hover effect shows up properly as well. */
    3) The float: left on the nav itself doesn't need to be there. You can remove that.

    Try those three things. I suspect it's the first one. But it could be any one of them.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Junior Member
    Join Date
    Mar 2011
    Posts
    6
    Member #
    27192
    Hey, I'm not sure what you mean by the following:
    You haven't got a clearly defined width for your #nav li elements.
    My code already said
    Code:
    #nav li {width: 148px;}
    Is there something about this that is not clearly defined?
    I tried the other stuff including putting in display: block and putting the width in the #nav li a. None of it did the trick for IE7. I also tried taking the float: left away from the nav itself and that made the whole nav shift a little to the right and the rightmost item go on top. Well, thanks anyways for trying to help. Any other ideas?

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Weird. I didn't see it when I looked. Then again, I wasn't looking on my usual machine. I was on a client's computer temporarily while I looked and waited.

    With any unordered list that's a menu, you should also define both margins and padding for the ul itself (in this case, #nav) and the li items. Otherwise, browsers make their own guesses. padding: 0; should suffice. That would at least solve the shifting issue and allow you to remove the float. It might also solve the other issues you're having at once.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:39 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com