table problems in IE

[PunkSktBrdr01]

I posted a similar thread in the html forums, but this might be a CSS problem, so here it is. I'm making a site for someone, and I am using tables for the layout. It displays correctly in Mozilla Firebird and Opera, but in IE, some of the cells are taller then they should be, creating empty space under some images. Here are screenshots:

Mozilla Firebird (http://www.radioactiverabbit.com/dbaudio/images/screen_mf.jpg)
Opera (http://www.radioactiverabbit.com/dbaudio/images/screen_op.jpg) IE (http://www.radioactiverabbit.com/dbaudio/images/screen_ie.jpg)

Here's my stylesheet:


A {
font-family:Times New Roman, Times, serif;
font-size:12px;
cursor:pointer;
color:#6C2B29;
background-color:transparent;
}
A:link {
text-decoration:none;
}
A:visited {
text-decoration:none;
}
A:hover {
text-decoration:underline;
}
body {
margin:0;
color:#000000;
background-color:#6C2B29;
font-family:Times New Roman, Times, serif;
font-size:12px;
}
td#top {
background-image:url("images/toplines.gif");
background-repeat:repeat-x;
background-color:#6C2B29;
width:100%;
height:16px;
}
td#leftbar {
background-color:#6C2B29;
width:140px;
vertical-align:top;
}
div#leftnav {
background-color:#000000;
width:100%;
text-align:center;
vertical-align:top;
font-size:24px;
}
td#titlebar {
background-color:#6C2B29;
width:100%;
height:36px;
vertical-align:top;
}
td#titleunder {
background-color:#000000;
height:22px;
}
td#titlefull {
background-color:#FFFFFF;
width:100%;
height:30px;
vertical-align:middle;
}
td#content {
background-color:#FFFFFF;
vertical-align:top;
}
td#lct {
background-color:#FFFFFF;
vertical-align:top;
}
td#lcb {
background-color:#FFFFFF;
vertical-align:bottom;
}
td#footer {
background-color:#6C2B29;
vertical-align:middle;
}
img {
border:0;
}
table {
background-color:transparent;
border:0;
}
table#main {
background-color:#FFFFFF;
border:0;
}
tr {
border:0;
}
td {
font-size:12px;
padding:0;
}
hr {
background-color:#000000;
color:#000000;
}
.left {
text-align:left;
}
.center {
text-align:center;
}
.right {
text-align:right;
}
.justify {
text-align:justify;
}
.header {
font-size:20pt;
}


The site is http://www.radioactiverabbit.com/dbaudio. Thanks so much!

[Charles]

From the HTML 4.01 Specification:
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
http://www.w3.org/TR/html4/struct/tables.html#h-11.1If you are going to go around breaking the rules then you cannot really complain about the results.

[PunkSktBrdr01]

How should I do this, then? Please help me out here. I know I shouldn't use tables, but I don't know any other way, aside from using divs, but I had problems with those, so I went to tables.

[spufi]

http://www.radioactiverabbit.com/dbaudio/

The link you listed is incorrect. I saw this in the other section, but I didn't really jump on it. I might weed through it, but by no means am I saying other people can't step in if they have answer because any possible attempt by me is going to take some time.

[PunkSktBrdr01]

Okay, well, I got rid of all the tables, and I tried to redo it with divs, but it still looks strange (because I'm not very good with CSS!). Now it's messed up in every browser. Here's my new stylesheet:


a {
font-family:Times New Roman, Times, serif;
font-size:12px;
cursor:pointer;
color:#6C2B29;
background-color:transparent;
}
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
body {
margin:0;
color:#000000;
background-color:#6C2B29;
font-family:Times New Roman, Times, serif;
font-size:12px;
}
div#top {
background-image:url("images/toplines.gif");
background-repeat:repeat-x;
background-color:#6C2B29;
width:100%;
height:16px;
}
div#leftbar {
position:absolute;
top:16px;
left:0px;
background-color:#6C2B29;
width:140px;
}
div#leftnav {
background-color:#000000;
width:100%;
text-align:center;
vertical-align:top;
font-size:24px;
}
div#rightbar {
background-color:#FFFFFF;
margin-left:141px;
div#content {
background-color:#FFFFFF;
}
div#footer {
background-color:#6C2B29;
text-align:center;
font-style:italic;
}
img {
border:0;
}
table {
background-color:transparent;
border:0;
}
tr {
border:0;
}
td {
font-size:12px;
padding:0;
}
hr {
background-color:#000000;
color:#000000;
}
.left {
text-align:left;
}
.center {
text-align:center;
}
.right {
text-align:right;
}
.justify {
text-align:justify;
}
.header {
font-size:20pt;
}
.maroon {
background-color:#6C2B29;
}
.black {
background-color:#000000;
}
.white {
background-color:#FFFFFF;
}


The link is the same as before.

[MotherNatrsSon]

What are you using to edit pictures with? Photoshop? I would make the images into one image and use it as a background image for the body in the CSS. Then all you would have to do is position one other div to hold the content and all content would be in one div. You coulddo 2. One for navigation and one for content.

With the extreme differences in CSS suport in browser, the simpler and least amount of thing you need to position and have on the page, the easier it will be to get it to work in all or most browsers.

If you can get the image put together into one image. I will help you with the CSS and layout. If you cannot get the image into one image, let me know and I "might" have time to do that as well.

Remember. Be creative with it and K.I.S.S.

MNS

[PunkSktBrdr01]

Okay, thanks. I'll try to put the images together (I use Paintshop Pro). The only problem is the transparent GIFs for the corners. Should I add those to the image and make it a big JPEG, or should I leave them separate?

[MotherNatrsSon]

I would put all the images together except the bottom corner gif and save it as a jpg. The bottom corner gif can be put into the another place separately. Positioning 2 images will be much easier.

MNS

[PunkSktBrdr01]

Okay, I made the new image for the top. Here's a link to it:

http://www.radioactiverabbit.com/dbaudio/images/bg_top.jpg

I decided to get rid of the bottom corner GIF. It isn't really necessary. There's still the image that goes under the links. Thanks for your help so far.

[MotherNatrsSon]

Take a look at this in Mozilla or Netscape. I threw it together kinda quick and know it works in those but no gurantees in anything else. It will give you some ideas at least.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>
Untitled
</title>
<style type="text/css">
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}

.container {
width: 100%;
height: 100%;
}

