...

View Full Version : CSS differences between IE7 and FF



dansmailman
08-01-2007, 04:32 PM
I'm currently making a website and depending on the browser I'm viewing the page in (IE7 or FireFox) the alignment of DIV tags is different. In IE7 it's lining up correctly but it's off in FireFox. Any suggestions?

BWiz
08-01-2007, 04:33 PM
I can't tell you anything without seeing you're code or a live example.

dansmailman
08-01-2007, 05:49 PM
In the HTML file the div tag is listed as:

<div class="pwdiv">
<h1>Text goes here</h1
</div>

In the CSS file the code is:

.pwdiv {
position: absolute;
width: 48em;
height: 30em;
top: 4em;
left: 10em;
background-color: #8B5A00;
color: white;
font-family: Times New Roman;
font-size: small;
filter:alpha(opacity=50);
opacity: 0.5;
z-index: 1;
}

Jutlander
08-01-2007, 06:06 PM
This looks the same on IE 7 and Firefox to me, except for the font-size, but you can adjust that like this:


.pwdiv h1 {
font-size: small;
}

EDIT: perhaps add this too, so the <h1> default margin is eliminated.


* { margin: 0; padding: 0; }

dansmailman
08-01-2007, 07:55 PM
the difference is the location of the div on the screen. If you add another element (like an image or something) and have it lined up in one browser, it's not lined up in the other.

Jutlander
08-01-2007, 08:04 PM
OK, got any code where this problem occurs? Generally it's not a good idea to position things absolute. Float them instead.

dansmailman
08-02-2007, 12:16 AM
I found out what was making it change location in firefox. When i set "font-size: small;" the position of the div element changes as well. Does anybody know what the reason for this is?

dansmailman
08-02-2007, 12:21 AM
Alright. I found a work-around. Instead of setting "font-size: small" for the DIV itself, I set <p> to have a smaller font size. I'd still be curious to why this would change the location of a div tag if anybody knows.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum