CSS Layout Help -- Make the gaps stop!

**cdxrevvved** · 12-13-2002 07:48 PM

CSS Layout Help -- Make the gaps stop!

Ok. Here is the url for the page :

PAGE LINK

Now, I cant preview in any browsers right now (work) except netscape 4.7 and IE 5.5 ... But when previewing in IE, I get these gaps in between my columns! They should line up properly with them totaling 100% width..

If you want the rest, just view the source on the page..

WHY are these gaps there and HOW do I make them go away? I'd hate to start using tables again... {grin}

The code is below...

CDXRevVveD

<style type="text/css">
body {
background-color: silver
}

#positioned-element
{
background-color: red;
height: 115 px;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1
}

#positioned-element1
{
background-color: pink;
height: 20 px;
left: 0px;
position: absolute;
top: 115px;
width: 100%;
z-index: 2
}

#positioned-element2
{
background-color: blue;
height: 400 px;
left: 0 px;
position: absolute;
top: 135px;
width: 20%;
z-index: 3
}

#positioned-element3
{
background-color: white;
height: 400 px;
left: 20%;
position: absolute;
top: 135px;
width: 50%;
z-index: 4
}

#positioned-element4
{
background-color: gray;
height: 400 px;
left: 70%;
position: absolute;
top: 135px;
width: 30%;
z-index: 5
}

</style>

**Zach Elfers** · 12-13-2002 08:47 PM

In the <body> tag put <body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">. That will fix your problem.

**cdxrevvved** · 12-13-2002 09:00 PM

Please, cover your ears, with such a simple solution, I am now going to scream at the top of my lungs...

Thanx for the help...

Also, how do i put a footer on my page using css? Ive seen it, but Im still way too new...

**Zach Elfers** · 12-13-2002 09:06 PM

What kind of footer? Please give some details.

**cdxrevvved** · 12-13-2002 09:18 PM

basically a bar, 100% width, about 30 pixels tall, at the bottom of the page.. (after the 3 columns on the test page).. so far the only way I know to do it would limit the height of my 3 columns..

I just want a footer at the end of the 3 columns, going all the way across, bout 30 pixls tall or so...

I wouldnt think it would be so difficult.. at least with tables it wasnt..

**Zach Elfers** · 12-13-2002 09:22 PM

<div style="width:100%;height:30px;position:relative;top:0px;left:0px;">Contents</div>

That would do it.

Don't worry about setting a height and width to divs. They will expand to fit the contents, unless you specify for them not to.

**cdxrevvved** · 12-13-2002 09:29 PM

my only prob is its at the top of the page.... how do i make it the last element on the page.. I know the three columns in the middle with ALWAYS be of varying height, so I cant just say put the footer 30 pixels from the bottom, or can i?

CLICK FOR EXAMPLE

**Zach Elfers** · 12-13-2002 09:34 PM

Use position:absolute;top:1000000000000000000000000000000000000000000000000000000000000000px;left:0px;

NOTE: Do not really put all those zeros.

**Stefan** · 12-13-2002 09:37 PM

Originally posted by cdxrevvved

If you want the rest, just view the source on the page..

Ok did that and the first line caught my eye to begin with

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

Where did you find that code?
It should be
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
or preferably
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

After that you should also add a charencoding to your page and default script and style language, leaving us with something like
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

Now we can rip out that proprietary crapcode you just added (marginheight="0" marginwidth="0" leftmargin="0" topmargin="0") as well as the 3 bogus meta declarations you use now.

Once you completed these steps you will have a valid base to stand on to which you can add your CSS to.

**Stefan** · 12-13-2002 09:42 PM

Originally posted by cdxrevvved
my only prob is its at the top of the page.... how do i make it the last element on the page.. I know the three columns in the middle with ALWAYS be of varying height, so I cant just say put the footer 30 pixels from the bottom, or can i?

CLICK FOR EXAMPLE

Yes, you can put them at the end, but you need to remake the entire CSS layout to not rely on positioned elements for it's main content.
I'll help you with that if you like when after you fix the other problems.

**cdxrevvved** · 12-13-2002 09:50 PM

The doctype came from using a wysiwyg css editor, layoutmaster or something.. its a companion prog to stylemaster.. just downloaded that last nite to try it out

**cdxrevvved** · 12-13-2002 09:55 PM

Ok.. so i changed the doctype , dropped the body margin, etc, now everything has the gaps again.... so how would I do it?

**Stefan** · 12-13-2002 10:00 PM

Originally posted by cdxrevvved
Ok.. so i changed the doctype , dropped the body margin, etc, now everything has the gaps again.... so how would I do it?

body {margin:0;}

**cdxrevvved** · 12-13-2002 10:14 PM

Ok... now i see... Im doing my best to stay away from tables...

But now, how would I go about doing the footer, its still at the wrong end of the screen..

BTW, thanx for putting up with me.... We are all newbies at soemthing...

**Zach Elfers** · 12-13-2002 10:17 PM

Cut and Paste your footer to the bottom of the HTML coding. Right now it is the topmost element. This won't completely fix your problem though.

Thread: CSS Layout Help -- Make the gaps stop!

Thread Tools

Display

CSS Layout Help -- Make the gaps stop!

im gonna scream now...

Re: CSS Layout Help -- Make the gaps stop!

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions