Extra navigation bottom margin in ie and safari on hover

HTML & CSS
1

Hi all,

I have a navigation bottom margin in ie and safari on hover which is not wanted. It shows ok in chrome and firefox, so i must be missing something.

Here is the code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom Upholstery</title>
<style>
html, body {
margin:0;
padding:0;
}
body {
background-image:url('images/header.png');
background-repeat:repeat-x;
}
#header{
width:100%;
height:168px;
}

#header #tel{
float:left;
margin-top:40px;
padding-bottom:10px;
margin-left:450px;
font-size:24px;
color:#996633;
}
#header #share{
float:left;
margin-top:45px;
margin-left:110px;
font-size:12px;
}
#header #name{
float:left;
width:550px;
margin-top:-30px;
margin-left:280px;
font-size:26px;
letter-spacing:8px;
text-align:center;
background-color:#996633;
color:#fff;
}
#header #social_media{
float:right;
margin-right:140px;
margin-top:-30px;
}
#contact{
position:fixed;
top:0;
right:0;
}
ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute;
top:135px;
left:150px;
}
li{
float:left;
}
a{
display:block;
padding:7px 10px 6px 10px;
color:#fff;
text-decoration:none;
}
a:hover{
background-color:#663300;
}
#wrapper1{
margin:0 auto;
width:1100px;
}
</style>
</head>
<body>
<div id="header">
<p id="tel">TEL: 0115 9254041 0R 0115 9251298</p>
<p id="share">SHARE:</p>
<p id="name">CUSTOM UPHOLSTERY LTD</p>
<div id="social_media">
<img src="images/facebook.png" width="53" alt="facebook.png">
<img src="images/twitter.png" width="50" alt="twitter.png">
<img src="images/Linked-In.png" width="53" alt="Linked-In.png">
</div>
</div>
<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Made To Measure Curtains</a></li>
		<li><a href="#">Made To Measure Blinds</a></li>
		<li><a href="#">Upholstery/Re-Upholstery</a></li>
		<li><a href="#">Contact Services</a></li>
		<li><a href="#">Testimonials</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Contact Us</a></li>
</ul>
<img id="contact" src="images/contact-link.png" alt="contact-link.png">
<div id="wrapper1">
<img src="images/main-image.jpg" width="1100" alt="main-image.jpg">
</div>
</body>
</html>
2

Two requests:

(1) When you post code in a message, please enclose the code within [noparse]

...

[/noparse] tags. Doing so allows the code to retain its formatting which makes it much more readable. It also puts the code in a scrolling box which does not take up as much vertical space in the post.

Please click the link in the bottom of my post and read our instructions for posting code.

(2) Can you please post a screen shot showing how the page is supposed to look? We cannot see the images and the code does not include image sizes so we cannot “roll our own” to fit the space. A full rez screen shot would help.

At first glance, the use of positioned elements is probably throwing a monkey wrench into the layout of the page. The hefty margins, some negative, support that probability.

If your code is on a server, a link to the site would be helpful, too.

Your code is impressively valid :slight_smile:

Out of curiosity, why do you use IDs instead of classes?

This is a screen shot of how your code looks in Firefox to me. I added the blue background because the white menu letters were invisible against the page without a background image.

3

Thanks for the reply ronpat, here is the screenshot of what i mean, its the first time i have attempted this so i am not sure if it will show up correctly.

Here is another attempt at the code.


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom Upholstery</title>
<style>
html, body {
margin:0;
padding:0;
}
body {
background-image:url('images/header.png');
background-repeat:repeat-x;
}
#header{
width:100%;
height:168px;
}

#header #tel{
float:left;
margin-top:40px;
padding-bottom:10px;
margin-left:450px;
font-size:24px;
color:#996633;
}
#header #share{
float:left;
margin-top:45px;
margin-left:110px;
font-size:12px;
}
#header #name{
float:left;
width:550px;
margin-top:-30px;
margin-left:280px;
font-size:26px;
letter-spacing:8px;
text-align:center;
background-color:#996633;
color:#fff;
}
#header #social_media{
float:right;
margin-right:140px;
margin-top:-30px;
}
#contact{
position:fixed;
top:0;
right:0;
}
ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute;
top:135px;
left:150px;
}
li{
float:left;
}
a{
display:block;
padding:7px 10px 6px 10px;
color:#fff;
text-decoration:none;
}
a:hover{
background-color:#663300;
}
#wrapper1{
margin:0 auto;
width:1100px;
}
</style>
</head>
<body>
<div id="header">
<p id="tel">TEL: 0115 9254041 0R 0115 9251298</p>
<p id="share">SHARE:</p>
<p id="name">CUSTOM UPHOLSTERY LTD</p>
<div id="social_media">
<img src="images/facebook.png" width="53" alt="facebook.png">
<img src="images/twitter.png" width="50" alt="twitter.png">
<img src="images/Linked-In.png" width="53" alt="Linked-In.png">
</div>
</div>
<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Made To Measure Curtains</a></li>
		<li><a href="#">Made To Measure Blinds</a></li>
		<li><a href="#">Upholstery/Re-Upholstery</a></li>
		<li><a href="#">Contact Services</a></li>
		<li><a href="#">Testimonials</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Contact Us</a></li>
</ul>
<img id="contact" src="images/contact-link.png" alt="contact-link.png">
<div id="wrapper1">
<img src="images/main-image.jpg" width="1100" alt="main-image.jpg">
</div>
</body>
</html>

as you have mentioned the id’s instead of classes, i know i should be using classes, it’s just a bad habit that i need to escape from.

4

Also you mention the hefty and negative margins, how would you advise me to position the elements in the header.