Navigation jumped is put of place... help

jigsawsoul · March 29, 2010

Hey, my navigation menu on my website was sitting sweet and in the right place, I refreshed the page today and it seems to have jumped down a little but i can't seem to find out why at all. Can anyone spot the problem??

http://www.jigsawsoulmedia.com/project/public/index.php

Source Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<link rel="stylesheet" type="text/css" href="_css/stylesheet.css"/> 
	<!--[if lte IE 6]>
		<script type="text/javascript" src="_js/supersleight-min.js"></script>
	<![endif]-->
	<title>DigitalSoul</title> 
</head>
<body>
<div id="header"> 
	<div class="innerwaraper"> <div class="logo"><a href="#"><img src="_img/layout/LOGO.png" alt="" width="277" height="56" /></a></div> 

<div class="topblock"> 
<div class="fdetails">
	Currencies: <a href="#">change currency</a>
	<span>|</span> 
	Languages: <a href="#">change language</a>
</div> 
<div class="itemholder"> 
	<div class="item">
		Shopping Cart: <span><a href="#">( items)</a></span>

	</div>
	<div>
		Sub-Total: £0.00		</div>
</div> 
</div> 
<div id="menu"> 
<ul> 
	<li><a href="index.php">Home Page </a></li> 
        <li><a href="newproducts.php">New Products </a></li> 
        <li><a href="specials.php"> Specials </a></li> 
        <li><a href="faq.php"> FAQ</a></li> 
        <li><a href="contact.php"> Contact Us</a></li> 
        <li class="last"><a href="login.php"> Login In </a> </li> 
</ul> 

</div> 
  	
  	</div> 
</div> 

<div class="bodybg">  
	<div id="containner">

		<div id="leftbar"> <div class="CommHolder"> 
<h1>Search</h1> 
<div class="inputbg"><a href="#"><img src="_img/layout/searchicon.gif" alt="" width="23" height="19" /></a> 
	<input type="text" name="textfield" id="textfield" /> 
</div> 
</div> 
<div class="CommHolder"> 
<h1>Categories</h1> 
<div class="categories"> 
    	<ul> 
    	  
		<li><a href="categorie.php?id=1">Mac Laptops (3)</a></li>

      	
		<li><a href="categorie.php?id=2">Mac Desktops (2)</a></li>
      	
		<li><a href="categorie.php?id=3">PC laptops (1)</a></li>
      	
		<li><a href="categorie.php?id=4">PC Desktops (2)</a></li>
      	
		<li><a href="categorie.php?id=5">MP3 Players (2)</a></li>
      	    	</ul> 
</div> 
</div><div class="CommHolder"> 
<h1>Manufacturers</h1> 
    <select name="aa" class="dropme"> 
      <option>Please select</option> 
      <option>Item - 1</option> 
      <option>Item - 2</option> 
      <option>Item - 3</option> 
      <option>Item - 4</option> 
      <option>Item - 5</option> 
      <option>Item - 6</option> 
      <option>Item - 7</option> 
    </select> 

</div> 
<div class="CommHolder"> 
<div class="Boxholder"> 
	<div class="sBottom"> 
		<div class="sTop"> 
			<div class="girl"> 
				<h2>Support-line</h2> 
				<p class="num"> 0844 5616263</p> 
			</div> 
		</div> 
	</div> 
</div> 
</div>

<div class="CommHolder"> 
<div class="Boxholder"> 
	<div class="bBottom"> 
		<div class="bTop"> 
			<h2>ipsum lorem </h2> 
			<p> dolor sit amet vitaes</p> 
			<span>from £ 49.99</span>
		</div> 
	</div> 
</div> 

</div>

<div class="CommHolder"> 
<div class="Boxholder"> 
	<div class="bBottom"> 
		<div class="bTop"> 
			<h2>ipsum lorem </h2> 
			<p> dolor sit amet vitaes</p> 
			<span>from £ 49.99</span>
		</div> 
	</div> 
</div> 

</div>    		
    	</div> 

<div id="midcontain">

<div class="slidShow"> 
	<div class="btnread"> <a href="#">Read more</a></div> 
</div>

    <div class="divider"></div>
     

		<div class="postHoplder"> 
    			<div class="productName">Apple MacBook Pro</div> 
    			<div class="productDetailsPH">

      				<div class="fltlft"><img src="_img/products/macbookpro1.jpg" alt="" width="122" height="81" /></div> 
      				<div class="PicDetailsPH"> 
        				<p>The Apple MacBook Pro is powered by a fast and efficient 2.26 GHz Intel Core 2 Duo Processor and runs Apple's award-winning Mac OS X v10.6 Snow Leopard operating system. This model is both the first 13-inch MacBook Pro ever and th... <a href="product.php?id=1">read more</a></p> 
      				</div> 
      				<div class="payholderPH"> 
      					<a href="addtocart.php?id=1">Add to Cart</a> 
        				<p>£ 918.00</p> 
      				</div> 
    			</div>
		</div>


		<div class="postHoplder"> 
    			<div class="productName">Apple iMac</div> 
    			<div class="productDetailsPH-1">
      				<div class="fltlft"><img src="_img/products/imac1.jpg" alt="" width="122" height="81" /></div> 
      				<div class="PicDetailsPH"> 
        				<p>The Apple iMac is powered by the Intel Core 2 Duo Processor E7600 and comes with the advanced Mac OS X v10.6 Snow Leopard operating system. This all-in-one desktop computer also boasts a 500GB hard drive and 4GB of high-speed DDR3... <a href="product.php?id=2">read more</a></p> 
      				</div> 
      				<div class="payholderPH"> 
      					<a href="addtocart.php?id=2">Add to Cart</a> 
        				<p>£ 949.00</p> 
      				</div> 
    			</div>

		</div>

		<div class="postHoplder"> 
    			<div class="productName">Apple Mac Pro</div> 
    			<div class="productDetailsPH">
      				<div class="fltlft"><img src="_img/products/macpro1.jpg" alt="" width="122" height="81" /></div> 
      				<div class="PicDetailsPH"> 
        				<p>The Apple Mac Pro is powered by an Intel Xeon Processor W3520 and comes with Apple's Mac OS X 10.5 Leopard operating system. This high-performance workstation comes with a 640GB hard drive and 3GB of DDR3 EEC RAM, both greatly exp... <a href="product.php?id=3">read more</a></p> 
      				</div> 
      				<div class="payholderPH"> 
      					<a href="addtocart.php?id=3">Add to Cart</a> 
        				<p>£ 1669.00</p> 
      				</div> 
    			</div>

		</div>


