PDA

View Full Version : CSS displaying differently in all 4 browsers


nofx1728
06-14-2006, 05:22 PM
Very frustrating stuff. You can view the site here: http://home.bellsouth.net/p/s/community.dll?ep=16&ext=1&groupid=315619&ck=
*links don't work

Lets start with explorer.. Header is sized at 700px, container is sized at 700px. I have a 1px border going around the container. For some reason explorer is displaying a 10px gap between the end of header and the border. It's the only browser that is doing this (firefox, netscape, opera all display correctly.) Everything else in Explorer displays properly.

Netscape & Firefox:

For some reason #icright is being spaced down, it looks like an added paragraph or two is inserted at the top, but there is nothing there. The footer is being pushed up against the end of the content on the page, even though it is set to a 20px top-margin.

Opera:

For some reason #sundae <h6> is being aligned to the right of the page. It is set to align:center; and is properly displaying in the #div above it. Everything else is displaying properly.

Any help would be appreciated, and any information on how I can prevent this in the future would be greatly apprecaited. Everytime I use CSS I run into these problems across browsers.

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}

#container {
margin: 0px auto;
width: 700px;
border: #260200 1px solid;
color: #ffffff;
}

#header {
color: #FFFFFF;
}

#content {
color: #FFFFFF;
margin-top: 15px;
margin-bottom: 15px;
}

#pagetitle {
color: #00CCEE;
font-family:Georgia, "Times New Roman", Times, serif;
clear:both;
}

#pagetitle h1 {
color: #5d2d1f;
}

#pagetitle h2 {
color: #0099FF;
text-align: center;
}

#leftpix {
width: 100px;
color: #FFFFFF;
float: left;
margin-right:5px;
}

#chocolates {
color: #FFFFFF;
width: 600px;

}

#chocolates p {
font-family: Arial, Helvetica, sans-serif;
}

#chocleft {
width:190px;
color:#000000;
float:left;
margin-left: 5px;
margin-right: 5px;
}

#chocmid {
width: 190px;
color: #000000;
float: left;
margin-left: 5px;
margin-right: 5px;
}

#chocright {
width: 180px;
color: #000000;
float: left;
margin-left: 5px;
margin-right: 10px;
}

#icleft {
width: 320px;
color: #000000;
margin-left: 5px;
margin-right: 5px;
padding-left: 15px;
float: left;
}

#icright {
width: 340px;
color: #000000;
margin-left: 5px;
margin-right: 5px;
float: left;
}

#sundae {
width: 680px;
color: #000000;
margin:20px 10px 10px;
text-align:center;
}

#flavorsLeft {
width:220px;
color:#000000;
float:left;
margin-left: 5px;
margin-right: 5px;
}

#flavorsMid {
width: 220px;
color: #000000;
float: left;
margin-left: 5px;
margin-right: 5px;
}

#flavorsRight {
width: 220px;
color: #000000;
float: left;
margin-left: 5px;
margin-right: 10px;
}


#footer {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 85%;
color:#000000;
margin-top: 20px;
margin-bottom: 20px;
clear:both;
}

#footer a:visited {
color: #08AEE8;
}

#footer a:link {
color: #08AEE8;
}

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}

h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 40px;
color: #0099FF;
text-align:center;
}

h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 40px;
color: #0099FF;
text-alight:center;
}

h6 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 26px;
color: #0099FF;
text-align: center;
}

h3 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 26px;
color: #CC0000;
}

h4 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #CC0000;
margin-bottom:0px;
}

h5 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #0099FF;
margin-bottom:0px;
}

.pixleft {
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}

p chocolates {
padding: 0px;
margin: 0px;
}

.chocolates {
padding: 0px;
margin: 0px;
}

.bluetext {
font-size: 16px;
color: #0099FF;
font: Arial, Helvetica, sans-serif;
}

.redtext {
font-size: 16px;
color: #CC0000;
font: Arial, Helvetica, sans-serif;
}

.redhead {
font-size: 16px;
color: #CC0000;
font: Arial, Helvetica, sans-serif;
margin-bottom: 0px;
}

.bluehead {
font-size: 16px;
color: #0099FF;
font: Arial, Helvetica, sans-serif;
margin-bottom: 0px;
}

.icp {
padding: 0px;
margin: 0px;
font-size: 15px;
}

.bluenomarg {
font-size: 16px;
color: #0099FF;
font: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}

.flavorsBlue {
font-size: 16px;
color: #0099FF;
font: Arial, Helvetica, sans-serif;
margin-bottom: 0px;
text-align:center;
}

.flavorsRed {
font-size: 16px;
color: #CC0000;
font: Arial, Helvetica, sans-serif;
margin-bottom: 0px;
text-align:center;
}

.flavors {
margin: 0px;
padding: 0px;
text-align:center;
}

Thanks,

Nofx1728

dthomsen8
06-15-2006, 11:06 AM
I have a book on browser hacks and tricks which would be a big help for you.

If I can locate it, I will post the details here. Otherwise, you might try Amazon or your local B&N or Borders.

Beyond that general point, your code does not have a DOCTYPE. Add one, and perhaps some of your problems may disappear. Learn how to validate your code (HTML and CSS) at www.w3.org and other problems may disappear.

Most web developers today would tell you not to use FRAMESETS.

Let us know when you have made changes, and you will get more comments.

nofx1728
06-15-2006, 01:13 PM
I have a doctype, and i'm not using frames. That is something that bellsouth adds into the code itself. I just use bellsouth as a test site until the site is complete, then post it to the real server. Yea, if you know the name of that book definately post it, i'm struggling here :).

Thanks,

nofx1728

dthomsen8
06-21-2006, 01:37 AM
Yea, if you know the name of that book definately post it, i'm struggling here :).


CSS Hacks & Filters, Making Cascading Style Sheets Work, Joseph W. Lowery, Wiley Publishing, 2005.

Please understand that some web developers don't like the use of hacks and filters, and may oppose them in this forum.

Also, be careful with the conditional comments for various Internet Explorer versions. Testing for greater than 5.5 is not a good idea when version 7 is now in beta testing and will go into production use. Be specific.