PDA

View Full Version : Whats wrong with my Firefox :(

NancyJ
04-08-2006, 10:59 PM
Ok its late, and I'm tired but I'm going out of my mind with this. Firefox just wont behave. Its all working perfectly in IE but FF wont do as its told.
The issues I'm currently having are a 20ish px gap at the top of the page, despite the body having margins and padding both set to 0 and no other divs having top margin or padding values set.
The second problem is min-height, it just isnt working, I have min-height set to 100% for body and the main div and wrapper and they're just sizing to fit the contents.

I've done this dozens of times and not had a problem, I just cant see that I'm doing anything different - its really frustrating me. Everything validates, but FF wont play nice :(

html, body
{
font-family: verdana, arial, helvetica, sans-serif;
font-size:100%;
color:#000;
background-color:#FFF;
margin:0px;
padding:0px;
min-height: 100%;
*height:100%;
}

#wrap
{
background-image:url(../images/shadow.gif);
min-height: 100%;
*height:100%;
width:780px;
margin:auto;
}

#main
{
min-height: 100%;
*height:100%;
margin:auto;
width:742px;
padding:0 10px 0 10px;
background-image:url(../images/mainbg.gif);
font-size:0.9em;
}

#main h1.banner span
{
display:none;
}

form#signup
{
float:right;
width:300px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>WeQuote Windows</title>
<style type="text/css"><!--
@import url("style/style.css");
--></style>
</head>
<body>
<div id = "wrap">
<div id = "main">
<h1 class = "banner"><span>WeQuote Windows</span><img src = "images/wequote.jpg" alt = "We Quote Windows" /></h1>

<form id = "signup" method = "post" action = "quote.php">
<fieldset>
<label for = "name">Name: </label><input type = "text" id = "name" name = "name" /><br />
<label for = "email">Email: </label><input type = "text" id = "email" name = "email" /><br />
<label for = "phone">Phone: </label><input type = "text" id = "phone" name = "phone" /><br />
<label for = "address">Address: </label><textarea id = "address" name = "address" rows = "5" cols = "20"></textarea><br />
<input type = "submit" class = "getQuote" name = "getQuote" value = "Get Quote" /><br />
</fieldset>
</form>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam eu nisl vitae nisi varius hendrerit. Donec blandit tortor at est. Nulla facilisi. Ut quis libero et ipsum malesuada venenatis. Integer metus purus, varius a, ultricies et, consectetuer et, sem. Curabitur risus lectus, ultricies ut, eleifend id, molestie sit amet, mi. Mauris massa. Duis sed neque. Sed iaculis felis in metus. Duis ultrices nunc eget neque. Ut porta. Etiam varius, lorem at dapibus consectetuer, libero sem blandit lacus, gravida iaculis nulla metus ac sapien. Sed et ligula quis leo adipiscing euismod.</p>
<p>Cras cursus. Suspendisse orci. Sed mattis. Ut sapien leo, ullamcorper vitae, convallis sit amet, lacinia id, felis. Integer semper neque tincidunt diam. Donec quis ipsum. Phasellus nec risus. Suspendisse potenti. Praesent quis augue. Maecenas augue. Sed quis ipsum. Donec eget magna a massa venenatis ultricies. Cras elementum interdum sapien. Quisque non felis. In vitae felis et metus blandit fringilla. Pellentesque elementum, lectus ac vulputate faucibus, sapien tortor aliquam tortor, vel hendrerit enim nunc nec nunc. Integer sodales. Duis quam mauris, ullamcorper vitae, ornare ut, venenatis nec, nisl. Etiam fermentum. Ut ut eros id justo fermentum venenatis.</p>
</div>
</div>
</body>
</html>
_Aerospace_Eng_
04-08-2006, 11:08 PM
Headers have default margins and padding to.
h1.banner {
margin:0;
padding:0;
}
Your CSS also won't validate because of the way you are trying to give CSS to IE. A valid way would be to use the * html hack
* html #wrap, * html #main {
height:100%;
}
Because your wrap has a min-height of 100%, your min-height in your #main div isn't going to go min-height of 100%. This is the behavior of min-height. Technically your #wrap has no height and since the #main div goes off of height its not reading the min-height because set it in percentages. The other possible solution would be to give background image in your #wrap div to the body, center it and get rid of your wrap div all together. This CSS should get the effect you want.
html, body
{
font-family: verdana, arial, helvetica, sans-serif;
font-size:100%;
color:#000;
background:#FFF url(../images/shadow.gif) repeat-y center;
margin:0px;
padding:0px;
height:100%;
}

#main
{
min-height: 100%;
margin:auto;
width:742px;
padding:0 10px 0 10px;
background-image:url(../images/mainbg.gif);
font-size:0.9em;
}
* html #main {
height:100%;
}
#main h1.banner {
margin:0;
padding:0;
}
#main h1.banner span
{
display:none;
}

