keeran.com

It’s been a long time coming (we really should have done this 5 years ago!), but we’ve finally sorted out a forum for the regulars in #webdev on Quakenet.

www.webdev-uk.com launches!

Pop in and say hello, we’re just getting things started over there. :O)

Ok ok so the title is a bit shit.

I was having a problem with an inline UL/LI set for a site – the client was telling me that on her browser (wahey, she’s a mac user!), the list had some really nasty spacing between the lines…On IE and FF (the browser of choice!) it looked quite tight and TBH I didn’t think that this would be an issue.

Anyways, designers being..designers, I was forced to check it out and correct any problem. Fired up Exceed and ran Konqueror on my local linux dev box to see if I could track it down. Turns out none of the normal CSS styles/methods would correct the problem – as far as I could tell anyways. I added a border to the LI items to see if I could spot where the box model was breaking this wonderful little list…lo and behold – the spacing between the wrapped list items went down to a normal size and the list looked like the design (wahey!). So here dear readers..hahah…I present what I consider to be my first contribution to the wonderful world of blogging and HTML/CSS hax0ring.

The offending HTML, put here so at least you get a rough idea of what I’m babbling on about:

In a fixed width div we have a load of list items:

<div class="codesnip-container" ><div id="wrapped">
    <ul>
        <li>lots of items</li>
        ...
    </ul>
</div></div>

The div has width: 300px; applied to it (as an example). The UL LI has display: inline;. When the list wraps, certain browsers render a massive gap between the lines.

I tried fixing the size of the text, fixing the line-height, height of the UL/LI, margins, padding – nothing sorted it out.

Apply border: 1px solid white; (or whatever the background colour of the site is), and the problem goes away!

Tada!

Ok I know it sucks, but I wanted to share ;)

Kee