HTML question

Discussion in 'Web Design and Development' started by John444, Feb 11, 2011.

  1. John444, Feb 11, 2011
    Last edited: Feb 11, 2011

    John444 macrumors member

    Joined:
    Feb 10, 2011
    #1
    I am doing HTML coding for school. At school on windows computer we use Internet Explorer, when I brought it home on a USP stick, and opened it with Safari, I noticed that the ordered list tags (<ol> and </ol>) works as an unordered list tag (<ul> and </ul>) instead, even though in the source it is still <ol>. Any reason for this? or any idea how to fix it? Will it show up as unordered list on internet explorer at school?
    Please Help!
     
  2. Makosuke macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #2
    If your code is correct, then both Safari and IE will render lists about the same; most likely you've got an unclosed tag or other typo that IE is more forgiving of than Safari. You're not going to get a better answer than that without posting the actual code you're having problems with, though.

    On that note, remember to feed your code into the W3C Validator before asking questions--fixing any validation bugs will weed out simple typos and mistakes and may solve your problem outright.

    You're also a lot more likely to get an answer if you post in the Web Design and Development forum here.
     
  3. John444 thread starter macrumors member

    Joined:
    Feb 10, 2011
    #3
    I don't think thats the problem because I double checked it just now and I can't find a problem. It works perfectly but doesn't open on my mac as an ordered list (like 1. 2. 3.) it works as an unordered list. But on a windows it works fine as a ordered list. Could there be a setting in Safari or on my mac that I must switch for it to show up as ordered list?
     
  4. harpster macrumors regular

    Joined:
    Jan 26, 2010
    #4
    The following code works fine in Safari for Ordered and Unordered lists... so you can try it in it's simplest form below and verify that it works for you. Now if you still have problems you NEED TO POST YOUR CODE so we can take a look at it. Thanks.

    Code:
    <html>
    
    <head>
    </head>
    
    <body>
    
    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
    
    
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    
    </body>
    
    </html>
     
  5. John444 thread starter macrumors member

    Joined:
    Feb 10, 2011
    #5
    That code works fine on my computer. This is the code that doesn't work (I changed some of the info but it still doesn't work properly on my computer):
    <HTML>
    <HEAD>
    <TITLE>example</TITLE>
    </HEAD>
    <BODY>
    <FONT FACE="arial" size="4">
    <DIV ALIGN="left">
    <UL>Ingredients
    </DIV>
    </FONT>
    <LI>ingredient
    <LI>ingredient2
    <LI>ingredient3
    </UL>
    </BR>
    <FONT FACE="arial" size="4">
    <DIV ALIGN="left">
    <OL>Directions
    </DIV>
    </FONT>
    <LI>Direction1
    <LI>Direction2
    <LI>Direction3
    </OL>
    </BODY>
    </HTML>
     
  6. John444 thread starter macrumors member

    Joined:
    Feb 10, 2011
    #6
    Hey I figured out my problem, I for some reason aligned it using <DIV> but the default aligns it left, so this was causing an error in the <OL>. So I took off all the <DIV>'s and the ordered list worked great.
     
  7. Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #7
    You can't do this:

    Code:
    <DIV ALIGN="left">
    <UL>Ingredients
    </DIV>
    <LI></LI>
    ...
    </UL>
    
    If you had followed the suggestion to validate your code you would have found this - though understanding the error message may have been harder than you might have liked! Basically you can't interleave tags like that, they have to be nested.

    Code:
    <DIV ALIGN="left">
    <UL>Ingredients
    <LI></LI>
    ...
    </UL>
    </DIV>
    
    On a secondary point look up CSS as a means of formatting your pages, embedding presentational details is a sea of pain waiting to happen, all those "FONT="ariel" SIZE=4" could be replaced by a style block in the head of the document:

    Code:
    <style type="text/css">
    ol{
      font-family: Ariel, sans-serif;
      font-size: 12pt;
    }
    </style>
    
    Then when you need to change it, you can do it in one place. Ideally you should have the CSS in a separate file then all pages on the site can reference it by linking it in but for a single page embedding it in the head section is fine.
     
  8. John444 thread starter macrumors member

    Joined:
    Feb 10, 2011
    #8
    Ok, thanks I will be sure to remember this. Thanks for your help everyone!
     
  9. manueld macrumors 6502

    Joined:
    Jun 8, 2009

Share This Page