Forum Moderators: not2easy
First of all I'm sorry about my somewhat rude behaviour: I just signed up and here I am already asking a question without having first helped others.
I have an issue with repeat-y on a background element in Firefox. From what I've read so far (I've searched Google for answers, of course), Firefox handles repeat-y correctly and stops showing the element repeated at the browser "fold". IE however conviniently let's it run all the way to the bottom of the page - not taking the fold into consideration.
Judging by the ToS, I'm allowed to link to the page in question, so here goes:
<snip>
And here's the stylesheet:
<snip>
I've been playing around with HTML and CSS for some time, but only now and then, so put me in the newbie/almost completely green category.
Can anyone suggest a fix/different take on the issue? If so, I'd really appreciate it. Preferably one that validates since the rest of the CSS does.
Regards, Lasse
[edited by: Lelas at 10:22 am (utc) on May 20, 2009]
[edited by: swa66 at 11:25 am (utc) on May 20, 2009]
[edit reason] Nope, only authoritative URLs are allowed: see forum charter and ToS [/edit]
What doctype ?
On what element do you set the background ?
-> e.g. html and body get some speacil treatment sometimes.
does it have height or min-height settings ?
does the content of the element stretch the element ?
-> normally a background on a regular element goes as far as the element goes. The "fod" never comes into the equasion unless you set height to "100%" and link at all back to the root element which has the height of the viewport.
Height is set to 100 %. It actually worked just fine, but then I somehow messed it up.
/* CSS Document */
body{
background:#333;
margin:0 auto;
text-align:center;
}
h1{ font-size:10px;margin:0px; padding:0px;}
h2{ font-size:10px;margin:0px; padding:0px;}
.container{
margin:0 auto;
text-align:center;
position:relative;
width:740px;
height:100%;
background:url(/images/bg_shadow.gif) repeat-y top left;
/*background-color: #333; */
}
.middle{
position:relative;
margin:0 auto;
width:650px;
}
.top{
width:650px;
height:140px;
background:url(/images/div_horz.gif) repeat-x left bottom;
position:relative;
}
And here's the doctype:
<!DOCTYPE PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
[edited by: swa66 at 12:45 pm (utc) on May 20, 2009]
[edit reason] Also no URLs in the code please [/edit]
xhtml should be 100% valid.
Then, assuming the body is the direct parent of the ontainer: I'd add:
html, body {
height: 100%;
}
Since IE6 is too broken to understand min-height: Add a conditional comment and set it back to height: 100% for that browser only.
A few more: if you have exactly the same css for 2 selectors like your h1 and h2, write it as:
h1, h2 {
font-size:10px;margin:0px; padding:0px;
}
Similarly: text-align is inherited, no need to set it on both the body and the container.
You body seems to have auto margins to center itself, but no width ...
Both XHTML and CSS validates with no errors, but I'm sure there's plenty of unnecessary lines in the CSS.
Thanks again!
