Jump to content


Photo

Firefox trouble


  • Please log in to reply
9 replies to this topic

#1 eyegraphix

eyegraphix
  • Members
  • PipPip
  • Member
  • 24 posts
  • LocationAmes, Iowa

Posted 24 February 2006 - 01:59 AM

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?

#2 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 24 February 2006 - 02:22 AM

[!--quoteo(post=348895:date=Feb 23 2006, 08:59 PM:name=eyegraphix)--][div class=\'quotetop\']QUOTE(eyegraphix @ Feb 23 2006, 08:59 PM) View Post[/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.
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#3 eyegraphix

eyegraphix
  • Members
  • PipPip
  • Member
  • 24 posts
  • LocationAmes, Iowa

Posted 24 February 2006 - 03:26 AM

Thanks. That worked great obsidian.

#4 Javizy

Javizy
  • Members
  • PipPipPip
  • Advanced Member
  • 44 posts

Posted 24 February 2006 - 03:40 PM

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.

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

div.main {
    height    : 100%;
    width     : 100%;
}


#5 dbrimlow

dbrimlow
  • Members
  • PipPipPip
  • Advanced Member
  • 712 posts

Posted 06 March 2006 - 10:43 PM

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 .


Dave

I am always amazed by no matter how much I know, I know I don't know as much as I thought I knew.  - D. Brimlow.

#6 lpxxfaintxx

lpxxfaintxx
  • Members
  • PipPipPip
  • Advanced Member
  • 181 posts

Posted 06 March 2006 - 11:37 PM

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

#7 txmedic03

txmedic03
  • Members
  • PipPipPip
  • Advanced Member
  • 313 posts
  • LocationCall, TX, USA

Posted 08 March 2006 - 06:26 AM

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:

<?php

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

?>

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

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

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:

body {
  width: 800px;
  margin: 20px auto;
}

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!

SEMPER FIDELIS!

I can't stop you from doing something silly, but at least I can help you do it right.


#8 dheon09

dheon09
  • New Members
  • Pip
  • Newbie
  • 6 posts

Posted 09 March 2006 - 03:44 AM

[!--quoteo(post=352776:date=Mar 8 2006, 02:26 PM:name=txmedic03)--][div class=\'quotetop\']QUOTE(txmedic03 @ Mar 8 2006, 02:26 PM) View Post[/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:

<?php

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

?>

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

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

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:

body {
  width: 800px;
  margin: 20px auto;
}

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...


#9 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 09 March 2006 - 12:09 PM

The code snippet you need is right there in your quoted text.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#10 Javizy

Javizy
  • Members
  • PipPipPip
  • Advanced Member
  • 44 posts

Posted 10 March 2006 - 02:22 AM

What I posted does 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.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users