Randomishlying Posted December 26, 2011 Share Posted December 26, 2011 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 More sharing options...
birbal Posted December 26, 2011 Share Posted December 26, 2011 <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 More sharing options...
Randomishlying Posted December 26, 2011 Author Share Posted December 26, 2011 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? Link to comment Share on other sites More sharing options...
Ingolme Posted January 2, 2012 Share Posted January 2, 2012 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 More sharing options...
Randomishlying Posted January 2, 2012 Author Share Posted January 2, 2012 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.