...

View Full Version : IE/Firefox DIV alignment



Mr Carter
01-30-2007, 07:46 AM
Folks,

If anyone is available to help me with this, I would be very appreciative.

My CSS alignment is <perfect> in IE, but not so perfect in Firefox. I think it has something to do with IE setting automatic padding (i.e. not setting padding: 0 for elements that I don't want padding on), but obviously i'm not sure.

Here's the site (well, enough of it for you to get an idea):

www.sixth-fleet.com/zttb8xz

div.bodycontainer is, naturally, the div that contains all of the content.

My styles.css file is copied below:

body {
background-color: #000000;
text-align: center;
margin-top: 0px;
margin-left: 0px;
margin-height: 0px;
margin-width: 0px;
scrollbar-3dlight-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-base-color:#000000;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#9191ff;
scrollbar-highlight-color:#9191ff;
scrollbar-shadow-color:#000000;
scrollbar-track-color:#000000;
}

p.text {
font-family: verdana;
font-style: normal;
font-variant: bolder;
font-weight: normal;
font-size: 7.5pt;
color: #CDCDCD;
line-height: 100%;
word-spacing: normal;
letter-spacing: normal;
text-decoration: none;
text-transform: none;
text-align: justify;
}

p.date {
font-family: verdana;
font-style: normal;
font-variant: bolder;
font-weight: normal;
font-size: 6pt;
color: white;
line-height: 100%;
word-spacing: normal;
letter-spacing: normal;
text-decoration: none;
text-transform: none;
text-align: left;
padding-top: 2px;
}

p.ticker {
font-family: verdana;
font-style: normal;
font-variant: bolder;
font-weight: normal;
font-size: 6pt;
color: white;
line-height: 100%;
word-spacing: normal;
letter-spacing: normal;
text-decoration: none;
text-transform: uppercase;
text-align: center;
padding-top: 2px;
}

div.bodycontainer {
height: 600px;
width: 800px;
text-align: left;
margin-top: 5px;
}

div.intro {
height: 501px;
width: 600px;
text-align: left;
margin-top: 5px;
margin-left: 2px;
}

div.leftdiv {
height: 600px;
width: 145px;
float: left;
clear: left;
}

div.rightdiv {
height: 600px;
width: 620px;
float: left;
clear: right;
}

a:link {color: #CDCDCD; text-decoration: none;}
a:active {color: #CDCDCD; text-decoration: none;}
a:visited {color: #CDCDCD; text-decoration: none;}
a:hover {color: blue; text-decoration: none;}

Excavator
01-30-2007, 01:53 PM
Hello Mr Carter,
Try adding this to your CSS:

* {
margin: 0;
padding: 0;
}

Mr Carter
01-30-2007, 10:11 PM
Excavator,

That helped align some of the elements, however if you look here:

http://www.sixth-fleet.com/zttb8xz/lcars-html/departments/academy/lcars-html/manifest.htm

The spacing and such is still a little fubared in Firefox, whereas it's perfect in IE.

One obvious solution is to go redo *all* of the spacing, padding, lengths, etc., and test them in Firefox instead of IE, but it seems to me that if I did that, it would simply reverse the situation, and things would look screwed in IE instead.

Any further suggestions?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum