CSS not cascading into table [Archive]

View Full Version : CSS not cascading into table

gib65

08-25-2012, 03:19 PM

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:

...
<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:

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?

jscheuer1

08-25-2012, 06:00 PM

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:

<!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.

gib65

08-26-2012, 04:47 AM

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.

jscheuer1

08-26-2012, 06:20 AM

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.