...

View Full Version : Weird CSS Resizing issue



emericana
04-20-2011, 04:56 PM
When the header or footer is displayed on my computer which has a 1440x900 display (works on computers with higher resolutions as well) it looks fine. However, once the browser window gets resized weird resizing issue occurs.

http://imgur.com/JMeaE.png


As you can see the footer just stops resizing with the window and comes to an end and you can see the background to the right of the footer. I cant figure out why this happens. Here is my html and css.

HTML


<div id="footer">

<ul class="footerTab">
<li><a href="#" title="About Us"><span class="aboutus">ABOUT US</span></a></li>
<li class="star"></li>
<li><a href="#" title="Questions"><span class="questions">QUESTIONS</span></a></li>
<li class="star"></li>
<li><a href="#" title="Contact Us"><span class="contactus">CONTACT US</span></a></li>
<li class="star"></li>
<li><a href="#" title="Link To Us"><span class="link2us">LINK2US</span></a></li>
<li class="star"></li>
<li><a href="#" title="Advertise"><span class="advertise">ADVERTISE</span></a></li>
<li class="star"></li>
<li><a href="#" title="Street Team"><span class="streetteam">JOIN OUR STREET TEAM!</span></a></li>
</ul>
<center><img src="images/fb_twitter.png" /></center>
</div>
</div>


CSS


#footer {
background-image:url(images/purpleline.gif);
position:absolute;
bottom:0;
width:100%;
height:175px; /* Height of the footer */
}

/*LIST CODE*/

ul.footerTab{
padding: 0;
z-index: 30;
position: relative;
height:65px;
overflow:hidden;
width:1100px;
margin-left:auto;
margin-right:auto;
}
ul.footerTab li {
margin:0px;
padding:0px;
list-style:none;
font-family:tahoma;
font-weight:bold;
font-size:14px;
float:left;
}
ul.footerTab li.star{
list-style:url(images/doodad.png);
margin-left:30px;
padding-top:13px;
}
ul.footerTab li a {
color:white;
text-decoration:none;
margin-top:20px;
margin-left:5px;
margin-right:20px;
margin-bottom:0px;
display:block;
z-index:30;
}

ul.footerTab span {
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
border-top-right-radius:15px;
border-top-left-radius:15px;
-webkit-box-shadow: 4px 6px 8px black;
-moz-box-shadow: 4px 6px 8px black;
box-shadow: 4px 6px 8px black;
padding:15px;
}
ul.footerTab span.aboutus {
background-color:#00a595;
padding:15px;
}
ul.footerTab span.questions{
background-color:#6100ff;padding:15px;
}
ul.footerTab span.contactus{
background-color:#990099;padding:15px;
}
ul.footerTab span.link2us{
background-color:#329b00;padding:15px;

}
ul.footerTab span.advertise{
background-color:#00a595;padding:15px;

}
ul.footerTab span.streetteam{
background-color:#ef2b91;padding:15px;
}



Thanks for suggestions in advance


EDIT... BTW The code is going is wrapped in the typical:


<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>

With the CSS in the container header body classes being:


#container {min-height:100%; position:relative;}

/*HEAADER CSS*/
#header {
position: relative;
height:200px;
background:url(images/purpleline.gif);
width:100%;
}
#body {
position:relative;
padding-bottom:175px; /* Height of the footer */
}

Excavator
04-20-2011, 05:59 PM
Hello emericana,
Piecing together all your code doesn't really reproduce your problem. A link to the test site would make things a lot easier.

emericana
04-20-2011, 06:04 PM
Ok. Thanks for the help in advance (FYI this site is something for a client lol... it is pretty girly).

http://www.bizcampsusa.org/tfredesign/

Excavator
04-20-2011, 07:43 PM
That's a pretty wide site. A lot of viewers are going to get an x scrollbar.

The problem is your 100% width elements. Add this bit highlighte in red to your CSS, try resizing it and see how it acts compared to the 100% width .headerfooter below it.



#tabswrapper {
position:relative;
/*width:1000px;*/
width: 2000px;
height:74px;
background-image:url(images/tabswide.png);

}

I only picked 2000px because that's the width of tabswide.png.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum