Hi,
I've created this 3-column layout here and I've got a little problem which only concerns IE. The text turns a few pixels to the left when the left box is over.... How can I fix that?
Thanks
Sandro
strange 3px gap in IE
Hey spammerei, Insert this into your CSS;
/* Hides from IE5-mac \*/ * html div { height: 1%; } /* End hide from IE5-mac */
To explain the theory behind this IE only bug;
http://www.positioniseverything.net/explorer/threepxtest.html
I highly recommend bookmarking this site for further CSS developments/tips/tricks/etc.
Enjoy. cb.
Thanks! / Another one
Hi, thanks a lot!! You helped me a lot...
Have a look here: http://sandrobauer.net/neuwetter/index.aspx
Where does this space between the blue column and the big white one come from? In Firefox, I don't have it... Actually, the column would have to follow directly the blue one....
IE - oh my God...
Sandro
strange 3px gap in IE
Hey, no problem at all
From first looking at the CSS, I noticed this;
#Content { margin-left: 180px; margin-right: 230px; /*space to the right of the white text column*/ margin-top: 0px; border: 0px solid; background-color: White; } #Rechts { position: relative; background: #F0F5FF; margin-top: 0px; height: 890px; width: 125px; /*width of the right blue column */ float: right; border: 0px solid black; }
So, I can immediately see that the right margin of the text column is bigger that the width of the right blue column, causing the space that you see.
So, you should see the space decrease if you increase the width of the rigth column. Give that a shot.
Thx. cb.
strange 3px gap in IE
More importantly and before you attempt to make any CSS adjustments you will need to use a full DTD the one you have at present is not a complete one and causes IE to render in Quirks mode making CSS rules unpredictable.
Hugo.
strange 3px gap in IE
So, you should see the space decrease if you increase the width of the rigth column. Give that a shot.
Thx. cb.
The values had been different because I had inserted another column. But now, as they are equal, the additional pixels are still there (only in IE).
Just have a look: http://sandrobauer.net/neuwetter/
Thanks!
Sandro
strange 3px gap in IE
spammerei,
I see you have updated the DTD which is great but you will need to remove the xml prolog as this will throw IE out and it needs to be the first entry in the page no white space allowed anyway, to be valid.
Hugo.
Now nothing functions any more
But look: If I leave the xml line away, the middle column turns down (?!)). Sorry, a beginner like me now is dependent on help.
http://sandrobauer.net/neuwetter
Sandro
strange 3px gap in IE
More importantly and before you attempt to make any CSS adjustments you will need to use a full DTD the one you have at present is not a complete one and causes IE to render in Quirks mode making CSS rules unpredictable.
Hugo.
Ah yes, I didn't even look at the whole document Hugo. You are absolutely right.
Now, as for your current problem, I added the following to the CSS;
#Content { margin-left: 160px; margin-right: 125px; padding-right: 40px; height: 670px; margin-top: 0px; border: 0px solid; background-color: White; border-bottom: 1px black solid; overflow: auto; /*added this*/ }
And changed this in the HTML;
... <div id="Content"> <!--removed inline styles from the div element with the 'Text' class --> <div class="Text"> <div style="background-color: orange; width: 100%;"> BLA</div> <div style="clear: left; padding-top: 5px; width: 100%">Text bla bla bla ...
That seemed to fix things up in IE. (Sorry, I don't have other browsers to test at this time. )
A couple of other points as well. I usually try not to use inline styles as I let the CSS dictate layout and presentation. Once I removed the inline style above, your layout worked as intended.
So first off, I would let your 'Content' ID control the layout completely. Remove the inline styles you have right now in the Content ID. Especially;
<div style="clear: left; padding-top: 5px; width: 100%">
As there is no floating element to clear inside the 'Content' block. Also, for your inline styling of;
<div style="background-color: orange; width: 100%;"> BLA</div>
I think you would be better off defining these as headings, semantically speaking. As well, I wouldn't use the non-breaking space. Once you have defined a heading, have CSS dictate left padding, if you wish.
All in all, try to keep the document as simple as possible. Try not to use too many nested divs. If you can have your content in a single content block and define the layout and behaviours of the one block, it will make maintenance and reading the code a whole lot easier. It all depends on every situation, of course. But it's the methodology I try to follow.
Hope this helps. cb.
strange 3px gap in IE
Yes, It's tough to test when I don't have the other browsers available.
Unless someone else here has some more insight, I will have a look tonight and try to help when I can.
And Happy New Year from Surrey, British Columbia, Canada
Thanks!!
Now the problem is fixed! Thank you very much... although I had to play a bit, but that's quite natural.
The only problem left is that 1px gap in IE (see attached file).
A happy new year!!
Sandro
I wrote too early *g*
Hi, sorry I wrote too early. See posting above.
I had forgotten to close a div-tag *ggg*
happy new year again, I deleted the happiness above
strange 3px gap in IE
Hehehe. I thought I posted in the wrong thread there for a second
Hmmm. Well, because I don't have other browsers to test, I don't want to suggest anything that will break the page in other browsers. However, I will do my best to have a look later on and try to help when I can.
Again, happy new year to you!
strange 3px gap in IE
Thanks a lot. Don't hurry, the site is to be finished in fall or somewhat. But this mysterious gap shows another time how different the two browsers interpret the css code...
have fun
Sandro
1px gap
Have you yet found a bit of time?
Kind regards over the "GroÃen Teich", as we call the Atlantic jokingly.
Sandro
strange 3px gap in IE
Good morning from across the large pond
I have been playing with this layout, but I cannot find a solution at this time for the darn grey spaces. The space actually appears to the left of the right bar as well.
I know this is an IE specific bug, I just have to find a solution. I'll keep trying and post a solution when I can.
Cheers!
cb