form#signup
{
float:right;
width:300px;
}
VIPStephan
04-08-2006, 11:10 PM
Its all working perfectly in IE but FF wont do as its told.
It's probably vice versa... Firefox is exactly doing what you tell it to do and IE is just guessing what you could be meaning.
What about those *height things there? Are you trying to use the "star HTML hack"? If so it should look like this:

html, body
{
font-family: verdana, arial, helvetica, sans-serif;
font-size:100%;
color:#000;
background-color:#FFF;
margin:0px;
padding:0px;
min-height: 100%;
}
* html {height:100%;}

Don't know if this is causing the height issues, though.

The issues I'm currently having are a 20ish px gap at the top of the page [...]
That's funny because I just ran across this issue too today. And I have a strong guess that it is the <h1> that's causing the problem. Set the margin to zero for the <h1> and it should be fine.

Dammit, Aero, you seem to be everywhere, huh? :rolleyes:
kewlceo
04-08-2006, 11:14 PM
Dammit, Aero, you seem to be everywhere, huh? :rolleyes:
He's unstoppable! I barely had the code on my test server and aero had it answered already. :)
NancyJ
04-08-2006, 11:21 PM
thanks for the replies... like I said, its late and I'm tired. So I'm gonna go to bed and I'm sure everything will be fine in the morning ;)
Skyzyx
04-09-2006, 04:24 PM
It should also be noted that the star-html hack has been fixed in IE7, so it's really not a viable hack anymore.
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/ie7_css_compat.asp

The recommended alternative is using conditional comments to import IE-only hacks to IE, which is a better solution IMO than polluting your regular stylesheet. (It took me a while to get used to separating them out, and importing them into IE using CC, but now that I've gotten more used to it, I really think it's better.)

First off, yes, <h1> tags have margin and padding applied to them, and different browsers apply them different ways by default (of course). You should manually set your margin and padding on the <h1> for consistency (also font-size).

With the height issue, I've found these two articles that might help you:
http://www.quirksmode.org/css/width.html
http://archivist.incutio.com/viewlist/css-discuss/45552

Hope this helps!
kewlceo
04-09-2006, 05:24 PM
It should also be noted that the star-html hack has been fixed in IE7, so it's really not a viable hack anymore.

What has any of this to do with IE7, a beta preview product?
Skyzyx
04-09-2006, 05:29 PM
1) Many web developers will be upgrading their IE6 installations for IE7
2) IE7 is due out before the end of June (2-3 months away)
3) The latest beta is "layout complete" meaning that the way that it currently renders pages is the same as how IE7 final will render pages.

IE7 fixes a lot of bugs in IE's CSS support. If you can find a hack that works in IE7, then it should also work with IE6.
_Aerospace_Eng_
04-09-2006, 10:18 PM
1) Many web developers will be upgrading their IE6 installations for IE7
2) IE7 is due out before the end of June (2-3 months away)
3) The latest beta is "layout complete" meaning that the way that it currently renders pages is the same as how IE7 final will render pages.

IE7 fixes a lot of bugs in IE's CSS support. If you can find a hack that works in IE7, then it should also work with IE6.
If IE7 is the way it will render pages then we have some problems. It treats height normally and there is no current support for min-height. It is still beta. Until its not beta then we need to worry about it. I think IMO the * html hack is fine in this situtation since IE7 won't even read it anyways. Older IE browser will.
kewlceo
04-09-2006, 10:22 PM
I think IMO the * html hack is fine in this situtation since IE7 won't even read it anyways. Older IE browser will.
+1 :thumbsup: