CSS margin/border problem with my latest website

  Red Devil 13:51 22 Dec 06
Locked

Hi all,

OK, I've been working on my latest website idea - a website that deals with the UK's preserved/heritage railways:-

click here

but I've hit a problem. The site is completely tableless and all of the layout is done using CSS. The main area for text is where I've had issues. Basically, I've been able to set the left, right and top margins/borders pretty much how I would like them but can't, for the life of me, get the bottom margin/border to work. No matter what I've tried so far, the text area always goes right to the bottom of the page. I'd like an area, 20 pixels or so where I could fit in the site's copyright text, between the bottom of the text area and the bottom of the page. The CSS file I've written for the site is:-

body,td,th {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
color: #FFFFFF;
background-color: #006600;
}
#header {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
background-image: url(../Images/RoofFascia.gif);
background-repeat: repeat-x;
}
#navlist {
color: white;
background-color: #006600;
padding: 5px;
list-style-type: none;
margin-top: 185px;
margin-left: 0px;
}
#navlist a {
display: block;
color: white;
background-color: black;
text-decoration: none;
padding-left: 7px;
border-bottom: 1px solid #006600;
border-top: 1px solid #006600;
width: 198px;
}
#navlist a:hover {
color: white;
background-color: grey;
}
#navlist a:active {
color: red;
background-color: grey;
}
#maintextarea {
color: #003300;
background-color: white;
background-image: url(../Images/TrainBackgroundTrans.jpg);
background-repeat: no-repeat;
background-position: center;
padding: 5px;
position: absolute;
top: 190px;
left: 225px;
margin-right: 15px;
}
#ImagePlacingRight {
float: right;
padding: 5px;
width: 200px;
text-align: center;
color: #993300;
}

If anyone has any tips/suggestions on how I could achieve what I'm looking for I'd appreciate it - or if anyone could point out any error in the way I'm approaching this I'd be similarly grateful. This is the one issue I've to solve before I start adding meaningful content to the site and then launch it on an unsuspecting public!

Mucho appreciated.

  Eric10 16:09 22 Dec 06

I think that the problem is caused by the absolute positioning of your text areas. I've come across this before and haven't found a cure without re-writing the whole site using different techniques.
A work around would be to create a footer style and insert it in a div immediately in front of the closing div for 'maintextarea'. Try:

#footer {
background-color: #006600;
text-align: center;
color: white;
line-height: 2em;
margin: 0px -5px -5px -5px;
}

Insert into your page with '<div id="footer">Copyright text</div>'

  Red Devil 16:31 22 Dec 06

Cheers for that. I've implemented your suggestion and it's pretty darned close to what I was looking to achieve. Certainly better than anything I managed to achieve.

  tulip 06:37 23 Dec 06

Just a little point passeneger appears in your last paragraph.

  Red Devil 09:02 23 Dec 06

Cheers for that - I'll be changing that right away!

  Gaz 25 16:47 30 Dec 06

Nice site. :D

  Red Devil 11:24 21 Jan 07

Ok,

I needed to make a change as defining a background colour of dark blue affected the webring navbar I had on the page. I got round this by separating the td and th definition in the CSS file from the body one and then setting it as grey.

THIS then affected the 2 images at the bottom of the page so I moved them to the menu bar at the left hand side of the screen so that they had a backround that matched the rest of the site.

NOW I have an issue where, in Firefox, Opera and Netscape I get a white line at the bottom of the page and can't seem to get rid of it no matter what I try. Does anyone know I can have it so that this line is no longer there?

The up-to-date CSS file is:_

body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
color: #FFFFFF;
background-color: #000066;
}
td,th {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
color: black;
background-color: gray;
}
#header {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
background-image: url(/Images/RoofFascia.gif);
background-repeat: repeat-x;
}
#navlist {
color: white;
background-color: #000066;
padding: 5px;
list-style-type: none;
margin-top: 180px;
margin-left: 0px;
}
#navlist a {
display: block;
color: white;
background-color: black;
text-decoration: none;
padding-left: 7px;
border-bottom: 1px solid #000066;
border-top: 1px solid #000066;
width: 198px;
}
#navlist a:hover {
color: white;
background-color: gray;
}
#navlist a:active {
color: red;
background-color: gray;
}
#maintextarea {
color: #000066;
background-color: white;
/*background-image: url(../Images/HeaderNew.GIF);*/
background-repeat: no-repeat;
background-position: center;
padding: 5px;
position: absolute;
top: 190px;
left: 225px;
margin-right: 15px;
}
#footer {
background-color: #000066;
text-align: center;
color: white;
font-size: x-small;
line-height: 2em;
margin: -5px -5px -5px -5px;
}
.ImagePlacingRight {
float: right;
padding: 5px;
width: 210px;
text-align: center;
color: #993300;
}
.ImagePlacingLeft {
float: left;
padding: 5px;
width: 210px;
text-align: center;
color: #993300;
}
.mainlink a {
text-decoration: none;
font-size: small;
font-weight:bold;
color: red;
}
.mainlink a:hover {
color: #00CC00;
}
.navlistImages {
color: white;
background-color: #000066;
padding: 5px;
list-style-type: none;
margin-top: 10px;
margin-left: 0px;
}
.navlistImages a {
display: block;
color: white;
background-color: #000066;
text-decoration: none;
padding-left: 7px;
border-bottom: 3px solid #000066;
border-top: 3px solid #000066;
width: 150px;
}
.mainNavbar {
text-decoration: none;
color: #00FF00;
}
.mainNavbar a {
text-decoration: none;
color: #FF00FF;
}

and the page can still be found at:-

click here

Cheers.

  Eric10 13:08 21 Jan 07

A bit of a compromise seems to be needed here. The 'footer' was introduced as a workaround for an earlier problem and it is this that is causing the white bar in Firefox and Opera (I don't have Netscape to test with).
If you increase the negative value of the bottom margin in the 'footer' style definition to -15px it seems to get rid of it.

use: margin: -5px -5px -15px -5px;

This does bring your copyright line a little closer to the bottom in IE but that seems a lesser problem than the white bar. You could always have different stylesheets for IE and the other browsers but that may be more trouble than it is worth unless you run into further problems.

  Red Devil 13:13 21 Jan 07

Cheers for that.

I was messing around with that margin property but I was decreasing the margin vale (setting it to 0 or -2, etc) and not increasing it. Doh! Should have remembered I was working with negative values.

Anyway, cheers for the help - seems to be all sorted out now.

This thread is now locked and can not be replied to.

The Legend of Zelda Breath of the Wild review: Five hours with Zelda on the Nintendo Switch

1995-2015: How technology has changed the world in 20 years

How the painting-like animated sequences in A Monster Calls were created by Glassworks Barcelona

The 22 best Safari extensions | Best Safari plugins: Improve Apple's Safari web browser with these…