CODEWITHSUNDEEP
cssfirefox
keeg
keeg

Reputation: 3978

Firefox linebreak in code creates spacing between elements

In firefox, when code is formatted with linebreaks like so:

<div>
    <ul>
        <li>bullet</li>
        <li>bullet</li>
    </ul>
    <ul>
        <li>bullet</li>
        <li>bullet</li>
   </ul>
</div>

There is space between these elements. To get rid of it I have to put the code on one line like so:

<div><ul><li>bullet</li><li>bullet</li></ul><ul><li>bullet</li><li>bullet</li></ul></div>

Is there a way of avoiding this with some CSS magic?

EDIT: I have a reset css:

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
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;}
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;}

using HTML5 doctype <!doctype html>

Upvotes: 2

Views: 108

Answers (1)

Neil Palmer
Neil Palmer

Reputation: 66

Assuming I understand your question, my favorite way to do this:

ul { font-size:0 } ul li { font-size: 10px }

Here is more info: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Upvotes: 2

Related Questions