Stylesheets - Giving up Tables for DIVs... 2 questions though

Author

Giving up Tables for DIVs... 2 questions though

~john

2006-08-23, 6:58 pm

I'm using DIVs in a test site for my page layout. It's working fairly
well so far but there's 2 problems I'm having that I didn't have with
tables. I'm sure it's just something small in my CSS.

Here's the link to my page with the first problem...

http://levelwave.com/dev/

1) You'll notice that the body of the page in the <div id="rh-col">
section, is scrolling down past the footer <div id="footer"> at the
bottom of the page. How do I set it so that when the body grows
vertically it pushes the footer down with it?

Here's the link the second problem...

http://levelwave.com/dev/index2.htm

2) You'll notice that the first line in the body section pushes to the
right causing you to scroll... well the logo at the top (<div
id="rh-logo"> and <div id="lg-logo"> ) does not expand to the right with
it, instead it stays static. I would like for it to expand with the
body.

I'll post my CSS below... I'm guessing my <div id="rh-logo"> and my
<div id-"footer"> tags are not set correctly.

thanks!

~john

----------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<html>
<head>
<title></title>
<style type="text/css">

html, body
{
height: 100%;
margin: 0 0 0 0;
}

#lh-logo
{
width: 50%;
float: left;
background: #FFFFFF;
color: #333333;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: left;

}

#rh-logo
{
background: #ffffff;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: right;
}

#safety-slogan
{
width: 100%;
height: 33px;
margin: 0 0 0 0;
padding: 7 0 0 0;
border: solid #3366CC;
border-width: 1px 0 0 0;
text-align: right;
font-size: 14px;
font-weight: bold;
color: #ffffff;

}

#footer
{
margin: 0 0 0 0;
padding: 5 0 0 0;
border: solid #AAAAAA;
border-width: 1px 0 0 0;
font-size: 10px;
color: #888888;
absolute;
bottom: 5px;
clear: both;

}

#lh-col
{
width: 145px;
height: 80%;
float: left;
border: solid #AAAAAA;
border-width: 1px 1px 0 0;
background: #EEEEEE;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#rh-col
{
background: #ffffff;
height: 80%;
border: solid #AAAAAA;
border-width: 1px 0 0 0;
/*margin: 0 0 0 160px;*/
padding: 0 0 0 0;
position: absolute;
left: 146px;

}

danrumney@warpmail.net

2006-08-23, 6:58 pm

John,

First things first, fix your HTML.

Use the right DTD... your page isn't even HTML, let alone XHTML.

For one thing, you're missing the BODY and HTML closing tags.

Also, your CSS is incorrect in places...

Run http://validator.w3.org/ over your page... fix the errors, then see
how it looks.
If you're still having problems, post again

Best of luck,

Dan

~john

2006-08-23, 10:32 pm

danrumney@warpmail.net wrote:
> John,
>
> First things first, fix your HTML.
>
> Use the right DTD... your page isn't even HTML, let alone XHTML.
>
> For one thing, you're missing the BODY and HTML closing tags.
>
> Also, your CSS is incorrect in places...
>
> Run http://validator.w3.org/ over your page... fix the errors, then see
> how it looks.
> If you're still having problems, post again
>
> Best of luck,
>
> Dan

As for the missing closing tags, that was a bad cut and paste job...
all those tags are generated in PHP include files and a PHP footer
tag... must have forgot to track down all the HTML to copy over.

> Also, your CSS is incorrect in places...

Yeah.. I know... I'm a programmer having to learn all this web nonsense
:P... My CSS is really bad and I don't have time to brush up on it
right now. I"m in the middle of a large project at work and just need
the CSS to display the page properly in IE. I was hoping someone could
take a quick look at the header and footer issues I was having. I can't
validate the project at work because I'm behind a firewall... what's in
the links is just a small skeleton of the shell. Guess I could validate
that.

~john

Mark

2006-08-24, 3:39 am

~john wrote:
> I'm using DIVs in a test site for my page layout. It's working fairly
> well so far but there's 2 problems I'm having that I didn't have with
> tables. I'm sure it's just something small in my CSS.
>
> Here's the link to my page with the first problem...
>
> http://levelwave.com/dev/
>
> 1) You'll notice that the body of the page in the <div id="rh-col">
> section, is scrolling down past the footer <div id="footer"> at the
> bottom of the page. How do I set it so that when the body grows
> vertically it pushes the footer down with it?
>
> Here's the link the second problem...
>
> http://levelwave.com/dev/index2.htm
>
> 2) You'll notice that the first line in the body section pushes to the
> right causing you to scroll... well the logo at the top (<div
> id="rh-logo"> and <div id="lg-logo"> ) does not expand to the right with
> it, instead it stays static. I would like for it to expand with the
> body.
>
> I'll post my CSS below... I'm guessing my <div id="rh-logo"> and my
> <div id-"footer"> tags are not set correctly.
>
>
> thanks!
>
> ~john
>
>
>
>
>
>
> ----------------------
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>
> <html xmlns="http://www.w3.org/1999/xhtml">
>
>
>
> <html>
> <head>
> <title></title>
> <style type="text/css">
>
> html, body
> {
> height: 100%;
> margin: 0 0 0 0;
> }
>
> #lh-logo
> {
> width: 50%;
> float: left;
> background: #FFFFFF;
> color: #333333;
> margin: 0 0 0 0;
> padding: 0 0 0 0;
> text-align: left;
>
> }
>
> #rh-logo
> {
> background: #ffffff;
> margin: 0 0 0 0;
> padding: 0 0 0 0;
> text-align: right;
> }
>
> #safety-slogan
> {
> width: 100%;
> height: 33px;
> margin: 0 0 0 0;
> padding: 7 0 0 0;
> border: solid #3366CC;
> border-width: 1px 0 0 0;
> text-align: right;
> font-size: 14px;
> font-weight: bold;
> color: #ffffff;
>
> }
>
> #footer
> {
> margin: 0 0 0 0;
> padding: 5 0 0 0;
> border: solid #AAAAAA;
> border-width: 1px 0 0 0;
> font-size: 10px;
> color: #888888;
> absolute;
> bottom: 5px;
> clear: both;
>
> }
>
> #lh-col
> {
> width: 145px;
> height: 80%;
> float: left;
> border: solid #AAAAAA;
> border-width: 1px 1px 0 0;
> background: #EEEEEE;
> margin: 0 0 0 0;
> padding: 0 0 0 0;
> }
>
> #rh-col
> {
> background: #ffffff;
> height: 80%;
> border: solid #AAAAAA;
> border-width: 1px 0 0 0;
> /*margin: 0 0 0 160px;*/
> padding: 0 0 0 0;
> position: absolute;
> left: 146px;
>
> }

