Yes, another IE/Firefox issue...

[Sithhar]

I'm sure this has been discussed a thousand times, but I couldn't find any fixes on the forum that worked for me (Being newb at
CSS dosent help either) But I'm having a minor issue. First I'm using Dreamweaver 8 and the layout looks perfect, but previewed in FF my main layer is bigger than in Dreamweaver or IE6.

Here's the layer code in my CSS file:


body{ background-color: white; font-family:Arial, Helvetica, sans-serif; font-size:14px; }

h1 { font-family: "Times New Roman", Times, serif; font-size:32px; font-weight:bold;}
h2 { font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold }

#Layer1{
position:absolute;
width:640px;
z-index:1;
left: 128px;
top: 257px;
background-color: #F5F0EB;
border: 1px solid #000000;
padding-left: 10px;
padding-right: 10px;
height: 1799px;}

#Layer2{
position:absolute;
width:108px;
height:142px;
z-index:2;
left: 11px;
top: 137px;
border: 1px solid #000000;
background-color: #F9F9F9;
}

#Layer3{
position:absolute;
width:757px;
height:65px;
z-index:3;
left: 11px;
top: 65px;}

#Layer4 {
position:absolute;
width:638px;
height:119px;
z-index:4;
left: 128px;
top: 137px;
border: 1px solid #000000;}

#Layer5{
position:absolute;
width:108px;
z-index:5;
left: 11px;
top: 286px;
border: 1px solid #000000;}


Layer1 is what I'm having a problem with, everything else is fine. I'm using one <div> with several <p> statements and one <h1> statement. if those matter.

Any advice would be great, thanks :)

Jess

[blm126]

What do you mean by "bigger"? Also a demo page would help us a lot more than the CSS. If that is not possible we will probably need the HTML to.

[Sithhar]

Sorry about that - Apon further tinkering I've come to the conclusion that the cause of this is because of the Padding. My Layer1 is where my text is and I put a 10px padding on the left and right sides so the text wasn't hugging the border. IE6 see's this fine, but Firefox makes Layer1 larger than the px setting I've entered (639) it streches the right side out another 20-30px. I put up a page so you can see:

http://sithhar.googlepages.com/test.html

This is the updated CSS source (its changed since I originally posted)


/* CSS Document */

body{ background-color: white; font-family:Arial, Helvetica, sans-serif; font-size:14px; }

h1 { font-family: "Times New Roman", Times, serif; font-size:32px; font-weight:bold;}
h2 { font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold }

#Layer1{
position:absolute;
width:639px;
z-index:1;
left: 128px;
top: 256px;
background-color: #F5F0EB;
border: 1px solid #000000;
height: 1799px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 0px;
padding-top: 0px;
}

#Layer2{
position:absolute;
width:108px;
height:142px;
z-index:2;
left: 11px;
top: 137px;
border: 1px solid #000000;
background-color: #F9F9F9;
}

#Layer3{
position:absolute;
width:757px;
height:65px;
z-index:3;
left: 11px;
top: 64px;}

#Layer4 {
position:absolute;
width:639px;
height:119px;
z-index:4;
left: 128px;
top: 137px;
border: 1px solid #000000;}

#Layer5{
position:absolute;
width:108px;
z-index:5;
left: 11px;
top: 286px;
border: 1px solid #000000;}

[Sithhar]

Well, it appears I fixed it by adding a Transitional Doctype and re-adjusting my layer width :P

[BLiZZaRD]

First I'm using Dreamweaver 8


The root of all your problems lies within...

[Sithhar]

The root of all your problems lies within...

Well, In this case - Dreamweaver put the doctype code in, but I erased all the template starting code and started from a blank HTML page, so I guess it was my fault :P

[Twey]

The root of all your problems lies within..."The road to Hell is paved with absolute positioning."

[BLiZZaRD]

Rotf! :D