CODEWITHSUNDEEP
html
John Doe
John Doe

Reputation: 55

HTML document not displaying correctly on browser on OSX

I have an HTML assignment where I have to reproduce this page...

https://gyazo.com/b9f77a413c0c0e55aaa294ed5b3c346a

However it produces this result when I run it on my mac.

https://gyazo.com/06ecff49a788d4f18bc451a5195571c3

This is my code (it is coded to correctly display what the professor wants--confirmed by professor):

<!DOCTYPE html/>
<html>
    <head>
        <title>Question One</title>
        <h1>Exercise on HTML5 Lists</h1>
    </head>
    <body>
        <dl>
            <dt>term 1 (definition list)</dt>
            <dd>
                term 1 description
                <ol>
                    <li>ol list item 1</li>
                    <li>ol list item 2</li>
                    <ul>
                        <li>ul list item 1</li>
                        <li>ul list item 2</li>
                    </ul>
                </ol>   
            </dd>   
        </dl>
        <dl>
            <dt>term 2 (definition list)</dt>
            <dd>
                term 2 description
                <ul>
                    <li>ul list item 3</li>
                    <li>ul list item 4</li>
                        <ol>
                            <li>ol list item 3</li>
                            <li>ol list item 4</li>
                        </ol>
                    <li>ul list item 5</li>
                    <li>ul list item 6</li>
                </ul>
            </dd>
        </dl>
    </body> 
</html>

This ran perfectly on a PC using linux and firefox, however when I try to open it on Chrome or Safari on my macbook pro it loads with those blank lines in between. Using the macbook pro and chrome, I also used an HTML editor online which produced the same erroneous result. I tried firefox on my mac yet the same thing happened! I even showed this to my professor and even he didn't know why it is behaving this way. Help much appreciated!

Upvotes: 2

Views: 189

Answers (2)

J. Titus
J. Titus

Reputation: 9690

Just need a little bit of CSS:

ol, ul, dl {
  margin-top: 0;
  margin-bottom: 0;
}

Fiddle

Upvotes: 2

blurfx
blurfx

Reputation: 1360

Every browser has their own internal style sheet. that's why every browsers shows different result.

I suggest to use normalize.css for render all elements consistently.

Upvotes: -1

Related Questions