CODEWITHSUNDEEP
htmlcssinternet-explorerfirefox
Darryl Janecek
Darryl Janecek

Reputation: 409

Unorded lists not displaying correctly

Here is a link to the webpage in question: http://www.canning.co.nz/

In IE, the unordered list displays with minimal white space between each row. However, in Firefox, there is a lot more white space.

How can I fix this webpage so that no matter what browser views this page, the unordered list is shown as displayed in IE.

Do I need to add a certain doctype or use CSS?

Upvotes: 0

Views: 92

Answers (3)

Shabnam K
Shabnam K

Reputation: 1582

Use Reset CSS **

Reset.CSS is simply a collection of CSS styles which removes and neutralizes the inconsistent default styling of HTML elements.

It simply clears the default values of web browsers and you won’t need to alter these differences for every element again.

//Reset CSS - include this stylesheet in your html page before your main css file


/* http://meyerweb.com/eric/tools/css/reset/ 
 v2.0 | 20110126
 License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

Upvotes: 1

Sirko
Sirko

Reputation: 74076

Explicitly remove the margin from those <p> tags to have a similar appearance in all browsers.

p {
  margin: 0;
}

The reason for this is, that browser have a standard stylesheet they use, if no other is supplied. These stylesheets differ between different browsers, so you have to explicitly set some values or use a CSS reset Style (e.g., this one by David Walsh).

Upvotes: 2

CKKiller
CKKiller

Reputation: 1422

your <p> tags are giving each <li> tag a margin, use 

ul li p { 
  margin: 0px; 
}

and it should get rid of the whitespace. (or just use p { margin: 0px } if you want to remove it from all <p> tags regardless of them being in the list)

Upvotes: 0

Related Questions