# <ul> styles Firefox/IE

Staff Emeritus
Gold Member
I'm making a website, but bullets don't show the same in Firefox and IE: Firefox adds an indent while in IE it is flush to the left. What can I change? (I don't want it to indent)

This guy describes the same problem, but his solution didn't work http://www.breakingpar.com/bkp/home.nsf/0/87256B280015193F87256ED000626A9D

dduardo
Staff Emeritus
Microsoft saw this statement while reading the HTML 4.01 Standard:

"The exact presentation of the three list types depends on the user agent."

They "think" they can get away with no indent.

But the next sentence goes on to imply that lists should be indented:

"We discourage authors from using lists purely as a means of indenting text."

How convient for Microsoft to overlook this statement.

Source: http://www.w3.org/TR/html4/struct/lists.html

But regardless of what the w3c document says, purely from common sense, when you create an outline do all your bullets/numbers line up to the left? No, if they were all lined up then it wouldn't be an outline.

If you don't want your lists to be indented in firefox, opera, safari, etc you need to use some CSS.

Code:
<ul>
<li>Main Item</li>
<li>Sub Item</li>
<li>Sub Item</li>
<li>Sub Item</li>
<li>Sub Item</li>
</ol>
<ol>

Last edited:
Staff Emeritus
Gold Member
It should just work if I add this comment
Code:
style="padding: 0;margin: 0"
to the <ul>?

If so, it places the text flush to the margin, but the bullets are outside of the frame that they are supposed to be in (like a negative tab). Everything still looks fine in IE. Changing the padding or margin makes no difference.

dduardo
Staff Emeritus
Then use:

list-style-position: inside;

If you want all ul tags to left align with the marker inside just get rid of the style="..." and add:

<style type="text/css">
ul { list-style-position: inside; padding: 0px; margin: 0px }
</style>

or your can create a seperate css file and import it into the html like this:

You can learn about css here:

http://www.w3schools.com/css/default.asp

Last edited:
Staff Emeritus
Gold Member
Here the code:
Code:
<table width="100%" border="0" cellpadding="0" cellspacing="1">
<tr>
<td>
<ul><br />
<li><a href="one.html">one</a></li>
<li><a href="two.html">two</a></li>
</ul>
</td>
</tr>
</table>

dduardo
Staff Emeritus
Why are you using tables? Tables should never be used for presentation unless you have a need for tabular data. The proper way is to use <div> and <span>. Div is a generic block element while span is a generic inline element. The purpose of using divs and spans is the sperate structure from style.

For example this is a cleaner representation of what you have done using tables:

Code:
<head>

<!-- This is your look -->

<style type="text/css">

ul { list-style-position: inside; padding: 0px; margin: 0px }

</style>

<!-- This is your look -->

<body>

<!-- This is your structure -->

<div id="box">
<ul>
<li><a href="one.html">one</a></li>
<li><a href="two.html">two</a></li>
</ul>
</div>

<!-- This is your structure -->

</body>

The structure and the style is completely seperate. If you want to make any changes to the look of box, you can just change the CSS. No need to play around with the html.

Last edited:
Staff Emeritus
Gold Member
I'm a rookie :tongue: the tables work really well though, even though it is not standard usage. Are you suggesting that <ul> works different in tables than in divs or spans?

dduardo
Staff Emeritus
No, the ul will look identical. Its just a matter of mantainability and flexibility. See the code above I just added.

In most cases you'll want to actually have a seperate css file so you don't clutter up the structure.

If your using firefox I would recommend getting the Web Developer extension. It is a really powerful tool. One thing I really like about it is that you can outline elements in order to better grasp how the blocks and inline elements are being drawn.

You can actually seperate the data from the structure too by using XML, but that is another topic in itself.

[edit2]

Last edited:
dduardo
Staff Emeritus
Actually you can simpify the code further since ul is a block element in itself.

Code:
<head>

<!-- This is your look -->

<style type="text/css">

/*This only applies to the object with the id equal to mylist*/

/*This applies to all ul elemets */
ul { list-style-position: inside; padding: 0px; margin: 0px }

</style>

<!-- This is your look -->

<body>

<!-- This is your structure -->

<ul id="mylist">
<li><a href="one.html">one</a></li>
<li><a href="two.html">two</a></li>
</ul>

<!-- This is your structure -->

</body>

As you can see, the structure has been extremely simplied compared to using tables. Not only is it easier to read, but it takes up less bytes to download

Last edited:
Staff Emeritus
Gold Member
dduardo said:
No, the ul will look identical. Its just a matter of mantainability and flexibility. See the code above I just added.
I'll change the tables that aren't tables for the options you suggested and see if that works.

In most cases you'll want to actually have a seperate css file so you don't clutter up the structure.
I do have a css file, I just need to learn how to use it

If your using firefox I would recommend getting the Web Developer extension. It is a really powerful tool. One thing I really like about it is that you can outline elements in order to better grasp how the blocks and inline elements are being drawn.
I'll try it, up till now I have been using a trial version of UltraEdit-32, which is really nice.

Thanks for the help!

dduardo
Staff Emeritus
The web developer extension is not a text editor like UltraEdit-32. It is only a tool for helping you debug, validate, and get specific information about the layout of the page. You'll see how it works once you get it.

Staff Emeritus
Gold Member
dduardo said:
Then use:

list-style-position: inside;

If you want all ul tags to left align with the marker inside just get rid of the style="..." and add: