Jump to content
Randomishlying

Problem With Inheritance

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;}

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...