|
| |
|
|
Mehdi
Posts: 32
Joined: 8/1/2007
Status: offline
 |
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
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Mehdi
Posts: 32
Joined: 8/1/2007
Status: offline
|
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
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
< Message edited by Tailslide -- 8/14/2007 11:39:17 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Mehdi
Posts: 32
Joined: 8/1/2007
Status: offline
|
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.
| |
|
|
|
Mehdi
Posts: 32
Joined: 8/1/2007
Status: offline
|
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;
}
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
