Click to See Complete Forum and Search --> : My list differs in IE compared to Firefox


WebEmperess
05-27-2008, 09:47 AM
Hello!

I have a small problem.

When viewing my page in Firefox the list is where it's supposed to be. But when viewing it in I.E the list gets positioned too much to the right.

Example.
in Firefox

*it looks like this
*123
*abc
---

In I.E
________*it looks like this
________*123
________*abc
--

Here is the css that is connected to the list:

.linklist{
list-style-type:none;
padding-left: 0px;

}
.linklist ul{
margin-top:14px;
padding:0px;
}
.linklist li{
padding-top:5px;
padding-bottom:5px;

Thanks in advance.

KDLA
05-27-2008, 12:43 PM
<style type="text/css">
.linklist{
list-style-type:none;
margin-top:14px;
margin-left: 0;
padding:0px;
}
.linklist li{
padding-top:5px;
padding-bottom:5px;}
</style>
</head>

<body>
<ul class="linklist">
<li>a;lskdf</li>
<li>a;sldkfj</li>
</ul>

</body>

WebEmperess
05-27-2008, 12:50 PM
It works like a charm! Thanks alot.

It seems like I've been adding un-necessary information in my css file (thinking of linklist ul { ) I'll fix that with my other lists as well.

Thanks once again for a quick and working answer!

Centauri
05-27-2008, 07:26 PM
For more information on why this worked, different browsers have different methods of providing the default list indent - IE uses left margin on the <ul> (which quite often causes problems with bullets disappearing if the <ul> is given a width or height), whilst FF uses left padding on the <ul>. To get the same result cross browser, you have to control both margin and padding on the <ul>, especially the left ones.