Comments on: CSS Line Break Bug (screencast)

By: Joseph S.

Joseph S. — Wed, 22 Apr 2009 14:51:00 +0000

Yeah, Snookerman, that’s what I thought immediately. When you leave a space in your code between inline elements it will be rendered as one space… just as if you placed a bunch of nbspc between them it would add extra spaces. It is the idea in our head of how li elements should behave as block level that would make this behavior unexpected.

By: kevinMario

kevinMario — Wed, 22 Apr 2009 02:23:55 +0000

Hope this could explain better :
http://www.lunarist.com/files/line_bug_solution.jpg

Then again I have to concur to one of the posters above for you just to set LI elements to float:Left and set the UL to overflow:hidden ( float container trick ) and everything should be sweet.

By: kevinMario

kevinMario — Wed, 22 Apr 2009 02:15:46 +0000

Use SHIFT+CTRL+J in Dreamweaver and ‘fold’ your code as often as you can, make sure spaces between the codes are all white (e.g no blue spaces)

The easiest way to do this is to fold your BODY tag and then inspect your code. The cleaner it looks the better it is.

I’ll post a screenshot to show you what i mean in a sec

By: Brenley Dueck

Brenley Dueck — Tue, 21 Apr 2009 21:29:30 +0000

Good tips snookerman… I don’t really have all the answers… but wanted to point out the problem anyways.

By: Snookerman

Snookerman — Tue, 21 Apr 2009 21:20:53 +0000

In the above example I actually had a lot of space between the first two hellos and only one space between the second pair. The browser immediately ignored all spaces except one. Just as expected.

By: Snookerman

Snookerman — Tue, 21 Apr 2009 21:18:12 +0000

This is a better explanation maybe, if you put two anchor links after each other in a text, for example site site you expect the space between them to be rendered, and it is. If you put more than one space, or like in your example, a line break and some tabs, the browser will still only display a space and ignore the rest. It even happens in normal text. This: hello hello is the same as: hello helloYou can try it in your examples, leave only one space between the problematic elements and you will see the same space.This is definitely not a bug, it's just expected behaviour that you have totally misunderstood.

By: Snookerman

Snookerman — Tue, 21 Apr 2009 21:08:02 +0000

This is not a bug. If you have a line break or a lot of whitespace between inline elements, the browser will only show one space. That is why you should put anchor tags right after each other or image tags. If you make list items or divs act like inline elements, they will follow the same rules.

By: Paperboy

Paperboy — Tue, 21 Apr 2009 17:54:49 +0000

I remember having these problems (with images) too. And it sure took a while before I found the solution!

Thanks for the reminder!

By: Ian

Ian — Mon, 20 Apr 2009 14:41:16 +0000

You really probably shuldn’t convert the elements to inline, because then you lose all sorts of support for margins and padding. As well making your code clump up makes it less pleasant to work with.

A more elegant solution is to set the elements to Float: left/right and adjust from there. You can even set the list items to float and the anchors to display: block for maximum control.

The float option does have some of its own pitfalls, but as long as you apply them carefully and use clear: both on your contrainer blocks you will be fine.

By: shane sponagle

shane sponagle — Sat, 18 Apr 2009 19:24:01 +0000

Cool tip. Don’t remember having this problem before, but now I am ready for it if it does show up. Thanks

By: Meshach

Meshach — Sat, 18 Apr 2009 16:03:07 +0000

Thanks, this is very helpful.

By: Praveen Vijayan

Praveen Vijayan — Sat, 18 Apr 2009 07:37:17 +0000

Thanks to point out this issue

This type of issue happen in ie when there is a gap between img tag and its preceding or succeeding element.

eg:

a white gap will show in ie between image and div. The following will eliminate this white gap.

By: Gopal Raju

Gopal Raju — Sat, 18 Apr 2009 04:31:14 +0000

Nice Solution!

Gopal Raju
productivedreams.com
twitter.com/gopalraju