Missing Column...

[stmasi]

Can someone take a look at this site and let me know why the navigational column only shows up in IE and Opera?

http://fire.prohosting.com/stmasi69/

Thanx.

[Sam]

your .body shouldn't have clear:both applied to it...
I'm at school right now, so there are no real browsers to test this with, but I believe this is your problem... also, you'll want to add a margin-left:100px; to your .body so that it isn't blocked by the leftnav

[Vladdy]

The nav area shows fine in firebird, what is missing is the footer.
Looking at your HTML: the <span> inside <a> is not needed.

[TheBearMay]

Vladdy, do you see both the left and a top nav? Top looks good, but the left is missing in Firefox....

[Vladdy]

Visible in
Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.4b) Gecko/20030516 Mozilla Firebird/0.6
- have not upgraded on this computer yet....

[stmasi]

Okay...check it again:

http://fire.prohosting.com/stmasi69/

Now, how do I get the "body" section to "stretch" to the footer?

Thanx again.

[Vladdy]

Put some content in it ;)
or give it min-height (not in a dumb IE though)

See that is one of the cases why content should come first - if you had enough content on all your pages you would not be worrying about how to spread your content div to the footer....
... you would actually be worrying about what to do with the weird white space under the left navigation that shows up.

[stmasi]

Okay.

Now...speaking of that weird white space under the left navigation div...

:D

How would I get rid of that?

Thanx.

[Vladdy]

few ways, the best would depend on your graphics...
You can try this for your CSS:

html
{ background: #fff;
}

body
{ border: 1px solid #000;
background: #ccc;
}

.header
{
background: #eee;
height: 100px;
border-bottom: 1px solid #000;
text-align: center;
}

.topnav
{
background: #ddd;
border-bottom: 1px solid #000000;
text-align: center;
}

.leftnav
{
width: 100px;
background: #ccc;
border-right: 1px solid #000000;
float: left;
text-align: center;
}

.body
{
background: #bbb;
border-left: 1px solid #000;
text-align: center;
margin-left: 100px;
padding: 5px;
}

.footer
{
background: #aaa;
clear: both;
text-align: center;
border-top: 1px solid #000;
}

ul#navlist
{
text-align: left;
list-style: none;
padding: 10px 0px 10px 0px;
margin: 0px;
width: 90px;
}

ul#navlist li
{
display: block;
margin: 0px;
padding: 0px;
}

ul#navlist li a
{
display: block;
padding: 0px 5px 0px 5px;
border-width: 1px 0px 1px 0px;
border-color: #ffffff #aaaaaa #aaaaaa #ffffff;
border-style: solid none solid none;
color: #aaaaaa;
text-decoration: none;
background: #cccccc;
width: 90px;
}

ul#navlist li a span
{
padding: 0px 5px 0px 5px;
}

ul#navlist li#active a
{
background: #dddddd;
color: #000000;
padding: 0px 5px 0px 5px;
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #000000;
background: transparent;
border-color: #aaaaaa #ffffff #ffffff #aaaaaa;
padding: 0px 5px 0px 5px;
}

a
{
color: #09c;
text-decoration: none;
}

a:link
{
color: #000000;
}

a:visited
{
color: #ffffff;
}

a:hover
{
background: transparent;
}

a:active
{
color: #000000;
}

a:focus
{
color: #000000;
}

img
{
background: transparent;
border: 0px;
}

[stmasi]

Whow...Opera really messed that one up!

All other browsers see it fine.

Take a look

[Vladdy]

try setting
body
{ padding: 0px;
}

It should cure most problems...

[stmasi]

Nah...still a bit messed up in Opera.

Doesn't pad the page like the rest of the browsers...and now there's a gap between the body and footer.

Thanx.

[stmasi]

Also...

Is there a way I could allow the user to "switch" between having the leftnav and the content area "swap" sides? You know, make the leftnav into a rightnav?

Thanx.

[Sam]

perhaps this willl help:
http://www.ryanbrill.com/floats.htm

[stmasi]

Okay.

Now check it out here:

http://www.geocities.com/stmasi/

I figured out a way to eliminate that stupid banner ad.

It looks great in all browsers except for Opera. When Opera loads the page, it leaves a small gap (I think it's one line) between the content area and the footer area. However, as soon as you click on one of the links, the gap disappears.

Go figure.

Thanx.

[Sam]

read this:
http://forums.webdeveloper.com/showthread.php?s=&threadid=23680&highlight=geocities
In other words, you are stealing from geocities by blocking their adds...