Forum Moderators: not2easy
#subnavigation {
font-size: 87.5%;
font-family: Candara, Tahoma, Geneva, sans-serif;
background-color:#915F70;
float: left;
width: 180px;
overflow: visible;
}
#subnavigation > ul {
/*overflow:auto;*/
list-style:none;
margin: 0em;
padding: 1em;
text-align: right;
}
#subnavigation > ul > li {
width: 100%;
text-align: right;
border-bottom: 1px solid #000000;
}
#subnavigation > ul > li > a {
border: none;
color: #000000;
}
And this is the HTML:
<div id="subnavigation">
<ul>
<li><a href="index.html">Item1</a></li>
<li><a href="index.html">Item2</a></li>
<li><a href="index.html">Item3</a></li>
<li><a href="index.html">Item4</a></li>
</ul>
</div>
Now the problem is that IE (FF, Opera and Safari display correctly as usual) shows the first list-item right aligned with 1em of padding on the right, but all other list-items are right-aligned without padding to the right. SO it looks a bit like this:
Item1
Item2
Item3
Item4
Item5
I am at a loss why this is and how I can fix it. Anybody please?
Thanks
So you must be having trouble in IE7
Problem is that it doesn't want to replicate when I tried.
This is what I was playing with:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<style type="text/css">
#subnavigation {
font-size: 87.5%;
font-family: Candara, Tahoma, Geneva, sans-serif;
background-color:#915F70;
float: left;
width: 180px;
overflow: visible;
}
#subnavigation > ul {
/*overflow:auto;*/
list-style:none;
margin: 0em;
padding: 1em;
text-align: right;
}
#subnavigation > ul > li {
width: 100%;
text-align: right;
border-bottom: 1px solid #000000;
}
#subnavigation > ul > li > a {
border: none;
color: #000000;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subnavigation">
<ul>
<li><a href="index.html">Item1</a></li>
<li><a href="index.html">Item2</a></li>
<li><a href="index.html">Item3</a></li>
<li><a href="index.html">Item4</a></li>
</ul>
</div>
</div>
</body>
</html>
Perhaps figuring out the differences between the above and what you had might explain things.
One difference I saw between Firefox 3 on mac and IE7 is the choice of fonts (but my virtual machine has very few fonts installed - just those that come with windows actually).
Thanks again.
ul, ol {
list-style: inside;
margin-left: 3em;
}
When I remove that (and only that) it works. Just can't seem to understand why?
#subnavigation > ul {
list-style:none;
margin: 0em;
}
should take precedence, besides, I have other navigations on my page which are exactly the same as this one, and those do work in IE7.
anyway, I resolved the problem for now, but would like to know what is wrong exactly. So if anyone has an inkling?
