?
Solved

Height 100% Issue

Posted on 2007-08-01
3
Medium Priority
?
1,485 Views
Last Modified: 2011-10-03
Hi,

I am having a problem with a div with height set to 100%. Basically the div have a repeating background image (vertically) which I need  to repeat to the height of whatever size the page content is (not just the height of the browser.

I tried faux columns, but it doesn't seem to have the effect I want... is there an easy and quick solution to
this?

Thanks

Here's the URL:
http://www.liquidcircle.co.uk.php5-3.websitetestlink.com/html_templates/index.html

----
And the CSS:

/* CSS Document */

html,body {height:100%;}
body,td,th {font-family:Arial, Helvetica, sans-serif; font-size: 11px; color: #000000;}

h1{color:#e63635; font-size:24px;}
h2{color:#e63635; font-size:20px;}
h3{color:#e63635; font-size:16px;}
h4{color:#e63635; font-size:14px;}

a:link {color:#e5363b; text-decoration:underline;}
a:hover {color:#e5363b; text-decoration:none;}

body {background-color:#000; margin:0px; background-image:url(../images/bg_grad.gif); background-repeat:repeat-x; height:100%;}

#main_wrap{width:757px; height:100%; margin:0 auto; text-align:left;}
#left_wrap{width:24px; min-height:100%; background-image:url(../images/left_wrap_bg.png); background-repeat:repeat-y; float:left;}
#middle_wrap{width:699px; min-height:100%; background-color:#FFFFFF; float:left;}
#right_wrap{width:24px; min-height:100%; background-image:url(../images/right_wrap_bg.png); background-repeat:repeat-y; float:left;}

#logo_wrap{width:690px; height:95px; background-color:#000000; margin-left:9px;}

#cocktail_glass_top{height:240px; width:241px; position:absolute; top:0; margin-left:510px;}

#menu_wrap{width:100%; height:31px; margin-top:9px;}

#boxes_wrap{margin-top:25px;}
#red_box{background-image:url(../images/red_box.jpg); background-repeat:no-repeat; height:156px; width:128px; float:left; color:#FFFFFF;}
#black_box{background-image:url(../images/black_box.jpg); background-repeat:no-repeat; height:156px; width:128px; float:left; color:#FFFFFF;}

#red_box h1{font-size:14px;  color:#FFFFFF; font-weight:normal; margin-left:22px; line-height:13px;}
#black_box h1{font-size:14px;  color:#FFFFFF; font-weight:normal; margin-left:22px; line-height:13px;}
.image_block {margin-bottom:7px;}
.image_block {margin-bottom:7px;}

#body_wrap{padding-left:15px; padding-right:15px; background-color:#FFFFFF;}
#body_text{width:420px; float:left; padding-right:10px;}
#quotes{width:229px; float:left; padding-top:20px;}

#body_text h1{font-size:24px; color:#484647;}

#overall_footer{width:757px; float:left;}
#footer_wrap{background-color:#000000; color:#FFFFFF; width:696px; padding-left:3px; height:30px; float:left; padding-top:1px; overflow:hidden; padding-bottom:0px;}
#footer_wrap h2 {color:#FFFFFF; font-size:14px;}
#footer_left{width:24px; height:30px; background-image:url(../images/left_wrap_bg.png); background-repeat:repeat-y; float:left;}
#footer_right{width:24px; height:30px; background-image:url(../images/right_wrap_bg.png); background-repeat:repeat-y; float:left;}
#footer_wrap a:link {color:#E63635; text-decoration:none;}
#footer_wrap a:hover {text-decoration:underline;}
#footer_wrap a:active {color:#FFFFFF; text-decoration:underline;}
#footer_wrap a:visited {text-decoration:underline;}

#client_wrap{width:699px; height:79px; overflow:hidden; float:left;}
#client{width:47px; height:47px; background-color:#ccc; padding:10px; border:1px solid #999; float:left; margin-right:16px; margin-bottom:10px;}

#body_text_inside{width:422px; float:left; padding-right:10px;}

#enquire_block_wrap{float:left; margin-top:50px;}
#enquire_block_head{width:201px; background-image:url(../images/enquire_inside.gif); background-repeat:no-repeat; height:41px;}
#enquire_block_content{width:187px; border-top:#e5363b 2px solid; border-left:#e5363b 2px solid; border-right:#e5363b 2px solid; border-bottom:#e5363b 2px solid; margin-top:-2px; padding:5px; padding-top:10px;}
#enquire_block a:link{color:#FFFFFF; font-size:15px; text-decoration:none;}
#enquire_block a:hover{color:#FFFFFF; font-size:15px; text-decoration:underline;}

.button {
 background-color: #e5363b;
 font-size:11px;
 color: #fff;
 margin-left: 12px;
 margin-top: 3px;
 margin-bottom: 2px;
 border:none;
 margin-right: 3px;
 padding:4px;
}

.style1 {color: #e63635}
.style2 {color: #000000}
.style3 {color: #E63635}

#form_block_wrap{float:left; margin-top:50px;}
#form_block_head{width:97%; background-image:url(../images/form_head.gif); background-repeat:no-repeat; height:21px; padding:10px; font-size:20px; color:#FFFFFF; background-color:#e5363b;}
#form_block_content{width:98%; border-top:#e5363b 2px solid; border-left:#e5363b 2px solid; border-right:#e5363b 2px solid; border-bottom:#e5363b 2px solid; margin-top:-2px; padding:5px; padding-top:10px;}
#form_block a:link{color:#FFFFFF; font-size:15px; text-decoration:none;}
#form_block a:hover{color:#FFFFFF; font-size:15px; text-decoration:underline;}

#venues_text_top{min-height:179px;}
0
Comment
Question by:moconn
3 Comments
 
LVL 12

Accepted Solution

by:
oceanbeach earned 750 total points
ID: 19611559
Hello moconn,

Are you referring to a particular browser, such as IE6?  The page seemed to look fine in FF.  If it is an IE6 or earlier issue, then the IE png fix may be causing your trouble.  The way to get pngs to display in IE6 and earlier is to use MS's AlphaImageLoader filter. This is probably used in png fix javascript.  Unfortunately, background images cannot be repeated using this filter...

http://www.satzansatz.de/cssd/tmp/alphatransparency.html

You can stretch the background image with the filter, but that often results in being too 'thin' to be visible.  You may want to try an over-sized image that and set overflow:hidden for the left and right shadow divs (or set the AlphaImageLoader filter to crop).  Overflow:hidden styles for the left and right shadow divs may be an easier way to go (than possibly editing the javascript).  Not as ideal as repeating backgrounds, but it may work for you.

I hope this helps!

oceanbeach

0
 
LVL 5

Assisted Solution

by:Gareth Pritchard
Gareth Pritchard earned 750 total points
ID: 19611848
I wouldnt recommend using PNG's at all, this site displays ok in IE7, other than the left_wrap and right_wrap that seem to be missing a chunk somewhere in the middle.

If you use photoshop, you can save JPEGs or GIFs using lossless formats.
these are still relatively highly compressed.

Is it just the faded images on the left and right that your referring to ?
0
 

Author Comment

by:moconn
ID: 19941169

Guys,

I think this question has been resolved by my designer.

Accepting multiple solutions to close q.

Cheers,
Michael
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question