CSS/HTML5 Issues with scope of font/text properties

Question

I've been working on building a website for a while now (scarletorigami.com, if it helps). I've written some PHP which generates lists of captioned thumbnail links to individual pages, which have the following structure:

    #thumbnails {
      margin-top: 0;
      margin-bottom: 0;
      margin-left: auto;
      margin-right: auto;
      padding: 60px;
      width: 680px;
      background-color: #BBCCBB;
    }
    #thumb {
      margin: 0;
      padding: 0;
      width: 220px;
      height: 280px;
      background-color: #BBBBBB;
      text-align: center;
      font-style: italic;
      font-size: 100%;
      border: 1px solid #ccc;
    }
    #thumb:hover {
      border: 1px solid #777;
    }
    #thumb a {
      display: inline-block;
      width: 220px;
      height: 280px;
      text-decoration: none;
      margin: 0;
      padding: 0;
    }
    #thumb_image {
      width: 220px;
      height: 220px;
    }
    #caption {
      font-size: .65em;
      float: bottom;
      margin: 0;
      padding: 0;
      background-color: #AACCAA;
    }

<div id=thumbnails>
  <div id=thumb>
    <a href="link to content">
      <div id=thumb_image>
        image or "Can't find image" message
      </div>
      <div id="caption">
        Name
        <br />Author Date
      </div>
    </a>
  </div>
</div>

I've encountered a number of issues regarding the scope of various text and font properties on firefox and safari (can't test any others at the moment).

Specifically, if I move the 'text-decoration:none' line anywhere other than the #thumb a section, underscores reappear on all text in the thumbnail caption, and I can't get the 'font-size:.65em' to take effect in the 'caption' div. I can change the font size in the whole section by moving the line to the #thumb a or #thumb section, but I cannot change just the caption text size by any means I've tried. In both cases, using firefox's inspect element feature shows that inheritance of css properties is working properly for all other properties, so it seems like it is some kind of quirk or issue with how text/font properties are overridden or passed down.

Are you sure there is no css on a other than the one you showed us, wich will explain why it get overwritten? On a side note you make a list of thumbs but use an id on all html element, id must be unique, so better use class.Also you should not put block element inside an inline element (div inside an a) it makes your html invalid and will not be well supported by non html5 web browser. So start by validating your html then correct your css. — Laurent Fauvel, Dec 20 '15 at 21:34
The html5 requirement is intentional, hence my choice of tags. I'm not sure what you mean by your comment on ids- do you mean that each thumbnail should have a unique id? That seems like it would just create a huge number of redundant labels, since each one has the same styling. There is css other than what I showed, but none of it applies to any of these elements (nothing regarding more general 'a's for example) edit- full css can be found at scarletorigami.com/style.css — P..., Dec 20 '15 at 21:39
I am saying you will likely have more than one #thumb, #thumb_image, ... on the same html page, if so you must not use id but class, id are unique identifier they must not be on multiple html elements on same page. — Laurent Fauvel, Dec 20 '15 at 21:46
Else about the div inside the a, check this question : http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct — Laurent Fauvel, Dec 20 '15 at 21:50
What you can try for your font and text decoration issue is adding !important after the value (text-decoration: none!important) it will force the use of this value if another was in competition with it. But I will not recommand it, when you start using !important it is often sign of badly written css/html. Better cure the problem than bandage it... . — Laurent Fauvel, Dec 20 '15 at 21:53

score 0 · Accepted Answer · answered Dec 20 '15 at 21:58

In keeping with Lauren Fauvel's suggestion, I changed my code so that my divs were given classes instead of ids, and somehow this seems to have fixed the scope problem. I'm still not sure why exactly the problem was caused in the first place, but if properly written html doesn't have the problem, I suppose I should consider this solved.

CSS/HTML5 Issues with scope of font/text properties

1 Answers1