-
1. Re: IE8 adds extra top margin to <li> tag
CVK-USA Apr 23, 2010 6:48 PM (in response to -Samps-)Heh, this is not gonna be too helpful I fear, but your provided example code doesn't show the problem here on my system (MSIE8 / FF 3.6.3 on Win7 x64). The margins/vertical spaces between the LIs are spot on, no difference in the browser here. Only difference i see is size of the bullet.
Did you try setting both marging-top/bottom as well as padding-top/bottom and maybe line height for ul and li?
-
2. Re: IE8 adds extra top margin to <li> tag
Nancy O. Apr 24, 2010 9:46 AM (in response to -Samps-)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>Unordered List Demos</title> <style type="text/css"> /**zero out browser defaults**/ * {margin:0; padding:0; line-height: 100%; font-size: 100%} /**for IE ONLY**/ *body {font-size: 78%} ul, li{ font:11px/1.5 Arial, Helvetica, sans-serif; color: #666; list-style: disc; margin-bottom: 0.50em; margin-left: 2em; } </style> </head> <body> <p>My example of using these tags is:</p> <ul> <li>3/4" Removable foam pad vibrating plate overlay for support and comfort.</li> <li>Ample foam support grips for maximum safety of various exercise positions.</li> <li>Wheels for easy moving.</li> </ul> </body> </html>Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com -
3. Re: IE8 adds extra top margin to <li> tag
-Samps- Apr 24, 2010 12:34 PM (in response to CVK-USA)Thanks CVK-USA, I tried specifying line height in my CSS, and it helped quite a lot. Not quite 100% the same, but I can live with it. FYI I am viewing on FF 3.5.9 and MSIE8.
-
4. Re: IE8 adds extra top margin to <li> tag
-Samps- Apr 24, 2010 12:40 PM (in response to Nancy O.)Hi Nancy, thanks for your reply. I tried doing what you said and it totally screwed the entire page up in around 10 different ways, so I undid that. I should have mentioned this is an asp file I'm working on. I did manage to get the page to look pretty close in both FF and IE8 with the following CSS:
ul {padding-left: 8px;
margin-left: 7px;
margin-top: 0px;
line-height: 80%;
}li {font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-top: 0px;
margin-bottom: 8px;
color: #666666;
}I can certainly live with this for this page, but for future pages, if I find myself in a spot where the 2 browsers need to display EXACTLY the same, I think you're onto something with your suggestion of a conditional command specifically for FF. I've never used code like that before. Do you know what I should use to specify a different line-height % just for FF in an asp file?
-
5. Re: IE8 adds extra top margin to <li> tag
Nancy O. Apr 24, 2010 12:50 PM (in response to -Samps-)I tried doing what you said and it totally screwed the entire page up in around 10 different ways,
That's because I zero out default browser settings on everything with the universal selector (*). This removes padding, margins from everything. All you have to do is add some to your selectors.
I think you're onto something with your suggestion of a conditional command specifically for FF.
Sorry, but conditional comments or browser hacks are not supported by other web browsers. Only good for IE because it is a non-standards web browser.
Build your pages to look good in FF, Opera, Safari/Chrome. If they break in IE, then add conditional comments to fix IE. But it's best to avoid them if you can.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com -
6. Re: IE8 adds extra top margin to <li> tag
-Samps- Apr 26, 2010 9:48 AM (in response to Nancy O.)Okay, I'll build for FF, and use a conditional comment for IE only. But I'm still not sure how exactly. I'm actually pretty new at this, so a lot of the code that you originally supplied is a mystery to me. So to keep things simple, let's say hypothetically, that I wanted a conditional comment for IE so that the color looks different in IE only. I tried the following and it didn't work. What am I doing wrong? hopefully won't require replacing a ton of code?
<HTML>
<HEAD>
<TITLE>VB588 Pro Vibration Exerciser for Home or Commercial Use</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META name="keywords" content="VB588">
<META name="description" content="The">
<META content="MSHTML 6.00.2900.2523" name=GENERATOR>
<style type="text/css">
<!--/**for IE ONLY**/
*li {color: #FF0000
}ul {padding-left: 8px;
margin-left: 7px;
margin-top: 0px;
line-height: 80%;
}li {font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-top: 0px;
margin-bottom: 8px;
color: #666666;
}-->
</style>
</HEAD>
<BODY class="BodyBackground">
<ul>
<li>3/4" Removable foam pad vibrating plate overlay for support and comfort.</li>
<li>Ample foam support grips for maximum safety of various exercise positions.</li>
<li>Wheels for easy moving.</li>
<li>3/4" Removable foam pad vibrating plate overlay for support and comfort.</li>
<li>Ample foam support grips for maximum safety of various exercise positions.</li>
<li>Wheels for easy moving.</li>
<li>3/4" Removable foam pad vibrating plate overlay for support and comfort.</li>
<li>Ample foam support grips for maximum safety of various exercise positions.</li>
<li>Wheels for easy moving.</li>
<li>3/4" Removable foam pad vibrating plate overlay for support and comfort.</li>
<li>Ample foam support grips for maximum safety of various exercise positions.</li>
<li>Wheels for easy moving.</li>
</ul>
</BODY></HTML> -
7. Re: IE8 adds extra top margin to <li> tag
Nancy O. Apr 27, 2010 10:50 AM (in response to -Samps-)For starters, the code you supplied has no document type declaration so it runs in quirks mode. Quirks mode produces unexpected results in browsers. Secondly, you have incorrectly added a hack to your CSS code. The way you have done it won't work. Below I use a conditional comment. Firefox will produce list in gray. IE will show red. Copy and paste this code into a new, blank HTML page.
<!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"> ul {padding-left: 8px; margin-left: 7px; margin-top: 0px; line-height: 80%; } li {font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin-top: 0px; margin-bottom: 8px; color: #666666; } </style> <!--conditional comment for all IE versions--> <!--[if IE]> <style type="text/css"> li {color: #FF0000;} body {font-size: 76%} </style> <![endif]--> </head> <body> <ul> <li>3/4" Removable foam pad vibrating plate overlay for support and comfort.</li> <li>Ample foam support grips for maximum safety of various exercise positions.</li> <li>Wheels for easy moving.</li> <li>3/4" Removable foam pad vibrating plate overlay for support and comfort.</li> <li>Ample foam support grips for maximum safety of various exercise positions.</li> <li>Wheels for easy moving.</li> <li>3/4" Removable foam pad vibrating plate overlay for support and comfort.</li> <li>Ample foam support grips for maximum safety of various exercise positions.</li> <li>Wheels for easy moving.</li> <li>3/4" Removable foam pad vibrating plate overlay for support and comfort.</li> <li>Ample foam support grips for maximum safety of various exercise positions.</li> <li>Wheels for easy moving.</li> </ul> </body> </html>Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com -
8. Re: IE8 adds extra top margin to <li> tag
-Samps- Apr 28, 2010 10:22 AM (in response to Nancy O.)Awesome Nancy O, it worked. I seemed to be out of my league, so thanks for your patience in walking me through it all!
Sam



