14 replies [Last post]
mylesw
Offline
newbie
Scottsdale, Arizona
Last seen: 13 years 48 weeks ago
Scottsdale, Arizona
Joined: 2007-12-31
Posts: 6
Points: 0

I'm a new CSS convert, and have been developing HTML using tables, etc. for about 10 years now. I have a new web site that I'm finishing up the general layout on, but I'm having problems with the column alignment in IE vs all other browsers (Firefox, Safari, etc.).

The website that demonstrates this is at:

http://test.repairedge.com

Its a basic 3 column layout with a header and footer over the top. All looks great in FF. But in IE, the left and right columns which contain centered tables are not centering. And in fact the right side column isn't even correctly left aligning to the centered block on it. I can't work out why IE would not render this correctly but all other browsers work just fine.

Anyway the CSS that I have for the columns is like this:

#leftcolumn {
background-color: #faf6ed;
height: 966px;
font-family: Tahoma;
font-size: 11px;
font-style: normal;
color:#000000;
text-align:left;
}

#rightcolumn {
background-color: #faf6ed;
height: 966px;
font-family: Tahoma;
font-size: 11px;
font-style: normal;
color:#00000;
text-align:left;
}

The actual blocks of content are in tables, with the tables being 'modified' in style by CSS through this:

div.moduletable {
width: 86%;
padding: 0;
margin-bottom: 15px;
margin-left: 7%;
margin-right: 7%;
margin-top: 5px;
border: 1px solid #CCCCCC;
vertical-align:top;
border-top: none;
background-color:#FFFFFF;
}

If anyone could point me in the right direction as to understanding the differences between browsers in regards to this, it would be most appreciated.

Thanks
Myles

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 21 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Why use tables at all?

Why use tables at all? They're horribly outdated.

Verschwindende wrote:
  • CSS doesn't make pies

mylesw
Offline
newbie
Scottsdale, Arizona
Last seen: 13 years 48 weeks ago
Scottsdale, Arizona
Joined: 2007-12-31
Posts: 6
Points: 0

thepineapplehead wrote:Why

thepineapplehead wrote:
Why use tables at all? They're horribly outdated.

Interesting question, and a wonderful philosophical argument. But I don't understand how your comment will help me at all without some tangible examples. So please elaborate....

Myles

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

mylesw

mylesw wrote:
thepineapplehead wrote:
Why use tables at all? They're horribly outdated.

Interesting question, and a wonderful philosophical argument. But I don't understand how your comment will help me at all without some tangible examples.

The avoidance of tables used for layout is not "philosophical" at all, but entirely practical. If you aren't willing to take some time to find out why this is so (and this site provides ample resources for you do to that without us repeating ourselves for the hundredth time) then I suggest that you would be more comfortable and probably get what you consider more "helpful" answers in another forum.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

mylesw
Offline
newbie
Scottsdale, Arizona
Last seen: 13 years 48 weeks ago
Scottsdale, Arizona
Joined: 2007-12-31
Posts: 6
Points: 0

Ed Seedhouse wrote: The

Ed Seedhouse wrote:

The avoidance of tables used for layout is not "philosophical" at all, but entirely practical. If you aren't willing to take some time to find out why this is so (and this site provides ample resources for you do to that without us repeating ourselves for the hundredth time) then I suggest that you would be more comfortable and probably get what you consider more "helpful" answers in another forum.

I am getting the feeling that you guys don't know the answer to my question at all, or are being completely unwilling to share the answer. The previous poster avoided my question entirely, and tried to turn the question into some philosophical discussion. Not me. I'm just trying to get a job done.

If I'm doing it all wrong, then fine. Tell me. Point me to a resource where I can work out what I'm doing and I'll fix it. You'd be doing me a favor and demonstrating to the thousands of others that read your post that you are all decent, helpful human beings.

Myles

marcosmyara
Offline
Enthusiast
Last seen: 12 years 28 weeks ago
Joined: 2007-12-19
Posts: 66
Points: 0

