Ploblems with navbar display on internet explorer

[TodVader]

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!

 

[angelwatt]

Try adding the following CSS,

#leftnav h2 {
  margin: 30px 0 0 0;
}

 

[TodVader]

Try adding the following CSS,

#leftnav h2 {
  margin: 30px 0 0 0;
}

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

 

[angelwatt]

OK, downloaded the page and worked with it and found you a solution tested with Firefox and IE6.

#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

 

[TodVader]

OK, downloaded the page and worked with it and found you a solution tested with Firefox and IE6.

#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

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.

 

[angelwatt]

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.

 

[TodVader]

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