Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    37
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Weird CSS Resizing issue

    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.




    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
    Code:
    <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
    Code:
    #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:
    Code:
    <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:
    Code:
    #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 */
    }
    Last edited by emericana; 04-20-2011 at 05:10 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    37
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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/

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    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.

    Code:
    #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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •