Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
This is my problem. with IE it displays how I think it should
but when I try the same page on FF I get this
Here's what I did, I have 2 divs for the top of the content box, then a div for the BG and then inside that div a div for the content of the actual page, after that the next div is another div for the bottom part of the box and thats it. Is this a FF rendering problem?, is there a way to get round this or this just me not knowing what to do, please help, I'm pulling my hair out on this one.
this is the style for it
#top1{
border: 0 solid #fff;
padding: 0;
margin: 0;
background-image: url(imgs/top1.png);
background-repeat: none;
width: 952px;
height: 147px;
}
#top2{
border: 0 solid #fff;
padding: 0;
margin: 0;
background-image: url(imgs/top2.png);
background-repeat: none;
width: 952px;
height: 33px;
}
#bot1{
border: 0 solid #fff;
padding: 0;
margin: 0;
background-image: url(imgs/bot1.png);
background-repeat: none;
width: 952px;
height: 112px;
}
#contentBg{
border: 0 solid #fff;
padding: 0;
margin: 0;
background-image: url(imgs/contentbg.png);
background-repeat: repeat-y;
width: 952px;
height: 20px;
}
#content{
padding: 20px;
} -
Would you mind posting your HTML so that we can test it?
-
Sure, here it is,
<div align="center">
<div id="top1"></div>
<div id="top2"></div>
<div id="contentBg">
<div id="content">
Lorem Ipsum medium warlock Lorem Ipsum medium warlock
Lorem Ipsum medium warlock Lorem Ipsum medium warlock
Lorem Ipsum medium warlock Lorem Ipsum medium warlock
Lorem Ipsum medium warlock Lorem Ipsum medium warlock
Lorem Ipsum medium warlock Lorem Ipsum medium warlock
Lorem Ipsum medium warlock Lorem Ipsum medium warlock
Lorem Ipsum medium warlock Lorem Ipsum medium warlock
Lorem Ipsum medium warlock Lorem Ipsum medium warlock
Lorem Ipsum medium warlock Lorem Ipsum medium warlock
Lorem Ipsum medium warlock Lorem Ipsum medium warlock
Lorem Ipsum medium warlock Lorem Ipsum medium warlock
Lorem Ipsum medium warlock Lorem Ipsum medium warlock
Lorem Ipsum medium warlock Lorem Ipsum medium warlock
</div>
</div>
<div id="bot1"></div>
</div> -
I gave it a try and I don't see any difference...
Do you have a live preview? Do you have anything else on your html or css?
There might also be an easier way to acomplish what you are trying to do. -
I had exactly the same problem a few days ago...
For me it was an "height" problem... On your div "contentBg", you fixed an height (height: 20px;)... IE takes it like a minimum height and will place the next div after the content of the contentBg div. But FF doesn't look at the content of the div and places the next div 20px after the other, regardless of its content...
I removed the height on my div and it worked... hope this helps -
yeah, exactly what anGel said. though i will toss this out there as well: if you do need to force that height you can do something like this.
div.whatever {
height:auto !important; /* fixes height so it flexes in FF/etc. */
height:100px; /* ie reads this as min-height, FF ignores it for the !important rule */
min-height:100px; /* ie no-supporty */
}
1 to 6 of 6