harvey2805 Posted August 18, 2011 Share Posted August 18, 2011 Hi all.First time poster. I have a site and once I add the ul and li tags, the page is moving about 10-15px to the left. I've tried to add css to #content ul to remove padding and margin but that isn't doing it. I also tried removing the list-style-type but that didn't work either. My CSS is the same for the other 60 pages and only one page where I add the ul and li into the content area is the page moving.(I use ul and li tags for the menu system too) Is there some inherent buffer or something I am missing here?Thanks Link to comment Share on other sites More sharing options...
ste Posted August 18, 2011 Share Posted August 18, 2011 Can you post your HTML and CSS? or preferably a link to the page online Link to comment Share on other sites More sharing options...
harvey2805 Posted August 18, 2011 Author Share Posted August 18, 2011 The site isn't live yet as I'm a bit of a perfectionist and while it does this with the list, it wont go live.The Code: <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="generator" content="Adobe Dreamweaver CS5.5"> <meta name="description" content="Web Design by DesignMe. Specialists in creating search engine friendly websites that conform to the W3.org standards."> <meta name="keywords" content="web design, search engine friendly, web standard compliant, bespoke website design, flexible, excellence"> <meta name="author" content="DesignMe"> <meta name="robots" content="ALL"> <link rel="stylesheet" href="styles/main.css" type="text/css" /> <link rel="shortcut icon" href="images/favicon.png"> <title>Search Engine friendly Web Design by DesignMe | Website Design</title> <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-21707078-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body> <div id="pageContainer"> <div id="navBar"> <ul> <li><a href="index.html">Home</a></li> </ul> <ul> <li><a href="services.html">Services</a> <ul> <li><a href="search_engine_optimisation.html">SEO</a></li> <li><a href="web_design.html">Web Design</a></li> <li><a href="seo_consultants.html">SEO Consultant</a></li> <li><a href="site_analysis.html">Site Analysis</a></li> </ul> </li> </ul> <ul> <li><a href="about_us.html">About Us</a> <ul> <li><a href="help_for_heroes.html">Help For Heroes</a></li> <li><a href="testimonials.html">Testimonials</a></li> <li><a href="partners.html">Partners</a></li> </ul> </li> </ul> <ul> <li><a href="guides.html">Guides</a> <ul> <li><a href="seo_guides.html">SEO</a></li> <li><a href="design_guides.html">Website Design</a></li> <li><a href="general_guides.html">General</a></li> </ul> </li> </ul> <ul> <li><a href="contact.html">Contact</a> <ul> <li><a href="mailing_list.html">Mailing List</a></li> </ul> </li> </ul> <ul> <li><a href="news.html">News</a></li> </ul> <br class="clearFloat" /> </div> <div id="header"> <h1><img src="images/webdesignheader.gif" alt="web design header"></h1> </div> <div id="sidebarA"> <div class="padding"> <h2>Web Design News</h2> <p>Creating sites that function well with search engines sounds simple enough but as more and more sites come online and search engine algorithms change, being one step ahead of the game can mean success or failure. By appling a range of techniques to ensure your site gets ranked well within these results is top priority for DesignMe.</p> <p>Search Engine Land recently released its version of the <a href="http://searchengineland.com/seotable">SEO periodic table</a> which outlines factors that determine search engine results and how we can help you get your site to those top spots on the search engine results pages. (SERP's)</p> <p>Google can't view images, Google doesn't index Keywords embedded in <a href="http://www.rainbodesign.com/seo-tips/top-10-myths.php#javascript">JavaScript</a>. You can get a "good looking" site without using these methods. Indexable content is where Google and other search engines are focusing their efforts. make sure your site has enough content and it will keep Google happy nad give your customers something to come back for.</p> <p>No longer are we restricted to certain fonts for web pages. In HTML5 options were introduced to enable developers to code in any font they wanted and offer the font to be downloaded from the site. Google has helped this along with more work into making more fonts available for web-safe use. Read the full article <a href="http://googlewebmastercentral.blogspot.com/2011/02/beyond-times-and-arial-new-web-safe.html">here.</a></p> </div> </div> <div id="content"> <div class="padding"> <h2>Web Design</h2> <p>DesignMe specialise in customised, bespoke website design, with a specific focus on producing <a href="search_engine_optimisation.html">search engine friendly</a> websites that will perform well with just ‘on page’ SEO. Many web design companies will not think of SEO when building their customers sites, they focus on ‘cool’ looking websites with animation, tables and unnavigable menus.</p> <p> Our main objective is to produce functional, user friendly websites that are both attractive and effective! All of the websites that we design are built to be fully web standard compliant. We aim to achieve excellence in everything we do and we always build our sites to the highest possible quality. By keeping up with current web standards we can design future proof websites that will work on all browsers and that are validated by w3.org. </p> <p> Some companies will register your website address in their name and not yours, this can cause you problems if you were ever to move your website to another provider. We register all of our clients domain names to them and will provide a certificate of ownership. We ensure that the websites we design mirror your company’s corporate image. We believe in consistency across all of your advertising and marketing, ensuring you can establish a highly recognisable brand which will be noticed and trusted within your industry. All of our clients are the full copyright holder of the website we have designed and all of its content.</p> <p>DesignMe do not employ ‘salesmen’, right from the start and throughout the entire process you will communicate directly with our web designer. Giving you the best advice, knowledge and also cutting down our costs meaning we can pass on further savings to you! We believe strongly in maintaining excellent relationships with all clients, even after the design process has been completed. We will always be more than happy to give you any advice we can as your business grows and should you require any major amendments or expansion to your site we will offer an extremely competitive pricing structure.</p> <p>We have an extremely flexible approach and understand that it is not always possible to communicate during normal working hours, taking this into consideration we ensure that emails are regularly monitored outside of standard office hours. </p> <br> <h2> Main Web Design Features: </h2> <ul> <li>Bespoke website designs, tailored to your requirements, no templates used </li> <li>Functional, user-friendly web design </li> <li>Free Domain Name </li> <li>Free Hosting </li> <li>Flexible communication outside of ‘normal office hours’ </li> <li>Technical Support </li> <li>All websites are fully web standard compliant and w3.org validated </li> <li>All websites built with SEO as as base </li> <li>Extremely competitive pricing for high quality services </li> </ul> </div> </div> <div id="footer"> <div id="altNavbar"> You are here: <a href="index.html">Home</a> > <a href="services.html">Services</a> > <a href="web_design.html">Web Design</a> > </div> Copyright © DesignMe </div> </div> </body></html> The CSS: body {font-family: Arial, Helvetica, Veranda, Sans-serif;font-size:12px;color:#666666;}html, body {margin:0;padding: 0;}.hidden {display:none; }#pageContainer {width:960px;margin:auto;}/* Main Navigation Bar *//* navBar DIV */#navBar { margin:0px; width:auto;}/* navBar list and sets line height */#navBar ul { margin:0px; padding:0px; line-height:30px;}/* navBar list removing list style left float and relative position. Also back ground color */#navBar li { margin:0px; padding:0px; list-style:none; float:left; position:relative; background:#fff;}#navBar ul li a { text-align:center; height:30px; width:115px; display:block; color:#666666; font-family:Arial, Helvetica, sans-serif; text-decoration:none; color:#666666; border:1px solid #0099CC;}#navBar ul ul { position:absolute; visibility:hidden; top:32px;}#navBar ul li:hover ul { visibility:visible; z-index:9999;}#navBar li:hover { background:#0099CC;}#navBar ul li:hover ul li a:hover { color:#fff; background:#666666;}#navBar a:hover { color:#fff;}.clearfloat { clear:both; margin:0px; padding:0px;}#navBar #holder ul li { display:inline;}/* Main Nav Bar END */#header {width:960px;height:200px;background:#fff;float:left;}#sidebarA {float:right;width:300px;line-height:18px;}#sidebarA .padding {padding:25px;}#sidebarA h2 {color:#0099CC;margin:0;padding:0;padding-bottom:15px;}#sidebarA h2#large {font-size:x-large; color:#0099CC;margin:0;padding:0;padding-bottom:15px;}#content {margin-right:300px;line-height:18px;}#content .padding {padding:25px;}#content h2 {color:#0099CC;margin:0;padding:0;padding-bottom:15px;}#content ul li { margin:0px; padding:0px; list-style-position:inside;}#content strong {color:#0099CC;}#content a {color:#0099CC;text-decoration:none;}#content a:hover {color:#666666;text-decoration:underline;}#footer {width:910px;height:50px;clear:both;font-size:10px;border:1px solid #0099CC;padding: 15px 25px;line-height:18px;}#footer a {color:#666666;text-decoration:none;}#footer a:hover {color:#0099CC;text-decoration:none;}#footer #altNavbar {width:910px;float:right;text-align:right;}h1 {margin:0;padding:0;}#content p {margin:0;padding:0;padding-bottom:15px;} Link to comment Share on other sites More sharing options...
ste Posted August 18, 2011 Share Posted August 18, 2011 You have removed the default margin from the list elements (LI's) but not the UL itself. Where you have #content ul li { margin:0px; padding:0px; list-style-position:inside;} That targets only the LI's within the UL Try changing it to #content ul, #content ul li { margin:0px; padding:0px; list-style-position:inside;} The comma separates the two Link to comment Share on other sites More sharing options...
harvey2805 Posted August 18, 2011 Author Share Posted August 18, 2011 Still does it, tried in IE, Chrome and Firefox, all the same. If I add a 1 word list to any other page it does the same thing, its definitely the ul/li tag. Link to comment Share on other sites More sharing options...
ShadowMage Posted August 18, 2011 Share Posted August 18, 2011 Are you referring to this list:<ul><li>Bespoke website designs, tailored to your requirements, no templates used </li><li>Functional, user-friendly web design </li><li>Free Domain Name </li><li>Free Hosting </li><li>Flexible communication outside of ‘normal office hours’ </li><li>Technical Support </li><li>All websites are fully web standard compliant and w3.org validated </li><li>All websites built with SEO as as base </li><li>Extremely competitive pricing for high quality services </li></ul>??What browser are you using? I tried your code with and without that list, and never noticed the page move at all... (FF5)EDIT: Oh, I see your list of browsers you tested. Missed that before. What versions of those browsers are you using? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 18, 2011 Share Posted August 18, 2011 text-indentul, li {text-indent:0;} Link to comment Share on other sites More sharing options...
harvey2805 Posted August 18, 2011 Author Share Posted August 18, 2011 I added the text-indent CSS and it has made no difference to the outcome of the page.Chrome v 13.0.782.112 mFirefox 5.0.1IE 9.0.8112.16421Anything else you need? Link to comment Share on other sites More sharing options...
ShadowMage Posted August 18, 2011 Share Posted August 18, 2011 Without a live link exhibiting the problem, I'm not sure what to tell you. I copied/pasted the code you posted above and tried it in FF5, Chrome 13, and IE 8 (I don't have access to 9) and I did not see the behavior you are describing. Link to comment Share on other sites More sharing options...
harvey2805 Posted August 18, 2011 Author Share Posted August 18, 2011 Compare it to this page if you can. <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="generator" content="Adobe Dreamweaver CS5.5"> <meta name="description" content="DesignMe is proud to assist the Help for Heroes charity by donating regularly. Do something great today and help!."> <meta name="keywords" content="help for heroes, charity, web design, search engine optimisation,"> <meta name="author" content="DesignMe"> <meta name="robots" content="ALL"> <link rel="stylesheet" href="styles/main.css" type="text/css" /> <link rel="shortcut icon" href="images/favicon.png"> <title>Help for Heroes - Charity | DesignMe SEO and Web Design</title> <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-21707078-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body> <div id="pageContainer"> <div id="navBar"> <ul> <li><a href="index.html">Home</a></li> </ul> <ul> <li><a href="services.html">Services</a> <ul> <li><a href="search_engine_optimisation.html">SEO</a></li> <li><a href="web_design.html">Web Design</a></li> <li><a href="seo_consultants.html">SEO Consultant</a></li> <li><a href="site_analysis.html">Site Analysis</a></li> </ul> </li> </ul> <ul> <li><a href="about_us.html">About Us</a> <ul> <li><a href="help_for_heroes.html">Help For Heroes</a></li> <li><a href="testimonials.html">Testimonials</a></li> <li><a href="partners.html">Partners</a></li> </ul> </li> </ul> <ul> <li><a href="guides.html">Guides</a> <ul> <li><a href="seo_guides.html">SEO</a></li> <li><a href="design_guides.html">Website Design</a></li> <li><a href="general_guides.html">General</a></li> </ul> </li> </ul> <ul> <li><a href="contact.html">Contact</a> <ul> <li><a href="mailing_list.html">Mailing List</a></li> </ul> </li> </ul> <ul> <li><a href="news.html">News</a></li> </ul> <br class="clearFloat" /> </div> <div id="header"> <h1><img src="images/h4hheader.gif" alt="help for heroes header"></h1> </div> <div id="sidebarA"> <div class="padding"> <h2>Help for Heroes News</h2> <p>Support Help for Heroes by purchasing their new magazine. You can order yours <a href="http://www.helpforheroes.org.uk/Magazine.html">here.</a></p> <p>Be part of something great. Get your bicycle out the shed and clean of the cobwebs. Take part in the <a href="http://www.helpforheroes.org.uk/challenges-2012-big-battlefield-bikeride.html">Help for Heroes Big Battlefield Bike Ride 2012</a> and raise money for great service men and women of our armed forces.</p> <p><a href="http://www.helpforheroes.org.uk/bryns-message-august-2011.html">The Tedworth House Recovery Centre</a> in Wiltshire now open for just over 1 month has already helped 36 injured members of our armed forces. Building continues and hopes to accomodate a full 50 people at once by next year. Currently the site only holds 24 residents. Why not get involved today and show your support for what our heroes do for us each and every day!</p> </div> </div> <div id="content"> <div class="padding"> <h2>Help for Heroes</h2> <p>For each new <a href="web_design.html">Web Design</a> contract, DesignMe have pledged to donate a portion of the total fee to the Help for Heroes charity. <a href="http://www.bmycharity.com/webservicesolutions">Help for Heroes</a>. </p> <p>This is a charity very close to the hearts of DesignMe as before setting up his own company, our Managing Director, Len Harvey , served in the British Army with the 1st Battalion the Staffordshire Regiment. Len believes that the Armed forces have been a major factor in where he is today, giving him disciple, dedication, ambition and focus. This is just one reason to why he is so passionate about giving back to such an amazing organisation. </p> <p>Help for Heroes was launched in October 2007 to facilitate direct, practical support to our current generation of servicemen and women who have been wounded, sick or injured during the current conflicts. The charity has funded a wide variety of projects including the £8m Rehabilitation Complex at Headley Court, a new £3.5m treatment centre for Combat Stress and the creation of a £6m Quick Reaction Fund which provides immediate support to the wounded and their families. </p> <p>Help for Heroes strives towards 100% efficiency, much like the servicemen themselves, and our company. Therefore, for every £1 donated, the full £1 goes directly to supporting our Servicemen and women. </p> <p>What greater feeling than knowing us helping you is actually you helping someone in need! The donations will be taken from your final payment and added to our bmycharity page so that our efforts can be tracked and measured.</p> <p>Thank you for your support.</p> <br> </div> </div> <div id="footer"> <div id="altNavbar"> You are here: <a href="index.html">Home</a> > <a href="about_us.html">About Us</a> > <a href="help_for_heroes.html">Help 4 Heroes</a> > </div> Copyright © DesignMe </div> </div> </body></html> Link to comment Share on other sites More sharing options...
ShadowMage Posted August 19, 2011 Share Posted August 19, 2011 Well, the good news is that I figured out the problem. It actually has nothing to do with the list. It has everything to do with the scrollbar. The first page you posted always had a scrollbar in my browser so it never shifted. The second page you posted did not have a scrollbar to start with. When I added the list, the page got long enough to require a scrollbar and the page shifted. I confirmed my suspicion by removing the list and shrinking my browser window until the scrollbar appeared. Sure enough, the page shifted to the left.The bad news is, I don't rightly know how to fix that. I know there's a solution but I just can't remember what it is. Link to comment Share on other sites More sharing options...
harvey2805 Posted August 19, 2011 Author Share Posted August 19, 2011 Ahhhhh, (lightbulb) I don't know how to fix it either, will Google it. Link to comment Share on other sites More sharing options...
harvey2805 Posted August 19, 2011 Author Share Posted August 19, 2011 Add overflow to the body CSS but it gives an ugly scrollbar on the right side on all pages in addition to the browser bar. Anyway to hide that or alternate methid to the above problem? Link to comment Share on other sites More sharing options...
ste Posted August 19, 2011 Share Posted August 19, 2011 have you tried overflow:hidden Link to comment Share on other sites More sharing options...
dsonesuk Posted August 19, 2011 Share Posted August 19, 2011 body, html {height:100%; } will always show a scrollbar, whether content larger than browser viewport area or not. Link to comment Share on other sites More sharing options...
harvey2805 Posted August 20, 2011 Author Share Posted August 20, 2011 body, html {height:100%; } will always show a scrollbar, whether content larger than browser viewport area or not.This didn't work for some reason?However after a quick think, changing it to html, body {height:110%; } fixed it and gave me the standard scroll bar on all pages.Thanks for all the help guys. If anyone does find out how to remove the scrollbar offset without making the false height could you inbox me or post here as I would love to do it another way.Thanks for all the help again. Link to comment Share on other sites More sharing options...
ste Posted August 20, 2011 Share Posted August 20, 2011 try html{overflow-y:scroll;} Link to comment Share on other sites More sharing options...
harvey2805 Posted August 20, 2011 Author Share Posted August 20, 2011 When I added the Overflow:Scroll in, it adds a second scroll bar to the page to long for the window and a single one for the rest. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 20, 2011 Share Posted August 20, 2011 By default body has margin of 10px, and by using height 100% for html, body you will end up with 100% height+20px which will cause scrollbar to appear. BUT! because you are using html, body {margin:0; padding:0;} there is nothing to extend height above 100%, so no scrollbar appears. so trybody,html{height:100%; margin: 1px 0; padding:0;}instead, 1px will produce a less noticeable result than using a percentage value.Edit: apparently you need at least 1px top and bottom for all browser to show scrollbar. Link to comment Share on other sites More sharing options...
harvey2805 Posted August 20, 2011 Author Share Posted August 20, 2011 Yeah, thats done it, dsonesuk. You were right with it being less noticeable than the 110% height. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.