homepage Welcome to WebmasterWorld Guest from 54.161.240.10
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Background image does not extend vertically to the bottom on Firefox
jessweb




msg:3820636
 12:45 am on Jan 7, 2009 (gmt 0)

Hello everyone,

This is my first post after extend searching for a solution and trial/error attempts to fix this issue. I would really, really appreciate any feedback you an offer.

Description of problem Summary:
- I have a container DIV, and two other DIVs within it (left and right).
- The right DIV contains all the content.
- The left DIV contains an image that needs to be repeated vertically and extended to the bottom depending on the content inside the right DIV.
- IE7 result = all good
- FF3 result = the image on the left DIV only extends to the screen size. Beyond that, it stops.

Solution needed:
Is there a way to extend the background image to the end? This image is a pattern. Its size is 132x152. I've also added a border for those three DIVs just to see how they behave on the browsers. Thank you in advance for your time.

Code

<html>
<head>
<title>Title</title>
<style type="text/css" media="screen">
html {
text-align: center;
height: 100%;
}

body
{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
margin-top: 15px;
text-align: center;
height: 100%;
}

#container
{
margin: 0 auto;
padding: 0;
width: 700px;
height: 100%;
min-height: 100%;
border: 1px solid #333;
}

#leftcol
{
float: left;
width: 134px;
background-image: url('image.gif');
background-position: left top;
background-repeat: repeat-y;
border: 1px solid #FF0000;
height: 100%;
/*overflow: hidden; */
}

#rightcol {
float: right;
width: 535px;
border: 1px solid #003399;
}

#footer
{
clear: both;
padding: 1em;
border-top: 1px solid #333;
height: 75px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftcol">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod.
</p>

</div>
<div id="rightcol">
<p>
Looong text here
</p>

</div>
<div id="footer">
Footer stuff here
</div>
</div>
</body>
</html>

Thank you,

Jessica

[edited by: swa66 at 3:03 am (utc) on Jan. 7, 2009]
[edit reason] made the long test in rightcol a bit shorter to improve readbility [/edit]

 

2lame2rank




msg:3820670
 2:29 am on Jan 7, 2009 (gmt 0)

Hello and Welcome :) Does your real HTML page have a DOCTYPE and if so what one are you using? The first problem I see is that when you have no full DOCTYPE then the browsers all are in Quirks Mode and this can mess things up.

swa66




msg:3820689
 2:58 am on Jan 7, 2009 (gmt 0)

Welcome to WebmasterWorld! [webmasterworld.com]

height:100% means that the element gets the height of its direct parent provided the parent was given a height explicitly (and different from auto (auto is the default value)).

The root element has a height of the viewport.

So your code is instructing to do what FF does, it's IE that's putting you on the wrong foot (as is the case in 99% of the times when IE and FF render things differently).

Which brings us to why use height:100% at all ? Did you want to have a minimal height ? If so use min-height, not height and fix it for IE with either height interpreted as min-height of an expression in a conditional comment.

The trick to expand the parent to encompass the 2 floated children is to add an element after the floated elements that is not floated and has clear:both; (like your footer)

jessweb




msg:3821193
 5:17 pm on Jan 7, 2009 (gmt 0)

Hello and thank you both. :)

2lame2rank - Yes. The real page has this doctype. I added it to the code below too. :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

swa66 - I've removed the height and min-height. I've also added the non-floated element after the floated elements. So now the parent encompases the floated children. However, the left DIV still doesn't extend to the bottom. =(

Current code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css" media="screen">
html {
text-align: center;
}

body
{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
margin-top: 15px;
text-align: center;
}

#container
{
margin: 0 auto;
padding: 0;
width: 700px;
border: 1px solid #333;
}

#leftcol
{
float: left;
width: 134px;
background-image: url('pattern.gif');
background-position: left top;
background-repeat: repeat-y;
border: 1px solid #FF0000;
height: 100%
}

#rightcol {
float: right;
width: 535px;
border: 1px solid #003399;
}

#spacer {
background-image: url('transparent.gif');
background-repeat: no-repeat;
width: 10px;
height: 1px;
clear: both;
border: 1px solid fuchsia;
}

#footer
{
clear: both;
padding: 1em;
border-top: 1px solid #333;
height: 75px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftcol">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod.
</p>

</div>

<div id="rightcol">
<p>
Looong text here
</p>

</div>

<div id="spacer"></div>

<div id="footer">
Footer stuff here
</div>

</div>
</body>
</html>

Thank you!
Jessica

[edited by: swa66 at 9:11 pm (utc) on Jan. 7, 2009]
[edit reason] replace long text with placeholder to improve readability [/edit]

jessweb




msg:3821236
 5:57 pm on Jan 7, 2009 (gmt 0)

Update - Got it working. Here's how:

I'm not sure if I can have the leftcol DIV to extend all the way to the bottom. But since we got the container DIV to encompass the floated children DIVs, I just moved the background image to the container DIV. Now it extends to the bottom. :)

Final code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css" media="screen">
html {
text-align: center;
}

body
{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
margin-top: 15px;
text-align: center;
}

#container
{
margin: 0 auto;
padding: 0;
width: 700px;
background-image: url('pattern.gif');
background-position: left top;
background-repeat: repeat-y;
border: 1px solid #333;
}

#leftcol
{
float: left;
width: 134px;
border: 1px solid #FF0000;
height: 100%
}

#rightcol {
float: right;
width: 535px;
border: 1px solid #003399;
}

#spacer {
background-image: url('transparent.gif');
background-repeat: no-repeat;
width: 10px;
height: 1px;
clear: both;
border: 1px solid fuchsia;
}

#footer
{
clear: both;
padding: 1em;
border-top: 1px solid #333;
height: 75px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftcol">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod.
</p>

</div>

<div id="rightcol">
<p>
Looong text here
</p>

</div>

<div id="spacer"></div>

<div id="footer">
Footer stuff here
</div>

</div>
</body>
</html>

Thank you!
Jessica

[edited by: swa66 at 9:12 pm (utc) on Jan. 7, 2009]
[edit reason] long text replacement [/edit]

swa66




msg:3821400
 9:17 pm on Jan 7, 2009 (gmt 0)

I'm not sure if I can have the leftcol DIV to extend all the way to the bottom. But since we got the container DIV to encompass the floated children DIVs, I just moved the background image to the container DIV. Now it extends to the bottom. happy!

Think you got it. Don't know an easy way to make an element itself extend to have the height of one of it's siblings. The tricks all rely on a parent, or use the direct parent as you did.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved