Ploblems with navbar display on internet explorer

Discussion in 'Web Design and Development' started by TodVader, Feb 23, 2008.

  1. TodVader macrumors 6502a

    TodVader

    Joined:
    Sep 27, 2005
    Location:
    Quebec, Canada
    #1
    Hi. I'm pretty much done with the design of my site + the integration of wordpress. Here's the address: http://www.computing4all.com

    When viewing the index with either safari, firefox(mac), IE, Firefox(pc), everything is fine.

    When viewing the blog section (my wordpress integration), everything is fine with safari, firefox (mac) and firefox (pc). The trouble comes from IE.

    If you dont have a PC or windows, go here: http://ipinfo.info/netrenderer/index.php and render http://www.computing4all.com/blog

    You will see the buttons on the left navbar have a margin between the button and the grey vertical bar.

    I searched for hours and never found what it could be. Everything else is pretty much done except this "minor" flaw.

    Any help would be nice, Thanks!
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Try adding the following CSS,
    Code:
    #leftnav h2 {
      margin: 30px 0 0 0;
    }
     
  3. TodVader thread starter macrumors 6502a

    TodVader

    Joined:
    Sep 27, 2005
    Location:
    Quebec, Canada
    #3
    I just tried that and it doesn't work unfortunately. I don't think it has anything to do with the wordpress navigation. I had this problem before I created it. What scares me about adding margins is that it won't work with firefox&safari. This is an internet explorer exclusive problem.

    Ive never worked with doing multiple stylesheets for multiple browsers but I think this will be the only solution :mad:
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    OK, downloaded the page and worked with it and found you a solution tested with Firefox and IE6.

    Code:
    #leftnav {
    float: left;
    width: 140px; /* 20px less width */
    }
    #leftnav h2, #leftnav a { /* 20px more padding */
     padding-left: 20px;
    }
    #leftnav .navbar a{ /* more specific selector */
    padding-left: 0; /* to counter above CSS */
    ...
    }
    #leftnav .navbar a:hover{ /* more specific selector, to counter above CSS */
    ...
    }
    Edit: On a side observation, with the way you have the navigation setup, the links have no space between them (if you turn off CSS), which means screen readers would read it as a random string of letters rather than words.

    Looks like: HomeAppleXbox 360InternetBlogSitemapContact
     
  5. TodVader thread starter macrumors 6502a

    TodVader

    Joined:
    Sep 27, 2005
    Location:
    Quebec, Canada
    #5
    Thankyou so much for taking your time to help me like this. It worked. This was the last problem in my design and now I can start adding my content. I'm surprised I was able to setup wordpress in my layout like this and make it all work and look identical to my website.

    What would you suggest doing to my links in my navbar? Just doing something like <a href="page.html">Link </a>?

    Thanks again for this, you saved me lots of hours of work.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    Glad it worked for you too. As for links, semantically, a lot of designers have switched to using list for navigation and using CSS to style them horizontally or vertically (you can check my site (in my profile) for an example of a horizontal layout). Though that would take a bit of rework of the CSS and since you just got it working that's not likely something you want to mess with right now.

    The alternative is to put the links on separate lines (currently they're a continuous line). This'll add a space between the links, and I don't believe that'll cause any problems with the layout. There's still a slight problem that there's no pause (from screen readers) between links, but at least it'll speak the words and not letters.
     
  7. TodVader thread starter macrumors 6502a

    TodVader

    Joined:
    Sep 27, 2005
    Location:
    Quebec, Canada
    #7
    I did this:
    <a href="page.html">Link </a>
    and put links on seperate lines. I hope search engines see it but ill just turn off css and see for myself.

    Thanks
     

Share This Page