ure still getting more

ure still getting more answers than me pal...

how does this guy get more answers than me?.. cmon people..

mylesw
Offline
newbie
Scottsdale, Arizona
Last seen: 13 years 48 weeks ago
Scottsdale, Arizona
Joined: 2007-12-31
Posts: 6
Points: 0

marcosmyara wrote:ure still

marcosmyara wrote:
ure still getting more answers than me pal...

That's sad. Is this the hang out of the 'priests of CSS'? Do you have to get initiated or something?

Myles

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

"There are none so blind as

"There are none so blind as those who will not see."

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 21 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

marcosmyara wrote:ure still

marcosmyara wrote:
ure still getting more answers than me pal...

how does this guy get more answers than me?.. cmon people..

I'm not entirely sure why you think that. You have five topics, four of which have several replies, and one which has none - which you only posted yesterday. I don't know if you've noticed but it is New Year's, and we all volunteer to help out here. We don't get paid for this, you have to be patient if you want free help Wink

mylesw wrote:
That's sad. Is this the hang out of the 'priests of CSS'? Do you have to get initiated or something?

No, you just have to be patient, and understand that after 3 years and almost 10,000 posts, there are reasons we ask what we do. I don't just say "why use tables", submit the post, and ignore you.

If you have a valid reason for using tables, we will help you fix it. If you don't (eg the data is not tabular) then we will help you recode it with structural and semantic markup, fixing your problem in the process.

So again, why use tables?

Verschwindende wrote:
  • CSS doesn't make pies

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

mylesw wrote:<snip>That's

mylesw wrote:
<snip>
That's sad. Is this the hang out of the 'priests of CSS'? Do you have to get initiated or something?

/*member comment*/
I can't speak for everyone, though I usually try to anyway, but I skipped over the thread as soon as I saw nested (five deep? shudder) tables for layout. I haven't coded a table layout in five years, and have no desire to jump back into that pool of slop.
/*end member comment*/

/*begin moderator comment*/
You did come to a css forum, but I'll let you keep your tables for now, if you'll at least make your markup syntactically correct against a strict DTD, and lose all the presentational attributes, eg. border, align, *margin, etc.. You can keep cellspacing, as IE doesn't support the css equivalent.

Once you have your markup made righteous, and that is in the rules set out at the top of each of our forums (you did read them, right?), we can try to bring you along on your quest. You are making it tough on yourself, by building a hybrid page. CSS layout assumes the paradigm of separation of structure and presentation. You're putting much of your presentation into the structure of the page—a no-no in our books.

As to the perceived lack of help, read How to ask …, and particularly, choosing your forum and interpreting answers.
/*end moderator comment*/

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mylesw
Offline
newbie
Scottsdale, Arizona
Last seen: 13 years 48 weeks ago
Scottsdale, Arizona
Joined: 2007-12-31
Posts: 6
Points: 0

thepineapplehead wrote: I'm

thepineapplehead wrote:

I'm not entirely sure why you think that. You have five topics, four of which have several replies, and one which has none - which you only posted yesterday.

I think you have me confused with someone else. This is my first and only post that I've ever done on this forum.

Myles

mylesw
Offline
newbie
Scottsdale, Arizona
Last seen: 13 years 48 weeks ago
Scottsdale, Arizona
Joined: 2007-12-31
Posts: 6
Points: 0

kk5st wrote: You did come to

kk5st wrote:

You did come to a css forum, but I'll let you keep your tables for now, if you'll at least make your markup syntactically correct against a strict DTD, and lose all the presentational attributes, eg. border, align, *margin, etc.. You can keep cellspacing, as IE doesn't support the css equivalent.

Firstly thank you for responding with something I can learn from and use. At least you have given me a checklist of 'what to do next' and I appreciate that. The other posts left me hanging with no direction as to what to do. That's where my frustration came from.

