Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Position of block altered with IE7?

    Hello,

    I have a block menu within container. The menu appears in the correct position in IE8,Chrome 1.0.154.53, Firefox 3.0.5. However in IE7 it is positioned higher(neared top of the border).

    When I remove the width and height in the container the problem disappears?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html>
    <head>
    <title>Block Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #container {
    	text-align: left;
    	margin: 0 auto;
    	position: relative;
    	left:0px;
    	top:20px;
    	width:900px;
    	height:600px;
    	border-style: solid;
    	border-width: 1px;
    }
    #menuHome {
    	position:absolute;
    	left: 2px;
    	top: 2px;
    }
    #menuHome ul li {
    	display: block;
    	list-style: none;
    	font: 14px Verdana;
    }
    #menuHome a {
     color: #999999;
     text-decoration: none;
     list-style: none;
    }
    #menuHome a:hover {
     color: #000000;
    }
    </style>
    </head>
    <body>
    <div id="container"; margin-top: 0;>
      <div id="menuHome">
    <ul>
        	<li><a href="#" title="home">Home</span></a></li>
       	  <li><a href="#" title="services">Services</a></li>
            <li><a href="#" title="projects">Projects</a></li>
          <li><a href="#" title="testimonials">Testimonials</a></li>
       	  	<li><a href="#" title="contact">Contact</a></li>
      	</ul> 
      </div>
    </div>
    </body>
    </html>
    I am not very experienced using CSS, so any help would be much appreciated.

    Thanks in advance

  • #2
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Appologies, here is corrected code example>
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html>
    <head>
    <title>Block Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #container {
    	text-align: left;
    	margin: 0 auto;
    	position: relative;
    	left:0px;
    	top:20px;
    	width:900px;
    	height:600px;
    	border-style: solid;
    	border-width: 1px;
    }
    #menuHome {
    	position:absolute;
    	left: 2px;
    	top: 2px;
    }
    #menuHome ul li {
    	display: block;
    	list-style: none;
    	font: 14px Verdana;
    }
    #menuHome a {
     color: #999999;
     text-decoration: none;
     list-style: none;
    }
    #menuHome a:hover {
     color: #000000;
    }
    </style>
    </head>
    <body>
    <div id="container">
      <div id="menuHome">
    <ul>
        	<li><a href="#" title="home">Home</a></li>
       	  <li><a href="#" title="services">Services</a></li>
            <li><a href="#" title="projects">Projects</a></li>
          <li><a href="#" title="testimonials">Testimonials</a></li>
       	  	<li><a href="#" title="contact">Contact</a></li>
      	</ul> 
      </div>
    </div>
    </body>
    </html>

  • #3
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Give this a go:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html>
    <head>
    <title>Block Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    
    * {
    	margin:0;
    	padding:0;
    }
    
    #container {
    	text-align: left;
    	margin:20px auto 0;
    	position: relative;
    	width:900px;
    	height:600px;
    	border-style: solid;
    	border-width: 1px;
    }
    #menuHome {
    	position:absolute;
    	left: 2px;
    	top: 2px;
    }
    #menuHome ul li {
    	display: block;
    	list-style: none;
    	font: 14px Verdana;
    }
    #menuHome a {
     color: #999999;
     text-decoration: none;
     list-style: none;
    }
    #menuHome a:hover {
     color: #000000;
    }
    </style>
    </head>
    <body>
    
    	<div id="container">
    		<div id="menuHome">
    			<ul>
    				<li><a href="#" title="home">Home</a></li>
    				<li><a href="#" title="services">Services</a></li>
    				<li><a href="#" title="projects">Projects</a></li>
    				<li><a href="#" title="testimonials">Testimonials</a></li>
    				<li><a href="#" title="contact">Contact</a></li>
    			</ul> 
    		</div>
    	</div>
    
    </body>
    </html>
    Your problem was coming from the fact that different browsers have different defaults when it comes to adding margins and padding. Adding the code above (called the "universal reset") effectively "zeroes out" the defaults and allows all browsers to start from the same place as far as margins and padding are concerned.

    Also simplified a bit of your #container code.
    matt | design | blog

  • #4
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Thanks so much, got back home this evening with perfect answer to my problem. Great. Will read up about "universal reset".


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •