homepage Welcome to WebmasterWorld Guest from 54.166.10.100
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
List alignment problem in IE7
First item correct, rest not.
Bert36




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

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

 

swa66




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

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

Bert36




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

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.

Bert36




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

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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

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