Firefox trouble

[eyegraphix]

My personal site I did in css awhile ago which is pretty simple. I have a #wrapper div, then smaller divs inside of it. For some reason in Firefox the height doesn't take up the whole page even though the div height is set at 100%. It looks fine in Internet Explorer, which is the way i'd like it to look in firefox. Any thoughts?

[obsidian]

[!--quoteo(post=348895:date=Feb 23 2006, 08:59 PM:name=eyegraphix)--][div class=\'quotetop\']QUOTE(eyegraphix @ Feb 23 2006, 08:59 PM) [snapback]348895[/snapback][/div][div class=\'quotemain\'][!--quotec--]
My personal site I did in css awhile ago which is pretty simple. I have a #wrapper div, then smaller divs inside of it. For some reason in Firefox the height doesn't take up the whole page even though the div height is set at 100%. It looks fine in Internet Explorer, which is the way i'd like it to look in firefox. Any thoughts?
[/quote]

height: 100%; only works in IE. that's one of the attributes of CSS that isn't fully supported in compliant browsers. to get your height in firefox, you can always use the min-height attribute, but you have to choose an actual pixel height rather than a percentage. for instance, you can put min-height: 550px; or something similar to force the wrapper down a good bit of the page, but you'll have to pick one resolution to fix it for. there isn't a "solve-all" solution for the height issue in all browsers.

[eyegraphix]

Thanks. That worked great obsidian.

[Javizy]

I've used this technique to vertically center tables using xhtml 1.0 transitional, and I just tested it for height and managed to get a div to cover the entire page.

[code]
body, html {
    height    : 100%;
    margin    : 0;
}

div.main {
    height    : 100%;
    width     : 100%;
}
[/code]

[dbrimlow]

This is also a cool little hack I found online to center a website using css.

body{

margin: auto;
text-align: center;
}

//then put your entire site in a containing div:

#containall{

background-color:#fff;

width: 800px;

text-align:left;

margin: 0 auto;
}

Works fine in IE and FF. You can even take a header out of the container and have it .

[lpxxfaintxx]

I wouldn't really call that a "hack"; just a little trick. :)

[txmedic03]

Well for the original topic of this page. IE is not 100% xhtml/css compliant. Microsoft likes to make up their own rules and substitute them for the true standards pretty much any time they feel like it. No I am not bitter, but as a web developer I hold a high level of distain for Microsoft. I use linux on my computer. My suggestion would be to use a simple piece of code and write two CSS files. Call one of them ie.css and one ff.css for simplicity sake and if you will bare with me a moment I will give a small piece of PHP which may help you out. This is assuming that your server allows PHP. If your server does not allow PHP, I do appologise and would be happy to provide alternative solutions to your problem. So here's the PHP:

[code]
<?php

if ( eregi("mozilla", $_SERVER['HTTP_USER_AGENT']) ) {
  $css = "ff.css";
} else {
  $css = "ie.css";
}

?>
[/code]

Place that at the top of the page and then you link statement should look something like this:

[code]<link rel="stylesheet" type="text/css" href="<?php echo $stylesheet; ?>" />[/code]

If you use an embeded stylesheet or inline styles (I highly advise against this) then you would need to read the file with fread() instead of the file name as the $css you would make $css equal to the contents of the stylesheet and place the echo between <style type="text/css"></style> tags or just use an include("cssfile"); between the style tags. That would cover your embeded stylesheet, but the inlines would be more complex so we won't even go there.

This will allow you to develop a CSS file that is 100% CSS2 compliant (ff.css) and then some crazy mixed up CSS2 wanna be file (ie.css) so the page will be easy to maintain for multiple browsers. I only cover two browsers here because they are the two most popular, but if you wanted to you could use more than two files with if () {} elseif () {} else {} statements. You could even isolate the IE browser and then if they are using the crazy mixed up browser they get (ie.css) otherwise get a properly written CSS2 file (ff.css).

I hope my ramblings are of some use to you. If not, I would be happy to review your CSS file and offer suggestions to a solution to your problem that deal strictly with CSS.

Now for the "hack". It's not a hack it is CSS2 at work and you don't need that extra container. Simply use:

[code]
body {
  width: 800px;
  margin: 20px auto;
}
[/code]

