help with vertical alignment

ubonline

12-17-2010, 02:18 PM

Hi, I am having touble with vertical alignment in IE vs Firefox.

In the header of my blog, I have links that appear inside an image. In Firefox the links are centered vertically, but in IE they move to the top. I've tried changing the padding, but can't get it to work right in both at the same time. How do I get them centered vertically in both IE and Firefox?

Here is my code:

<div style="clear: both; margin:0 auto; "></div>

<div style="background-image: url(http://www.mysite.com/images/sidebar_center.jpg); border: #000000 1px solid; height: 30px; width: 850px; padding: 6px; margin: 0px auto; font-size: 11px; ">
<p><font face="verdana" color="#ffffff">
<a href="http://www.mysite.com.com/"><font color="#ffffff">Home</font></a>  |  
<a href="http://www.mysite.com.com/blog/"><font color="#ffffff">Blog</font></a>  |  
<a href="http://www.mysite.com/contact/"><font
color="#ffffff">Contact</font></a>  |  
</font></p>
</div>

Any help is appreciated.

Rowsdower!

12-17-2010, 04:36 PM

We need more to go by than this. Really, we need all of your code and all of your images. In other words, we could use link to your test page! :D

Without seeing the rest of what you have here are a couple of possible issues that might be at play:

1: IE and FF have different default padding and margins for different elements. Try a "universal reset" (as seen in my sig here) and then style from the resultant state.

2: IE and FF deal with vertical margins with parent and adjacent elements a bit differently. IE will tend to collapse margins whereas FF will tend not to. Look into "collapsing margins" to see what I mean.

If you can give us a link to the page you are dealing with we can get more precise in our advice.

Excavator

12-17-2010, 07:08 PM

Hello ubonline,
A single line of text can be vertically centered with line-height. Try it like this - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {background: #f63;}
#header {
width: 850px;
margin: 50px auto;
padding: 0;
background: #cc0 url(http://www.mysite.com/images/sidebar_center.jpg);
border: 1px solid #000;
font: 11px Verdana, Geneva, sans-serif;
color: #fff;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<p>
<a href="http://www.mysite.com.com/">Home</a>
  |  
<a href="http://www.mysite.com.com/blog/">Blog</a>
  |  
<a href="http://www.mysite.com/contact/">Contact</a>
</p>
</div>
</body>
</html>

ubonline

12-20-2010, 01:58 AM

Excavator, adding a line height simply flipped the problem.

Rowsdower, here is my page: http://www.debt-tips.com/blog

thanks