Another IE/FF problem: centering + margins...
02-18-2007, 07:38 PM
|
Another IE/FF problem: centering + margins...
|
Posts: 50
|
Yet another bit of code not working correctly in IE/FF...
This is my first try at making a template with only div's and now tables ( www.anwipr.com/templates/farm ) and in IE, the whole thing is centered (which is what I want) and there is no top margin (also desired). However, in FF, the template is not being centered and there is a top margin. How do I fix this? The whole CSS code is below:
HTML Code:
/* ---- MAIN LAYOUT ---- */
body {
background-color: #BF894A;
margin-top: 0px;
text-align: center;
}
#container {
width: 750px;
margin: 0px;
text-align: left;
}
#content {
font-family: Georgia, Georgia, serif;
color: #34241A;
font-size: 12px;
line-height: 1.3em;
background-color: #F4DABC;
padding: 10px 25px;
}
#header {
background-image: url(../img/header.gif);
height: 250px;
repeat: none;
}
#title {
color: #FFFFFF;
font-family: Georgia, Georgia, serif;
font-size: 40px;
margin: 10px 30px;
}
#slogan {
color: #CCCCCC;
font-family: Georgia, Georgia, serif;
font-size: 20px;
font-style: italic;
}
#menu {
margin: 130px 0px 0px 30px;
color: #FFFFFF;
font-family: Georgia, Georgia, serif;
font-size: 20px;
font-weight: bold;
}
#menu a {
color: #FFFFFF;
font-family: Georgia, Georgia, serif;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
#menu a:hover {
color: #CCCCCC;
font-family: Georgia, Georgia, serif;
font-size: 20px;
font-weight: bold;
text-decoration: underline;
}
/* ---- DESIGN ---- */
a {
color: #BF894A;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #BF894A;
font-weight: bold;
text-decoration: underline;
}
blockquote {
padding: 0 40px;
background: url(../img/quote.gif) no-repeat 0 5px;
color: #34241A;
font-family: Georgia;
font-size: 12px;
line-height: 1.3em;
}
em {
font-family: Georgia;
font-weight: bold;
font-size: 16px;
color: #34241A;
}
acronym {
border-bottom-style: dashed;
border-bottom-color: #34241A;
border-bottom-width: 1px;
}
h1,h2,h3,h4,h5,h6,h7 {
font-family: Georgia, Georgia, serif;
font-weight: bold;
color: #34241A;
margin-bottom: 6px;
}
.embed_left {
float: left;
width: 150px;
margin: 2px 7px 2px 0px;
padding: 5px 5px 5px 5px;
background-color: #BF894A;
line-height: 1.2em;
font-family: Georgia, Georgia, serif;
font-size: 12px;
font-weight: normal;
text-align: left;
}
.embed_right {
float: right;
width: 150px;
margin: 2px 0px 2px 7px;
padding: 5px 5px 5px 5px;
background-color: #BF894A;
line-height: 1.2em;
font-family: Georgia, Georgia, serif;
font-size: 12px;
font-weight: normal;
text-align: left;
}
.side_menu {
float: right;
width: 200px;
margin: 2px 0px 2px 7px;
padding: 5px 5px 5px 5px;
background-color: #BF894A;
line-height: 1.2em;
font-family: Georgia, Georgia, serif;
font-size: 12px;
font-weight: normal;
text-align: left;
}
.side_menu li {
list-style: none;
border-bottom: 1px solid #34241A;
text-decoration: none;
background-color: #BF894A;
}
.side_menu li a {
background-color: #BF894A;
display: block;
padding: 4px 2px 4px 6px;
text-decoration: none;
color: #34241A;
font-family: Georgia, Georgia, serif;
font-size: 12px;
text-decoration: none;
}
.side_menu li a:hover {
background-color: #BF894A;
display: block;
color: #FFFFFF;
font-family: Georgia, Georgia, serif;
font-size: 12px;
text-decoration: none;
}
Thanks in advance for your help! |
|
|
|
|
02-18-2007, 08:45 PM
|
Re: Another IE/FF problem: centering + margins...
|
Posts: 251
Name: Tom Maurer
Location: Pennslvania, USA
|
You can center it in FF by changing the margin in the #container to margin: 0px auto;
Also, take the top margin off of div#title, change it to maybe margin: 0 30px 10px 30px;
Last edited by Tom_M : 02-18-2007 at 08:51 PM.
|
|
|
|
|
02-19-2007, 05:36 AM
|
Re: Another IE/FF problem: centering + margins...
|
Posts: 139
Name: David
|
Code:
body {
background-color: #BF894A;
margin-top: 0px;
text-align: center;
}
=>
body {
background-color: #BF894A;
margin-top: 0;
padding-top: 0;
text-align: center;
}
You should design so it looks like you want it in FF. Bugs in CSS is usually IE's fault. So, if you design it to look like you want in IE, it probably won't work the way you want it to in any other browser.
|
|
|
|
|
02-19-2007, 09:49 AM
|
Re: Another IE/FF problem: centering + margins...
|
Posts: 50
|
The template is now centered in IE and FF, but the top margin still exists in FF even with the "margin: 0px auto" in the "#container" and when I add the "padding-top: 0px;" to "body"... what's the problem?
|
|
|
|
|
02-19-2007, 09:50 AM
|
Re: Another IE/FF problem: centering + margins...
|
Posts: 251
Name: Tom Maurer
Location: Pennslvania, USA
|
Did you change the margin in the title division?
|
|
|
|
|
02-19-2007, 01:53 PM
|
Re: Another IE/FF problem: centering + margins...
|
Posts: 50
|
yes, I did... my CSS code now looks like this:
HTML Code:
/* ---- MAIN LAYOUT ---- */
body {
background-color: #BF894A;
margin-top: 0px;
text-align: center;
padding-top: 0px;
}
#container {
width: 750px;
margin: 0px auto;
text-align: left;
}
#content {
font-family: Georgia, Georgia, serif;
color: #34241A;
font-size: 12px;
line-height: 1.3em;
background-color: #F4DABC;
padding: 10px 25px;
}
#header {
background-image: url(../img/header.gif);
height: 250px;
repeat: none;
}
#title {
color: #FFFFFF;
font-family: Georgia, Georgia, serif;
font-size: 40px;
margin: 10 30px 10px 30px;
}
#slogan {
color: #CCCCCC;
font-family: Georgia, Georgia, serif;
font-size: 20px;
font-style: italic;
}
#menu {
margin: 130px 0px 0px 30px;
color: #FFFFFF;
font-family: Georgia, Georgia, serif;
font-size: 20px;
font-weight: bold;
}
#menu a {
color: #FFFFFF;
font-family: Georgia, Georgia, serif;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
#menu a:hover {
color: #CCCCCC;
font-family: Georgia, Georgia, serif;
font-size: 20px;
font-weight: bold;
text-decoration: underline;
}
/* ---- DESIGN ---- */
a {
color: #BF894A;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #BF894A;
font-weight: bold;
text-decoration: underline;
}
blockquote {
padding: 0 40px;
background: url(../img/quote.gif) no-repeat 0 5px;
color: #34241A;
font-family: Georgia;
font-size: 12px;
line-height: 1.3em;
}
em {
font-family: Georgia;
font-weight: bold;
font-size: 16px;
color: #34241A;
}
acronym {
border-bottom-style: dashed;
border-bottom-color: #34241A;
border-bottom-width: 1px;
}
h1,h2,h3,h4,h5,h6,h7 {
font-family: Georgia, Georgia, serif;
font-weight: bold;
color: #34241A;
margin-bottom: 6px;
}
.embed_left {
float: left;
width: 150px;
margin: 2px 7px 2px 0px;
padding: 5px 5px 5px 5px;
background-color: #BF894A;
line-height: 1.2em;
font-family: Georgia, Georgia, serif;
font-size: 12px;
font-weight: normal;
text-align: left;
}
.embed_right {
float: right;
width: 150px;
margin: 2px 0px 2px 7px;
padding: 5px 5px 5px 5px;
background-color: #BF894A;
line-height: 1.2em;
font-family: Georgia, Georgia, serif;
font-size: 12px;
font-weight: normal;
text-align: left;
}
.side_menu {
float: right;
width: 200px;
margin: 2px 0px 2px 7px;
padding: 5px 5px 5px 5px;
background-color: #BF894A;
line-height: 1.2em;
font-family: Georgia, Georgia, serif;
font-size: 12px;
font-weight: normal;
text-align: left;
}
.side_menu li {
list-style: none;
border-bottom: 1px solid #34241A;
text-decoration: none;
background-color: #BF894A;
}
.side_menu li a {
background-color: #BF894A;
display: block;
padding: 4px 2px 4px 6px;
text-decoration: none;
color: #34241A;
font-family: Georgia, Georgia, serif;
font-size: 12px;
text-decoration: none;
}
.side_menu li a:hover {
background-color: #BF894A;
display: block;
color: #FFFFFF;
font-family: Georgia, Georgia, serif;
font-size: 12px;
text-decoration: none;
}
|
|
|
|
|
02-19-2007, 02:31 PM
|
Re: Another IE/FF problem: centering + margins...
|
Posts: 251
Name: Tom Maurer
Location: Pennslvania, USA
|
Yes you got a boo bo in your code. You still have top margin set to 10. Look at #title
Code:
#title {
color: #FFFFFF;
font-family: Georgia, Georgia, serif;
font-size: 40px;
margin: 10 30px 10px 30px;
}
change it to
Code:
#title {
color: #FFFFFF;
font-family: Georgia, Georgia, serif;
font-size: 40px;
margin: 0 30px 10px 30px;
}
|
|
|
|
|
02-19-2007, 02:42 PM
|
Re: Another IE/FF problem: centering + margins...
|
Posts: 50
|
oh, right! Thanks! I remember finding and fixing that specific line but I must not have uploaded/saved correctly. Thanks!
|
|
|
|
|
« Reply to Another IE/FF problem: centering + margins...
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
|
