CSS tables work in Mozilla, not in IE?

TheDust · Aug 18, 2004

I have a CSS/HTML layout that looks great in Mozilla but I cannot for the life of me get it to work in IE. A cookie for anyone that can tell me what's wrong with this stuff. I've posted the code and stylesheet here:

http://dustwurks.com/problem/main.htm

http://dustwurks.com/problem/main.css

There's no content in it right now... the left column looks great in IE, but the right column content is getting pushed 160px to the right, which is the width of the column where that content SHOULD be appearing. How come this is working OK in Mozilla and not IE? This is killing me. Any ideas?

I've pretty much used table cells with CSS DIVs inside of them in quirks mode. Can anyone suggest a fix for this IE problem? I'm in a bind here...

TheDust · Aug 18, 2004

I think I've nailed the problem down a bit... it seems that even when I give the right column a z-index of -100 and the footer a z-index of 100 the right column gets pushed way off to the right and won't render underneath the footer the way the left column does. Weird. Anyone know if this is fixable?

Vragabond · Aug 18, 2004

Your problem is, that footer is positioned relatively and lies in an element that has width 450, while its width is 770. In Mozilla, which treats width correctly, this does not matter -- footer is rendered out of bounds of the column_center and that is it. However, IE handles width like min-width should be handled. It expands the container if any of the relatively positioned elements within in it is wider than its width. That said, you're fighting a losing battle.

But, you are also fighting a needles battle. Why not put your footer in another row of your main table? That solves all the problems and renders the same in Mozilla and IE and the result looks the same as your solution. Necessary changes:

Code:

CSS:
/* footer can have much less declaration, these should be enough */
#footer {
	width: 770px;
	height: 31px;
	background-image: url([URL unfurl="true"]http://dustwurks.com/problem/footer.gif);[/URL]
	background-position: top;
	background-repeat: no-repeat;
}

HTML:
* Remove the footer div which lies in the column_center div.
* Add 
    <tr>
        <td colspan="3">
          <div id="footer"></div> 
        </td>
    </tr>  
right at the bottom of the main table

ChrisHunt · Aug 19, 2004

Seems to me that you ought to be able to remove either the table or (many of) the <div>s. What's the point in having both?

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

TheDust · Aug 19, 2004

Thanks, Vragabond! I didn't try that method because I didn't think that the side rails would extend as long as the center column's content.

ChrisHunt - I've been trying to use as much CSS as possible in my designs, but I've found for sites that need 100% heights, it's almost impossible. So I usually just wrap tables around my CSS DIV tags and that usually does the trick.

Thanks for your feedback, guys.

ChrisHirst · Aug 19, 2004

your biggest problem is in not using a doctype, so each browser will handle the code in "quirks" mode. which means anything could happen in IE.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

ChrisHunt · Aug 23, 2004

Good catch, Chris!

The point I was making in my post above is that this approach, while old fashioned, still works well in many browsers:

Code:

<tr>
  <td id="footer" colspan="3">
    &copy; Dustwurks 2004
  </td>
</tr>

Alternatively, this approach will win you lots of brownie points in clued up web designers' circles:

Code:

<div id="footer">
  &copy; Dustwurks 2004
</div>

Using both a <td> and a <div> is rarely necessary, and is probably just adding to the confusion (and the bandwidth).

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS tables work in Mozilla, not in IE?

TheDust

Programmer

TheDust

Programmer

Vragabond

Programmer

ChrisHunt

Programmer

TheDust

Programmer

ChrisHirst

IS-IT--Management

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor