Div problem in IE

[Sagaris]

Hi guys,

First post so be gentle!

Im trying to make my first css driven site, however I am having a few problems with a header div in IE.

When I view my site in Firefox it behaves normally (acts like a header, stays the correct height etc), when I view the site in IE 6 it seems to act more like a container and expands below the rh-col div which is the main content.

How can I stop this happening in IE, so it looks the same as Firefox. I have tried searching but it is a little difficult when you are not sure of the cause.

Links to demo the problem

http://helios.hud.ac.uk/n0255628/AWP...creenshots.php
http://helios.hud.ac.uk/n0255628/AWP/register.php

(I know the form labels disappear in IE on the register page, I don't know why but i'm working on it!)

Thanks

[gaz545]

You should be using Id's instead of class's
and the css for your header could be this:

Code: Select all

.header{	height:125px;	color:#000000;	margin-top: 40px;	margin-bottom: 0;	margin-left:200px;	width:93%;	margin-right: auto;	margin-left: auto;	background-color: #333333;	border: 2px solid #000000;}

you also have two margin-left's you need to sort that out..

then maybe i can look at the rest, you should also go over your css properties for rh-kl (or what ever it is) as height: 1%; isn't exactly going to help.

[masonbarge]

When you ask for help, please post the html and css code with the code tags around it

I don't see what difference making an operator a class vs. an id would make, as long as it is correctly stated.

These problems are, by the way, common. CSS is easy in theory but can be frustrating in practice, trying to make it work across several browsers, none of which comply with the w3c standards.

[gaz545]

i didn't mean to say that it would make any diffence, but for SEO you should only use class's when nessary, and in this case, i believe it is not.

and try adding an extra 90px on your margin-top of rh-col

[Sagaris]

Thanks for the response guys, I really appreciate it.

Sorry it has taken me a while to respond to your posts, been flat out with projects.

I appear to have sorted the problem, although im not entirely sure what I did that fixed it, which is almost as frustrating as having the problem in the first place!

I realise that I need to tighten up my coding, and next time I will be sure to post my markup and css alongside the problem.

BTW Gaz the height 1% property was deliberate,

as height: 1%; isn't exactly going to help

I had a nasty case of floats floating off completely in IE6 (Peek-a-boo bug) so I applied this fix which appears to have worked.

Cheers,

S

[masonbarge]

IE isn't any worse than any other browser, it's more a matter of which one you code for first. I started out coding for Gecko-based first, and IE was the evil empire. Now I code initially for IE, due to its prevelance, and now Mozilla etc. are the ones that seem all screwed up!

The min and max-width commands can save a lot of headaches. I've never encountered this "peek a boo" bug, probably I just got lucky in the methods I use.

Like Roseanne Rosannadanna said, "It's always something". I have a small piece of text and all I want to do is change the color. It will take size and style commands, but it REFUSES to change color.