Forum Moderators: not2easy

Message Too Old, No Replies

Help with some vertical alignment in IE and FF

IE and FF not displaying the same.

         

QuickFix

9:53 pm on Jan 29, 2005 (gmt 0)

10+ Year Member



I'm new to the forums (which are great btw) and I'm currently trying to convert my html4 to xhtml 1 transitional compliance. It's been a while since I've done much web work and I'm wondering if someone could help me out.

I'm using a container div to wrap my single vertical column and trying to get it to align flush to the top of the browser, but for some reason FF has some spacing issue that I can't figure out. (IE shows it as I'd like, flush with the top, but FF has like a 10px space before my div starts) I did some searching, but can't seem to find a solution that fits for my problem.

Here's the code I have to far:
(it's so simple that's why I can't figure out what's the deal)

HTML
====

<!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" xml:lang="en" lang="en">

<head>
<title>dan allison.com test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Daniel Allison" />
<meta name="description" http-equiv="description" content="Online portfolio website for Daniel Allison, a freelance Digital Artist focused on Interactive Entertainment." />
<meta name="keywords" http-equiv="keywords" content="Dan Allison, Daniel Allison, Digital Artist, 2D, 3D, Level Design, Game Design, Portfolio, Video Games, Games" />
<meta name="copyright" content="© 2003 Daniel Allison" />
<link href="onecss.css" rel="stylesheet" type="text/css" media=all />
</head>

<body>

<div id="container">

<h1>danallison.com</h1>

<p>Greetings fare internet citizen, you’ve reached the web station of Dan Allison, digital artist, gaming fiend, tech geek, and master of the kung fu grip. On virtual display for your viewing pleasure, is an assortment of hand picked gaming art for the sole purpose of career employment. Feel free to prod and poke to your hearts content and visit whenever humanly possible.</p>

</div>

</body>
</html>

CSS
===
body {
text-align: center;
background-image: url('scan_bg.gif');
margin: 0px;
padding: 0px
}

#container {
width: 710px;
margin: 0px auto;
padding: 0px;
text-align: left;
background-image: url('container_bg.gif')
}

h1 {
width: 710px;
height: 130px;
background-image: url('snow02.jpg');
background-repeat: no-repeat;
background-position: 5px 0px
}

Thanks for the help in advance. :-)

BonRouge

12:49 pm on Jan 30, 2005 (gmt 0)

10+ Year Member



Maybe it's the default padding/margins on the h1.

QuickFix

7:16 pm on Jan 30, 2005 (gmt 0)

10+ Year Member



Thanks BonRouge, that did the trick.