Website help

Soldato
Joined
6 Jun 2011
Posts
2,741
Hey guys,

I am creating a website for the first time for university. However I believe I am running into the usual IE and Firefox box model issue. Basically my CSS code is below and it includes a horizontal navigation bar. However for some reason IE makes a small white gap on the right hand side of the bar. Does anybody know why?




Many thanks
Josh
 
Last edited:
I forgot to add that I think it is something to do with this here because it is where I have added padding:


In firefox the nav bar is the same width as the main div.
 
Last edited:
Instead of using padding to get your <a> widths, try using a fixed width (i.e width:240px;) and see what happens.

You might have to use browser specific CSS if you can't get it working.
 
Thanks for the responses. I think it is already solved! It was a box model issue, setting a fixed width has made them both the same width :) One other thing quickly, since changing it my text was not aligned in the middle. So I added in text-align:


However how do align it in the middle vertically?

Many thanks!!
 
Last edited:
Oh apologies I thought you mean horizontally. If you want the text to be aligned vertically, you need line-height:HEIGHT OF BAR;

So pretty much what you put.
 
Thanks for the help guys, here is the fixed versions now:

Firefox:


Now I might add a border-right between them, in order to seperate them.

Thanks :D
 
Last edited:
If you do that you'll end up with a border on the end right one also. You'll need to use the selector :last-child to avoid it on the last.

div.menu li:last-child a{
border:none;
}
 
Back
Top Bottom