943,724 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > CSS Floating menu makes page jump to left only on certain pages
Ad:
Permalink
Sep 23rd, 2009
0

CSS Floating menu makes page jump to left only on certain pages

Expand Post »
Hi People, Hope some body can help I have been pulling my hair out over the last few days trying to figure this out!!

Problem: I have narrowed the problem down to a <div> with a 2 floating images and float <ul> <li> as my menu.

When the inner wrap under this float menu has a large amount of text in it makes the page jump to the left slightly, all the floats are cleared what ever I do I cannot seem to stop the page jumping on certain pages, the only way I can stop it is to take the float out of the <li>!

Here is the HTML:
HTML and CSS Syntax (Toggle Plain Text)
  1. <body>
  2. <div id="wrapper">
  3.           <div id="header">
  4.             	<div id="header_top">
  5.                 		<img src="Images/header_tl.gif" border="0" style="float:left;"/> <div id="header_nav">
  6.                     	TOP NAV TEXT
  7.                     </div> <img src="Images/header_tr.gif" border="0" style="float:right;"/>
  8.                   	<!-- Start Quick Search --> <form method="post" enctype="multipart/form-data" action="" name="quick_search" > <input type="hidden" name="search" value="1" /> <div id="quick_search"><input type="submit" id="search_but" value="   "/><div id="quick_sbox"><inputtype="text" name="search_q" id="quick_input" >" /></div></div></form> <!-- End Quick Search -->
  9.                 </div>
  10.  
  11.                 <div id="header_mid"><img src="Images/logo.gif" border="0" style="float:left;margin-top:3px;" alt="logo"/> <div id="fade_mid"></div> <div id="print_phone">&nbsp; &nbsp; &nbsp;&nbsp;00000 <span class="endphone">000000</span></div>			<br/><br/><br/><div id="print_fax">&nbsp; 		&nbsp; &nbsp;&nbsp;00000<span class="endphone">777777</span></div></div>
  12.                 <div id="menu_bar">
  13.                 	<img src="Images/menu_bgl.gif" border="0" style="float:left;margin-top:0px;" alt="Menu"/><!-- colparte--><ul class="menu">
  14.                 		<li id="menu_1eft"><a href="?" class="whitelink">HOME</a></li><li><a href="#" class="whitelink">ONLINE CATALOGUE</a></li><li><a href="#" class="whitelink">HIRE</a></li><li><a href="#" class="whitelink">SALES</a></li><li><a href="#" class="whitelink">SERVICES</a></li><li><a href="#" class="whitelink">PARTS</a></li><li><a href="#" class="whitelink">TRAINING</a></li><li id="menu_right"><a href="#" class="whitelink">CONTACT</a></li>
  15.                     </ul><img src="Images/menu_bgr.gif" border="0" style="float:right;margin-top:-1px;"  alt="GB Menu"/>
  16.                     <div style="clear:both;"> </div>
  17.                 </div>
  18.            </div>
  19.            <div style="clear:both;"> <br/><br/><br/></div>
  20.            <div id="innerwrap">
  21.            <!-- Start Content -->
  22.  			<div class="home_text">PAGE CONTENT IF THIS GOES OVER SAY 60 LINES IT MAKES THE PAGE JUMP</div><div class="latest_block"></div>
  23. 		   <!--End Content--><div style="clear:both;"><br/><br/></div></div>
  24.  
  25. <hr id="footer_hr"/><div id="footer_links">bottom menu</div><br/>
  26.     	</div>
  27.     <div style="clear:both;"></div>
  28.     <div id="footer_wrap">
  29.     	<div id="footer_inner"><img src="Images/footer_l.gif" border="0" style="float:left;" />
  30.         <div id="copyw"> &copy; 2009-2010 
  31.         <img src="Images/footer_r.gif" border="0" style="float:right;"  /></div>
  32.         <div id="bot_l"> <img src="Images/cards.jpg" alt="Payment types we accept!" id="payment"/> 
  33.  	  <img src="Images/fsb.gif"  id="bot_r"/> </div>
  34.     </div>
  35. </body>
Here is the CSS:
HTML and CSS Syntax (Toggle Plain Text)
  1. @charset "utf-8";
  2. html { margin:0px; padding:0px; margin-top:1px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; background-color:#f7d501; } 
  3. body { padding:0px; margin:0px; background:url(../../Images/header_bg.gif) repeat-x top #FFF; background-color:#e9e9e9; }
  4.  
  5. /*Link Styles*/
  6. .main_title{font-size:14px; margin-top:0px; color:#000000;} 
  7. #wrapper { width:950px; margin-top:2px; margin-left:auto; margin-right:auto; background-color:#fff; }
  8. #header { width: 950px; height:115px;  }
  9. #header_top { width: 950px; height:41px; background:url(../../Images/header_tmid.gif) repeat-x;}
  10. #header_nav { float:left; margin-top:8px; width:550px;}
  11. #fade_mid{float:left; background-color:#FFF;margin-left:135px;width:270px;}
  12.  
  13. #quick_search { float:right; margin-top:5px; width:250px;} 
  14. #quick_sbox { margin:0; height:22px; width:188px; background:url(../../Images/search_input.gif) no-repeat top; float:right; margin-right:7px; }
  15. #quick_input { background:none; border:none; width:175px; height:20px; margin:0; padding: 4px 7px 0px 7px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
  16. #search_but {   border:0px;  background:url(../../Images/search_but.gif) no-repeat ; width:25px; height:25px; float:right; }
  17.  
  18. #header_mid { width:875px; height:74px; margin-left:auto; margin-right:auto; }
  19. #print_phone{ float:right; background:url(../../Images/phone.gif) no-repeat #FFF; height:34px; width:186px; font-size:23px; color:#c7ac02; margin-top:2px; padding-top:3px; margin-right:7px;}
  20. #print_fax{ float:right; background:url(../../Images/fax.gif) no-repeat #FFF; height:34px; width:186px; font-size:23px; color:#c7ac02; margin-top:-7px; padding-top:3px; margin-right:7px;}
  21. .endphone{ color:#2d2700; }
  22.  
  23. #menu_bar { width:875px; height:37px; margin-top:6px; margin-left:auto; margin-right:auto; background:url(../../Images/menu_bg.gif) repeat-x #f7d501; overflow: auto; }
  24. ul.menu { color:#FFF; font-size:17px; font-weight:bold;margin:0px; padding:0px; padding-top:1px;}
  25. ul.menu li { list-style:none; float:left; padding:4px 16px 0px 16px; background:url(../../Images/menu_bgend.gif) no-repeat left; height:23px; color:#333; }
  26. #menu_1eft  { list-style:none;  padding:4px 16px 0px 10px; background-image:none; height:23px; margin-left:0px;width:50px; text-align:right; }
  27. #menu_right { list-style:none; padding:4px 0px 0px 16px; background:url(../../Images/menu_bgend.gif) no-repeat left; height:23px;width:50px; color:#333; }
  28.  
  29. #innerwrap { width:868px; margin-left:auto; margin-right:auto; padding-left:10px; }
  30. #footer_hr { width:868px;  border:none; height:3px; background-color:#505050; overflow:hidden; margin-top:20px; }
  31. #footer_wrap { width:100%; height:55px; background:url(../../Images/footer_mbg.gif) repeat-x top #f7d501; }
  32. #footer_inner { width:950px; height:55px; margin-left:auto; margin-right:auto; background:url(../../Images/footer_bg.gif) repeat-x; }
  33. #footer_links { width:820px; text-align:center; margin-left:auto; margin-right:auto; font-weight:bold; }
  34. #copyw { font-family: verdana; font-size: 10px;margin-left:auto; margin-right:auto; text-align:center; float:left; width:820px; margin-top:10px;}
  35.  
  36. /*Bottom of page*/
  37. #bot_l { margin-left:auto; margin-right:auto; width:820px;margin-top:-18px; height:64px; }
  38. #payments { margin-top:5px;float:left; width:300px; }
  39. #bot_r { float:right;  width:54px;}
  40.  
  41. /*OLD STYLES */
  42. .home_text{ float:left; width:630px; font-size:14px; }
  43. .latest_block{ margin-top:-20px; margin-left:15px; float:left; width:223px; font-size:13px;}
Thanks for your help!!
Last edited by drewjj; Sep 23rd, 2009 at 1:18 pm.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
drewjj is offline Offline
1 posts
since Sep 2009
Permalink
Sep 26th, 2009
0

Re: CSS Floating menu makes page jump to left only on certain pages

First of all, 0px is an invalid style attribute. Some browsers throw out all styles where a unit of measure is attached to a 0 value.

Second, as long as you define all of your sizes in pixels, you are going to have trouble. Different computers have different screen resolutions. Set your sizes in percentages or ems.

The page is jumping to the left because the entire menu can not render in the space provided.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Permalink
Sep 26th, 2009
0

Re: CSS Floating menu makes page jump to left only on certain pages

Click to Expand / Collapse  Quote originally posted by drewjj ...
Hi People, Hope some body can help I have been pulling my hair out over the last few days trying to figure this out!!

Problem: I have narrowed the problem down to a <div> with a 2 floating images and float <ul> <li> as my menu.

When the inner wrap under this float menu has a large amount of text in it makes the page jump to the left slightly, all the floats are cleared what ever I do I cannot seem to stop the page jumping on certain pages, the only way I can stop it is to take the float out of the <li>!

Here is the HTML:
<body>
<div id="wrapper">
          <div id="header">
            	<div id="header_top">
                		<img src="Images/header_tl.gif" border="0" style="float:left;"/> <div id="header_nav">
                    	TOP NAV TEXT
                    </div> <img src="Images/header_tr.gif" border="0" style="float:right;"/>
                  	<!-- Start Quick Search --> <form method="post" enctype="multipart/form-data" action="" name="quick_search" > <input type="hidden" name="search" value="1" /> <div id="quick_search"><input type="submit" id="search_but" value="   "/><div id="quick_sbox"><inputtype="text" name="search_q" id="quick_input" >" /></div></div></form> <!-- End Quick Search -->
                </div>
               
                <div id="header_mid"><img src="Images/logo.gif" border="0" style="float:left;margin-top:3px;" alt="logo"/> <div id="fade_mid"></div> <div id="print_phone">&nbsp; &nbsp; &nbsp;&nbsp;00000 <span class="endphone">000000</span></div>			<br/><br/><br/><div id="print_fax">&nbsp; 		&nbsp; &nbsp;&nbsp;00000<span class="endphone">777777</span></div></div>
                <div id="menu_bar">
                	<img src="Images/menu_bgl.gif" border="0" style="float:left;margin-top:0px;" alt="Menu"/><!-- colparte--><ul class="menu">
                		<li id="menu_1eft"><a href="?" class="whitelink">HOME</a></li><li><a href="#" class="whitelink">ONLINE CATALOGUE</a></li><li><a href="#" class="whitelink">HIRE</a></li><li><a href="#" class="whitelink">SALES</a></li><li><a href="#" class="whitelink">SERVICES</a></li><li><a href="#" class="whitelink">PARTS</a></li><li><a href="#" class="whitelink">TRAINING</a></li><li id="menu_right"><a href="#" class="whitelink">CONTACT</a></li>
                    </ul><img src="Images/menu_bgr.gif" border="0" style="float:right;margin-top:-1px;"  alt="GB Menu"/>
                    <div style="clear:both;"> </div>
                </div>
           </div>
           <div style="clear:both;"> <br/><br/><br/></div>
           <div id="innerwrap">
           <!-- Start Content -->
 			<div class="home_text">PAGE CONTENT IF THIS GOES OVER SAY 60 LINES IT MAKES THE PAGE JUMP</div><div class="latest_block"></div>
		   <!--End Content--><div style="clear:both;"><br/><br/></div></div>
    		 
<hr id="footer_hr"/><div id="footer_links">bottom menu</div><br/>
    	</div>
    <div style="clear:both;"></div>
    <div id="footer_wrap">
    	<div id="footer_inner"><img src="Images/footer_l.gif" border="0" style="float:left;" />
        <div id="copyw"> &copy; 2009-2010 
        <img src="Images/footer_r.gif" border="0" style="float:right;"  /></div>
        <div id="bot_l"> <img src="Images/cards.jpg" alt="Payment types we accept!" id="payment"/> 
 	  <img src="Images/fsb.gif"  id="bot_r"/> </div>
    </div>
</body>
Thanks for your help!!
Sorry - but this code contains structural errors.
And when a page has structural coding errors, it's rendering behavioral is completely unpredictable inconsistent and sometimes varies from browser to browser - even from browser window size to another, (etc...) making it impossible to trace the problem.
There are errors to be seen with a naked eye [underlined in red!]
There are possible wrong nesting elements and and closures too.

Do you have a hotlink to your page?
Reputation Points: 120
Solved Threads: 61
Posting Pro
Troy III is offline Offline
510 posts
since Jun 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: calculator help
Next Thread in HTML and CSS Forum Timeline: TD formatting not showing up in IE7





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC