Jump to content


CSS Tables screwing up in IE...

Started by The Wicked Flea, Feb 23 2006 03:55 PM

8 replies to this topic

#1 The Wicked Flea

    Young Padawan

  • Members
  • Pip
  • 24 posts

Posted 23 February 2006 - 03:55 PM

I've got a CSS web template that I'm designing and since I'm usually a table layout user, I experimented with CSS. Well I have the look I want and it looks great in Firefox, but screws up terribly in IE. I'm using the div elements with the table styles. The overal gist of the layout is a fixed width lefthand column, variable righthand, with a global footer below both; the entire content is designed to be centered.

The first attachment is the template when viewed in FF, and the second is in IE. To get my desired effect, the first screenshot, will I have to revert to plain tables or is there a workaround? Not everyone is a poweruser or has a secondary browser, and since this is a corporate project I need it to be crossbrowser compatible.

Attached File  ff_template.png   69.4K   351 downloads Attached File  ie_template.png   58.12K   303 downloads

I was hoping to get a reliable CSS theme going, and I don't want to go back to tables, but I'm concerned for the end user. I can post code snippets if needed, but I would rather not (it is a commercially done template).

Edited by The Wicked Flea, 23 February 2006 - 03:59 PM.

#2 rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 23 February 2006 - 04:06 PM

Could you possibly post some code, or maybe even a link to the site?

Mostly, i'm confused by this statement:

Quote

using the div elements with the table styles
If you mean you're using display:table; then that could be the main cause of the problem. Try taking out those display attributes and look into the float attribute.
Again, without code, we can't do much other then guess.

#3 The Wicked Flea

    Young Padawan

  • Members
  • Pip
  • 24 posts

Posted 23 February 2006 - 04:09 PM

Here's a snippet of the CSS. As I said it's a paid for template, so I don't like giving the code out.

#wrapper {
  width: 95%;
  background-color: #FFF;
  border: 1px solid #999;
  margin: 10px auto;
  display: table;
  table-layout: fixed;
  empty-cells: hide;
}

.w-row {
  display: table-row;
}

.e-cell {
  display: table-cell;
}

#sidebar {
  width: 200px;
  background-color: #FFF;
  border-right: 1px dotted #999;
  border-bottom: 1px dotted #999;
  padding: 4px;
  text-align: center;
  display: table-cell;
}

#content {
  width: auto !important;
  display: table-cell;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px dotted #999;
  background-color: #FFF;
  padding: 4px;
}

#footer {
  width: 100%;
  clear: both;
  background-color: #FFF;
  padding: 4px;
  text-align: center;
  display: table-cell;
  font-size: 75%;
  color: #AAA;
}

Basically it goes like this:

Wrapper { w-row { sidebar, content} w-row { e-row, footer } }

I found that I had to put the empty cell in to preserve formatting, so that's why it's there.

#4 rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 23 February 2006 - 07:48 PM

Well, you must of edited in the commercial part after i loaded the page, because i missed it. But either way, as soon as your client uploads his site, anybody can get access to the source, and there's nothing i've found that can prevent that.

But i'm also 99% sure it's the use of display:table*; and empty-cells that is throwing IE off. Try looking at other methods of css to get the same effect (CSS is all about breaking out of tables, why use CSS to make tables anyway?). I'd recommend looking into the float attribute, and maybe the position attribute.

#5 coolaid

    P2L Jedi Master

  • Members
  • PipPipPipPip
  • 1,435 posts
  • Gender:Male
  • Interests:i wonder..

Posted 23 February 2006 - 09:08 PM

yep, ie 6.0 doesnt support table-* displays.
and its impossible to achieve the layout you posted without using tables. you cant achieve the same effect with floats or absolutes.

#6 raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 23 February 2006 - 11:56 PM

I put together a quick example for you that works in both firefox/IE. You'll have to edit it to get the colors, borders, font-styles, etc. correct. But hopefully this can kinda guide you to the right idea. This isnt a fixed left-column but compromise?

