Welcome to WebmasterWorld Guest from 50.16.24.12

Forum Moderators: not2easy

List alignment problem in IE7

First item correct, rest not.

   
1:05 pm on Sep 26, 2008 (gmt 0)

5+ Year Member



This is the code I have:


#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

5:52 pm on Sep 26, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



First of all, I'm not sure if you're aware that without some serious help IE6 will utterly fail on the ">" in the selector (it's not supported by IE6)

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).

8:21 pm on Sep 26, 2008 (gmt 0)

5+ Year Member



Thanks for trying it out swa66. It is strange.
Perhaps the problem is one of the wrapper divs (which I did not mention here). At least now I know the problem is not in this part of the code.

Thanks again.

11:48 am on Sep 27, 2008 (gmt 0)

5+ Year Member



I found the culprit. It is this piece of code in my reset style sheet:


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?

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved