SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard Mincer's Avatar
    Join Date
    Mar 2001
    Location
    London | UK
    Posts
    1,140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS behaviour...is this normal?

    I've been playing with a php class library that creates html pages and I was looking at the html and css it uses.

    Here is the html page...

    Code:
    <!DOCTYPE html 
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
      <head>
        <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
        <title>phpHtmlLib Widgets - VerticalCSSNavTable</title>
        <link href="styles.css" rel="stylesheet" type="text/css" />
      </head>
      
      <body>
        
        <table width="400" border="0" cellspacing="0" cellpadding="0" id="verticalcssnav">
          <caption>VerticalCSSNavTable</caption>
          <tr>
            <td>
              <div id="subtitle">Widget</div>
              <a href="#" title="This is title text" class="navurl">Some Link</a>
              <a href="#" class="navurl">Another</a>
              <a href="#" title="This is title text" class="navurl">Another</a>
            </td>
          </tr>
        </table>
        
      </body>
      
    </html>
    and here is the (relevant bits of the) style sheet...

    Code:
      #navtable a:active,a:link,a:visited {
      	font-weight: bold;
      	color: #505dd8;
      }
    
      #navtable a:hover {
      	color: #505dd8;
      	background-color: #eeeeee;
      	text-decoration: none;
      }
    
      #verticalcssnav  {
      	vertical-align: top;
      	font-family: arial, helvetica, sans-serif;
      }
    
      #verticalcssnav caption {
      	font-size: 10pt;
      	font-weight: bold;
      	color: #FFFFFF;
      	background-color: #999999;
      	border: 1px solid #999999;
      }
    
      #verticalcssnav div {
      	font-size: 8pt;
      	color: #000000;
      	padding: 2px 4px 2px 4px;
      	border-right: 1px solid #999999;
      	border-left: 1px solid #999999;
      	border-bottom: 1px solid #999999;
      }
    
      #verticalcssnav div#subtitle {
      	font-size: 10pt;
      	font-weight: bold;
      	color: #777777;
      	background-color: #eeeeee;
      	text-align: center;
      }
    
      #verticalcssnav a.navurl:active,a.navurl:link,a.navurl:visited {
      	display: block;
      	font-family: sans-serif;
      	font-size: 8pt;
      	padding: 2px 4px 2px 4px;
      	text-decoration: none;
      	color: #000000;
      	background-color: #FFFFFF;
      	border-bottom: 1px solid #999999;
      	border-right: 1px solid #999999;
      	border-left: 1px solid #999999;
      }
    
      #verticalcssnav a.navurl:hover {
      	color: #000000;
      	background-color: #eeeeee;
      }
    Now the strange thing is that I can't work out why, if I remove the '#navtable' id declarations, the style of the links in the table changes. Why would the #navtable id have any relevance at all to the page?

    Thanks,

    Matt.

  2. #2
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FIrst thing I notice, you're missing a closing DIV. Not sure that should affect it it, but you never know. Also where is the formatting for subtitle? And also when you say remove the id declartions for #navtable -- do you mean in the stylesheet or from the page?

    If it was from the stylesheet then it sounds like for some reason they are being inherited to apply to the whole page not just that bit...
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky

  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you remove the IDs from the the tables...then for sure the CSS will not be applied. Why? Because it is the ID that the CSS is using to apply the style, with what is called an ID selector, denoted by the #. This tells the CSS to find the object with an ID identical to the one following the # and apply the accompanying style rules to that object.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





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
  •