September 10, 201114 yr Hi everyone, I know, I know, just another person complaining about why styles weren't applied when they should have been. haha Here's my code: <!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>Untitled Document</title> <style type="text/css"> html, body { margin: 0px; padding: 0px; } h1,h2,h3,p,div,ul,li { margin: 0; padding: 0; } #wrapper { width: 900px; position: relative; margin-right: auto; margin-left: auto; margin-top: 20px; } #logo { float: left; height: 200px; width: 328px; margin-right: 5px; } #header { width: 567px; height: 103px; float: right; } #headerBottom { float: right; height: 97px; width: 567px; } #mainContent { float: left; width: 600px; margin-top: 20px; border: 1px dashed #333; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; margin-right: 20px; } #rightContent { width: 236px; float: right; margin-top: 20px; border: 1px dashed #333; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; } #mainContent,rightContent h1{ font-family: Arial, Helvetica, sans-serif; font-size: 1.3em; line-height: 1.3em; font-style: normal; text-align: center; border-bottom: 2px solid #333; color: #300; } #mainContent,rightContent h2 { font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; line-height: 1.2em; font-style: normal; text-align: center; color: #630; } #mainContent,rightContent h3 { font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; line-height: 1.5em; font-style: normal; color: #300; } #mainContent,rightContent ul { padding-left: 20px; font-family: Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1.5em; font-style: normal; color: #000; } #mainContent,rightContent li { font-family: Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1.5em; font-style: normal; color: #000; } #mainContent p { font-family: Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1.5em; font-style: normal; color: #000; } </style> </head> <body> <div id="wrapper"> <div id="logo"> <img src="_images/WoodKraft logo-1.gif" width="328" height="200" alt="Logo" /></div> <div id="header"><img src="_images/top_banner.jpg" width="567" height="103" alt="Header" /></div> <div id="headerBottom"><img src="_images/bottomHeader.gif" width="567" height="97" alt="Bringing ideas to life" /></div> <div id="mainContent"> <h1>Freestanding Wooden MDF Letters and Numbers 12mm Thick</h1> <h2>Cheapest on eBay!</h2> <h3>Details</h3> <ul> <li> Height and width of uppercase letters are 140mm.</li> <li>All numbers are 140mm in height.</li> <li>Thickness of MDF is 12mm.</li> <li>Available in lower and uppercase.</li> <li>Made from high quality MDF and cut out on a CNC Router Table for maximum precision.</li> <li>The price is per character e.g. if you want the word "BIRTHDAY", you will need to order 8 characters.</li> <li>All characters are delivered unpainted.</li> </ul> </div> <div id="rightContent"> <h2>Delivery</h2> <p>After purchase, please send us a message via Ebay messaging stating your letters and/or numbers required. Please also include any other instructions.<br /> We gurrantee that all orderes placed and paid for before 12 noon will be dispatched the same day (excluding bank holidays and weekends) <h2>Payment</h2> <p>We accept PayPal ONLY.</p> </div> </div> </body> </html> For some reason, when I grouped "rightContent" with "mainContent" in the CSS for the h1 tags etc, some of my styles disappeared from the mainContent box. Am I doing something wrong? Does anyone have a solution to this? Also, I can't work out why rightContent shows up below mainContent. Please test this in your browsers so you can see exactly what is happening. Thank you in advance!
September 10, 201114 yr Hey, When you group your css statements, you are using: #mainContent,rightContent h1 Change this to: #mainContent h1,#rightContent h1 and do the same for the h2, h3, li's etc. To fix the positioning issue, just remove the 20px right margin on #mainContent. Hope it helps! Edited September 10, 201114 yr by Mikec1uk
September 10, 201114 yr Author Hi, thanks so much for your help! It worked perfectly. I don't know what I would have done without this website! I don't thing i'll ever get the hang of CSS! haha Thanks again!
Create an account or sign in to comment