 |  |  |  |  |  |  |  |
CSS Floating menu makes page jump to left only on certain pages
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
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:
Here is the CSS:
Thanks for your help!!
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)
HTML and CSS Syntax (Toggle Plain Text)
Last edited by drewjj; Sep 23rd, 2009 at 1:18 pm.
•
•
Join Date: Jan 2007
Posts: 3,203
Reputation: 
Solved Threads: 164
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.
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.
Daylight-saving time uses more gasoline
•
•
•
•
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:
Thanks for your help!!<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"> 00000 <span class="endphone">000000</span></div> <br/><br/><br/><div id="print_fax"> 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"> © 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>
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?
 |
Similar Threads
- How to get MS word document page settings and number of pages using JavaScript? (JavaScript / DHTML / AJAX)
- multiple classes in IE:not working (JavaScript / DHTML / AJAX)
- Import Menu in home page (Site Layout and Usability)
- Pagination in Php (PHP)
- PHP programmer for browser RPG (Project Partners Wanted)
- Front-End Developer with ASP.net needed!!! (Web Development Job Offers)
- CSS driven menu ie6 vs firefox... (JavaScript / DHTML / AJAX)
- Pagination Help (PHP)
- Easy drop down menu? (JavaScript / DHTML / AJAX)
- Highlight the text menu if on current page (JavaScript / DHTML / AJAX)
Other Threads in the HTML and CSS Forum
- Previous Thread: calculator help
- Next Thread: TD formatting not showing up in IE7
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest HTML and CSS Posts
- Today's Posts
- Unanswered Threads
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
