[CSS] Cascading probleem bij subclass - Softwareontwikkeling

vrijdag 21 februari 2003 10:01

Acties:

je wéét toch

Topicstarter

Hoi,

IK probeer via sub classes in css een mouseOver te maken, maar kennelijk loop ik tegen een overerf eigenschap aan die ik niet helemaal snap. Zou iemand me kunnen uitleggen wat er niet klopt of waardoor het komt?

De HTML:

code:

<html>
<head>
    <title></title>
 <link rel="STYLESHEET" type="text/css" href="css/dropdownMenu.css">
</head>
<body>
 <table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
   <td>
      <table cellpadding="0" cellspacing="0" border="0" width="571">
       <tr>
        <td width="90" class="dropDownParent" nowrap onmouseover="this.className='dropDownParent Selected'" onmouseout="this.className='dropDownParent'" style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;"><a href="#">ABOUT US</a></td> 
        <td width="90" class="dropDownParent" nowrap onmouseover="this.className='dropDownParent Selected'" onmouseout="this.className='dropDownParent'" style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;"><a href="#">PRODUCTS</a></td> 
       </tr>
      </table>
   </td>
  </tr>
  <tr>
   <td>
      <table cellpadding="0" cellspacing="0" border="0" width="571">
       <tr>
        <td width="90" class="dropDownChild" nowrap onmouseover="this.className='dropDownChild Selected'" onmouseout="this.className='dropDownChild'" style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;"><a href="#">ABOUT US</a></td> 
        <td width="90" class="dropDownChild" nowrap onmouseover="this.className='dropDownChild Selected'" onmouseout="this.className='dropDownChild'" style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;"><a href="#">PRODUCTS</a></td> 
       </tr>
      </table>
   </td>
  </tr>         
 </table>  
</body>
</html>

De CSS:

code:

.dropDownParent{
    font-size: 11px;
    font-weight: bold;
    border-right: 1px solid #0b1045;
    width:90px;
    padding-left: 4px;
    padding-top: 4px;
    padding-bottom: 4px; 
    background-color: #fff;
    color: #0B1045; 
    cursor: hand;
}
.dropDownParent a:link, .dropDownParent a:active, .dropDownParent a:visited{
    color: #0b1045;
    text-decoration: none;
}
.dropDownParent.Selected{
    background-color: #0B1045;
    color: #FFF;
}
.dropDownParent.Selected a:link, .dropDownParent.Selected a:active, .dropDownParent.Selected a:visited{
    color: #fff;
    text-decoration: none;
}
.dropDownChild{
    font-size: 11px;
    font-weight: bold;
    border: 1px solid #FFF;
    width:90px;
    padding-left: 4px;
    padding-top: 4px;
    padding-bottom: 4px; 
    background-color: #5b97b1;
    color: #FFF;    
    cursor: hand;
}
.dropDownChild a:link, .dropDownChild a:active, .dropDownChild a:visited{
    color: #FFF;
    text-decoration: none;
}
.dropDownChild.Selected{
    background-color: #FF912D;
    color: #0B1045;
}
.dropDownChild.Selected a:link, .dropDownChild.Selected a:active, .dropDownChild.Selected a:visited{
    color: #0B1045;
    text-decoration: none;
}

Wat er nu gebeurd is dat de dropDownParent Selected de waarde krijgt van de dropDownChild Selected, als ik de volgorde in de css verander en de dropDownChild boven de dropDownParent zet gaat de Parent wel goed maar krijgt de Child Selected de waarde van de Parent Selected. Met andere woorden, de Parent Selected en Child Selected worden als gelijke gezien en dus wordt de laatst gedeclareerde gebruikt, maar waarom? Het zijn toch twee verschillende classes?

Ik begrijp dat ik van de Selected een echte class kan maken en geen subclass en dat het dan wel werkt, maar zo moet het toch ook kunnnen?

offtopic:
sorry voor de layout fuckup... kan dat niet gewoon hard gezet worden die breedte?

[ Voor 16% gewijzigd door DeFeCt op 21-02-2003 10:02 ]

Flickr

vrijdag 21 februari 2003 10:09

Acties:

crisp

Devver

Pixelated

DeFeCt schreef op 21 februari 2003 @ 10:01:
[...]

offtopic:
sorry voor de layout fuckup... kan dat niet gewoon hard gezet worden die breedte?

offtopic:
wordt aan gewerkt

Anyway, Mozilla doet het gewoon goed; IE bied gewoon nog geen ondersteuning voor subselectors (of hoe je dit ook noemt)...

[ Voor 19% gewijzigd door crisp op 21-02-2003 10:23 ]

Intentionally left blank

vrijdag 21 februari 2003 10:17

Acties:

BtM909

Watch out Guys...

crisp schreef op 21 February 2003 @ 10:09:
[...]

offtopic:
wordt aan gewerkt

offtopic:
again: Damn $_/-\o_$ crisp....

Had ik al gezegd dat je de Man bent!

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 21 februari 2003 10:20

Acties:

Willem

Hm, even 1 ding om het geheel wat overzichtelijker te maken wat misschien resulteert in het vinden van de oplossing: Alles in classes definieren. Je styles van de td's moet je gewoon in de CSS kwijt kunnen, en de td een classname geven. Neem gelijk de properties van je table mee, dat maakt het hele gebeuren veel beter te overzien.

Motor (of auto) onderhoud bijhouden

vrijdag 21 februari 2003 10:25

Acties:

crisp

Devver

Pixelated

willem169 schreef op 21 February 2003 @ 10:20:
Hm, even 1 ding om het geheel wat overzichtelijker te maken wat misschien resulteert in het vinden van de oplossing: Alles in classes definieren. Je styles van de td's moet je gewoon in de CSS kwijt kunnen, en de td een classname geven. Neem gelijk de properties van je table mee, dat maakt het hele gebeuren veel beter te overzien.

TS heeft zelf de oplossing al genoemd, maar wil weten waarom het niet werkt. Het antwoord is simpel: IE biedt gewoon nog geen volledige CSS2 ondersteuning

Intentionally left blank

vrijdag 21 februari 2003 10:37

Acties:

DeFeCt

je wéét toch

Topicstarter

crisp schreef op 21 February 2003 @ 10:25:
[...]
TS heeft zelf de oplossing al genoemd, maar wil weten waarom het niet werkt. Het antwoord is simpel: IE biedt gewoon nog geen volledige CSS2 ondersteuning

TS?

....ah topic starter!

Bedankt voor je reactie, als ik het goed begrijp doe ik het dus wel goed maar IE niet, weer een hele geruststelling

Flickr