SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jul 2002
    Location
    USA
    Posts
    351
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Header overflowing the vertical scrollbar

    I have looked at this and I can't figure out the problem. When the screen goes below 800x600, the scrollbar gets covered by the header.
    Thanks for any advice.

    Here is the url
    http://www.bilingualfun.com/

    http://www.bilingualfun.com/bilingual.css

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've obviously overlooked the comment that Paul wrote for you about this:

    /* Bear in mind that as there is no height then scrollbars won't appear in IE and very small screens will be unable to reach the content of his fixed side - so keep content to a minimum */

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think this is a step too far for fixed positioning as fixed positioning is best used in small doses for content such as a banner in the background or a copyright message in the footer. There are always issues with scrollbars as fixed elements do not move and do not seem to always incur scrollbars when necessry.

    I've tweaked your code into displaying better but I think this is one of those times when its a hack too far and you would be better of with a simpler layout that is easier to manage and doesn't need hacks.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title></title>
    <style type="text/css">
    * {margin:0;padding:0}
    p{margin:0 0 1em 0}
    html,body{margin:0;padding:0;	overflow:hidden}
    body{
    	height:100%;
    	margin:0;
    	background:#33CC33 url(http://www.bilingualfun.com/images/green_background.jpg) ;
    	font-family:Arial, Helvetica, sans-serif;
    }
    #outer{
    	overflow:auto;
    	position:absolute;
    	left:170px;
    	border-left:1px solid #000;
    	background:#fff;
    	right:0px;
    	top:136px;
    	bottom:37px;
    	background: url(http://www.bilingualfun.com/images/children_background_1.jpg) repeat left top;
    }
    #top,#footer{
    	position:absolute;
    	right:0px;
    	height:50px;
    	overflow:hidden;
    }
    #top{
    	background: #FFB701 url(http://www.bilingualfun.com/images/orange_top.jpg) repeat-x right top;
    	height:136px;
    	left:0px;
    }
    #footer{	
    	bottom:0px;
    	height:50px;
    	border-top:1px solid #000;
    	background-color: #105f88;
    	text-align:left;
    	font-size:12px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	z-index:99;
    }
    #footer a{color:#BFDFBF; text-decoration:none;}
    #footer a:hover {color:#FFFFFF; text-decoration:overline underline;}
    #clearfooter{/* to clear footer*/
    	height:52px;
    	clear:both;
    }
    #top{top:0px;}
    #left{
    /* Bear in mind that as there is no height then scrollbars won't appear in IE and very small screens will be unable to reach the content of this fixed side - so keep content to a minimum */
    	width:170px;
    	position: fixed;/* for good browsers */
    	left:-6px;
    	top:147px;
    	z-index:1;
    }
    #right{
    	width:141px;
    	position:relative;
    	float:right;
    	background: #FFFF00 url(http://www.bilingualfun.com/images/yellow_background.jpg);
    }
    .mainbackground {
    	background: url(http://www.bilingualfun.com/images/children_background_1.jpg) repeat left top;
    }
    #content{margin-right:150px;}
    
    
    
    </style>
    <!--[if IE ]>
    <style type="text/css">
    * html #footer{	bottom:-1px;}
    * html {padding:136px 0 0;overflow:hidden} 
    * html body{padding:136px 0px 0;padd\ing:0;overflow:hidden;}
    * html #outer{	
    	height:100%;
    	position:static;
    	margin-left:170px;
     overflow-y:scroll;
    }
    * html #footer {margin-right:14px;}
    * html #top{
    	width:100%;
    	left:0;
    }
    * html #left{position:absolute}
    * html #content{height:1%}
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="top">
    	<table width="100%"  border="0" align="left" cellpadding="0" cellspacing="0">
    		<tr>
    			<td><div align="left"><a href="index.htm"><img src="http://www.bilingualfun.com/images/header.jpg" alt="The Bilingual Fun - Company / Spanish for Children" width="636" height="112" border="0" /></a></div></td>
    			<td align="right"><!--
      <script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','368','height','72','align','right','src','banner_bilingual','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','banner_bilingual' ); //end AC code
    </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="368" height="72" align="right">
    	<param name="movie" value="banner_bilingual.swf" />
    	<param name="quality" value="high" />
    	<embed src="http://www.bilingualfun.com/banner_bilingual.swf" width="368" height="72" align="right" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
      </object></noscript>
    -->
    				<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="368" height="72" title="Spanish for Children">
    					<param name="movie" value="banner_bilingual.swf" />
    					<param name="quality" value="high" />
    					<param name="wmode" value="opaque" />
    					<embed wmode="opaque" src="http://www.bilingualfun.com/banner_bilingual.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="368" height="72"></embed>
    				</object>
    				&nbsp;&nbsp; </td>
    		</tr>
    		<tr>
    			<td colspan="2" bgcolor="#FF9900"><div align="left">
    					<div id="dmsmenu">
    						<table style="line-height:0px" cellpadding='0' cellspacing='0'>
    							<tr>
    								<td><img src="http://www.bilingualfun.com//menus/menu_m1_b.png" alt="" /></td>
    								<td><a id="m1tlm0a" href="index.htm" onmouseover="exM(m1,'none','',event);chgBg(m1,'m1tlm0',3)" onmouseout="chgBg(m1,'m1tlm0',0,1)"><img style="border-style:none" id="m1tlm0" src="http://www.bilingualfun.com//menus/menu_m1_i0.png" alt="" /></a></td>
    								<td><img src="http://www.bilingualfun.com//menus/menu_m1_s.png" alt="" /></td>
    								<td><a id="m1tlm1a" href="classes.htm" onmouseover="exM(m1,'none','',event);chgBg(m1,'m1tlm1',3)" onmouseout="chgBg(m1,'m1tlm1',0,1)"><img style="border-style:none" id="m1tlm1" src="http://www.bilingualfun.com//menus/menu_m1_i1.png" alt="" /></a></td>
    								<td><img src="http://www.bilingualfun.com//menus/menu_m1_s.png" alt="" /></td>
    								<td><a id="m1tlm2a" href="bilingual_fun_shop.htm" onmouseover="exM(m1,'none','',event);chgBg(m1,'m1tlm2',3)" onmouseout="chgBg(m1,'m1tlm2',0,1)"><img style="border-style:none" id="m1tlm2" src="http://www.bilingualfun.com//menus/menu_m1_i2.png" alt="" /></a></td>
    								<td><img src="http://www.bilingualfun.com//menus/menu_m1_s.png" alt="" /></td>
    								<td><a id="m1tlm3a" href="testimonials.htm" onmouseover="exM(m1,'none','',event);chgBg(m1,'m1tlm3',3)" onmouseout="chgBg(m1,'m1tlm3',0,1)"><img style="border-style:none" id="m1tlm3" src="http://www.bilingualfun.com//menus/menu_m1_i3.png" alt="" /></a></td>
    								<td><img src="http://www.bilingualfun.com//menus/menu_m1_s.png" alt="" /></td>
    								<td><a id="m1tlm4a" href="faqs.htm" onmouseover="exM(m1,'none','',event);chgBg(m1,'m1tlm4',3)" onmouseout="chgBg(m1,'m1tlm4',0,1)"><img style="border-style:none" id="m1tlm4" src="http://www.bilingualfun.com//menus/menu_m1_i4.png" alt="" /></a></td>
    								<td><img src="http://www.bilingualfun.com//menus/menu_m1_s.png" alt="" /></td>
    								<td><a id="m1tlm5a" href="research.htm" onmouseover="exM(m1,'none','',event);chgBg(m1,'m1tlm5',3)" onmouseout="chgBg(m1,'m1tlm5',0,1)"><img style="border-style:none" id="m1tlm5" src="http://www.bilingualfun.com//menus/menu_m1_i5.png" alt="" /></a></td>
    								<td><img src="http://www.bilingualfun.com//menus/menu_m1_s.png" alt="" /></td>
    								<td><a id="m1tlm6a" href="about_us.htm" onmouseover="exM(m1,'none','',event);chgBg(m1,'m1tlm6',3)" onmouseout="chgBg(m1,'m1tlm6',0,1)"><img style="border-style:none" id="m1tlm6" src="http://www.bilingualfun.com//menus/menu_m1_i6.png" alt="" /></a></td>
    								<td><img src="http://www.bilingualfun.com//menus/menu_m1_s.png" alt="" /></td>
    								<td><a id="m1tlm7a" href="contact_us.htm" onmouseover="exM(m1,'none','',event);chgBg(m1,'m1tlm7',3)" onmouseout="chgBg(m1,'m1tlm7',0,1)"><img style="border-style:none" id="m1tlm7" src="http://www.bilingualfun.com//menus/menu_m1_i7.png" alt="" /></a></td>
    								<td><img src="http://www.bilingualfun.com//menus/menu_m1_s.png" alt="" /></td>
    								<td><a id="m1tlm8a" href="policies.htm" onmouseover="exM(m1,'none','',event);chgBg(m1,'m1tlm8',3)" onmouseout="chgBg(m1,'m1tlm8',0,1)"><img style="border-style:none" id="m1tlm8" src="http://www.bilingualfun.com//menus/menu_m1_i8.png" alt="" /></a></td>
    								<td><img src="http://www.bilingualfun.com//menus/menu_m1_e.png" alt="" /></td>
    							</tr>
    						</table>
    						<noscript>
    						<a href="index.htm">Home</a> | <a href="classes.htm">Classes</a> | <a href="bilingual_fun_shop.htm">Bilingual Fun Shop</a> | <a href="testimonials.htm">Testimonials</a> | <a href="faqs.htm">FAQs</a> | <a href="research.htm">Research</a> | <a href="about_us.htm">About Us</a> | <a href="contact_us.htm">Contact Us</a> | <a href="policies.htm">Policies</a> |
    						</noscript>
    					</div>
    				</div></td>
    		</tr>
    	</table>
    </div>
    <div id="outer">
    	<div id="right">
    		<p>&nbsp;</p>
    		<p><a href="classes.htm"><img src="http://www.bilingualfun.com/images/spanish_for_ad.jpg" alt="Sign Up for Classes Now" border="0" /></a> </p>
    		<div align="center">
    			<div align="center"> <a href="bilingual_fun_shop.htm"><img src="http://www.bilingualfun.com/images/el_gigante_animated.gif" alt="Enter the Bilingual Fun Shop" border="0" /></a></div>
    			<br />
    			<button onclick="window.location='bilingual_fun_shop.htm'">Shop Now</button>
    		</div>
    	</div>
    	<div id="content">
    		<table width="100%" border="0" class="mainbackground">
    			<tr>
    				<td><h1><span class="style11"><strong class="style4 style8">Early Language Instruction is the Key to Language Learning Success!</strong></span></h1>
    					<blockquote class="style9 style2">
    						<p>Your child&rsquo;s prime time to learn a second language is right now! The Bilingual Fun&trade; <img src="http://www.bilingualfun.com/images/children_1.jpg" alt="Spanish for Children" width="173" height="214" align="right" />program provides your toddler, preschooler, or grade school child a head start in acquiring the Spanish language. Children
    							who are exposed to more than one language before adolescence, will acquire those languages with more ease and &lsquo;native like&rdquo; ability than they would if they try to study those languages as adults. The Bilingual Fun&trade; program will introduce you to the Spanish language through our National Award winning DVD series and classes. Children
    							learn by having fun, therefore Bilingual Fun&trade; incorporates upbeat music, rhythms, and movement that encourage children to be kinesthetic, verbal, and reflective learners.Parents and children alike <strong><img src="http://www.bilingualfun.com/images/children_5.jpg" alt="Spanish For Children" width="216" height="143" align="left" /></strong>will
    							be stimulated and learn with our interactive and exciting program!The opportunity to be bilingual is one of the greatest gifts you can give to your child</p>
    						<p>Coming September 2006.<br />
    							Spanish for Children Volume 2: <br />
    							GREETINGS, BODY PARTS, FOOD. </p>
    						<p>Learn practical, everyday phrases and vocabulary that will give promote your child&rsquo;s language development. Contact us today!</p>
    					</blockquote>
    					<h4 class="style1 style11"><strong><u>See what the experts say about a bilingual education
    						<label>research</label>
    						</u></strong><a href="research.htm"><img src="http://www.bilingualfun.com/images/read_more.jpg" alt="Read more" width="75" height="16" border="0" align="bottom" /></a> </h4>
    					<h4 class="style1 style11"><strong><u>See what other parents have to say about our program. </u></strong><a href="testimonials.htm"><img src="http://www.bilingualfun.com/images/read_more.jpg" alt="Read more" width="75" height="16" border="0" align="bottom" /></a></h4>
    					<h5>&nbsp;</h5></td>
    			</tr>
    		</table>
    	</div>
    	<div id="clearfooter"></div>
    </div>
    <div id="footer">
    	<div id="footer-inner">
    		<table width="100%"  border="0" cellspacing="10" cellpadding="0">
    			<tr>
    				<td><span><a href="index.htm">Home</a> | <a href="classes.htm">Classes</a> | <a href="bilingual_fun_shop.htm"> Bilingual Fun Shop </a> | <a href="testimonials.htm">Testimonials</a>| <a href="faqs.htm">FAQs</a> | <a href="research.htm">Research</a> | <a href="about_us.htm">About Us </a> | <a href="contact_us.htm">Contact Us</a>| <a href="policies.htm">Policies</a><br />
    					<span class="style2">Copyright &copy; 2006 The Bilingual Fun Company. All Rights Reserved. </span></span></td>
    				<td><div align="right"><a href="http://www.btrassociates.com" target="_blank"><img src="http://www.bilingualfun.com/images/designed_by_ess.jpg" alt="BTR Associates &ndash; a Michigan Web Design and Search Engine Optimization Firm focused on creating an effective web presence for its clients" width="119" height="24" border="0" /></a></div></td>
    			</tr>
    		</table>
    	</div>
    </div>
    <div id="left">
    	<p align="center"> <img src="http://www.bilingualfun.com/images/yellow_calltoaction_factoids.gif" alt="Spanish for Children"  /> </p>
    	<p align="center">
    		<button onclick="window.location='contact_us.htm'">CONTACT US</button>
    	</p>
    	<h4 align="center"> All classes held at:</h4>
    	<h6 align="center">First Baptist Church<br />
    		of Plymouth<br />
    		45000 N. Territorial Rd.<br />
    		Plymouth, MI 48170<br />
    		734.748.3898</h6>
    </div>
    </div>
    </body>
    </html>
    I haven't altered your invalid and deprecated code but placed inside a structure that behaves better. I haven't transferred all your css styles either as I haven't got all day

    Hope it helps anyway.


Bookmarks

Posting Permissions

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