homepage Welcome to WebmasterWorld Guest from 54.227.25.58
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
LI/UL tags do not display correctly in IE
IE issues
sledge81




msg:4272632
 11:23 pm on Feb 25, 2011 (gmt 0)

Hello,

I'm using the WP blogohblog theme. Through IE8, the UL/LI tags seem a bit mis-aligned.

The CSS for the UL/LI are:

.box li {
line-height: 22px;
list-style: disc outside url("images/4.gif");
margin-left: 20px;
text-transform: capitalize;
}

and

.htabs li a {
color: #FFFFFF;
display: block;
float: left;
margin-right: 20px;
padding: 3px 10px;
text-shadow: 1px 1px #000000;
}

Is there something I need to fix for IE?

Thanks a lot in advance.

 

g1smd




msg:4272633
 11:25 pm on Feb 25, 2011 (gmt 0)

Are the HTML tags properly nested?

Run the page through the W3C HTML validator just to be sure it isn't a simple typo in the HTML code.

sledge81




msg:4272675
 12:20 am on Feb 26, 2011 (gmt 0)

Thanks for the advice. I ran it through the W3C CSS Validator. For the class in question I get this error.

Property text-shadow doesn't exist in CSS level 2.1 but exists in : 1px 1px #000 1px 1px #000

So, what do I need to do? (Apologies for asking a rather silly question)

g1smd




msg:4272697
 1:02 am on Feb 26, 2011 (gmt 0)

What about the HTML Validator, is that clear of errors?

Not so sure about text-shadow errors, but could well be implicated in something being a couple of pixels off. Someone like SuzyUK probably knows the answer...

Fotiman




msg:4272710
 1:33 am on Feb 26, 2011 (gmt 0)


Property text-shadow doesn't exist in CSS level 2.1

text-shadow was introduced in CSS3. So if you try to validate it as CSS 2.1, then you will get this error.

And what about the HTML validator?

You haven't specified any padding on the li, so the browser default will be used. You may want to specify the padding to ensure it's consistent cross-browser.

sledge81




msg:4272712
 1:34 am on Feb 26, 2011 (gmt 0)

There are a few errors, but none that i could trace back to the UL/Li tags.

The tags make use of a arrow.png kind of an image. It's strange that only in IE, they seem to be a bit off mark. I've highly customized the theme, so I can't really go back and reference the original css theme

sledge81




msg:4272714
 1:38 am on Feb 26, 2011 (gmt 0)

Padding.. I tested with padding:5px and 0px, but that doesn't seem to make any difference at all.

webprutser




msg:4272895
 2:01 pm on Feb 26, 2011 (gmt 0)

Had some IE problems with a nested list recently. Choosing the right DOC-type (strict) solved my problems.
If you can't get it working, maybe you can post the html-code as well.

alt131




msg:4272903
 2:08 pm on Feb 26, 2011 (gmt 0)

Hi sledge81, On the provided code, I couldn;t see any "mis-alignment". Can you be a bit more specific?

webprutser




msg:4272907
 2:26 pm on Feb 26, 2011 (gmt 0)

I thought, why not try it, so I made a short list and put your css in it (with the strict DOC type). I see the difference the way IE displays it. Font type is different as well as the positions of the bullets. They are behind the list items, instead of in front. In both cases (IE and FF) the list items were not at the same vertical position.
As soon as you remove float the bullets are at the right place again and the list items are neatly placed below each other. Is this the problem you were having, the bullets at the incorrect place and the text out of line?

sledge81




msg:4272913
 2:39 pm on Feb 26, 2011 (gmt 0)

Thanks a ton guys.

I took a screenshot of the boxes in both IE and FF.

[img10.imageshack.us...]

SuzyUK




msg:4273080
 9:26 pm on Feb 26, 2011 (gmt 0)

zero both the padding and margin on ul's and only use one to make them consistent across browsers

I would also advise, instead of changing the list-style position (default is outside) to put the custom background image onto the <li> or the <a> that way you have more control over the distance from the bullet to the text.. and by picking the position of the background image you can have it vertically centered or at the the top of multi line list items .. much more control really

webprutser




msg:4273086
 9:41 pm on Feb 26, 2011 (gmt 0)

I looked at your screenshot and am surprised. Make a testfile with a small list, add the CSS code you posted above (without float) to it and you will see the result is (apart from different fonts) exactly the same and not similar to your screenshot.

sledge81




msg:4273106
 10:43 pm on Feb 26, 2011 (gmt 0)

Thanks for all the suggestions, really appreciate it.

I set the list style to outside and the alignment seems to work fine. Set the padding to 0px and used only margin for .box li so that pretty much did the trick.

So right now, the alignment of the arrow images shows up fine in IE8, but the text seems to be a bit off. I tried playing around by adjusting the margin, but that didn't seem to work. Any suggestions on this one?

Here's the new screenshot now: [img29.imageshack.us...]

I forgot to add screenshot for the .htabs li a

I tried removing the float element but that didn't help. In Firefox, instead of showing both tabs next to each other it was being displayed one below another and in IE, needless to say was showing the arrows defined for the li tag, apart from being completely mis aligned.

Here's the screenshot for the section that uses .htabs li a

[img402.imageshack.us...]

And here's the entire tabber css

.htabs li {list-style:none; padding:0; margin:0;}
.htabs li:hover {list-style:none;}
.htabs li a{display:block; float: left;padding:3px 10px 3px 10px; color: #fff; margin-right:0px; text-shadow:1px 1px #000;}
.htabs li a:hover { text-decoration:none;}
.htabs li h3 {font-size:12px;}
.tabs {padding-top:20px; border-top:5px solid #333;}

What I tried so far:

Removed .htabs li and made use only of .htabs li a -> Didn't Work
Set padding to 0 in .htabs li a so it's same as .htabs li -> Didn't Work

webprutser




msg:4273163
 1:30 am on Feb 27, 2011 (gmt 0)

I think we should go back to your initial question and try to solve that first, before looking at additional code for hover e.g. What is this .htbs li h3 doing by the way? A header in a list? Maybe I'm wrong, but I am more and more convinced that the real problem is not in the CSS code you posted at the start of this item. Like said before, I tried it and by removing float had none of your problems. Could we go back to your initial question, please post the html you use. I would like to test it with your html and eventually incorporate Suzy's advises.

sledge81




msg:4273286
 10:41 am on Feb 27, 2011 (gmt 0)

Ok, so here goes.

I created a test.html by putting in the required elements. The only issue now is that, in IE, the text between the li tags is about 1 or 2 px below the 9x9 png image that is being called instead of the default bullet point.

Some points to note. UL tag is not being used at all, except that it is declared in the css.

Here is the code:

<html>
<head>
<style>
body {
font:12px Arial, Helvetica, sans-serif; }
.col1, .col2, .col3 {
float: left;
margin: 6px 6px 0;
width: 300px;
}
a {text-decoration:none;}
ol,ul{list-style:none;margin:0px;padding:0px;}
.smallfeed {width:12px; height:12px; position:absolute; top:10px; right:10px;}
.box {border:1px solid #DFDFDF;padding:10px; margin-bottom:10px; position:relative; background:#FFF url(grad.png)

top repeat-x;}
.box h3 {line-height:18px;}
.box h2 {border-bottom:1px solid #DFDFDF; font-size:20px; margin-bottom:10px; padding-bottom:5px;}
.box li{ line-height:22px; list-style-image:url(4.gif); text-transform:capitalize;margin-left:20px;outline-style:none;}
.box li:hover { list-style:url(2.gif); }
.box li a:hover {text-decoration:underline;}
</style>
</head>
<body>
</body>
<div class="col1">
<div class="box">
<div class="smallfeed">
<a href="#"><img border="0" alt="RSS Feed!" src="smallfeed.png"></a>
</div>
<h2>Top Stories</h2>
<li><a href="#">This is the first LI tag. Some text here to make it into two lines.</a></li>
<li><a href="#">Hello World</a></li>
<li><a href="#">And this is the last LI again, with two lines</a></li>
</div>
</div>
</body>
</html>

[edited by: alt131 at 7:09 pm (utc) on Jul 9, 2011]
[edit reason] Thread Tidy [/edit]

webprutser




msg:4273375
 4:49 pm on Feb 27, 2011 (gmt 0)

Visited the page you mentioned in both Firefox and I.E. and they look fine, both of them. Unlike the screenshot you made, the little red arrows as well as the text are rendered the way your screenshot of Firefox shows (so both Internet Explorer and Firefox display it in this way). My next question is which I.E. version do you use? I.E. 8? And if so, could it be you altered some browser settings (what happens when you visit the page at someone else's computer, like I said it looks good on I.E. as well on my computer).

sledge81




msg:4273397
 5:38 pm on Feb 27, 2011 (gmt 0)

Hi Webpruster,

Yep that site renders fine. But when I see my webpage it shows the li text 1 or 2 px lines below instead of being shown in the same line as with the arrows.

I'm using IE 8. Yep checked on another computer and it's still the same problem.

webprutser




msg:4273430
 6:26 pm on Feb 27, 2011 (gmt 0)

OK, I misunderstood you. Thought you were having trouble with this page. Have to do some other things first (how about cooking dinner?), but will have a look at your code later on and let you know.

webprutser




msg:4273540
 9:19 pm on Feb 27, 2011 (gmt 0)

I'm still not sure whether there is some communication error. To me, looking at your code, is what you want something quite simple. You want, as far as I can tell, an unordered list with an image before the list-items. I altered the code a bit, simplified it and it results in a list that really (and I had a real good look) is the same in I.E. and Firefox.
This is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>


<style type="text/css">
body {font:12px Arial, Helvetica, sans-serif; }

a {text-decoration:none;
}

.smallfeed {width:150px; height:29px; position:absolute; top: 10px; left: 200px; border: 0px;}

.box {
list-style-image: url(images/bullet.png);
margin-left: 20px;
padding-left: 0px;
margin-top: 20px;
padding-top:20px;
line-height: 22px;
}
</style>
</head>

<body>

<h2>Top Stories</h2>

<a href="#"><img src="images/button_agenda_wat.png" alt="RSS Feed!" class="smallfeed"></a>

<ul class="box">
<li><a href="#">This is the first LI tag. Some text here to make it into two lines.</a></li>
<li><a href="#">Hello World</a></li>
<li><a href="#">And this is the last LI again, with two lines</a></li>
</ul>

</body>
</html>

webprutser




msg:4273543
 9:26 pm on Feb 27, 2011 (gmt 0)

I forgot to mention something important.
I had a bit bad-luck working on the testfile due to which I can't exactly recall what reacted in a certain way. I came accross the following information in my Cookbook (not the one I use for dinner, I like this one better):

"Different browers use different methods to pad or indent a list.
Firefox indents a list on the padding, whereas Internet Explorer pads a list through the margin. To gain cross-browser effectiveness, you need to set the value for both left margin and padding for the list. Keep the amount of indentation in one of the properties."

So you keep either padding or margin on "0".

webprutser




msg:4273546
 9:33 pm on Feb 27, 2011 (gmt 0)

P.S.
I really lost track (I turned out to have two test files with the same name at different locations, one was in my editor, the other in the browser and I got rather frustrated nothing I did had any effect :-) ):

the padding-top/margin-top of 20px has no use, you can leave it out. The simpler, the better.

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