Fix Bullets Styles in Firefox & IE for Website

  • Thread starter Monique
  • Start date
In summary, the conversation revolved around the issue of bullets not showing the same in Firefox and IE. The solution involved using CSS to change the list-style-position to "inside" and using <div> and <span> instead of tables for better structure and maintainability. The conversation also touched on the benefits of using a separate CSS file and the recommendation of the Web Developer extension for Firefox.
  • #1
Monique
Staff Emeritus
Science Advisor
Gold Member
4,219
67
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
  • #2
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:
  • #3
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.
 
  • #4
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:
  • #5
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>
 
  • #6
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:
  • #7
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?
 
  • #8
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:
  • #9
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.
 

1. Why are the bullet styles different in Firefox and IE for my website?

This is a common issue because different web browsers may interpret CSS styles differently. Firefox and Internet Explorer have different default styles for bullets, so they may appear different on your website.

2. How can I fix the bullet styles in Firefox and IE for my website?

To fix the bullet styles, you can use CSS reset or normalize stylesheets to ensure consistency across different browsers. You can also specify your desired bullet styles using CSS properties like list-style-type and list-style-image.

3. Can I use the same bullet styles for both Firefox and IE?

Yes, you can use the same bullet styles for both Firefox and IE by using the CSS reset or normalize stylesheets. These stylesheets help to reset the default styles of different browsers, making them more consistent.

4. Why do the bullet styles change when I switch between Firefox and IE?

The bullet styles may change when you switch between Firefox and IE due to the different default styles of the browsers. Additionally, if you have specified your bullet styles using vendor prefixes, they may not be supported by both browsers, causing the styles to change.

5. Are there any tools or resources to help fix bullet styles in Firefox and IE for my website?

Yes, there are various tools and resources available to help fix bullet styles for different browsers. These include CSS reset or normalize stylesheets, browser compatibility checkers, and online forums and communities where you can seek help from other web developers.

Similar threads

Powers with fractional exponents that have an even denominator
    • Precalculus Mathematics Homework Help
Replies
13
Views
2K
Recoil of bullet passing through firearm barrel
    • Other Physics Topics
Replies
6
Views
3K
B In dire Straights: Straights of 11+ w/ 2 Poker decks
    • Set Theory, Logic, Probability, Statistics
Replies
7
Views
1K
Challenge Math Challenge - May 2019
    • Math Proof Training and Practice
2
Replies
48
Views
8K
Approximating Damped Oscillator Time Period and Frequency with Large n
    • Introductory Physics Homework Help
Replies
5
Views
1K
I Work in hydrostatic system in cylinder with piston: P_int or P_ext?
    • Classical Physics
Replies
5
Views
578
I Weak measurement and the measurement problem
    • Quantum Physics
Replies
4
Views
730
I Stress-energy tensor and energy/momentum conservation clarification
    • Special and General Relativity
Replies
21
Views
2K
Understanding Momentum Conservation in Isolated Systems
    • Mechanics
Replies
19
Views
5K
Pendulum & Bullet, Understanding and Applying Angular Momentum
    • Engineering and Comp Sci Homework Help
Replies
5
Views
3K

Hot Threads

Recent Insights

Back
Top