Member Avatar for 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>

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!!

Edited by drewjj because: n/a
  • 3 Contributors
  • 2 Replies
  • 106 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Troy III
Member Avatar for MidiMagic

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.

Member Avatar for Troy III

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">[B]<inputtype[/B]="text" name="search_q" id="quick_input" [B]>"[/B] /></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?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.