CSS TheVertical Position Problem in IE

Page 1 of 1

4 Replies - 770 Views - Last Post: 27 March 2008 - 03:52 PM

#1 bmeisner  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 27-March 08

CSS TheVertical Position Problem in IE

Posted 27 March 2008 - 02:13 PM

The following code works Opera, Firefox, Safari and Netscape. But when I test it in IE the navigation buttons change their vertical position from where they should appear. What do I have to do to get the page to look the same in all browsers?


<!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" />
<title>Header and Horizantal Navaigation - JAS</title>
<style type="text/css">

#navagation {
	height: 194px;
	background-image: url(images/Banner.jpg);
	width: 800px;
	position:absolute;
	left: 0px;
	top: 0px;
}
#navagation ul {
	padding: 0px;
	list-style-type: none;
	margin-left: 190px;
}
#navagation ul li {
	display: inline;
}
#navagation ul li a {
	float: left;
	height: 6px;
	padding: 8px;
	text-decoration: none;
	font-size: 10px;
	color: #CC0000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin-top: 126px;
}
#navagation  ul  li a:hover {
	color: #FFFFFF;
}
#navagation ul li.current a:link {
	border-bottom-color: #CC0000;
	border-bottom-style: solid;
}

</style>
</head>
<body>
<div id="navagation">
  <ul type="disc">
	<li class="current"><a href="Horizonatl.html">Home</a></li>
	<li><a href="about.html">About Susie</a></li>
	<li><a href="services">Services</a></li>
	<li><a href="work">How It Works</a></li>
	<li><a href="start.html">Getting Started</a></li>
	<li><a href="testimonials.html">Testimonials</a></li>
	<li><a href="faq.html">FAQ</a></li>
	<li><a href="contact.html">Contact</a></li>
  </ul>
</div>
</body>
</html>
Attached Image

Is This A Good Question/Topic? 0
  • +

Replies To: CSS TheVertical Position Problem in IE

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3872
  • View blog
  • Posts: 11,405
  • Joined: 18-April 07

Re: CSS TheVertical Position Problem in IE

Posted 27 March 2008 - 02:25 PM

I am not seeing any difference between IE and FF with the page there. Are you sure it is not just the natural display of the browsers that is different? I mean they are separate programs that draw things just ever so slightly different. But as far as visual look they are virtually identical. You are never going to get a site looking EXACTLY to the microscopic level looking the same. That is why you have to plan your design with a little flexibility in mind. This isn't the world of print.

Can you perhaps take two screenshots of the same menu? one from FF and one from IE so we can see the difference.

Thanks! :)
Was This Post Helpful? 0
  • +
  • -

#3 bmeisner  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 27-March 08

Re: CSS TheVertical Position Problem in IE

Posted 27 March 2008 - 03:14 PM

View PostMartyr2, on 27 Mar, 2008 - 02:25 PM, said:

I am not seeing any difference between IE and FF with the page there. Are you sure it is not just the natural display of the browsers that is different? I mean they are separate programs that draw things just ever so slightly different. But as far as visual look they are virtually identical. You are never going to get a site looking EXACTLY to the microscopic level looking the same. That is why you have to plan your design with a little flexibility in mind. This isn't the world of print.

Can you perhaps take two screenshots of the same menu? one from FF and one from IE so we can see the difference.

Thanks! :)


Hope this helps. As you can see the nav buttons move up into the header space when using IE

Thanks


Attached Image Attached Image
Was This Post Helpful? 0
  • +
  • -

#4 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3872
  • View blog
  • Posts: 11,405
  • Joined: 18-April 07

Re: CSS TheVertical Position Problem in IE

Posted 27 March 2008 - 03:34 PM

I see it now, thanks for the pics.

Here is your answer.... Firefox apparently adds a margin to the top of the UL tag, IE doesn't. So how to solve it is specifying the actual top margin for the UL element so that both browsers know what to make the top margin.

#navagation ul {
	padding: 0px;
	list-style-type: none;
	margin-left: 190px;
	margin-top: 15px;
}


Here we added a 15px top margin to the UL element and that appears to solve the situation for both browsers. If you want to move it up or down, just adjust the margin-top property specified above.

Hope that solves your problem. :)
Was This Post Helpful? 0
  • +
  • -

#5 bmeisner  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 27-March 08

Re: CSS TheVertical Position Problem in IE

Posted 27 March 2008 - 03:52 PM

View PostMartyr2, on 27 Mar, 2008 - 03:34 PM, said:

I see it now, thanks for the pics.

Here is your answer.... Firefox apparently adds a margin to the top of the UL tag, IE doesn't. So how to solve it is specifying the actual top margin for the UL element so that both browsers know what to make the top margin.

#navagation ul {
	padding: 0px;
	list-style-type: none;
	margin-left: 190px;
	margin-top: 15px;
}


Here we added a 15px top margin to the UL element and that appears to solve the situation for both browsers. If you want to move it up or down, just adjust the margin-top property specified above.

Hope that solves your problem. :)



Works perfect! Thanks for your help.

This post has been edited by Martyr2: 27 March 2008 - 04:46 PM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1