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.

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

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.

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.

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

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.

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

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%;">&nbsp;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%;">&nbsp;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.

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

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

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

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!

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

Have you yet found a bit of time?

Kind regards over the "Großen Teich", as we call the Atlantic jokingly.
Sandro

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