CSS Forum

**dlusiondone** · 04-28-2009, 12:09 PM

Hi all,

Im getting two different results when viewing my page in IE7 & FF3.

The floating element is higher on the y axis in FF but perfect in IE. Not sure how to fix it.

Code is as follows:

#mainFlash
{
float: left; position: relative; left: 29%; display: inline; background-color:#0033CC; width: 712px; height: 710px; margin-top: 3%;
}

Any suggestions? Thanks in advance.

**LadynRed** · 04-28-2009, 01:12 PM

Lets see the rest of the code. Those few lines do not operate independently, so just providing that one code snippet isn't all that useful.

**LoganKonlan** · 02:09 PM

It's important to begin your CSS file with a clean slate. Basically starting all browsers with the same information. I use the following code at the beginning of all CSS files.

html,body,div,span,applet,object,iframe,h1,h2,h3,h 4,h5,h6,p,pre,a,abbr,acronym,address,big,cite,code ,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike ,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset, form,label,legend,table,caption,tbody,tfoot,thread ,tr,th,td {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
font-weight:normal;
}

This alleviates many annoying and frustrating headaches. Taking your code, making a basic webpage and adding a border so I can see what's happening, then adding the above snippet to the CSS of that new page I create shows NO difference in IE7 and FF. FOR ME. You may have other issues, but it worked with the information you provided.
Prior to adding the code and just using the #mainFlash divide, I saw that FF and IE7 rendered the divide differently as you described.

Hope that helps.

**LadynRed** · 04-28-2009, 02:55 PM

You cannot possibly know what's REALLY going on w/o seeing ALL of the code.

The css reset is a good idea, but how do you know he/she hasn't already done it ? You can't - we don't have enough information.

**LoganKonlan** · 04-28-2009, 03:56 PM

You're completely right, but it was fun and since everyone has been so NICE & HELPFUL to me, I thought I'd put a little effort into the solution.

Besides, maybe that's as far as she/he got.

Viewing in FF and IE7 this renders differently.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>

<style>
#mainFlash {
float: left;
position: relative;
left: 29%;
display: inline;
background-color:#0033CC;
width: 712px;
height: 710px;
margin-top: 3%;
border: 1px solid red;
}
</style>

</head>
<body>
<div id="mainFlash"></div>
</body>
</html>
-------------------------------------
Then THIS renders the same.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
html,body,div,span,applet,object,iframe,h1,h2,h3,h 4,h5,h6,p,pre,a,abbr,acronym,address,big,cite,code ,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike ,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset, form,label,legend,table,caption,tbody,tfoot,thread ,tr,th,td {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
}
#mainFlash {
float: left;
position: relative;
left: 29%;
display: inline;
background-color:#0033CC;
width: 712px;
height: 710px;
margin-top: 3%;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="mainFlash"></div>
</body>
</html>

If it's not your solution, as LadyinRed makes clear, we need more info.