<html>
<head>
<title>Layout Test</title>
<style type="text/css">
body{
	text-align: center;
	background-color: #4a4a4a;
	margin: 0px;
}
#container{
	width: 95%;
	height: auto;
	background-color: #fff;
	color: #000;
	border: 1px solid #999;
	margin: 10px auto;
	text-align: left;
}
#sidebar{
	width: 15%;
	height: auto;
	padding: 4px;
	text-align: center;
	float: left;
}
#content{
	width: 80%;
	height: auto;
	padding: 4px;
	text-align: justify;
	border-left: 1px solid #000;
	float: left;
}
#footer{
	clear: both;
	width: 100%;
	height: auto;
	text-align: center;
	border-top: 1px solid #000;
}	   
</style>
</head>
	
<body>
<div id="container">

<div id="sidebar">
Test<br />
Test<br />
Test<br />
Test<br />
Test
</div>

<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eleifend justo in sapien. Donec euismod diam nec justo. Quisque hendrerit, lacus eget accumsan commodo, nisi pede tincidunt ligula, a tempus quam eros ultrices magna. Donec at elit nec purus elementum dictum. Phasellus dignissim dictum neque. Aenean et felis. In hac habitasse platea dictumst. Curabitur tempus, metus malesuada commodo imperdiet, eros nulla malesuada quam, nec luctus nibh lacus ac dui. Donec massa turpis, faucibus non, facilisis a, lacinia nec, nisl. Donec adipiscing tellus sagittis metus. Sed erat orci, hendrerit a, aliquet pharetra, luctus sed, justo.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam suscipit est id magna. Pellentesque et velit. Vestibulum fermentum volutpat metus. In hac habitasse platea dictumst. Nullam mattis placerat turpis. Vestibulum dictum. Vestibulum euismod tristique tortor. Aliquam tempor sodales lectus. Integer euismod fringilla metus. Sed dapibus eros eu lorem. Mauris lorem magna, suscipit id, hendrerit in, molestie at, ipsum. Curabitur nibh nisi, molestie quis, porta ut, tempor nec, enim. 
</div>

<div id="footer">Copyright Whatever Company 2006</div>
</div>
</body>
</html>

Anyways I hope that helps you out a bit. Good Luck :D

#7 The Wicked Flea

    Young Padawan

  • Members
  • Pip
  • 24 posts

Posted 24 February 2006 - 11:30 AM

Thanks all.

Actually the commercial part was in there from the beginning, and it's not for an actual website but an online interface for their products. We're doing a complete overhaul of the web interface, both in the style and the deep system code.

I don't just want to give the code out because I am getting paid to write it, and don't think it'd be fair. :love:


The logo is 187x100 in size and the problem I noticed with the variable width was if the column was too small, the logo would overflow into the other column. What I kinda need is a fixedwidth|variablewidth style where I can tell the browser to set the content to "the rest". Whenever I try to do such a thing, IE panics and I get the aforementioned problem. I'll try and adapt your example, Raenef. I bet none of you would guess that my first shot was indeed a float style, but I couldn't get the code and style right.

Is there a way to use a fixed/variable layout without it messing up in IE? That's my only troublespot, the other browsers work great with my current template.

Attached Files


#8 rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 24 February 2006 - 05:50 PM

You could try mixing min-width with a small hack. Min-width doesn't work in IE (doesn't mess anything up either, it's simply ignored), and the hack will be read by IE and ignored by everything else.
#sidebar{
	min-width: 187px;
	width: 15%;
	_width: 187px; /* hacked line, nobody likes the "_" except IE */
	height: auto;
	padding: 4px;
	text-align: center;
	float: left;
}

#9 The Wicked Flea

    Young Padawan

  • Members
  • Pip
  • 24 posts

Posted 24 February 2006 - 10:44 PM

Hmm, that didn't work. It forced a wrap in both browsers identical to my original IE problem. Oh well, looks like it's back to tables...

I'll check back a bit later, just in case there are any further suggestions. Else, I'll just stick with the tables.
Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design