Minor? Firefox Compatibility Issue

Minor? Firefox Compatibility Issue (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

Mehdi -> Minor? Firefox Compatibility Issue (8/14/2007 10:57:17)

I've overhauled one of my websites and have two basic templates that I will use for all new content :

http://soccer-europe.com
http://soccer-europe.com/review.html

Problem is the new content doesn't display correctly in Firefox or IE7 (so I've been told) though is 100% valid and displays correctly in IE6. The center and container tags appear to be the problem.

Here's the complete css :

* {
margin: 0;
padding: 0;
}

body {
background-color: #000000;
color: #000000;
font-family: Trebuchet MS, Verdana, Tahoma, Arial, sans-serif,;
font-size: 14px;
line-height: 19px;
}

a {
color: #000000;
}

a:hover {
text-decoration: none;
}

p {
margin-bottom: 8px;
}

img {
  border: 0px;
}

#photor1 {
float: left;
padding-right: 10px;
}

#photor2 {
float: right;
padding-left: 10px;
}

#cap {
clear:both;
}

#cap2 {
clear:both;
}

div.photos
{float:left; 
margin-right:70px;
}

div.photos p
{
text-align : left; margin-left: 5px;
}

.photo1
{float:left; 
margin-right:15px;
}

.photo2
{float:right; 
margin-right: 0px;
}

.photo3
{float:left; 
margin-left:0px;
}

div.photos p
{
text-align : left; 
margin-left: 5px;
}

.spacer
{clear:both;
margin-top:10px;
}

#center{
height:20px;
width: 200px;
margin-left:auto;
margin-right:auto;
}

#container {
background-color: #fff;
width: 800px;
padding: 30px;
margin: 10px auto 10px auto;
border: 1px solid #999999;
}

#banner {
margin: 0 auto 10px auto;
}

#header {
margin-top: 30px;
margin-bottom: 24px;
}

#header a {
margin-right: 25px;
color: #2b2b2b;
text-decoration: none;
position: relative; top: -9px; left: 8px;
}

#header a:hover {
text-decoration: underline;
}

#content {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #999;
width: 800px;
}

#links {
margin-left: 100px;
word-spacing: 90px;
font-size: 13px;
}

#footer {
color: #626262;
margin-top: 20px;
}

#footer p {
font-size: 12px;
height:10px;
width: 240px;
margin-left:auto;
margin-right:auto;
}

Tailslide -> RE: Minor? Firefox Compatibility Issue (8/14/2007 11:00:52)
Add overflow:hidden to #container and add clear:both;border-top:1px solid; to #footer and remove border from #content. edit: also add: width:800px and margin:0 auto to #center

Mehdi -> RE: Minor? Firefox Compatibility Issue (8/14/2007 11:24:06)
quote: ORIGINAL: Tailslide Add overflow:hidden to #container and add clear:both;border-top:1px solid; to #footer and remove border from #content. edit: also add: width:800px and margin:0 auto to #center Thanks for the swift response. http://soccer-europe.com/newindex.html The container background colour is now black. The gap between the bottom border and footer needs to be increased and the google ads script still flies off in Firefox but the rest of the page displays, finally! #container { overflow:hidden background-color: #ffffff; width: 800px; padding: 30px; margin: 10px auto 10px auto; border: 1px solid #999999; } #content { margin-bottom: 30px; padding-bottom: 30px; width: 800px; } #footer { clear:both; border-top:1px solid; color: #626262; margin-top: 20px; } #center{ width:800px margin:0 auto height:20px; width: 200px; margin-left:auto; margin-right:auto; }

Tailslide -> RE: Minor? Firefox Compatibility Issue (8/14/2007 11:27:45)
You can't just add rules when they'll be overridden straight afterwards - you have to replace the old ones. You've got: width:800px margin:0 auto height:20px; width: 200px; margin-left:auto; margin-right:auto; You should have: width:800px margin:0 auto; height:20px; And you've forgotten to add the ";" after overflow:hidden in the container rule edit: to sort the footer just add whatever padding you want to the footer div.

Mehdi -> RE: Minor? Firefox Compatibility Issue (8/14/2007 11:55:42)
http://soccer-europe.com Thanks. It displays fine in Firefox and IE6. Will it be ok in IE7? I don't have it installed.

Tailslide -> RE: Minor? Firefox Compatibility Issue (8/14/2007 12:06:50)
Yes it's fine.

Mehdi -> RE: Minor? Firefox Compatibility Issue (8/14/2007 12:10:37)
Thanks. One more thing the banner tag is redundant as I have replaced it with a javascript however if I remove it I lose the space between the banner and the google links. #banner { margin: 0 auto 10px auto; }

Tailslide -> RE: Minor? Firefox Compatibility Issue (8/14/2007 12:13:17)
Either leave it in or add a margin-top to the div that the google ad is in.

Page: [1]

0.0625