</div> 


    	<div id="rightbar"> <div class="CommHolder"> 
<h1>Register</h1> 
<div class="categories"> 
    	<ul> 
    		<li><a href="login.php">Login</a> | <a href="register.php">Create Account</a></li>
    	</ul> 
</div> 

</div>
<div class="CommHolder"> 
<h1>Specials</h1> 
<div class="categories"> 
    	<ul> 
    	  
		<li><a href="categorie.php?id=1">Mac Laptops (3)</a></li>
      	
		<li><a href="categorie.php?id=2">Mac Desktops (2)</a></li>
      	
		<li><a href="categorie.php?id=3">PC laptops (1)</a></li>
      	
		<li><a href="categorie.php?id=4">PC Desktops (2)</a></li>

      	
		<li><a href="categorie.php?id=5">MP3 Players (2)</a></li>
      	    	</ul> 
</div> 
</div><div class="CommHolder"> 
  <h1>Reviews</h1> 
  <select name="a" class="dropme"> 
    <option>Please select</option> 
    <option>Item - 1</option> 
    <option>Item - 2</option> 
    <option>Item - 3</option> 
    <option>Item - 4</option> 
    <option>Item - 5</option> 
    <option>Item - 6</option> 
    <option>Item - 7</option> 
  </select> 

</div> 
<div class="CommHolder"> 
<h1>Popular tags</h1> 
<div class="categories">
	<span><a href="#">Printers</a></span>
	<span class="style3"><a href="#">MP3</a></span>
	<span><a href="#">Players</a></span>
	<span class="style2"><a href="#">Scanners</a></span>

	<span><a href="#">PDAs</a></span>
	<span><a href="#">Mice and <span class="style1">Trackballs</span></a></span>
	<span class="style2"><a href="#">Tablet PCs Mac</a></span>
	<span><a href="#">Laptops</a></span>
	<span><a href="#">PC</a></span>
	<span><a href="#">Laptops</a></span>

	<span><a href="#">Monitors</a></span>
	<span><a href="#">Mac</a></span>
	<span><a href="#">Desktops</a></span>
	<span class="style2"><a href="#">PC Desktops </a></span>
</div> 
</div> <div class="CommHolder"> 
<div class="Boxholder"> 
	<div class="bBottom"> 
		<div class="bTop"> 
			<h2>ipsum lorem </h2> 
			<p> dolor sit amet vitaes</p> 
			<span>from £ 49.99</span>

		</div> 
	</div> 
</div> 
</div>

<div class="CommHolder"> 
<div class="Boxholder"> 
	<div class="bBottom"> 
		<div class="bTop"> 
			<h2>ipsum lorem </h2> 
			<p> dolor sit amet vitaes</p> 
			<span>from £ 49.99</span>

		</div> 
	</div> 
</div> 
</div> 

<div class="CommHolder"> 
<div class="Boxholder"> 
    	<div class="bBottom"> 
            <div class="bTop imgSpac"> 
            	<a href="#"><img src="_img/layout/v1.gif" alt="" width="27" height="17" /></a>
            	<a href="#"><img src="_img/layout/v2.gif" alt="" width="24" height="17" /></a>
            	<a href="#"><img src="_img/layout/v3.gif" alt="" width="26" height="17" /></a>
            	<a href="#"><img src="_img/layout/v4.gif" alt="" width="26" height="17" /></a> 
              	<div class="clear"></div> 
            </div> 
	</div> 
</div> 

</div> 
    	</div> 

    	<div class="clear"> </div> 
  	</div> <div id="footer"> 
    <div class="fltlft">
    	Copyright © 2010 DigitalSoul   
    	  
    	<a href="#">Privacy Notice</a>
    	   |     

    	<a href="#">Conditions of Use</a>
    	   |     
    	<a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0</a> 
    </div> 
    <div class="fltrt"><a href="mailto:contact@digitalsoul.com">contact@digitalsoul.com</a></div> 
</div>   	
</div> 

</body> 
</html>

arbitter · March 29, 2010

Npt sure if this is the problem but in your css file

#menu { float:left; height:33px; margin-top:15px; * margin-top:20px;
line-height:32px; width:100%; }
* html #menu { float:left; height:33px; margin-top:20px; line-height:32px; width:100%; }
#menu ul li a:hover { display:block; height:32px; width:160px; float:left; color:#FFF; text-decoration:none; background:url(../_img/layout/hoverbg.gif) repeat-x; }

the height of the first one is 33px,, the rest is 32.

jigsawsoul · March 30, 2010

na the css is not the problem its something within the html thats the problem here, just can't see it, as it was fine then without editing the css file it jumped

arbitter · March 30, 2010

So it jumped after you made an adjustment in your html?

Sign In

Navigation jumped is put of place... help

Recommended Posts

jigsawsoul

Link to comment

Share on other sites

arbitter

Link to comment

Share on other sites

jigsawsoul

Link to comment

Share on other sites

arbitter

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information