/    Sign up×
Community /Pin to ProfileBookmark

table problems in IE

Copy linkTweet thisAlerts:
Sep 19.2003

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:

[URL=http://www.radioactiverabbit.com/dbaudio/images/screen_mf.jpg]Mozilla Firebird[/URL]
[URL=http://www.radioactiverabbit.com/dbaudio/images/screen_op.jpg]Opera[/URL] [URL=http://www.radioactiverabbit.com/dbaudio/images/screen_ie.jpg]IE[/URL]

Here’s my stylesheet:

[CODE]
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;
}
[/CODE]

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

to post a comment
CSS

31 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesSep 19.2003 — [i]From the HTML 4.01 Specification:[/i]

[b]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.[/b]

[i]http://www.w3.org/TR/html4/struct/tables.html#h-11.1[/i][/quote][font=georgia]If you are going to go around breaking the rules then you cannot really complain about the results.[/font]
Copy linkTweet thisAlerts:
@PunkSktBrdr01authorSep 19.2003 — 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.
Copy linkTweet thisAlerts:
@spufiSep 20.2003 — 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.
Copy linkTweet thisAlerts:
@PunkSktBrdr01authorSep 22.2003 — 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:

[CODE]
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;
}
[/CODE]

The link is the same as before.
Copy linkTweet thisAlerts:
@MotherNatrsSonSep 23.2003 — 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
Copy linkTweet thisAlerts:
@PunkSktBrdr01authorSep 23.2003 — 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?
Copy linkTweet thisAlerts:
@MotherNatrsSonSep 23.2003 — 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
Copy linkTweet thisAlerts:
@PunkSktBrdr01authorSep 23.2003 — 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.
Copy linkTweet thisAlerts:
@MotherNatrsSonSep 23.2003 — 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;
}

<i> </i>.container {
<i> </i> width: 100%;
<i> </i> height: 100%;
<i> </i>}

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

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

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

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

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


HTH

MNS
Copy linkTweet thisAlerts:
@PunkSktBrdr01authorSep 24.2003 — I tried it, but it doesn't seem to work. I tested it in Mozilla Firebird, Opera, and IE.
Copy linkTweet thisAlerts:
@MotherNatrsSonSep 24.2003 — 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

[upl-file uuid=ddf958b9-5a77-483f-b679-4927860a0866 size=2kB]skate.html.txt[/upl-file]
Copy linkTweet thisAlerts:
@PunkSktBrdr01authorSep 24.2003 — 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!
Copy linkTweet thisAlerts:
@MotherNatrsSonSep 24.2003 — 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
Copy linkTweet thisAlerts:
@PunkSktBrdr01authorSep 24.2003 — 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!
Copy linkTweet thisAlerts:
@MotherNatrsSonSep 24.2003 — See what happens with this. What OS and browser are you using?

MNS

[upl-file uuid=6e6d45fa-4dbe-4eda-8507-5ad734550e06 size=2kB]skate.html.txt[/upl-file]
Copy linkTweet thisAlerts:
@PunkSktBrdr01authorSep 25.2003 — 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.
Copy linkTweet thisAlerts:
@MotherNatrsSonSep 25.2003 — 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

[upl-file uuid=b00e3587-cf13-4457-bf3b-31a98f9b83e9 size=4kB]skate.html.txt[/upl-file]
Copy linkTweet thisAlerts:
@PunkSktBrdr01authorSep 25.2003 — 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!
Copy linkTweet thisAlerts:
@PunkSktBrdr01authorSep 25.2003 — 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!

[upl-file uuid=fddf37cc-56b7-47e9-ba51-a717c59e91d8 size=4kB]skate2.html.txt[/upl-file]
Copy linkTweet thisAlerts:
@MotherNatrsSonSep 25.2003 — 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
Copy linkTweet thisAlerts:
@PunkSktBrdr01authorSep 26.2003 — 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.
Copy linkTweet thisAlerts:
@MotherNatrsSonSep 27.2003 — 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
Copy linkTweet thisAlerts:
@PunkSktBrdr01authorSep 27.2003 — 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!

[upl-file uuid=43c02bb5-e6f3-4fef-ad43-d4a6ef734ca7 size=4kB]skate2.html.txt[/upl-file]
Copy linkTweet thisAlerts:
@MotherNatrsSonSep 27.2003 — 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
Copy linkTweet thisAlerts:
@PunkSktBrdr01authorSep 27.2003 — 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:

[CODE]
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;
}
[/CODE]

Sorry I keep messing it up. Thanks for all your help!
Copy linkTweet thisAlerts:
@MotherNatrsSonSep 27.2003 — 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;
}

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

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

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

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

<i> </i>.links {
<i> </i> width:100%;
<i> </i> background-color: #000000;
<i> </i>}

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

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

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

MNS
Copy linkTweet thisAlerts:
@PunkSktBrdr01authorSep 27.2003 — 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!
Copy linkTweet thisAlerts:
@MotherNatrsSonSep 28.2003 — 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
Copy linkTweet thisAlerts:
@PunkSktBrdr01authorSep 29.2003 — 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!
Copy linkTweet thisAlerts:
@MotherNatrsSonOct 01.2003 — Good that you got it working. Let me know if you need anything else. ?

MNS
×

Success!

Help @PunkSktBrdr01 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...