Now I used 800 pixels simply because that's the width you specified and 20 pixel top margin so you don't lose the top margin, but 0 would suffice if you want to remove the top margin. Syntax is margin: top right bottom left;. If you do not enter all of them then anything beyond the last one you enter is assumed to be the same. If you set auto left and right margins and do not set margin for the elements on the page then this method will work fine for centering the page contents. If your page layout is very complex and you need lots of margins set for left and right margin, then you can use a container, but this ultimately makes simple xhtml more complex than it has to be. Try to follow the KISS (keep it simple stupid) system.

Javizy, please, look back at the post and notice that 100% only works in IE for height. That's what the whole problem was to begin with. In FF there are a couple of ways to fix this, but IE doesn't know what to do with them.

I hope this has, in some way, helped someone.

Happy coding!

[dheon09]

[!--quoteo(post=352776:date=Mar 8 2006, 02:26 PM:name=txmedic03)--][div class=\'quotetop\']QUOTE(txmedic03 @ Mar 8 2006, 02:26 PM) [snapback]352776[/snapback][/div][div class=\'quotemain\'][!--quotec--]
Well for the original topic of this page. IE is not 100% xhtml/css compliant. Microsoft likes to make up their own rules and substitute them for the true standards pretty much any time they feel like it. No I am not bitter, but as a web developer I hold a high level of distain for Microsoft. I use linux on my computer. My suggestion would be to use a simple piece of code and write two CSS files. Call one of them ie.css and one ff.css for simplicity sake and if you will bare with me a moment I will give a small piece of PHP which may help you out. This is assuming that your server allows PHP. If your server does not allow PHP, I do appologise and would be happy to provide alternative solutions to your problem. So here's the PHP:

[code]
<?php

if ( eregi("mozilla", $_SERVER['HTTP_USER_AGENT']) ) {
  $css = "ff.css";
} else {
  $css = "ie.css";
}

?>
[/code]

Place that at the top of the page and then you link statement should look something like this:

[code]<link rel="stylesheet" type="text/css" href="<?php echo $stylesheet; ?>" />[/code]

If you use an embeded stylesheet or inline styles (I highly advise against this) then you would need to read the file with fread() instead of the file name as the $css you would make $css equal to the contents of the stylesheet and place the echo between <style type="text/css"></style> tags or just use an include("cssfile"); between the style tags. That would cover your embeded stylesheet, but the inlines would be more complex so we won't even go there.

This will allow you to develop a CSS file that is 100% CSS2 compliant (ff.css) and then some crazy mixed up CSS2 wanna be file (ie.css) so the page will be easy to maintain for multiple browsers. I only cover two browsers here because they are the two most popular, but if you wanted to you could use more than two files with if () {} elseif () {} else {} statements. You could even isolate the IE browser and then if they are using the crazy mixed up browser they get (ie.css) otherwise get a properly written CSS2 file (ff.css).

I hope my ramblings are of some use to you. If not, I would be happy to review your CSS file and offer suggestions to a solution to your problem that deal strictly with CSS.

Now for the "hack". It's not a hack it is CSS2 at work and you don't need that extra container. Simply use:

[code]
body {
  width: 800px;
  margin: 20px auto;
}
[/code]

Now I used 800 pixels simply because that's the width you specified and 20 pixel top margin so you don't lose the top margin, but 0 would suffice if you want to remove the top margin. Syntax is margin: top right bottom left;. If you do not enter all of them then anything beyond the last one you enter is assumed to be the same. If you set auto left and right margins and do not set margin for the elements on the page then this method will work fine for centering the page contents. If your page layout is very complex and you need lots of margins set for left and right margin, then you can use a container, but this ultimately makes simple xhtml more complex than it has to be. Try to follow the KISS (keep it simple stupid) system.

Javizy, please, look back at the post and notice that 100% only works in IE for height. That's what the whole problem was to begin with. In FF there are a couple of ways to fix this, but IE doesn't know what to do with them.

I hope this has, in some way, helped someone.

Happy coding!
[/quote]

Hi, can anyone help me figure out how to change css dynamically depending on the browser?
Thanks...

[moberemk]

The code snippet you need is right there in your quoted text.

[Javizy]

What I posted [i]does[/i] work in both IE and FF with a valid XHTML 1.0 Transitional document. I also just validated my CSS file with no errors.

As far as I know it's tables that don't a height attribute, but it's perfectly valid to specify a height with CSS.

You can see an example of what I mean [a href=\"http://james-kirk.co.uk/rrp\" target=\"_blank\"]here[/a]

I wouldn't recommend multiple CSS files. That makes the whole cascading aspect of stylesheets pretty useless, makes extra work for yourself, and generally complicates things. If you really can't get it to work I'd suggest rethinking your design rather than resorting to that.