CSS problem with objects

[liloe]

I hope there are CSS-proficient ppl here, because I'm out of ideas.

Basically I have multiple nested divs to produce my page.

The main div is the general frame, then inside this one there are 3 further horizontal divs for 1. logo, 2. logo+menu and 3. for content. Now when div#content has a border of some kind, then it sticks to div#l+m (but with an ugly 1px border). When I delete the border, then all of sudden there is a blank line between 2 and 3.

Btw, when I'm talking about logo 1+2, you can check AStA Germersheim and you'll see that the logo is split into 2 parts and when I mean topmenu, then it's a bit like the gray bar on the right of logo2.

<div id="rahmen"> //this is the main "frame", I use it to have a left and right margin
	<div id="logo1"> //this is the upper part of the logo
		<img src="img/logo1.jpg" />
	</div>
	<div id="line2"> this is the lower part of the logo with a menu bar attached to the right.
		<div id="logo2">
			<img src="img/logo2.jpg" />
		</div>
		<div id="topmenu">
			<?php
				require("php/topmenu.php");
			?>
		</div>
	</div>
	<div id="main"> //this is the content div
		<?php
			some PHP code here
		?>
	</div>
</div>

The CSS-file is the following:

body{
	color:#000000;
	background-color:#efefff;
	font-family:Helvetica, Verdana, sans-serif;
	font-size:10pt;
	min-width:50em;
	text-align:center; /*IE-Hack: Zentrierungsproblem*/
}
	
div#rahmen{
	background-color:#ffffff;
	border:solid 1px #000000;
	margin-left:150px;
	margin-right:150px;
	min-width:50em;
	position:static;
	text-align:left; /*IE-Hack: Zentrierungsproblem*/
}

div#logo1{
	height:118px;
	left:0px;
	margin-bottom:0px;
	position:static;
	top:0px;
	background-color:#093a72; /*#7f9bc0;*/
}

/*Hack gegen Freizeile unter dem Logo*/
div#line2{ 
		height:34px;
}

div#logo2{
	height:34px;
	position:absolute;
}

div#topmenu{
	background-color:#093a72;
	padding-left:10px;
	margin-right:213px;
	text-align:left;
	position:relative;
	top:-2px;
	left:213px;
	border-top:solid 1px #000000;
}
/*Hackende*/

/*Hauptfenster*/
div#main{
	background-color:#e9eef4;
	color:#000000;
	position:static;
	border-top:solid 1px white; /*<--- this is the border in question*/
}

Like this, div#line2 and div#main are close to each other with the already mentioned ugly 1px border. But when I delete the border (or set it to 0px, 0em ..., then all of sudden there is a white line between #line2 and #main and I have no freaking idea why.

When I add a border to #line2, I can clearly see that it's not #line2 that generates the blank line.

I already tried to set margin:0px; and padding:0px; to #main, but the result was exactly the same

I already tried to google the problem, but all I found was someone saying that he had that problem only with "Gecko" browsers.

My test browsers were Safari 4.0.4 and Firefox 3.5.6

 

[ST^]

It took far too long to decipher your post. When I finally did (and I'm still not 100% sure on that), I copied your code and eh... there isn't any gap between line2 and main. I see a gap between the bottom of topmenu and the bottom of line2, but you haven't mentioned that.

Can you post a screenshot so I can see the problem?

 

[liloe]

It took far too long to decipher your post. When I finally did (and I'm still not 100% sure on that), I copied your code and eh... there isn't any gap between line2 and main. I see a gap between the bottom of topmenu and the bottom of line2, but you haven't mentioned that.

Can you post a screenshot so I can see the problem?

The gap between topmenu and the bottom of line2 is normal.

The gap I'm talking about only appears when you delete the line I mentioned in the second code =)

Btw, what browser are you testing with?

 

[ST^]

Firefox 3.5.7 and I did delete the border. I set #line2 background to bright red, and #main to bright green, and there isn't a gap between the two colours.

 

[liloe]

Okay, so I did a test where I commented most divs out and then put them back one by one. I also did the background coloring thing, which was indeed a very very nice thing.

So after doing all this I finally found out why it's like that. Basically that only happens when the first line of the #content contains any tag that alters the margin to the next higher element, such as <h1> or <p>. So when I put in a simple <br /> in the first line it works.

Now of course that sucks hard, but I guess it has something to do with margins. Only problem: I can't really change the margin of <p> or else my whole design is gonna be f***** up ^^

Buuuut, I'll check that tomorrow and I already thank you for the help and the various ideas =)

 

[ST^]

Ahh ok. Well, add a padding-top to #main with the value being equal or greater than the top-margin of whatever the first element is. Should stop the h1/whatever margin from pushing past the #main boundary.

 

[ST^]

That's silly actually, 1px of padding should contain the margin to inside the div, same as a border does.

One of the most annoying CSS things to come across, and it's actually working as they intended :<

 

[liloe]

That's silly actually, 1px of padding should contain the margin to inside the div, same as a border does.

One of the most annoying CSS things to come across, and it's actually working as they intended :<

I didn't know that, but it really sucks Oh well, gonna have to do that some other way :/

Still, thanks a lot and rep for the help =)