15 replies [Last post]
spammerei
Offline
newbie
Last seen: 16 years 49 weeks ago
Joined: 2004-12-29
Posts: 8
Points: 0

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 Smile
Sandro

http://sandrobauer.net/neuwetter/index.aspx

crazybat
crazybat's picture
Offline
Enthusiast
Surrey, British Columbia, Canada
Last seen: 13 years 4 days ago
Surrey, British Columbia, Canada
Joined: 2004-08-17
Posts: 58
Points: 0

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.

Crazy Bat Designs
Home of the phpBB WASO
Helping You Reach The MOST People Possible.

spammerei
Offline
newbie
Last seen: 16 years 49 weeks ago
Joined: 2004-12-29
Posts: 8
Points: 0

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

crazybat
crazybat's picture
Offline
Enthusiast
Surrey, British Columbia, Canada
Last seen: 13 years 4 days ago
Surrey, British Columbia, Canada
Joined: 2004-08-17
Posts: 58
Points: 0

strange 3px gap in IE

Hey, no problem at all Smile

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.

Crazy Bat Designs
Home of the phpBB WASO
Helping You Reach The MOST People Possible.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

spammerei
Offline
newbie
Last seen: 16 years 49 weeks ago
Joined: 2004-12-29
Posts: 8
Points: 0

strange 3px gap in IE

crazybat wrote:
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! Smile
Sandro

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

spammerei
Offline
newbie
Last seen: 16 years 49 weeks ago
Joined: 2004-12-29
Posts: 8
Points: 0

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. Wink
http://sandrobauer.net/neuwetter
Sandro

crazybat
crazybat's picture
Offline
Enthusiast
Surrey, British Columbia, Canada
Last seen: 13 years 4 days ago
Surrey, British Columbia, Canada
Joined: 2004-08-17
Posts: 58
Points: 0

strange 3px gap in IE

Hugo wrote:
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%;">&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.

Crazy Bat Designs
Home of the phpBB WASO
Helping You Reach The MOST People Possible.

crazybat
crazybat's picture
Offline
Enthusiast
Surrey, British Columbia, Canada
Last seen: 13 years 4 days ago
Surrey, British Columbia, Canada
Joined: 2004-08-17
Posts: 58
Points: 0

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 Smile

Crazy Bat Designs
Home of the phpBB WASO
Helping You Reach The MOST People Possible.

spammerei
Offline
newbie
Last seen: 16 years 49 weeks ago
Joined: 2004-12-29
Posts: 8
Points: 0

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!! Smile
Sandro

spammerei
Offline
newbie
Last seen: 16 years 49 weeks ago
Joined: 2004-12-29
Posts: 8
Points: 0

I wrote too early *g*

Hi, sorry I wrote too early. See posting above. Wink
I had forgotten to close a div-tag *ggg*

happy new year again, I deleted the happiness above Laughing out loud

crazybat
crazybat's picture
Offline
Enthusiast
Surrey, British Columbia, Canada
Last seen: 13 years 4 days ago
Surrey, British Columbia, Canada
Joined: 2004-08-17
Posts: 58
Points: 0

strange 3px gap in IE

Hehehe. I thought I posted in the wrong thread there for a second Smile

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! Laughing out loud

Crazy Bat Designs
Home of the phpBB WASO
Helping You Reach The MOST People Possible.

spammerei
Offline
newbie
Last seen: 16 years 49 weeks ago
Joined: 2004-12-29
Posts: 8
Points: 0

strange 3px gap in IE

Smile

Thanks a lot. Don't hurry, the site is to be finished in fall or somewhat. Wink But this mysterious gap shows another time how different the two browsers interpret the css code...

have fun Smile
Sandro

spammerei
Offline
newbie
Last seen: 16 years 49 weeks ago
Joined: 2004-12-29
Posts: 8
Points: 0

1px gap

Have you yet found a bit of time?

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

crazybat
crazybat's picture
Offline
Enthusiast
Surrey, British Columbia, Canada
Last seen: 13 years 4 days ago
Surrey, British Columbia, Canada
Joined: 2004-08-17
Posts: 58
Points: 0

strange 3px gap in IE

Good morning from across the large pond Smile

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

Crazy Bat Designs
Home of the phpBB WASO
Helping You Reach The MOST People Possible.