View Full Version : CSS differences between IE7 and FF

08-01-2007, 03: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?

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

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

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

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;
opacity: 0.5;
z-index: 1;

08-01-2007, 05: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; }

08-01-2007, 06: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.

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

08-01-2007, 11:16 PM
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?

08-01-2007, 11:21 PM
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.