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

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 with a 2 floating images and float 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 !

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>

Here is the CSS:

@charset "utf-8";
html { margin:0px; padding:0px; margin-top:1px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; background-color:#f7d501; } 
body { padding:0px; margin:0px; background:url(../../Images/header_bg.gif) repeat-x top #FFF; background-color:#e9e9e9; }

/*Link Styles*/
.main_title{font-size:14px; margin-top:0px; color:#000000;} 
#wrapper { width:950px; margin-top:2px; margin-left:auto; margin-right:auto; background-color:#fff; }
#header { width: 950px; height:115px;  }
#header_top { width: 950px; height:41px; background:url(../../Images/header_tmid.gif) repeat-x;}
#header_nav { float:left; margin-top:8px; width:550px;}
#fade_mid{float:left; background-color:#FFF;margin-left:135px;width:270px;}

#quick_search { float:right; margin-top:5px; width:250px;} 
#quick_sbox { margin:0; height:22px; width:188px; background:url(../../Images/search_input.gif) no-repeat top; float:right; margin-right:7px; }
#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; }
#search_but {   border:0px;  background:url(../../Images/search_but.gif) no-repeat ; width:25px; height:25px; float:right; }

#header_mid { width:875px; height:74px; margin-left:auto; margin-right:auto; }
#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;}
#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;}
.endphone{ color:#2d2700; }

#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; }
ul.menu { color:#FFF; font-size:17px; font-weight:bold;margin:0px; padding:0px; padding-top:1px;}
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; }
#menu_1eft  { list-style:none;  padding:4px 16px 0px 10px; background-image:none; height:23px; margin-left:0px;width:50px; text-align:right; }
#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; }

#innerwrap { width:868px; margin-left:auto; margin-right:auto; padding-left:10px; }
#footer_hr { width:868px;  border:none; height:3px; background-color:#505050; overflow:hidden; margin-top:20px; }
#footer_wrap { width:100%; height:55px; background:url(../../Images/footer_mbg.gif) repeat-x top #f7d501; }
#footer_inner { width:950px; height:55px; margin-left:auto; margin-right:auto; background:url(../../Images/footer_bg.gif) repeat-x; }
#footer_links { width:820px; text-align:center; margin-left:auto; margin-right:auto; font-weight:bold; }
#copyw { font-family: verdana; font-size: 10px;margin-left:auto; margin-right:auto; text-align:center; float:left; width:820px; margin-top:10px;}

/*Bottom of page*/
#bot_l { margin-left:auto; margin-right:auto; width:820px;margin-top:-18px; height:64px; }
#payments { margin-top:5px;float:left; width:300px; }
#bot_r { float:right;  width:54px;}

/*OLD STYLES */
.home_text{ float:left; width:630px; font-size:14px; }
.latest_block{ margin-top:-20px; margin-left:15px; float:left; width:223px; font-size:13px;}

Thanks for your help!!

drewjj

Newbie Poster

1 post since Sep 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

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.

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

2 Years Ago

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 with a 2 floating images and float

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

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"><strong><inputtype</strong>="text" name="search_q" id="quick_input" <strong>>"</strong> /></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 containsstructural 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?

Troy III

Practically a Master Poster

609 posts since Jun 2008

Reputation Points: 120

Solved Threads: 80

This question has already been solved

You