Fix Bullets Styles in Firefox & IE for Website

  • Thread starter Thread starter Monique
  • Start date Start date
Click For Summary

Discussion Overview

The discussion revolves around the inconsistent display of bullet points in Firefox and Internet Explorer (IE) on a website. Participants explore potential CSS solutions to achieve uniformity in bullet indentation across different browsers.

Discussion Character

  • Technical explanation
  • Debate/contested
  • Mathematical reasoning

Main Points Raised

  • One participant notes that bullets in Firefox are indented while in IE they are flush to the left, seeking a solution to eliminate the indent.
  • Another participant references the HTML 4.01 Standard, suggesting that Microsoft may have overlooked guidelines regarding list indentation.
  • A suggestion is made to use CSS properties like "padding" and "margin" to control the bullet positioning, although results may vary.
  • Another participant proposes using "list-style-position: inside" to align bullets with the text, recommending a CSS approach for consistency across browsers.
  • There is a discussion about the appropriateness of using tables for layout, with some participants advocating for the use of
    and for better structure and maintainability.
  • A participant expresses confusion about the differences in behavior of
      elements within tables versus
      elements.
    • Another participant emphasizes the importance of separating structure from style, suggesting that using a separate CSS file is more efficient.
    • One participant shares their positive experience with the Web Developer extension for Firefox, highlighting its utility in debugging and layout analysis.
    • Another participant confirms that the suggested CSS code worked effectively to align bullet points in both browsers.

    Areas of Agreement / Disagreement

    Participants express differing opinions on the use of tables versus CSS for layout, with some advocating for modern practices while others defend their current methods. There is no consensus on the best approach to achieve the desired bullet point alignment across browsers.

    Contextual Notes

    Some participants mention limitations in their current understanding of CSS and web development practices, indicating a range of experience levels in the discussion.

    Who May Find This Useful

    Web developers and designers, particularly those working on cross-browser compatibility issues and those seeking to improve their understanding of CSS for list styling.

Monique
Staff Emeritus
Science Advisor
Gold Member
Messages
4,229
Reaction score
61
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
 
Computer science news on Phys.org
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>
        <ul style="padding: 0;margin: 0">
                <li>Sub Item</li>
                <li>Sub Item</li>
                <li>Sub Item</li>
                <li>Sub Item</li>
        </ol>
<ol>
 
Last edited:
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.
 
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:

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

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

<link href="myStyle.css" rel="stylesheet" type="text/css">


You can learn about css here:

http://www.w3schools.com/css/default.asp
 
Last edited:
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>
 
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">

#box { padding-top: 10px }
ul { list-style-position: inside; padding: 0px; margin: 0px }

</style>

<!-- This is your look -->

</head>



<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:
I'm a rookie :-p 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?
 
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 separate 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.

[edit]

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

[edit2]

I've made the code a little bit more readable.
 
Last edited:
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*/
#mylist { padding-top: 10px }

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

</style>

<!-- This is your look -->

</head>



<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:
  • #10
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 separate 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 :wink:

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! :smile:
 
  • #11
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.
 
  • #12
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:

<head>
<style type="text/css">
ul { list-style-position: inside; padding: 0px; margin: 0px }
</style>
</head>
To let you know, that code worked like a charm! :smile: both browsers look the same now.
 

Similar threads

Powers with fractional exponents that have an even denominator
  • · Replies 13 ·
Replies
13
Views
4K
Graduate Recoil of bullet passing through firearm barrel
  • · Replies 6 ·
Replies
6
Views
5K
High School In dire Straights: Straights of 11+ w/ 2 Poker decks
  • · Replies 7 ·
Replies
7
Views
2K
Challenge Math Challenge - May 2019
  • · Replies 48 ·
2
Replies
48
Views
13K
Has Meebo invaded a website you use?
  • · Replies 22 ·
Replies
22
Views
3K
My Website For Creating Interactive Visuals Linked To Equations
  • · Replies 4 ·
Replies
4
Views
4K
Approximating Damped Oscillator Time Period and Frequency with Large n
  • · Replies 5 ·
Replies
5
Views
2K
HTML/CSS Container shrinks at certain screen widths (CSS)
  • · Replies 5 ·
Replies
5
Views
3K
LaTeX Fix LaTeX Not Showing Up in Firefox/IE
  • · Replies 3 ·
Replies
3
Views
3K
Undergrad Understanding Momentum Conservation in Isolated Systems
  • · Replies 19 ·
Replies
19
Views
7K