...

View Full Version : Problems with list formatting



magicpaul
12-17-2005, 01:11 PM
Hi guys,

I'm trying to format a list using HTML and CSS. The link to the page is below (excuse the fact that the page is a mess, I'm just experimenting at this stage). http://82.138.232.85/

In IE the page kinda looks like what I want however it has pushed the bullets (the arrows) across to the right instead of lining them up with the header for that box. And in Firefox it's just totally screwed...any ideas? :confused:

Here is the HTML:


<div id="Navigation">
<ul>
<li><a href="link">Adidas</a></li>
<li><a href="link">Call of the Wild</a></li>
<li><a href="link">Fred Perry</a></li>
<li><a href="link">Frietag</a></li>
<li><a href="link">Levi's</a></li>
<li><a href="link">Maharishi Denim</a></li>
<li><a href="link">Medicom</a></li>
<li><a href="link">MHI by Maharishi</a></li>
<li><a href="link">Nike</a></li>
<li><a href="link">Silas</a></li>
<li><a href="link">Tonite</a></li>
<li><a href="link">Trainerspotter</a></li>
<li><a href="link">Umbro by Kim Jones</a></li>
</ul>
</div>

And the relevant CSS:


/* Navigation */

#Navigation {
width: 180px;
border: 0;
padding: 0;
margin: 2px;
font-family: Tahoma;
background-color: #E5E4D2;
color: #595957;
}

#Navigation ul {
list-style: none;
margin: 2px;
padding: 0;
border: none;
list-style: disc url(/skins/end/images/bullet.gif) inside;
font-size: 9px;
}

#Navigation li {
border: 0;
margin: 2px;
padding: 0;
}

#Navigation li a {
display: block;
padding: 0;
border: 0;
background-color: #D9D8C7;
color: #595957;
text-decoration: none;
width: 100%;
}

html>body #Navigation li a {
width: auto;
}

#Navigation li a:hover {
border: 0;
background-color: #F3F1E4;
color: #595957;
}

Thanks!

Paul

_Aerospace_Eng_
12-17-2005, 04:33 PM
The way browsers handle list-style-position varies, I always set the bullet as a background image, its easy, and works out well most of the time. Try this

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/* Navigation */

#Navigation {
width: 180px;
border: 0;
padding: 0;
margin: 2px;
font-family: Tahoma;
background-color: #E5E4D2;
color: #595957;
font-size:0.6em;
}

#Navigation ul {
margin:0;
padding: 1px;
list-style: none;
}

#Navigation li {
margin: 2px;
padding: 0 0 0 10px;
background:url(/skins/end/images/bullet.gif) left center no-repeat;
}

#Navigation li a {
display: block;
padding:0;
border: 0;
background-color: #D9D8C7;
color: #595957;
text-decoration: none;
width:162px;
}
#Navigation li a:hover {
border: 0;
background-color: #F3F1E4;
color: #595957;
}
</style>
</head>

<body>
<div id="Navigation">
<ul>
<li><a href="link">Adidas</a></li>
<li><a href="link">Call of the Wild</a></li>
<li><a href="link">Fred Perry</a></li>
<li><a href="link">Frietag</a></li>
<li><a href="link">Levi's</a></li>
<li><a href="link">Maharishi Denim</a></li>
<li><a href="link">Medicom</a></li>
<li><a href="link">MHI by Maharishi</a></li>
<li><a href="link">Nike</a></li>
<li><a href="link">Silas</a></li>
<li><a href="link">Tonite</a></li>
<li><a href="link">Trainerspotter</a></li>
<li><a href="link">Umbro by Kim Jones</a></li>
</ul>
</div>
</body>
</html>

magicpaul
12-17-2005, 07:30 PM
Thanks that's much better!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum