CSS / IE problem...

Orion · #1 (**permalink**) 05-21-2004, 03:38 PM

HELP...

Trying my hand at my first 'NO TABLES' site. I have gotten some basic layout here and hit a snag.

Looks awesome in Opera however in IE I get a small space between the header and the left side.

http://www.california-consumer-compl...template.shtml

I've tried about a hundred variations in the CSS to get rid of it but it persists.

Also how in da heck can you get the height to ="100%" in a div so the left column goes to the bottom?

I'm really not sure if I'm just experiencing a brain fart here or if it's a trick I just haven't learned yet.

Any hints or ideas????

Thanks tons!

HardCoded · #2 (**permalink**) 05-23-2004, 06:12 PM

Hi. I made a minimal test case that displays the same behaviour, like so:

Code:

< html>
< head>
< title>California Consumer Complaints< /title>
< style>
.menu {
	background-color: #D2D8E8;
	width: 20%;
	float: left;
	padding: 20px 0;
}
.header {
	background-color: #9BA6CA;
	height: 50px;
	padding-top: 20px;
}
< /style>
< /head>

< body>
< div class="menu">

< /div>
< div class="header">California-Consumer-Complaints.com< /div>
< /body>
< /html>

Then I took out the height: 50px line, problem gone. This is probably a bug in IE6. Well it seems like it.

I think what I would do, is make the left menu float in the margin of a container div which contained the header and content divs. That would solve both problems at once.

drummin · #3 (**permalink**) 06-21-2004, 05:02 PM

In the beginning of your css, add
Body {padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;}

I see you’re still using a table in your layout???
Using the example above I added the “Body tag” which removed the padding problem.
Then added height 100% to the left column.
This doesn’t take care of the problem if your content is longer (higher) than the view screen.
I remember taking care of this on an old site by using the tag "overflow:hidden;" and and making the height extra long. I'm not sure that's a good suggestion though. I'm sure someone can help you out with this part. I've used fixed heights because of this issue rather than a percentage for most of my projects.

<html>
<head>
<title>California Consumer Complaints</title>
<style>
Body {padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;}
.menu {
background-color: #D2D8E8;
width: 20%;
height:100%;
float: left;
padding: 20px 0;
}
.header {
background-color: #9BA6CA;
height: 50px;
padding-top: 20px;
}
</style>
</head>

<body>
<div class="menu">

</div>
<div class="header">California-Consumer-Complaints.com</div>
</body>
</html>