could use your help on this FF vs IE display differences [Archive]

Click to See Complete Forum and Search --> : could use your help on this FF vs IE display differences

sae

11-25-2006, 02:52 PM

On this site that I am making:

http://www.i-serveweb.com/SDP/

it displays properly in IE, but in FF the page div doesn't extend past the header image. Can't figure out why in FF the page div doesn't stretch to include the entire site.

WebJoel

11-25-2006, 04:12 PM

That is one nice looking site! :) I especially like the avacado-green background which ties-in nicely with the theme of Mexican food.

The site validates, and the CSS only has a few warnings but nothing that would cause what happens (Fx not extending the white content background... I am still looking for the cause).
I did note this in your CSS:
.content {
float: left;
text-align: left;
width: 580px;
border-style: solid;
border-width: 0px;
text-align: left;
margin-left: 5px;
}
This doesn't hurt anything, but re-defining isn't necessary. :)

edit:

As near as I can tell, adding this to your CSS:

.container {
float: left;
width: 750px;
border-style: solid;
border-width: 0px;
margin-bottom: 45px;
background-color:#fff;
}
would solve the problem. the 'container' IS (apparently) extended around your content (as I can highlight it's edges with "outline current element"), but the background-color isn't being inherited...
Also, I'd change your !doctype to this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

That is what I used and it with the recommendation(s) above, it works for me.

drhowarddrfine

11-25-2006, 04:12 PM

It does NOT display properly in IE. It's a bug in IE. Firefox is performing correctly. Divs are NOT to expand to contain floated or absolutely positioned elements. To get modern browsers, ie NOT IE, to do what you want, add overflow:auto; to the page div.

Also, your doctype is incomplete, putting IE into quirks mode. See my link below. Use html strict.

sae

11-25-2006, 07:34 PM

overflow: auto;

I got to remember that.

Thanks everyone! I got it working!

sae

11-26-2006, 11:34 AM

A question. The overflow: auto; worked great on that site, but on another site it shows scroll bars. Is there a way to get rid of them?

_Aerospace_Eng_

11-26-2006, 02:17 PM

overflow:auto; really isn't the answer. Read this
http://www.positioniseverything.net/easyclearing.html

sae

11-26-2006, 03:01 PM

The article says this:
Simply stick the above code into your CSS, and use .clearfix on any box that has to contain a sizable float.

How exactly do you do that if you are already using a div class reference to style that div?

Kravvitz

11-26-2006, 03:04 PM

Elements may belong to more than one class. The class attribute accepts a space separated list of classes.

_Aerospace_Eng_

11-26-2006, 05:55 PM

Add this to your CSS
.page:after {
content:".";
display:block;
height: 0;
clear: both;
visibility: hidden;
line-height:0px;
font-size:1px;
}
and get rid of overflow:auto; in the .page div.

Jeff Mott

11-26-2006, 10:31 PM

Not that it's hurting anything, but the last two style rules in _Aerospace_Eng_'s code are unnecessary..page:after {
content:".";
display:block;
clear: both;
height: 0;
visibility: hidden;
}

That being said, _Aerospace_Eng_'s recommendation for this method is certainly the better way to go.

Kravvitz

11-26-2006, 11:13 PM

Jeff, you mean "declarations", not "rules". You each only show one rule.

Jeff Mott

11-27-2006, 12:03 AM

Yes, you're right. I was being very loose with my terminology.

_Aerospace_Eng_

11-27-2006, 01:12 AM

sae

11-27-2006, 06:23 PM

I added the .page:after to the css of the other site that I am having some issues on. It, kind of worked. The border of the page div only goes down about 1 inch. See for your self (in FF)

http://www.canadianyouthworker.com/Forum.html