Databases
StackOverflow2013
Postsdbo
POOveriding custom CSS with another class
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POOveriding custom CSS with another class
    text
    copied!<p>I'm having trouble establishing an "on" state for a tab of this menu. I ended up migrating from using UL and LI due to IE 6 issues with display. Am now using a table.</p> <p>Table works very well in target browsers with a rollover color bug in Opera but the rest are good.</p> <p>Thing is I need to have an "on" state for the loaded tab where it has the rolled-over styling.</p> <p>Thus far I have not been able to effect any changes on an individual <code>&lt;TD&gt;</code>.</p> <p>Page in question is in development at <a href="http://hiv411.dreamhosters.com/page.php" rel="nofollow noreferrer">http://hiv411.dreamhosters.com/page.php</a></p> <p>Thank you very much for any advice!</p> <p>Table code looks like:</p> <pre><code>&lt;table border="0" cellspacing="0" cellpadding="0" class="tabs"&gt; &lt;tr&gt; &lt;td class="tabs"&gt;&lt;a href="page.php" class="tabs"&gt;First Link&lt;/a&gt;&lt;/td&gt; &lt;td class="tabs"&gt;&lt;a href="page.php" class="tabs"&gt;Another Link&lt;/a&gt; &lt;/td&gt; &lt;td class="tabOn"&gt;&lt;a href="page.php" class="tabOn"&gt;A Third Link Which is Longer&lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>CSS is like so:</p> <pre><code>.tabOn td { width:140px; height:29px; border: 1px solid #fff; background-image:none; background-color:#FFF; color:#000; font-size:9pt; font-weight:bold; text-align:center; white-space:nowrap; } .tabOn td a{ color:#000; display: block; padding: 6px; padding-top:7px; height:17px; text-decoration: none; margin-top:1px; white-space:nowrap; } /* NORMAL STATE */ table.tabs { border-collapse: collapse; } table.tabs td { width:140px; height:29px; border: 1px solid #fff; background:url(/images/tabOverBG.jpg) repeat-x; background-position:bottom; font-size:9pt; font-weight:bold; text-align:center; white-space:nowrap; } table.tabs td a{ display: block; padding: 6px; height:17px; text-decoration: none; margin-top:4px; white-space:nowrap; } table.tabs td a:link, table.tabs td a:visited { color: #fff; } table.tabs td a:hover, table.tabs td a:active, table.tabs td:hover { color: #000; background-color: #fff; background-image:none; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload