Menu
My nav bar is styled perfectly for IE (not checked FF yet) but when viewing in safari the links aren’t spaced out and are also not positioned in the vertical center (in line with the image on the left). Can anyone tell me what safari needs to be able to display my css (displayed) correctly (apart from a good hard kick up the arse)? [URL=http://i77.photobucket.com/albums/j67/dopple_1983/safaripage.png]Also see link here for safari screenshot.
[CODE]body {
margin:0;
padding:0;
border:0;
}
body {
background-color: #000;
color:#fff;
}
li#pot {
width:60px;
margin:0;
padding:0;
}
#navigation {
position:relative;
background-color:#fff;
width:auto;
height:auto;
margin:30px 30px 0 30px;
font-size:16px;
font:bold 1em/1.8 ‘Lucida Grande’, Arial, tahoma, verdana, sans-serif;
}
ul {
white-space:nowrap;
width:auto;
height:auto;
line-height:1.0em;
border:1px solid green;
}
ul li {
vertical-align:middle;
display:inline;
width:14%;
margin-right:15px;
list-style-type:none;
border:1px solid blue;
white-space:nowrap;
}
#navigation ul li a {
color:#000;
text-decoration:none;
}
#navigation ul li a:visited {
color:#111;
}
#navigation ul li a:hover {
color:#000;
text-decoration:underline;
}
#navigation ul li a:active {
color:#000;
}
#times {
position:absolute;
text-align:right;
font-family:arial;
font-weight:bold;
font-size:14px;
bottom:20px;
right:20px;
}
[code=html]<div id=”navigation”>
<ul>
<li id=”pot”><img src=”img/pot2cms.jpg” alt=”pot logo” /></li>
<li><a href=”index.php”>HOME</a></li>
<li><a href=”james.php”>JAMES</a></li>
<li><a href=”history.php”>HISTORY</a></li>
<li><a href=”services.php”>SERVICES</a></li>
<li><a href=”menu.php”>MENU</a></li>
<li id=”links”><a href=”links.php”>LINKS</a></li>
</ul>
</div>
<p><img src=”img/dubhprais.jpg” id=”name” alt=”Dubh Prais Restaurant” /></p>
<div id=”times”>
<p>OPENING HOURS<br />
Tue – Fri Lunch 12pm – 2pm<br />
Tue – Sat Dinner 6.30pm – 10.30pm<br />
SUN MON CLOSED</p>
</div>