Quote:
You are making it tough on yourself, by building a hybrid page. CSS layout assumes the paradigm of separation of structure and presentation. You're putting much of your presentation into the structure of the page—a no-no in our books.

I get that impression. I'm happy to recode my entire site and methods to best accommodate CSS here. I thought it was something just specific with IE vs. Firefox since the table rendering was all over the place in IE.

Its a pretty big change for me as I've built hundreds of web applications over the past 10 years based around tables, so I'll have to change. I'm more than willing to, and I'll try and use this forum as a resource to learn about this.

Separation of UI from transactions is something I do routinely as all of my sites are MVC based. But I didn't know that at the browser level I would have to go further into this. I'll research it further and hopefully get to the bottom of this mess.

Thanks again.
Myles

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 21 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

mylesw wrote:I think you

mylesw wrote:
I think you have me confused with someone else. This is my first and only post that I've ever done on this forum.

I was replying to marcosmyara, apologies it wasn't very clear Wink

mylesw wrote:
I get that impression. I'm happy to recode my entire site and methods to best accommodate CSS here. I thought it was something just specific with IE vs. Firefox since the table rendering was all over the place in IE.

It could be a simple rendering issue between browsers but there is no sane reason to continue using tables for this Wink

You need to forget what you know about HTML, and actually "see" the page and what it's made up of - lists, paragraphs, headers, titles, sections, footers, links, etc. Ignore what you want it to look like completely and mark it up for what it is.

Verschwindende wrote:
  • CSS doesn't make pies

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

mylesw wrote:Firstly thank

mylesw wrote:
Firstly thank you for responding with something I can learn from and use. At least you have given me a checklist of 'what to do next' and I appreciate that. The other posts left me hanging with no direction as to what to do. That's where my frustration came from.

This may have something to do with people's reluctance to make the same point again for the seemingly one thousandth time. No one here is a saint after all, least of all me. Some of us (not me) actually are CSS gurus, but who said gurus also had to have good tempers?

kk5st gave you some good advice, but if you'd taken the time to browse the "How To" forum and read the sticky messages at the top of each forum you wouldn't have needed it. It's all already there. This system even has a "links" page to some excellent resources.

We do get tired of repeating ourselves and that's why those resources are there for you to read. The checklist you speak of is already available on this very system, with just a little work on your end. It's kind of kk5st to repeat it here, but should he have to?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

mylesw wrote:<snip>I get

mylesw wrote:
<snip>
I get that impression. I'm happy to recode my entire site and methods to best accommodate CSS here. I thought it was something just specific with IE vs. Firefox since the table rendering was all over the place in IE.

I didn't dig into the markup, but you have to remember that tables have certain basic requirements that make controlling them with css problematic. For example, a cell must contain its content, so setting a size is suggestive only. Further, a cell has a positional relationship with all the other cells in the table. You can't decide to move one a scootch this way or that. If you do resize one, it affects the other cells in its row and column.

To make matters worse, the specs allow the vendors a lot of leeway on just how and whether things should be done. And yes, IE is buggy there, too.

Quote:
Its a pretty big change for me as I've built hundreds of web applications over the past 10 years based around tables, so I'll have to change. I'm more than willing to, and I'll try and use this forum as a resource to learn about this.

A table layout can be well formed (syntactically correct), but no non-trivial table layout can be well structured or semantically marked. It will likely be difficult for you to make the change because you have so much experience having to do things wrongly (under the new paradigm). You will need to (re)learn structurally and semantically sound markup.

Start with marking up a static version of some page—forget the css for the moment. Then, on the back-end, build the template that will create that page. Now, all you have to do is insert the values from the logic portion.

Quote:
Separation of UI from transactions is something I do routinely as all of my sites are MVC based. But I didn't know that at the browser level I would have to go further into this. I'll research it further and hopefully get to the bottom of this mess.

Think of it as going less far. You only have to concern yourself with the actual structure, not with presentation, as you code.

//Edit: Well, didn't the three of us decide to all talk at the same time? Laughing out loud --gt

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.