CSS based display looks all messed up under Microsoft IE only :(

Printable View

Apr 24, 2011, 09:14
WorldNews

CSS based display looks all messed up under Microsoft IE only :(

Hello,

We run a social networks based news service, were people can post and reply to the News.

The replies section is formed by <div class=""> type formatting.

The replies sections look completely fine under ALL web browsers but IE.
Darn IE i must say :(

Anyway, can you please suggest what changes we need to make to the CSS for the replies sections to also look fine under IE. You can see a sample news articles with replies here:

Gas hits $4 per Gallon, may hit $5, Republicans say do Nothi - RealNewsPost.com

Regards,
Apr 24, 2011, 13:22
EarlyOut

FWIW, it's lousing up only in IE7. I'm not sure why that's happening, but feeding your page through a validator produces over 300 errors, including some nesting problems.
Apr 24, 2011, 19:43
WorldNews

Well that page displays A-OK under all Web browsers but certain IEs!

So if you have any suggestions about the darn IE display problems that would be appreciated. Otherwise, which/where validator did you use? So I can check to see what problems it is producing!

ThanX,

Quote:

Originally Posted by EarlyOut

FWIW, it's lousing up only in IE7. I'm not sure why that's happening, but feeding your page through a validator produces over 300 errors, including some nesting problems.
Apr 24, 2011, 20:30
ralph.m

HTML: The W3C Markup Validation Service

CSS: The W3C CSS Validation Service
Apr 24, 2011, 20:59
WorldNews

A quick check of this validator seems to flag most of the so called Errors at our site due to closing elements with > rather with />

BTW, this validator also reports errors with Sitepoint site and similar with other sites such as:

SitePoint » Web Design, Web Development, Freelancing, Tech News and more 22 Errors

Breaking News and Opinion on The Huffington Post 139 Errors

Google News:
Google News
265 Errors

So I think we are in good company given that our site is producing almost as many errors as Google news site :)

But anyway, if you happen to think of what may be causing the problem display of our site in IE and IE only, please let me know.

Regards,

Quote:

Originally Posted by ralph.m

HTML: The W3C Markup Validation Service

CSS: The W3C CSS Validation Service
Apr 24, 2011, 21:09
deathshadow60

You know, rather than a new post about the same problems every single day, you should back-read replies to the ones you've already posted?
Apr 24, 2011, 21:19
WorldNews

What same problem are you talking about!

This problem reported is with IE and IE browsers ONLY.
It has nothing to do with what I wrote about before.
Unless you think any thing question having to do with CSS is the same problem.

Anyway, if you dont want to answer the question. Dont.
But dont put down the question or the questioner.

Quote:

Originally Posted by deathshadow60

You know, rather than a new post about the same problems every single day, you should back-read replies to the ones you've already posted?
Apr 24, 2011, 21:30
EarlyOut

The basic approach is to fix the validator errors before you start to look for more esoteric reasons for the problems you're seeing. Yes, a lot of them are just minor quibbles about style, but buried in there, you may find the errors that are lousing up the presentation of your page in IE7.
Apr 24, 2011, 21:49
deathshadow60

Quote:

Originally Posted by WorldNews

What same problem are you talking about!

The root of your problems, the page itself and it's broken/outdated methodologies.

Quote:

Originally Posted by EarlyOut

The basic approach is to fix the validator errors before you start to look for more esoteric reasons for the problems you're seeing. Yes, a lot of them are just minor quibbles about style, but buried in there, you may find the errors that are lousing up the presentation of your page in IE7.

Along with getting rid of the tables for nothing, nonsensical heading orders, presentational markup, elements and attributes that don't even EXIST in strict, and all the other things I believe I already outlined once before.

Invalid markup AGAIN being just the tip of the iceberg, the entire site being written in broken outdated methodologies... Silver bullet fixes and one-line CSS changes are band-aids and bailing wire, when what's needed on that page is a demolition team to blow out the old substructure, plow the land flat and build on a new foundation.

... and until you do, you're just going to be playing whack-a-mole with problems like this one.
Apr 24, 2011, 21:59
WorldNews

Well as I wrote I dont think we can go much by the Validator errors, since it is reporting similar number of Errors for Google news, and many other sites that I checked.

And again our page in question display A-OK in ALL Web browsers and it just displays with the problems in the Replies section in IE and IE only. So I think the problem is with IE and not our Web page given the FACT that the page looks A-OK in all Web browsers but IE. And I have read many horror stories from people whose pages looks fine every where but IE.

Anyway, if you have no suggestions to address this IE specific problem.
No problem. ThanX anyway.

Quote:

Originally Posted by EarlyOut

The basic approach is to fix the validator errors before you start to look for more esoteric reasons for the problems you're seeing. Yes, a lot of them are just minor quibbles about style, but buried in there, you may find the errors that are lousing up the presentation of your page in IE7.
Apr 24, 2011, 22:07
WorldNews

You are certainly entitled to your opinion, whatever it may be.

But to call this Web site of Realnewspost.com to be out-dated because it uses Table is so whacked that it does not require much further answer beside stating that many of the Top Web site sin the World, such as craigslist.org which is in the Top 10 Web sites visited, uses Table extensively and in fact its design HAS NOT changed much since 1998! Yet it still it is one of the Top 10 Web sites in the World since when it comes to being a very useful web site, people care NOT about whether you use CSS only or Tables & CSS, but that you deliver useful information and services that makes their lives better.

Anyway, that is the last that I am going to write in response to your opinion which "you are entitled to", although clearly wrong as per again craigslist.org being one of the Top Web sites in the World and being far more outdated than
Realnewspost.com

Quote:

Originally Posted by deathshadow60

The root of your problems, the page itself and it's broken/outdated methodologies.

Along with getting rid of the tables for nothing, nonsensical heading orders, presentational markup, elements and attributes that don't even EXIST in strict, and all the other things I believe I already outlined once before.

Invalid markup AGAIN being just the tip of the iceberg, the entire site being written in broken outdated methodologies... Silver bullet fixes and one-line CSS changes are band-aids and bailing wire, when what's needed on that page is a demolition team to blow out the old substructure, plow the land flat and build on a new foundation.

... and until you do, you're just going to be playing whack-a-mole with problems like this one.
Apr 24, 2011, 22:07
EarlyOut

That's like diving into a whole raft of diagnostic procedures for a problem with your car, but refusing to check to make sure you've got gas in the tank, first.

Don't let other posters bully you - despite what they may try to tell you, tables work in every browser, and things like "nonsensical header order and presentational markup" are all matters of ideology, not actual function. Purity of heart does not have any real effect - it's just something some posters take great delight in insisting upon. I suppose it makes them feel morally superior. You can safely ignore that kind of nonsense.

But validator errors often point to things that really do cause display errors, so they're worth hunting down and fixing. The fact that other sites have similar problems doesn't mean they don't exist. (Hell, the MSNBC site still relies on quirks mode - QUIRKS mode!! That doesn't mean you should follow their lead.)
Apr 24, 2011, 22:51
deathshadow60

Quote:

Originally Posted by WorldNews

But to call this Web site of Realnewspost.com to be out-dated because it uses Table is so whacked that it does not require much further answer beside stating that many of the Top Web site sin the World, such as craigslist.org which is in the Top 10 Web sites visited, uses Table extensively and in fact its design HAS NOT changed much since 1998!

... and for a great many things uses tables to do something USEFUL... Unlike the code for your page. EVEN IF you were doing tables for layout there is only ONE element on the template warranting the use of a table -- and yet you have EIGHT -- which is why you have 38k of markup doing 24k's job.

FOR EXAMPLE:

Code:

<body bgcolor="#FFFFFF" > <table width="1024" border="0" cellspacing="4" cellpadding="4" align="center" bgcolor="#c6cedf"> <tr bgcolor="#6a7faa" class="top_nav_text"> <td colspan="3" align="center"> The Real News Post <br> <div style="font-size: 18px;">An online News magazine, powered by the Social Network, to get the TRUTH out™</div> </td> </tr>

There is no bgcolor attribute -- that doesn't even belong in your HTML. Your outer table and colspan is a slew of markup for NOTHING and again is all stuff that has no business in the HTML. You have a obvious heading that you aren't styling as such.... and you've got presentation in your markup bloating it out for no good reason.

That's one giant wreck of markup for what likely should be just:

Code:

<body> <div id="pageWrapper"> <h1> The Real News Post<br /> <small>An online News magazine, powered by the Social Network, to get the TRUTH out</small> </h1>

... or something to that effect. EVERYTHING else you are doing there goes in the CSS.

Oh, and you do know that 1024 width isn't 1024 friendly, right? Got to take 32-48px off for browser chrome.

Quote:

Originally Posted by EarlyOut

and things like "nonsensical header order and presentational markup" are all matters of ideology, not actual function.

SINCE WHEN?!? ON WHAT PLANET?!?

Proper heading use and orders allow for heading navigation on user agents that support it; not using presentational markup allows for separation of presentation from content -- a technique that not only makes it easier to skin but also SAVES BANDWIDTH by being able to cache most of your appearance/style.

They are NOT a matter of "ideology".

Gah, whatever. Go ahead and just vomit up more sleazy half-assed code then wonder why nothing works. Really pathetic when people are too lazy or shortsighted to learn to do a blasted thing properly... because of course less code with clear rules makes it HARDER to do.
Apr 24, 2011, 23:02
EarlyOut

Quote:

Originally Posted by deathshadow60

Proper heading use and orders allow for heading navigation on user agents that support it; not using presentational markup allows for separation of presentation from content -- a technique that not only makes it easier to skin but also SAVES BANDWIDTH by being able to cache most of your appearance/style.

Right. None of which has any bearing on the poster's problem. You might as well spend time criticizing the shirt he's wearing. Granted, he may be wearing an awful shirt, but that's not why the page isn't displaying properly in a given browser.

Try to focus.
Apr 24, 2011, 23:18
deathshadow60

Quote:

Originally Posted by EarlyOut

Right. None of which has any bearing on the poster's problem. You might as well spend time criticizing the shirt he's wearing. Granted, he may be wearing an awful shirt, but that's not why the page isn't displaying properly in a given browser.

Problems that wouldn't likely occur if the page wasn't built on outdated markup, non-semantic markup, and tables for nothing... basically a bunch of outdated garbage that has NO BUSINESS in the HTML in the first place. (like align, font, color, non-breaking spaces)

Code:

<td colspan="2" align="left" class="reply_bluish"> <p> <div class="reply_author" align="left"> <font color="red">By Guest:   </font>Rick </div>        <div class="reply_author_date" align="right"> 2011-04-21 </div> <br> <br> OK Einstein, if we all drove plug in Hybrids, how would we recharge them and how high would our electricty be be? How much CO2 would be released into the atmosphere because our power plants are working overtime? Heck we can't even keep the electricity going on a hot day when everybody is using the air conditioning. I don't think this whole plug in hybrid stuff has been thought through. And, I dont think it would make a diference in the carbon footprint<br><div align="right"><p><b> <a href="post_comment.php?article=43490&reply4id=1090&rel=0"> Reply</a></b></div><p>

Do I even need to say it?

Problems like wrapping DIV inside P, unclosed P, P around non-P elements, non-breaking spaces for no good reason, single column table wrapping things that shouldn't even be inside a table in the first place...

that's one giant train wreck of nonsense for what should probably be:

Code:

<div class="reply odd"> <h3><span>By Guest: <b>Rick </b></span>2011-04-21</h3> <p> OK Einstein, if we all drove plug in Hybrids, how would we recharge them and how high would our electricty be be? How much CO2 would be released into the atmosphere because our power plants are working overtime? Heck we can't even keep the electricity going on a hot day when everybody is using the air conditioning. I don't think this whole plug in hybrid stuff has been thought through. And, I dont think it would make a diference in the carbon footprint </p> <a href="post_comment.php?article=43490&reply4id=1090&rel=0" class="reply">Reply</a> <div class="reply even">

EVERYTHING else being done there belonging in the CSS ... and most certainly NOT inside a table. Padding, margin, don't bother setting widths (which is ALWAYS a FAIL on nesting), done.
Apr 25, 2011, 09:35
WorldNews

deathshadow60, did you actually say:
"wonder why nothing works...."! WOW!

Realnewspost.com web site looks absolutely great and works 100% as planned in ALL Web browsers, only in IE and IE only, does it not look regarding one aspect of 1 page, which is the display of the threaded Replies. So given the FACT, that this problem exists in IE and IE only, I think we can logically say that this problem is due to IE and not the design of the site. And again the site looks absolutely perfect and works beautifully in every other aspect and in every other Web browser.

With that said, I am sure there are some NON W3 compliant perfect design elements in the site, as again this Sitepoint, Google News, etc. all get 100+ Error flags from the Validator.

With that said too, you are looking at the leaves and missing the forest. That is using your example of the Car, to say about Realnewspost.com ""wonder why nothing works...." when a few Tags are not according to your Bible but otherwise the site is working 100% as planned in all browsers but IE and working beautifully and delivering a very valuable service, as evident by large and rapidly growing traffic that it has gathered in a short time, is like we have given you a Plug-in Hybrid that gets 500 Miles Per Gallon but its Radio system does not work in certain streets, ala one aspect of the site not working in IE, and you are saying that this Car Sucks and ""nothing works...." with this Car.

Well that is really my last comment to "your opinion" on this matter.

Have a good day :)

Quote:

Originally Posted by deathshadow60

... and for a great many things uses tables to do something USEFUL... Unlike the code for your page. EVEN IF you were doing tables for layout there is only ONE element on the template warranting the use of a table -- and yet you have EIGHT -- which is why you have 38k of markup doing 24k's job.

FOR EXAMPLE:

Code:

<body bgcolor="#FFFFFF" > <table width="1024" border="0" cellspacing="4" cellpadding="4" align="center" bgcolor="#c6cedf"> <tr bgcolor="#6a7faa" class="top_nav_text"> <td colspan="3" align="center"> The Real News Post <br> <div style="font-size: 18px;">An online News magazine, powered by the Social Network, to get the TRUTH out™</div> </td> </tr>

There is no bgcolor attribute -- that doesn't even belong in your HTML. Your outer table and colspan is a slew of markup for NOTHING and again is all stuff that has no business in the HTML. You have a obvious heading that you aren't styling as such.... and you've got presentation in your markup bloating it out for no good reason.

That's one giant wreck of markup for what likely should be just:

Code:

<body> <div id="pageWrapper"> <h1> The Real News Post<br /> <small>An online News magazine, powered by the Social Network, to get the TRUTH out</small> </h1>

... or something to that effect. EVERYTHING else you are doing there goes in the CSS.

Oh, and you do know that 1024 width isn't 1024 friendly, right? Got to take 32-48px off for browser chrome.

SINCE WHEN?!? ON WHAT PLANET?!?

Proper heading use and orders allow for heading navigation on user agents that support it; not using presentational markup allows for separation of presentation from content -- a technique that not only makes it easier to skin but also SAVES BANDWIDTH by being able to cache most of your appearance/style.

They are NOT a matter of "ideology".

Gah, whatever. Go ahead and just vomit up more sleazy half-assed code then wonder why nothing works. Really pathetic when people are too lazy or shortsighted to learn to do a blasted thing properly... because of course less code with clear rules makes it HARDER to do.
Apr 25, 2011, 10:03
Paul O'B

Ok here's the "silver bullet fix" that you were looking for to correct the IE7 issues. :)

It's the percentage padding in these elements that kills IE7 so use pixels instead.

Code:

.reply_text, .reply_comment { font-family: "verdana", sans-serif; font-size: 12px; color: Black; line-height:120%; height: auto; text-align:justify; font-weight:normal; padding-left: 10px; padding-right: 20px; }

Of course Jason (deathshadow) is right in that the code is a bit of a mess and does lead to these sorts of problems (you need to ignore the way that he says things but the things that he says are usually right). Even if you must use tables you should still make sure the underlying code is sound and valid for best results.
Apr 25, 2011, 10:49
WorldNews

ThanX. That lil change did the Job.
Now this 1 element of the site that was not looking right under IE and IE only, is looking right.

And certainly our site design could be better, could be more CSS perfect. But we are more focused now on having a 100% functioning Web site as to the purpose of this Web site than getting bogged down with the perfect CSS coding, which although certainly is preferable, is not the purpose of this Web site. With that said, this Web site is a volunteer driven Web site, so we welcome anyone who wants to sign-up as Volunteer coder to help out.

ThanX again.

Quote:

Originally Posted by Paul O'B

Ok here's the "silver bullet fix" that you were looking for to correct the IE7 issues. :)

It's the percentage padding in these elements that kills IE7 so use pixels instead.

Code:

.reply_text, .reply_comment { font-family: "verdana", sans-serif; font-size: 12px; color: Black; line-height:120%; height: auto; text-align:justify; font-weight:normal; padding-left: 10px; padding-right: 20px; }

Of course Jason (deathshadow) is right in that the code is a bit of a mess and does lead to these sorts of problems (you need to ignore the way that he says things but the things that he says are usually right). Even if you must use tables you should still make sure the underlying code is sound and valid for best results.