Positions work in IE...but not in Firefox [Archive]

Click to See Complete Forum and Search --> : Positions work in IE...but not in Firefox

tenniskid493

02-16-2006, 09:50 AM

Im using positioning to place objects around my page and everything works fine in IE...but when you go into Firefox, some objects get shifted further down on the page.

Here's what it looks like in Firefox (screenshot)
http://omnimaga.dyndns.org/index.php?act=Attach&type=post&id=6383256

Here's what it looks like in IE (screenshot)
http://i24.photobucket.com/albums/c25/tenniskid493/iebattle.jpg

Does anyone know why this would be happening and what I can do to fix it.

toicontien

02-16-2006, 09:55 AM

Actually, the positions work in Firefox and not in Internet Explorer. Without seeing your code (which you should always include with your post or link to), I'd say there is a top margin on the white text that you need to get rid of.

Internet Explorer has a behavior that's a throwback to the table-based layout days. The first element inside a block element or positioned element does not have a top margin. This goes against the CSS standards, hence the "correct" behavior in Internet Explorer is actually the incorrect behavior.

tenniskid493

02-16-2006, 10:12 AM

sorry about not including the code...here it is

h4.name1
{
position:absolute;
left:40px;
top:330px;
}
h4.element1
{
position:absolute;
left:40px;
top:350px;
}
h4.level1
{
position:absolute;
left:40px;
top:370px;
}
h4.health1
{
position:absolute;
left:40px;
top:390px;
}
h4.magic1
{
position:absolute;
left:40px;
top:410px;
}
h4.name2
{
position:absolute;
left:400px;
top:330px;
}
h4.element2
{
position:absolute;
left:400px;
top:350px;
}
h4.level2
{
position:absolute;
left:400px;
top:370px;
}
h4.health2
{
position:absolute;
left:400px;
top:390px;
}

h4.magic2
{
position:absolute;
left:400px;
top:410px;
}
<html>

<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link>

<title>Choose Spell Test Layout</title>
</head>

<body bgcolor="#000000" text="#FFFFFF">
<img src="beginning.gif">
<img src="http://i24.photobucket.com/albums/c25/tenniskid493/statbackground.jpg" border="0" height="125" width="570">
<br>
<h4 name="name1" id="name1" class="name1">Name: Garet</h4><h4 name="element1" id="element1" class="element1">Element: Fire</h4><h4 name="level1" id="level1" class="level1">Level: 25</h4><h4 name="health1" id="health1" class="health1">Health: 500</h4><h4 name="magic1" id="magic1" class="magic1">Magic: 275</h4>
<h4 name="name2" id="name2" class="name2">Name: Enemy</h4><h4 name="element2" id="element2" class="element2">Element: Water</h4><h4 name="level2" id="level2" class="level2">Level: 18</h4><h4 name="health2" id="health2" class="health2">Health: 375</h4><h4 name="magic2" id="magic2" class="magic2">Magic: 180</h4>
<img src="http://i24.photobucket.com/albums/c25/tenniskid493/attack.gif">
<img src="http://i24.photobucket.com/albums/c25/tenniskid493/defend.gif">
<img src="http://i24.photobucket.com/albums/c25/tenniskid493/magic.gif">
<img src="http://i24.photobucket.com/albums/c25/tenniskid493/item.gif"><br>

</body>

</html>

The top is my stylesheet and the bottom is my main program. I deleted all the scripts that I had in there to make it easier to read. How would I go about deleting the top margin of the text like you said??? Also...would it work if I gave everything absolute positions...including the main image and the stat background???

toicontien

02-16-2006, 11:09 AM

The name attribute is only used for naming form elements. It's an invalid attribute for any other tags. The ID attribute is used to uniquely identity one HTML tag, so that's all you need. To remove the top margin, we only need to adjust several classes in your CSS, it seems.

.name1,
.element1,
.level1,
.health1,
.magic1 {
margin-top: 0;
}

And actually, the more I look at your page, the more it needs a complete markup and CSS overhaul. You're making things far more complicated than they need to be. You don't need any absolute positioning at all. I'll whip something up when I'm on lunch break at work in a couple hours.

tenniskid493

02-16-2006, 11:45 AM

thanks for the help on the name and the margin. Everything worked fine. It works for me like this but if you think there'd be a better way to do it, then I'm open to all ideas. I'm pretty new to CSS so I welcome all the help that I can get.

ray326

02-16-2006, 03:16 PM

You need a valide doctype on the page to take IE out of quirks mode.