not entirely sure this will fix your problem, but try putting

clear: both;

in #footer

~john

2006-08-24, 6:55 pm

Mark wrote:

> not entirely sure this will fix your problem, but try putting
>
> clear: both;
>
> in #footer

It is there :P

~john

Mark

2006-08-24, 10:36 pm

~john wrote:
> Mark wrote:
>
>
>
> It is there :P
>
> ~john

oopsies. didnt see it because of your crazy indentation.

Mark

2006-08-24, 10:36 pm

~john wrote:
> I'm using DIVs in a test site for my page layout. It's working fairly
> well so far but there's 2 problems I'm having that I didn't have with
> tables. I'm sure it's just something small in my CSS.
>
> Here's the link to my page with the first problem...
>
> http://levelwave.com/dev/
>
> 1) You'll notice that the body of the page in the <div id="rh-col">
> section, is scrolling down past the footer <div id="footer"> at the
> bottom of the page. How do I set it so that when the body grows
> vertically it pushes the footer down with it?
>
> Here's the link the second problem...
>
> http://levelwave.com/dev/index2.htm
>
> 2) You'll notice that the first line in the body section pushes to the
> right causing you to scroll... well the logo at the top (<div
> id="rh-logo"> and <div id="lg-logo"> ) does not expand to the right with
> it, instead it stays static. I would like for it to expand with the
> body.
>
> I'll post my CSS below... I'm guessing my <div id="rh-logo"> and my
> <div id-"footer"> tags are not set correctly.
>
>
> thanks!
>
> ~john
>
>
>
>
>
>
> ----------------------
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>
> <html xmlns="http://www.w3.org/1999/xhtml">
>
>
>
> <html>
> <head>
> <title></title>
> <style type="text/css">
>
> html, body
> {
> height: 100%;
> margin: 0 0 0 0;
> }
>
> #lh-logo
> {
> width: 50%;
> float: left;
> background: #FFFFFF;
> color: #333333;
> margin: 0 0 0 0;
> padding: 0 0 0 0;
> text-align: left;
>
> }
>
> #rh-logo
> {
> background: #ffffff;
> margin: 0 0 0 0;
> padding: 0 0 0 0;
> text-align: right;
> }
>
> #safety-slogan
> {
> width: 100%;
> height: 33px;
> margin: 0 0 0 0;
> padding: 7 0 0 0;
> border: solid #3366CC;
> border-width: 1px 0 0 0;
> text-align: right;
> font-size: 14px;
> font-weight: bold;
> color: #ffffff;
>
> }
>
> #footer
> {
> margin: 0 0 0 0;
> padding: 5 0 0 0;
> border: solid #AAAAAA;
> border-width: 1px 0 0 0;
> font-size: 10px;
> color: #888888;
> absolute;
> bottom: 5px;
> clear: both;
>
> }
>
> #lh-col
> {
> width: 145px;
> height: 80%;
> float: left;
> border: solid #AAAAAA;
> border-width: 1px 1px 0 0;
> background: #EEEEEE;
> margin: 0 0 0 0;
> padding: 0 0 0 0;
> }
>
> #rh-col
> {
> background: #ffffff;
> height: 80%;
> border: solid #AAAAAA;
> border-width: 1px 0 0 0;
> /*margin: 0 0 0 160px;*/
> padding: 0 0 0 0;
> position: absolute;
> left: 146px;
>
> }

im not sure why you have so much markup.. keep it simple. with all that
extra junk in there, it could be any number of things causing the
problem. try deleting everything, and only use the minimal amount of
code to get the desired effect. preview often, so you know what is
breaking it.

you might find this link helpful
http://blog.html.it/layoutgala/

could be your absolute positioning that's killing it..in fact, it
probably is. but im no css expert.