WordPress.org

Ready to get started?Download WordPress

Forums

Tabular data in posts - IE6 screws up display (9 posts)

  1. dherren
    Member
    Posted 8 years ago #

    This isn't specifically a WP problem, I don't think, but you guys are sharp... I have a few pages in which I need to display tabular data in an html table.

    The pages validate xhtml 1.0 transitional and my css validates.

    The pages display perfectly in Opera (linux, OSX, Windows), Firefox (linux, OSX, Windows), Omniweb (OSX), iCab (OSX), Safari (OSX), and Camino (OSX). The html tables display properly inside the post without overrunning the enclosing div.

    In IE6, the tables ignore the bounding divs and draw underneath the sidebar. If there is no table in the post, then IE displays everything just fine (ok, not necessarily everything).

    I have spent the last 9 hours experimenting with my css to find a way to get this to work in IE. I'm pretty sure it did once until I updated IE on my test box.

    Anyone have a moment to shoot me some suggestions?

    You can see an example of the error at:

    http://www.fhuhs.org/?page_id=70 (which is just a test page), or,

    http://www.fhuhs.org/?page_id=32 (one of the real issues)

  2. pizdin_dim
    Member
    Posted 8 years ago #

    Have you tried setting style="width: 90%" on the table itself?

  3. pizdin_dim
    Member
    Posted 8 years ago #

    Also,

    Just looked at your HTML code and I seem to recall IE having a problem with this type of CSS declaration:

    <style type="text/css" media="screen">@import url( http://www.fhuhs.org/wp-ontent/themes/fhuhs/style.css );</style>

    Perhaps try this instead:

    <link rel="stylesheet" type="text/css" href="http://www.fhuhs.org/wp-ontent/themes/fhuhs/style.css" media="screen" />

  4. dherren
    Member
    Posted 8 years ago #

    Thanks for the suggestions.

    Have you tried setting style="width: 90%" on the table itself?

    The only effect of that is the make the table too narrow on ALL the other browsers other than IE. Here is my style declaration for tables within posts:

    .post table {
    text-align: center;
    border: 1px solid navy;
    width: 100%;
    margin: 20px 3px 20px 5px;
    }

    Just looked at your HTML code and I seem to recall IE having a problem with this type of CSS declaration:

    <style type="text/css" media="screen">@import url( http://www.fhuhs.org/wp-ontent/themes/fhuhs/style.css );</style>

    Perhaps try this instead:

    <link rel="stylesheet" type="text/css" href="http://www.fhuhs.org/wp-ontent/themes/fhuhs/style.css" media="screen" />

    The code you mention is not mine--that's generated by wordpress. And within its capabilities, IE renders the rest of my CSS reasonably well...

  5. pizdin_dim
    Member
    Posted 8 years ago #

    1. So it didn't fix anything in exploder?

    2. Have you tried the stylesheet change I suggested or not?

    I know the code is generated by WordPress but it now belongs to you. The reason I suggested the change is because we all know exploder has a huge number of rendering issues because WordPress generates standards-compliant HTML and sadly exploder just can't cope with that.

    Edit: Just looking at your stylesheet code; while the HTML may be generated by WordPress, it was written by David Herren (http://www.idiomatrix.com) so technically that's where the "compatibility" issue responsibility lies.

    I know for a fact that it can't deal with media other than "screen" for instance and I do remember having to hack the header code from using "@import" to "link rel" to make that work.

    Perhaps try changing width from 100% to auto instead.

  6. dherren
    Member
    Posted 8 years ago #

    1. So it didn't fix anything in exploder?

    Nope.

    2. Have you tried the stylesheet change I suggested or not?

    The import one? I haven't modified the header code, no. I'll try that next I suppose.

    Edit: Just looking at your stylesheet code; while the HTML may be generated by WordPress, it was written by David Herren (http://www.idiomatrix.com) so technically that's where the "compatibility" issue responsibility lies.

    That's me....that's what I'm trying to fix.

    Perhaps try changing width from 100% to auto instead.

    No effect...other than to totally screw up the display on ALL the other browsers by shrinking the table to the smallest size possible to fit the data...not what I want. I want the table to "fit" the enclosing post div.

  7. dherren
    Member
    Posted 8 years ago #

    IE sucks IE sucks IE sucks IE sucks...

    Ok, I feel better now.

    Many thanks to pizdin_dim... problem solved.

    I can't even begin to imagine why this type of stylesheet declaration:

    <style type="text/css" media="screen">
    @import url( <?php bloginfo('stylesheet_url'); ?> );
    </style>

    works for everything EXCEPT tables inside a div with IE, but changing to this type of declaration:

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />

    Fixes the table problem. Go figure.

    And explain to me how it is that IE is still the most widely used browser?

    Thanks again...

  8. pizdin_dim
    Member
    Posted 8 years ago #

    Some interesting stylesheet/ie stuff possibly worth reading:

    http://css-discuss.incutio.com/?page=ImportHack

    If you have a stylesheet that needs to be hidden from IE (all versions) give it a mediatype different from "all", i.e. "screen".
    <style type="text/css"><!-- @import "modern.css" media="screen"; --></style>

    This seems to suggest that exploder can't cope with the media attribute being "screen". Like you said:

    IE sucks IE sucks IE sucks IE sucks.

    Typical of most things in this world: you don't need quality to have popularity, you just need effective marketing.

    I'm glad you fixed the problem.

  9. vkaryl
    Member
    Posted 8 years ago #

    IE is the most widely used browser because 90% of the people online today are simply using the machine without any understanding at all. And they don't WANT to understand: they don't want to do anything but turn it on and go; and only those of us who tweak have any problems with their "going" - that's because we spend INORDINATE amounts of time beating websites we design into submission to the 90% of the world which still uses IE.

    It's a conundrum.... and don't hold your breath on "IE7" to fix it either....

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags