CSS navigation looks different on Firefox and other browsers

HTML & CSS
1

Hi,

I am working on the following website:

questboss.com

The navigation bar below the logo looks different on Firefox and other browser. I like the way it looks on Firefox and I want it to look the same on other browsers as well but I couldn’t make it. Do you have any ideas?

Thanks.

2

guestboss.com doesn’t connect. Is there another link?

3

Hi, it is not g, it is q.

4

Thanks, must be getting sleepy here. Will try again <smile>

5

I’m looking at Firefox and IE8. They look almost exactly the same. Could you be more specific about which browsers do not look right? and describe the differences that you see?

6

Please check it in Chrome, Safari or Opera and you will see the difference. The navigation buttons have the correct padding in Firefox, but not in Chrome or other browsers, including IE. In IE, top and bottom padding for the inner box are not displayed. I could have used images for buttons but I don’t want to use images every time I can’t fix some CSS3 stuff. I am using a list (ul) for the navbar, perhaps I should use divs?

7

OK, cutting edge CSS3 - there will be retro compatibility problems. Might be better if someone else offers help here. I actually thought the padding in IE8 was more consistent than Firefox. Oh, well.

8

I have looked at your site in Firefox 15.0.1, Chrome 13.0.782.112, Safari 5.0.3, Opera 12.02, Internet Explorer 8.0.6001.1872 and even Kindle Fire (via the Opera Mobile Emulator) on Windows XP.

All of these browsers show exactly the same layout with only a very minor difference in thickness to the borders in Opera. I don’t think there is anything you can do about the way different graphics engines render borders.

Çok güzel olmuş! Hiç bir sorun yok.

9

UPDATE: Solved.

Thanks all for trying to help. I finally fixed this by changing the CSS slightly. The buttons look better now on all browsers.

10

Thanks for the followup, nayen. I looked at the link posted and it doesn’ t look any different to me, but maybe it hasn’t been updated, yet. I’m curious to learn how you fixed the buttons.

Best 2 U

11

You can see the current CSS code. What I changed is that I added “float: left” to “li” items and “display: block” to “li a” items in the navbar. That’s pretty much it.