css problem

matrim · 28-09-2006 10:55PM #1

Hi
I'm in the early stages of doing a site for someone and I need some help with a css problem.

I have some of it posted here
The problem is that for the div of the main content if I don't specify a height in firefox the div won't expand and the red background will show.

I know I could fix this by using javascript to set the height when loading but I would perfer a better way of doing it, if anyone has one.

Also on the tour page in internet explorer, the flash box pushes the 2 side boxes down.

Some of the code is a bit messed up at the moment with stuff I was trying still left there. Mainly because as I said i'm still in the early stages of design but any help would be appreciated.

Adam · 28-09-2006 11:42PM

Viewing in Firefox v.1.5.0.7 and IE 6 and they look exactly the same to me, except the div container is pushed ever so slightly to the right.

matrim · 29-09-2006 09:13AM

If you check it now you will see what I mean. I forgot to remove the height attribute from the "trborder" div before I uploaded it last time.

Serbian · 29-09-2006 09:55AM

Add the following to the bottom of your CSS File:

/* ClearFix
------------------------ */

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}  

/* Holly Hack Targets IE Win only \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End Holly Hack */

Then change the following:

Change: <div class="trborder">
To: <div class="trborder clearfix">

matrim · 29-09-2006 10:18AM

Thanks Serbian, that fixed it

css problem

Comments