Results 1 to 4 of 4

Thread: CSS not cascading into table

  1. #1
    Join Date
    Jun 2008
    Posts
    107
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default CSS not cascading into table

    Hello,

    I'm having a problem with my website and I'm hoping someone here can help.

    If you go to http://www.shahspace.com/nuts_and_bolts/home.html and click on "bits and bites" and scroll down to the images with the captions "Figure 8: Example of a hypercolumn" and "Figure 4c: The lobes of the brain" you'll see the problem.

    The problem is that the font style of these captions doesn't match the captions of the other images. I don't kow why. The only difference between these and the other captions is that these ones are in a table whereas the others are not.

    The code looks like this:

    Code:
    ...
    <center>
    <div class="bits_and_bites_image" style="width: 250px;">
    <span>
    <img src="bits_and_bites_images/flow into Knowledge.jpg" border=1>
    Flow into Knowledge
    </span>
    </div>
    </center>
    
    
    <br>
    <br>
    
    <div class="bits_and_bites_image" style="width: 100%; margin-left: 50px;">
    <table cellspacing=0 cellpadding=0 border=0 style="text-align: center; width: 100%;">
    <tr>
    <td style="width: 300px;">
    <span>
    <img src="bits_and_bites_images/hypercolumn.jpg" border=1>
    Figure 8: Example of a hypercolumn
    </span>
    </td>
    <td style="text-align: right;">
    <div style="width: 300px; text-align: center;">
    <span>
    <img src="bits_and_bites_images/lobes.jpg" border=1>
    Figure 4c: The lobes of the brain
    </span>
    </div>
    </td>
    </tr>
    </table>
    </div>
    
    <br>
    <br>
    
    <div class="bits_and_bites_image" style="width: 500px;">
    <span>
    <img src="bits_and_bites_images/meaning and natural law.jpg" border=1>
    Figure 30: The correlation between meaning and natural law
    </span>
    </div>
    ...
    and the CSS class "bits_and_bites_image" looks like this:

    Code:
    div.bits_and_bites_image
    {
    	font-size: 10pt;
    	text-align: center;
    }
    Why is it that a CSS style like this can be defined in the div which contains the table but it doesn`t cascade down into the table and style the text the same way?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    I think it's because the page is in quirks mode. In at least a few browsers, in quirks mode a table is a realm unto itself as far as style goes. If I switch it to standards mode, although that screws up the layout some, those captions then render as expected.

    To see what I mean, add this DOCTYPE to the beginning of the page:

    HTML Code:
    <!DOCTYPE html>
    Put it before everything else at the beginning.

    The browser cache may need to be cleared and/or the page refreshed to see changes.

    Alternatively, you can put inline style for the spans to compensate. Or assign a class to them for that purpose.

    In the long run you would be better off redesigning everything to standards, getting rid of the outdated <center> tag, and using only styles from a stylesheet. But I understand it's sometimes easier in the short term to just fix it. That's why I mentioned that option.

    BTW, even in quirks mode, the layout is screwy in some browsers because in quirks mode the browsers get to decide what to do, there are no hard and fast rules.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2008
    Posts
    107
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thanks, John, but I'm getting a different result from what you describe. The table (and everything in it) disappears.

    Just in case you were viewing it in Firefox (unlike me who is working in IE), I tried Firefox, and it is really messed up--worse than quirks mode--as if none of the CSS existed--on any page.

    So I think before I move any further, I'm going to have to do some serious redesigning work. I'll get back to you later if I'm still having issues with this.

    Thanks again for your help.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Yes, that's what I was saying about quirks mode. But I could have said more about it. Once you slap a standards invoking DOCTYPE on it, it becomes almost a completely different animal. No way to predict how it will react in various browsers. And yes I did test in IE. That's the only browser I have that can easily (as far as I know) switch between standards and quirks.

    You can always apply the styles inline though.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •