CSS for Safari and opera

I have built a website for a company http://www.scouts.org.uk/conferencecentre/ that works well on a PC with FF, IE6, IE7, bot not in Opera (have attached an image). In safari (have attached an image)i have problem with the navigation bar as it over flows to the next line.

You can see the CSS in FF by using firebug.

I wonder if the conditional statements for IE6 and 7 are obstructing this.

Can anyone help? Please

If you need anything please let me know

Attached Images

	bp_safari.jpg (92.1 KB, 3 views)
	bp_opera.jpg (102.5 KB, 3 views)

Here you have a comparison between the FF and Safari versions:



As you can see, Safari and FF do not render the fonts in exactly the same way. By the time you get to the end of the line these differences add up.

There are a number of solutions to this. I think you would prefer comming up with them on your own.

In Opera the reason is different. You are calling for<div id="navcontainer"> but no #navcontainer exists on your CSS (that could have helped) or defining the same types of margin-top to#littlebox as to #navlist.

You're trying to cram too much text into that navbar.

Always leave a little "breathing room". Different browsers have different default text sizes (and font weights).

Guys thanks so so much for your time in replying.

However is there a conditional statement or hack i can use to fix this problem in Safari cause that is the only issue

Again thank you both so much

No, only IE is safe to hack for.

But you're not getting the bigger picture. Other (admittedly more obscure) browsers may also do this, and hacking for Safari will not fix them.

You're trying to be too precise about the width of text. It's much better to allow a little space in your design, so that variations in text size don't cause a problem.