Jump to content

<li> In Various Browsers


ben03

Recommended Posts

I am needing some advice as have written out a based bulleted list in my page which looks fine in IE. However the spacing is huge in Firefox. The composition would look silly if i were to move the content below the list, so was wondering whether there was code available to help all browsers display the list with the same amount of vertical spacing?Thanks

Link to comment
Share on other sites

Don't rely on the default values for things like margin, padding, and line-height. Different browsers use different defaults. Try setting those to 0 in your stylesheet. See what happens. Now adjust them, one at a time, to see what happens. The result should be pretty consistent in all browsers. Line-height is especially important to list items.

Link to comment
Share on other sites

I am needing some advice as have written out a based bulleted list in my page which looks fine in IE. However the spacing is huge in Firefox. The composition would look silly if i were to move the content below the list, so was wondering whether there was code available to help all browsers display the list with the same amount of vertical spacing?Thanks
#1 - make sure you are starting with a level playing field.#2 - see rule 1.To level the playing field do two things:#1 - have a DOCTYPE at the very top of the page#2 - reset all defaults to 0 as DD suggestsSeek help:#1 - come here#2 - have the tools needed
  • have a live link
  • get and use Firefox and Firebug
  • be ready to wait a while - we are not paid support

Link to comment
Share on other sites

Cheers for the help. I havent been adding this before! So i need to add something like:

li  {	line-height: 0px;	margin: 0px;	}

Would that the correct? The main problem has been in the vertical spacing between each bulleted item.

Link to comment
Share on other sites

Cheers for the help. I havent been adding this before! So i need to add something like:
li  {	line-height: 0px;	margin: 0px;	}

Would that the correct? The main problem has been in the vertical spacing between each bulleted item.

I always add the universal reset to my css:* {border:0; padding:0; margin:0;}You could add those three to each individual element, but why take the time and effort? The reason you need them is each browser has its own assumptions about how to implement margins, paddings and borders. You want your page to start off being built by you, not the browser. :)
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...