Jump to content

<ul> <li> Adjusting Page Width [SOLVED]


harvey2805
 Share

Recommended Posts

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

Edited by 25142805
Link to comment
Share on other sites

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

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

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?

Edited by ShadowMage
Link to comment
Share on other sites

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

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

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

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. Edited by 25142805
Link to comment
Share on other sites

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.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...