PDA

View Full Version : Bullets to the left Safari, but above in Firefox?


SessionDesign
April 8th, 2010, 05:01 PM
Why are my bullets to the left of my list in Safari, but above the list in Firefox?

http://www.viggoknudsen.com/test/urbangreymenu.html

CSS code:


body {
background-image: url(http://www.viggoknudsen.com/background.jpg); /*background image*/
}

.header {
position:fixed;
top: 20px;
left: 20px;
}

#navigation {
position:fixed;
top: 142px;
left: 30px; /*left position of navigation*/
width: 190px; /*width of menu*/
}

#navigation ul {
list-style-image: url(http://www.viggoknudsen.com/test/bullet.png);
list-style-position: inside;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

#navigation ul li {
padding-bottom: 2px; /*bottom spacing between menu items*/
}

#navigation ul li a, #navigation ul li a:visited {
font: normal 12px Arial;
color: black;
background: #F1F1F1;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

#navigation ul li a:hover { /*hover state CSS*/
font: normal 12px Arial;
color: black;
background: #E1F0A1;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

HTML code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="urbangreymenu.css" />
</head>

<body>

<div class="header">
<img src="http://www.viggoknudsen.com/header.png" alt="Header" />
</div>

<div id="navigation">

<ul>
<li><a href="http://www.viggoknudsen.com/commercial.html">COMMERCIALS</a></li>
<li><a href="http://www.viggoknudsen.com/musicvideo.html">MUSICVIDEOS</a></li>
<li><a href="http://www.viggoknudsen.com/short.html">SHORTS</a></li>
<li><a href="http://www.viggoknudsen.com/industrial.html">INDUSTRIALS</a></li>
<li><a href="http://www.viggoknudsen.com/documentaries.html">DOCUMENTARIES</a></li>
<li><a href="http://www.viggoknudsen.com/photography.html">PHOTOGRAPHY</a></li>
<li><a href="http://www.viggoknudsen.com/contact.html">CONTACT</a></li>
<li><a href="http://www.viggoknudsen.com/credit.html">CREDITS</a></li>
</ul>

</div>

</body>
</html>
icio
April 8th, 2010, 08:05 PM
The problem originates from your `list-style-position` CSS property on the lists putting the bullets 'inside' the LI element. When you have the bullet character followed by the anchor (A) element they don't both fit onto one line and the anchor is therefore wrapped onto the next.

You have two options as I see it:

Give the menu items more room (increase the width) so that wrapping need not occur; or
Remove the bullet points from the list altogether and display the bullets using a background and padding on the anchor.

I personally would go for solution 2 because solution one might be slightly more complicated (I think if you use #1 you would have to float the anchor and then mess around with the widths and it would be awkward.)

Try sticking in the following:

#navigation ul {
list-style-type: none;
}
#navigation a {
background-color:#F1F1F1;
background-image:url(http://www.viggoknudsen.com/test/bullet.png);
background-position:8px 8px;
background-repeat:no-repeat;
padding-left: 20px;
}

Hope that helps :thumb:
SessionDesign
April 9th, 2010, 02:11 AM
Ah, so i just put under the #navigation ul li a instead of #navigation ul li or ul. :D
Thanks that worked perfectly! Sometimes it easier than you think... ;)
icio
April 9th, 2010, 06:42 AM
Happy to help (-: