Forum Moderators: not2easy

Message Too Old, No Replies

IE takes 3 letters of the word 'right' in my template & add it underneath..

Why?

         

jonny_h

11:26 am on Aug 18, 2005 (gmt 0)

10+ Year Member



Sorry to be blunt but months/years of pointless messing about with CSS is making me frustrated. Generally I can build my templates using it but what should take me minutes takes hours/days because of all the problems I end up having to solve to get the template to behave correctly in all browsers, or even just one browser!

For instance, why does IE take the last 3 letters of the word 'right' in my template and add it to the line underneath?

<snip>

code:

css

body { margin:10px; font-family:verdana,arial; text-align:center; font-weight:400; font-size:100%; background:#fff; color:#4E6A7F; padding:0; }

/* middle row */
#mainBody { width:750px; margin-left:auto; margin-right:auto; }

#leftColumn { float:left; background:#999; width:184; text-align:left; }

#centreColumn { float:left; background:#ccc; width:377; text-align:left; }

#rightColumn { float:left; background:#666; width:189; text-align:left; }

HTML

<body>

<!-- main body -->
<div id="mainBody">

<!-- left column -->
<div id="leftColumn">left</div>

<!-- centre columnt -->
<div id="centreColumn">main</div>

<!-- right column -->
<div id="rightColumn">right</div>

</div>

</body>

This is CSS at it's most basic and IE can't display it properly. It's fine in Mozilla and Opera.

[edited by: engine at 1:18 pm (utc) on Aug. 18, 2005]
[edit reason] No urls, thanks. See TOS [webmasterworld.com] [/edit]

jonny_h

11:35 am on Aug 18, 2005 (gmt 0)

10+ Year Member



I've found a solution but all the same I stand my comment, 'CSS is a pain in the butt'.

Solution - <br clear="all">
this seems to remove the letters 'ght'.

for example,

<body>

<!-- main body -->
<div id="mainBody">

<!-- left column -->
<div id="leftColumn">left</div>

<!-- centre columnt -->
<div id="centreColumn">main</div>

<!-- right column -->
<div id="rightColumn">right</div>

<br clear="all" />

</div>

</body>

Robin_reala

12:37 pm on Aug 18, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I think getting rid of the comments will remove the extra letters - I've bumped up against this one before.

SuzyUK

1:52 pm on Aug 18, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



hehe.. it's not CSS that's the pain it's IE

this "bug" is called "Duplicating Characters" Bug but it is actually also part of the hasLayout family [webmasterworld.com] of bugs..

as Robin_reala says removing the comments, or moving them inside the closing </div> elements will fix it, (IE is treating them like whitespace, although it can be triggered by an empty element too) but adding layout (height or width) to one of the elements in an affected layout also fixes it.. which one I can't remember but I think it's usually the clearing element itself!

anyway, glad you found a fix for your problem though.. and Welcome to WebmasterWorld!

Suzy

jonny_h

2:41 pm on Aug 18, 2005 (gmt 0)

10+ Year Member



Cheers for that great info, dudes. I've only just started commenting my HTML like that but it's the only way to keep track of what's happening in large templates, especially when they might become someone else's problem in the future.

Looks like I'll be visiting this forum regularly.