Jump to content

Problem With Inheritance


Randomishlying
 Share

Recommended Posts

Could someone take a look at the below code, and tell me why "<p class="rentalFleetText">" is inheriting a different CSS class. To be specific I think it's inheriting ".bottomRight p"?Being new to HMTL and CSS, my best guess is that I'm only allowed to have one font class per cell, or something weird, but honestly I have no idea.HTML:

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Sarasota-Tampa Express Homepage</title><link href="all.css" rel="stylesheet" type="text/css" /><script type="text/javascript">function MM_swapImgRestore() { //v3.0  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}</script></head><body id="theHeader" onload="MM_preloadImages('images/homeActive.png','images/about-usActive.png','images/route-and-scheduleActive.png','images/flight-informationActive.png','images/fareActive.png')" ><table id="headerTable" border="0" cellspacing="0" cellpadding="0">  <tr>    <td id="logoBox">    <img src="images/Sarasota-Tampa-Express-Logo.png" width="205" height="75" alt="Logo" /></td>    <td>		 <div id="rightsideHeader">   <p id="tagLine">We make things convenient for you! <span id="phoneNumber">Call Today! (941)366-6600</span></p>		    <div align="left" id="navigation"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/homeActive.png',1)"><img src="images/home.png" alt="Home" name="Home" width="82" height="33" border="0" id="Home" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('AboutUs','','images/about-usActive.png',1)"><img src="images/about-us.png" alt="About Us" name="AboutUs" width="110" height="33" border="0" id="AboutUs" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Route','','images/route-and-scheduleActive.png',1)"><img src="images/route-and-schedule.png" alt="Route & Schedule" name="Route" width="178" height="33" border="0" id="Route" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FlightInfo','','images/flight-informationActive.png',1)"><img src="images/flight-information.png" alt="Flight Information" name="FlightInfo" width="184" height="33" border="0" id="FlightInfo" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Fare','','images/fareActive.png',1)"><img src="images/fare.png" alt="Fare" name="Fare" width="70" height="33" border="0" id="Fare" /></a></div>  </div>    </td>  </tr></table><table id="mainTable" width="1024px" height="174px" align="center" border="0" cellspacing="0" cellpadding="0">    <tr>		    <td class="top" colspan="2" valign="bottom"><img align="middle" alt="Introductory Homepage Image" src="images/shuttlebus.png"><p id="welcome" align="left">Welcome to Sarasota - Tampa Express</p><p id="statement" align="left">Sarasota-Tampa Express offers regular daily round trip shuttle service<br>to and from Tampa International Airport.</p></td>   </tr>    <tr>		    <td id="bottomLeft">		 		    </td>		    <td class="bottomRight" align="center" valign="top"><p>Rental Fleet</p><img width="552" height="140" alt="Rental Fleet" src="images/rental-fleet.png"><p class="rentalFleetText">Our limo vans get your big family from place to place.</p></td>    </tr>		 </table>				</body>

CSS:

.body {    font-family: Verdana,Geneva,sans-serif;}.table {    margin: 0;    padding: 0;}.td {    border-style: none;    margin: 0;    padding: 0;}img {    border-style: none;    text-decoration: none;}p {margin: 0px;}#theHeader {    background-image: url("images/header-gradient.png");    background-repeat: repeat-x;    margin: 0;}#headerTable {    height: 150px;    margin-left: auto;    margin-right: auto;    width: 1024px;}#logoBox {    padding-left: 50px;    width: 268px;}#tagLine {    color: #FFFFFF;    font-family: Verdana,Geneva,sans-serif;    font-size: 16px;    font-style: italic;    height: 45px;    margin: 0;    padding-top: 35px;    text-align: left;    width: 706px;}#rightsideHeader {    height: 150px;    margin-top: 0;    width: 624px;}#phoneNumber {    padding-left: 100px;}#navigation {    height: 70px;    width: 706px;}#mainTable {    background-image: url("images/background-gradients.png");}.top {    height: 174px;    margin: 0;    overflow: hidden;    padding: 0;    width: 1024px;}.top img {    float: left;    margin-right: 15px;}#welcome {color: #C34306;font-family: Arial,Helvetica,sans-serif;font-size: 28px;font-style: normal;font-weight: bold;height: auto;text-shadow: 2px 2px 15px #4F4F4F;width: 1024px;text-indent: -37px;margin-bottom: 45px;margin-top: 0px;margin-right: 0px;margin-left: 0px;}#statement {    color: #000000;    font-family: Arial,Arial,Helvetica,sans-serif;    font-size: 14px;    font-style: normal;    font-weight: bold;    height: auto;    margin: 0;    width: 1024px;}#bottomLeft {    height: 440px;    width: 406px;}.bottomRight {    height: 440px;    width: 618px;}.bottomRight p {font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-style: italic;font-size: 19px;text-align: center;}.bottomRight img {margin-top: auto;margin-right: auto;margin-bottom: -36px;margin-left: auto;}.rentalFleetText {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;width: 160px;}

Link to comment
Share on other sites

<td class="bottomRight" align="center" valign="top"> <p>Rental Fleet</p> <img width="552" height="140" alt="Rental Fleet" src="images/rental-fleet.png"> <p class="rentalFleetText">Our limo vans get your big family from place to place.</p> </td>

.bottomRight p this selector selects the element p which is in bottomRight class. so all the p element in this class got that styling.

<p class="rentalFleetText">Our limo vans get your big family from place to place.</p>

and here it also has own class so its geting inherited

Link to comment
Share on other sites

I don't understand why an element with a class doesn't take priority over that selector (that isn't as specific). Will the that selector also take priority over an id? For instance, if I change the rentalFleetText class to an id, would it still inherit the styles from .bottomRight p?

Edited by Randomishlying
Link to comment
Share on other sites

The selector that has most components in it has the highest priority. ".bottomRight p" has two components, while ".rentalFleetText" only has one. If you change the selector to ".bottomRight .rentalFleetText" it should take the highest priority.

Link to comment
Share on other sites

Oh nice, I guess that makes more sense. Thanks for that. I think that will probably come in handy when I need a class to reuse within an already existing class.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...