- This topic is empty.
-
AuthorPosts
-
October 31, 2008 at 2:33 am #23508AmethystmoonParticipant
I’ve spent all day trying to get the site I’m working on to look okay in Firefox and IE. No matter what I’ve tried I can’t work out how to get the footer to sit in the coloured background in either browser. Here’s the site: http://www.peacefulwillow.com/hangout/
I tend to work things out as I go along with css but this has me stumped.
Here’s my css:
Code:/* Global Style */body {
margin-top:10px;
padding:0;
height:100%;
font-size:8pt;
font-family:arial,sans-serif;
background:#695E49;
color:#232323;
}h1 {
color:green;
font-size:10pt;
text-align:left;
}h2 {
color:#000000;
font-size:10pt;
text-align:left;
}p {
line-height:1.2em;
text-align:left;
}.center {
text-align:center;
}.justify {
text-align:justify;
}hr {
height:1px;
color:#695E49;
border-color:#695E49;
}li {
margin: 0;
padding: 0;
}blockquote {
margin-left: 40px;
color:#660066;
}a:link {
color:#002B74;
text-decoration:none;
}a:visited {
color:#002B74;
text-decoration:none;
}a:hover {
text-decoration:underline;
}a:active {
text-decoration:underline;
}/* Structure and minor style */
#wrap {
position:relative;
margin:0 auto;
padding:0;
width:759px;
border:0;
background:#ffffff;
}#container {
margin: 0px auto;
padding:1em;
min-height:500px;
height:auto !important;
height:500px;
}#topadvert {
margin-bottom:10px;
padding:0;
width:100%;
height:80px;
}#top {
margin:0;
padding:0;
width:100%;
height:255px;
background:url(/hangout/images/hangban1.jpg) no-repeat;
}#left {
width:155px;
padding-right:8px;
float:left;
}#content {
margin:0;
padding:0;
width:570px;
float:right;
}#indexleft {
width:155px;
padding-right:8px;
float:left;
}#indexright {
width:235px;
padding-left:10px;
float:right;
}#indexcenter {
margin-left:165px;
margin-right:245px;
}#navcontainer ul {
margin: 0;
padding: 0;
font-size: 9pt;
list-style-type: none;
}#navcontainer li { margin: 0 0 .3em 0; }
#navcontainer a {
display: block;
color: #FFF;
background-color: #695E49;
width: 10em;
padding: .2em .8em;
text-decoration: none;
}#navcontainer a:hover {
background-color: #D4CAB6;
color: #FFF;
}#bluefeature {
margin:0px;
padding:4px;
height:100%;
background:#E3E3FD;
}#pinkfeature {
margin:0px;
padding:4px;
height:100%;
background:#FFD9EC;
}#brownfeature {
margin:0px;
padding:4px;
height:100%;
background:#CCC1AA;
}#bot {
margin:0;
padding:0;
height:35px;
clear:both;
font-size:90%;
background:#BAAB8B;
}#bot p {
text-align:center;
color:#fff;
}#bot a {
text-align:center;
color:#fff;
text-decoration:underline;
}#support {
margin:0;
padding:0;
text-align:center;
background:none;
}#google {
margin-top:0;
padding:5px;
text-align:center;
background:none;
color:#000
}October 31, 2008 at 2:56 am #50844AmethystmoonParticipantThanks for the quick reply. I actually had an idea after I made my post and it worked…you wouldn’t believe ti!
I added margin:-9px to the footer’s p coding instead of the footer itself…
#bot p {
margin-top:-9px;
padding:3px;
text-align:center;
color:#fff;
}It sits well now. Do you think I should still change it to the way you mentioned…e.g would that be a better solution overall?
November 8, 2008 at 5:37 pm #50984AmethystmoonParticipantThanks a lot for that. :D I’ve changed it because I prefer to have the coding done the right way if I can help it.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.