a line break on source causes br on the site on IE

[vinilios]

I used to have on my code this line :

<div class="dotted_line"><img src="images/spacer.gif" alt="" /></div>

i used html tidy to fix and it converted them lined and tabbed
<div class="dotted_line">
<img src="images/spacer.gif" alt="" />
</div>

and now IE puts a line break on the page inside the div while i want it to be 1px

i have noticed that kind of behaviour on IE on many cases, like theres something wrong with the parsing
any ideas how can it be fixed?

[2by4]

How to fix it? Remove the linebreaks. Don't make 1px high gifs, use css for borders instead.

Technically, this isn't even a bug, html usually inserts an extra space, which is what you're seeing, not a line break. That's why something like this in HTML:

hello
world

does not render as helloworld but rather hello world, the browser inserted a space at the line break.

You can work around this default behavior by setting all the css for the div to 0, font-size:0, line-height:0, and a few others, can't remember all of them, but it's easier to either remove the linebreak or not use 1px gifs in the first place, that's what css is for.

[vinilios]

thanks for the response
adding those settings on the div css class managed to make it at min 2-3 pixels on explorer. the only way to avoid it was to remove the line break from the code wich would not suit me coz every time i use HTML tidy on the page it would change.
anyway i part-solved the problem seting those css settings, i tried some more but with no change, if you could remember those other properties would appreciate posting them.

[2by4]

Using css to get rid of that is kind of pointless, just make a dotted line with css: border:1px dotted #000 [replace with border color], that's a lot easier.

That's the only css I can think of though, sorry, I haven't used 1 px spacer/layout gifs for almost 5 years, there's no reason to do that anymore.

You can try setting the div height to 1px if you haven't done that already.

There's ways to work around it, but it's not worth the time, you're trying to work around 3 separate issues here, one is using Tidy, which always makes those types of decisions for you, another is getting around how IE handles that, and the last is using a 1px spacer in the first place.

You can set the spacer as a background property in css, and make it repeat horizontally, that will make the div empty as far as IE is concerned. background:url(spacer.gif) repeat-x or whatever.

[vinilios]

thats exactly what i did (used background with repeat-x).
after many combinations on the div style the only that worked to make the div get 1px height, was to add height 1px in combination with font-size 1px wich again didnt give me the 1px result, but adding a space character in the div made it work! on all of these steps of course there was no trouble on firefox (dunno bout other browsers)
also i noticed that HTML tidy converts the space character (&nbsp;) into an invisible character (at least at my editor)
that thing drived me crazy, i had to open the file in a hex editor to see that there is difference :).
it would be interesting to know what exactly tidy does with the space char :/

[2by4]

I used html tidy one time on one site, and had similar problems to what you see. It's why I never used it again, I don't want some program making decisions about what my code is going to do or not do.

Re firefox, you'll rarely have any problems with firefox and css, of all the browsers, that one renders what I tell it to render more consistently than any other one. Then it's off to debug the others.

Any decent text editor will show each character in certain view modes, spaces, tabs, etc. That can be useful in debugging.

[g1smd]

>> I don't want some program making decisions about what my code is going to do or not do. <<

Ummm, but Mozilla, IE, and Opera are also programs and they do make such decisions....