Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

<ul> styles Firefox/IE

  1. Aug 20, 2005 #1

    Monique

    User Avatar
    Staff Emeritus
    Science Advisor
    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
     
  2. jcsd
  3. Aug 20, 2005 #2

    dduardo

    User Avatar
    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 (Text):

    <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: Aug 20, 2005
  4. Aug 20, 2005 #3

    Monique

    User Avatar
    Staff Emeritus
    Science Advisor
    Gold Member

    It should just work if I add this comment
    Code (Text):
    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.
     
  5. Aug 20, 2005 #4

    dduardo

    User Avatar
    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:

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

    or your can create a seperate 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: Aug 20, 2005
  6. Aug 20, 2005 #5

    Monique

    User Avatar
    Staff Emeritus
    Science Advisor
    Gold Member

    Here the code:
    Code (Text):
    <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>
     
  7. Aug 20, 2005 #6

    dduardo

    User Avatar
    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 (Text):

    <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: Aug 20, 2005
  8. Aug 20, 2005 #7

    Monique

    User Avatar
    Staff Emeritus
    Science Advisor
    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?
     
  9. Aug 20, 2005 #8

    dduardo

    User Avatar
    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.

    [edit]

    You can actually seperate 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: Aug 20, 2005
  10. Aug 20, 2005 #9

    dduardo

    User Avatar
    Staff Emeritus

    Actually you can simpify the code further since ul is a block element in itself.

    Code (Text):

    <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: Aug 20, 2005
  11. Aug 20, 2005 #10

    Monique

    User Avatar
    Staff Emeritus
    Science Advisor
    Gold Member

    I'll change the tables that aren't tables for the options you suggested and see if that works.

    I do have a css file, I just need to learn how to use it :wink:

    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:
     
  12. Aug 20, 2005 #11

    dduardo

    User Avatar
    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.
     
  13. Aug 20, 2005 #12

    Monique

    User Avatar
    Staff Emeritus
    Science Advisor
    Gold Member

    To let you know, that code worked like a charm! :smile: both browsers look the same now.
     
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook

Have something to add?



Similar Discussions: <ul> styles Firefox/IE
  1. IE and spyware (Replies: 30)

  2. Removing IE (Replies: 10)

  3. Firefox problem! (Replies: 3)

  4. Firefox weirdness (Replies: 6)

  5. Firefox & realplayer (Replies: 5)

Loading...