.main {
top: 0px;
left: 0px;
width: 100%;
padding: 0px;
background-image: url(http://www.radioactiverabbit.com/dbaudio/images/toplines.gif);
background-repeat: repeat-x;
background-color: #FFFFFF;
}

.top {
position: relative;
top: 16px;
width: 100%;
background-image: url(http://www.radioactiverabbit.com/dbaudio/images/bg_top.jpg);
background-color: #FFFFFF;
background-repeat: no-repeat;
}

.nav {
position: relative;
width: 140px;
height: 100%;
background-color: #000000;
background-image: url(http://www.radioactiverabbit.com/dbaudio/images/leftbottom.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}

a {
font-family: Times New Roman, Times, serif;
font-size: 12px;
cursor: pointer;
color: #6C2B29;
background-color: transparent;
}

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
</style>
</head>
<body>
<div class="container">
<div class="main">
<div class="top">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="nav">
<br>
&nbsp; &nbsp; &nbsp; &nbsp;
<a href="index.shtml">
Main
</a>
<br>
&nbsp; &nbsp; &nbsp; &nbsp;
<a href="#">
Page 2
</a>
<br>
&nbsp; &nbsp; &nbsp; &nbsp;
<a href="#">
Page 3
</a>
<br>
&nbsp; &nbsp; &nbsp; &nbsp;
<a href="#">
Page 4
</a>
<br>
&nbsp; &nbsp; &nbsp; &nbsp;
<a href="#">
Page 5
</a>
<br>
&nbsp;
<br>
&nbsp;
<br>
&nbsp;
<br>
&nbsp;
<br>
&nbsp;
<br>
&nbsp;
<br>
&nbsp;
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</body>
</html>


HTH

MNS

[PunkSktBrdr01]

I tried it, but it doesn't seem to work. I tested it in Mozilla Firebird, Opera, and IE.

[MotherNatrsSon]

What part of it does not work? You are going to have to be a little more descriptive than that.

I did say I would help you, but I aint doing it for you. There is a difference.

Did you upload it or test it locally? I am on a MAC so I can't test in IE except the MAC version which is notoriously buggy when it comes to CSS, just like all the rest of IE....

I attached the file for you because I don't know what isn't working. A screen shot at least if not uploaded.

MNS

[PunkSktBrdr01]

Okay, that is working great! The only things that need to be taken care of now are the maroon and black stripes that go to the left of the image, and the gap between the nav div and the image above it. Also, should the divs use ids instead of classes? Thanks!

[MotherNatrsSon]

You should assign div id's when there is oly a specificintance of it. Classes work fine. If you have a div assigned a class you can use the same class over and over on the page if you want to. If you assign an id, it can only be used once.

Maroon and black stripes to the left of what image? When I look at you page I see not stripes except at the top of the page.

Post a link to the image for the maroon and black stripes so I can see and link it in the style sheet. To the left of which image? The one with the guy in it? It would make sense because it looked a little "short".

What screen resolution are you viewing it in? I use 1024 x 768. I did not lok at it in any others.

How "big" of a gap is there between the navigation and the image above it? Guess in pixels if you can. If not I'll "over compensate for it.

MNS

[PunkSktBrdr01]

Okay, well, this site is actually one that I'm redoing for someone. The original site is:

http://www.dbaudio.net

The old site uses bloated, unnecessary code, though, so I'm trying to make it look as much like the old site as possible.

If you look at the original site, you'll see theat to the right of the "on air" image, after it says DBaudio.net, the maroon continues to the right side of the page, and under that, the black continues also.

My guess is that the gap below the "on air" image is about 15px.

I am using 1024 x 768 also.

Thanks for all your help so far!

[MotherNatrsSon]

See what happens with this. What OS and browser are you using?

MNS

[PunkSktBrdr01]

Okay, I tried that out and it works pretty well. There was only one problem, though, which is that the black stripe at the top is not as tall as the black stripe in the picture. Other than that, the only thing left to make is the content div. How do I do that? Should I just use a margin slightly larger than the width of the nav div, or should I absolutely position it? Thanks for all your help! Oh, I made some small changes to the file. I'm going to widen the bottom picture, so that won't be a problem. To answer your question, I'm using IE6, Mozilla Firebird 0.6.1, and Opera 7 on Windows ME.

[MotherNatrsSon]

I think this ought to do it. Change the image as you said so it matches the black stripe. I would change the small background image from the original site to match what you have with the othe image you assembled.

One other quick question. Are you getting paid for this? If so tact on an extra 3 hours for me and keep it. It is time into it...LOL

MNS

[PunkSktBrdr01]

Thanks for the tip! lol. I've gotta get to bed, but I'll try it when I get a chance. Thanks for all your help!

[PunkSktBrdr01]

Okay, it works great. The black stripe is still too short. I don't see anything in the code that creates the stripes, though? How is that being done? Here's a screenshot of what I'm talking about:

http://www.radioactiverabbit.com/dbaudio/images/screen_stripe.jpg

Also, I made some changes to the file. Here's the new version. Thanks!

[MotherNatrsSon]

The stripe is part of the background image. If you look at the css you will see the url to the image from the original site. You will need to add to that image so the black stipe is equal length for both backgound images.

MNS

[PunkSktBrdr01]

Okay, I fixed the image. I tried to change some stuff, but now the whole thing is messed up. The content div is blocking something else, and it's really confusing. Check it out at:

http://www.radioactiverabbit.com/dbaudio/skate2.html

Thanks for your patience.

[MotherNatrsSon]

LOL... I guess something happened. Do you still have a copy of my last attachment here? You redid the wrong background image. You need to redo this one: http://www.dbaudio.net/23/images/bg_top.jpg all you need to do is add some black to the bottom to make the blackstripe equal and you are all set.

The reason the content div is that way is because you changed it to absolute positioning. Anything you position absolutely is out of the "flow" of the rest of the page and positioned independantly of everything else. Here is an article about positioning. It explains some about "flow" as well as types of positioning. http://brainjar.com/css/positioning/


HTH

MNS

[PunkSktBrdr01]

Wow, thanks so much! I got it all working now, and it looks great! I'll attach the final source. Thanks for all your help!

[MotherNatrsSon]

Have you tried resizing the font size with the browser? If you increase te font size it kind of fall s apart a litle. Look and see.

MNS

[PunkSktBrdr01]

Okay, well, I transfered the CSS to an external stylesheet, but now it won't display correctly. I tried to get it to work, but I can't fix it. For some reason, the top left "on air" image is completely covered. Here's the CSS:


body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
.container {
position:relative;
top:0px;
left:0px;
width:100%;
height:100%;
padding:0px;
margin:0px;
background-image:url(http://www.radioactiverabbit.com/dbaudio/images/toplines.gif);
background-repeat:repeat-x;
}
.main {
position:relative;
top:16px;
left:0px;
width:100%;
height:100%;
padding:0px;
background-image:url(http://www.radioactiverabbit.com/dbaudio/images/bg_topright.jpg);
background-repeat:repeat-x;
background-color:#FFFFFF;
margin:0px;
z-index:0;
}
.top {
position:relative;
top:0px;
width:100%;
background-image:url(http://www.radioactiverabbit.com/dbaudio/images/bg_top.jpg);
background-color:transparent;
background-repeat:no-repeat;
z-index:100;
}
.nav {
position:relative;
top:37px;
width:162px;
background-color:#6C2B29;
z-index:1;
}
.links {
width:100%;
background-color:#000000;
}
.content {
position:relative;
width:80%;
height:auto;
left:170px;
top:-37px;
margin:8px;
padding:0px;
background-color:#FFFFFF;
color:#000000;
font-family:Times New Roman, Times, serif;
font-size:12px;
text-align:left;
line-height:16px;
text-decoration:none;
}
a {
font-family:Times New Roman, Times, serif;
font-size:12px;
cursor:pointer;
color:#6C2B29;
background-color:transparent;
}
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}


Sorry I keep messing it up. Thanks for all your help!

[MotherNatrsSon]

This is the CSS in the link above that you posted. If you can, post a link to the page and the external stylesheet. Here is the CSS that worked, sort of:

body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}

.container {
position: relative;
top: 0px;
left: 0px
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
background-image: url(http://www.radioactiverabbit.com/dbaudio/images/toplines.gif);
background-repeat: repeat-x;
}

.main {
position: relative;
top: 16px;
left: 0px;
width: 100%;
height: 100%;
padding: 0px;
background-image: url(http://www.radioactiverabbit.com/dbaudio/images/bg_topright.jpg);
background-repeat: repeat-x;
background-color: #FFFFFF;
margin: 0px;
}

.top {
position: relative;
top: 0px;
width: 100%;
background-image: url(http://www.radioactiverabbit.com/dbaudio/images/bg_top.jpg);
background-color: transparent;
background-repeat: no-repeat;
z-index: 2;
}

.nav {
position: relative;
top: -34px;
width: 162px;
background-color: #6C2B29;
z-index: 1;
}

.links {
width:100%;
background-color: #000000;
}

.content {
position: absolute;
width: 80%;
height: auto;
left: 170px;
top: 166px;
margin: 8px;
padding: 0px;
background-color: #FFFFFF;
color: #000000;
font-family: Times New Roman, Times, serif;
font-size: 12px;
text-align: left;
line-height: 16px;
text-decoration: none;
}

a {
font-family: Times New Roman, Times, serif;
font-size: 12px;
cursor: pointer;
color: #6C2B29;
background-color: transparent;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

What did you change and why to make it not work? Putting the CSS in an external file shouldn't change anything.

MNS

[PunkSktBrdr01]

Okay, all I changed was the stuff you told me to change. The page is:

http://www.radioactiverabbit.com/dbaudio/index.php

The style sheet is:

http://www.radioactiverabbit.com/dbaudio/_style.css

Thanks!

[MotherNatrsSon]

The only thing I "told" you to change was the black stripe on the background image. What do you think I told you to change?

MNS

[PunkSktBrdr01]

I'm not sure what I did to mess it up, but I fixed it now. I just copied the CSS from skate2.html and pasted it into the external file, and now it's working. Thanks for all your help!

[MotherNatrsSon]

Good that you got it working. Let me know if you need anything else. :cool:

MNS

[PunkSktBrdr01]

Thanks.