March 3, 200818 yr Hi - I'm trying to decide whether I need to get someone to help me on a site revamp. I do like doing the site myself but struggle for time. Basically the old site was a bit of a horrible mix of Frontpage and tables Old Website So I've been learning to redo the site with CSS & html an dediting it in notepad. Here's what I have so far: There's only one link working "voices" The new site I know the logo looks pretty rubbish at the top - not sure what to do about that. I've attched our standard logo as a jpg. What I've done is stretch the background across and kept the text "sounds visual" as normal. I seem to find I can get it looking ok in Firefox - switch to IE7 and the margins around a box wil have changed - all very confusing. Plus a friend who has a Dell widescreen laptop finds that the entire right column gets chucked below the left one...?! Anyway grateful for any tips - or should I get a pro in... Here's the CSS code: body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333; text-align: center; margin: 0px; padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px; } a {text-decoration: none; } #wrapper { width: 956px; padding: 10px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; height: auto; text-align: left; border: 1px solid #DDDDDD; } #header { margin: 0px; padding: 0px; height: 75px; width: auto; background-image: url(SVHeader.png); } #container { padding: 0px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background-attachment: scroll; background-image: url(back.gif); background-repeat: repeat-y; background-position: 0px 0px; height: 1%; width: auto; } #left { margin: 0px; margin-bottom: 10px; width: 160px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; float: left; background-color: #f1f1f1; height: 100%; } #boxinnav { height: auto; width: 160px; padding:5px; background-color:; } #navbottom { height: auto; width: 160px; padding:5px; background-color: #d3d3d3; } #nav { margin: 0px; padding: 0px; list-style-image: none; list-style-type: none; } #nav li { margin: 0px; padding: 0px; display: block; background-attachment: scroll; background-image: url(bullet.gif); background-repeat: no-repeat; background-position: 0px 50%; } #nav li a:link, #nav li a:visited, #nav li a:active { color: #666666; text-decoration: none; display: block; margin: 0px; padding-top: 3px; padding-right: 15px; padding-bottom: 3px; padding-left: 15px; width: 130px; } #nav li a:hover { color: #999999; text-decoration: none; } #center { text-align: center; height: auto; width: 504px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; float: left; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 6px; line-height: 1.8em; } #picbox { text-align: center; height: auto; padding: 0px; margin: 0px; border: 0px solid #DDDDDD; } #rightcentre { float: center; text-align: center; height: auto; padding: 0px; margin-left: auto; margin-right: auto; width: 426px; background-color: #d3d3d3; } #boxcentre { text-align: left; height: auto; padding: 5px; line-height: 1.2em; width: 500px; background-color: RGB(109,96,158); } #voiceleftbox { text-align: left; height: 60px; padding: 5px; margin-right: 20px; margin-left: 20px; margin-bottom: 2px; width: 201px; float: left; background-color: #1e90ff; line-height: 1.2em; } #voicerightbox { text-align: left; height: 60px; padding: 5px; margin-left: 20px; margin-bottom: 2px; width: 201px; float: left; background-color: pink; line-height: 1.2em; } #jingle1 { text-align: left; height: 70px; padding: 5px; margin-right: 0px; margin-left: 30px; margin-bottom: 0px; width: 210px; float: left; background-color: black; line-height: 1.2em; } #jingle2 { text-align: left; height: 70px; padding: 5px; margin-left: 0px; margin-bottom: 0px; width: 210px; float: left; background-color: black; line-height: 1.2em; } #centrebottom { float: left; text-align: center; margin-top: 30px; margin-left: auto; margin-right: auto; height: auto; padding: 5px; width: auto; background-color:#d3d3d3; } h1 { font-size: 14px; margin: 0px; padding: 0px; } #right { padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; height: 100%; width: 160px; float: left; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 6px; background-color: #f1f1f1; } #boxinright { height: auto; width: 160px; padding:5px; background-color: pink; } .clearer { font-size: 0px; line-height: 0px; display: block; margin: 0px; padding: 0px; clear: both; height: 0px; width: auto; } #footer { margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; text-align: center; padding-top: 15px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; background-color: #F1F1F1; } #footer p { color: #999999; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding: 0px; } #footer a:link, #footer a:visited, #footer a:active { color: #999999; text-decoration: none; } #footer a:hover { color: #CCCCCC; text-decoration: none; } And the html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Sounds Visual Radio and Music Production</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="generator" content="www.csscreator.com" /> <link rel="stylesheet" href="Web5.css" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"> <ul id="nav"> <br> <b><font color="#696969">NAVIGATION LINKS</b></font> <br><br> <li><a href="#" title="home">HOME</a></li> <li><a href="voices.html" title="voiceovers">VOICEOVERS</a></li> <li><a href="#" title="Jingles">JINGLES & SONIC LOGOS</a></li> <li><a href="#" title="portfolio">RADIO SCRIPTS & STUDIO</a></li> <li><a href="#" title="testimonials">BUYING AIRTIME & INDUSTRY LINKS</a></li> <li><a href="#" title="contact us">CONTACT US</a></li> </ul> <br> <br> <br> <div id="boxinnav"> <font color="#696969"><i>"The service I've received from Sound Visual has been excellent. We recently had to turn around a recording really quickly and they were extremely helpful and efficient, producing a high quality ad for us in record time. Not only did it sound really good, but was also extremely cost-effective. Great value for money!" <br><b></i>Sandy Vossos, ThirtyThreeWest</b> <br> <br> <i>"Sounds Visual never fail to deliver"<br> <b></i>Mark Struthers,<br>Norwich Union</b><br><br> <i>"Rock solid radio ad production. Time after time they deliver the goods." <b></i>Tim Burley, <br>Red Rocket Advertising</b><br><br> <i>"Sounds Visual are creative, reliable and produce commercials that are fantastic value for money. I wouldn't go anywhere else!" <br></i><b>Judy Ware,<br> Radio Powered</b> <br><br> </i></font></b> </div> <br><br><br> </div> <div id="center"> <h1><font color="#696969">Sounds Visual Radio and Music Production</h1> <p>From a dry voice over to a fully sung jingle <b>Sounds Visual</b> is your one-stop-shop for radio commercials. With over 18 years experience in delivering top quality production at sensible prices we have earned our reputation as the radio specialists.</font></p> <div id="picbox"> <img src="iStock2.jpg" alt="Go"align="center"> </div> <div id="rightcentre"> <h1><font color="#696969">ON THE RADIO SIMPLE MESSAGES WORK BEST<br> Take a listen to a few of our winners...</h1></font> </div> <br> <div id="jingle1"> <font color="white"><h1>The Driving Instructor</h1></font> <font color="white">Driving instructors and striptease dancing...</font> <br><br><script language="JavaScript" src="audio/audio-player.js"></script> <object type="application/x-shockwave-flash" data="audio/player.swf" id="audioplayer2" height="17" width="180"> <param name="movie" value="audio/player.swf"> <param name="FlashVars" value="playerID=2&soundFile=MP3/Striptease.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object> </div> <div id="jingle2"> <font color="white"><h1>Falcon Plumbing & Heating</h1></font> <font color="white">Do you like to play with your duck...?</font> <br><br><script language="JavaScript" src="audio/audio-player.js"></script> <object type="application/x-shockwave-flash" data="audio/player.swf" id="audioplayer3" height="17" width="180"> <param name="movie" value="audio/player.swf"> <param name="FlashVars" value="playerID=3&soundFile=MP3/Duck.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object> </div> <div id="jingle1"> <font color="white"><h1>Another amazing ad</h1></font> <font color="white">Driving instructors and striptease dancing...</font> <br><br><script language="JavaScript" src="audio/audio-player.js"></script> <object type="application/x-shockwave-flash" data="audio/player.swf" id="audioplayer4" height="17" width="180"> <param name="movie" value="audio/player.swf"> <param name="FlashVars" value="playerID=4&soundFile=MP3/Striptease.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object> </div> <div id="jingle2"> <font color="white"><h1>Another ad</h1></font> <font color="white">Do you like to play with your duck...?</font> <br><br><script language="JavaScript" src="audio/audio-player.js"></script> <object type="application/x-shockwave-flash" data="audio/player.swf" id="audioplayer5" height="17" width="180"> <param name="movie" value="audio/player.swf"> <param name="FlashVars" value="playerID=5&soundFile=MP3/Duck.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object> </div> <div id="centrebottom"> <p><font color="#696969"><b>Think your business could benefit from a musical approach to your radio advertising...? Prices start from as little as £350. <br>To find out more call Jonathan on 01225 470011.</font></p></b> </div> </div> <div id="right"> <div style="text-align:justify"> <b><font color="#696969">Unbeatable value!</b><br>A 1 voice over radio commercial with music and sound effects costs from just £130! Same day turnaround is possible.</font><br> <br> <i><a href="RateCard.pdf"target="_blank"><font color="mediumpurple">Click here to see the full UK Radio Station Rate Card pdf (right click to save the pdf to your computer).</a></i></font></b> <br><br><font color ="purple"><b>Same day voice overs</b> for radio ads,TV ads, podcasts,telephone hold & web audio. Just call 01225 470011 and ask for Jonathan.</font> <br><br><b><font color="#696969">Have a script ready to produce?</b> For an immediate quote fax it to 01225 470022 or email to radio@soundsvisual.com. We are happy to offer free advice on timing,RACC clearance, voice casting & music selection. <br><br><b>Looking for a voice over?</b> Take a listen to a selection of the best voice artists available <a href="voices.html"> Click here!</font></a> <br><br> <div id="boxinright"> <font color="white"><b>Sung jingles make you stand out from the rest.</b> Take a listen to some examples of what we could do for you.</font> <script language="JavaScript" src="audio/audio-player.js"></script> <object type="application/x-shockwave-flash" data="audio/player.swf" id="audioplayer1" height="12" width="145"> <param name="movie" value="audio/player.swf"> <param name="FlashVars" value="playerID=1&soundFile=MP3/Jingles.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object></div> <br> <p><font color="#696969"><align="justify">From local clients on local radio to national companies like Tesco, Abbey National and Barclaycard, Sounds Visual has the experience and facilities to give you quality radio productoin at excellent prices. We have two digital radio studios and work with the best voiceovers to celebrity voices like Jeoffrey Palmer, Jon Culshaw and Brian Cox.</p></font></div> </div> <div class="clearer"></div></div> <div id="footer"><p>Sounds Visual Radio and Music Prodution<br> PO BOX 4700 Bath BA1 6AH Tel. 01225 470011 Fax. 01225 470022</p> </p> </div> </div> </body> </html> Thanks, Jonny
March 3, 200818 yr Hi Jonny The site is going to be a BIG improvement However, don't feel obliged to have a full width header if it's not working. How about putting a logo into the left column as in my screenshot? OK, I'm not the best logo designer in the world, but I think from an overall design point of view this aproach could work. You'd just need a better logo! A few other quick pointers: If you want your html to validate, you need to learn about nesting your tags correctly. For example: <h1><b>This is incorrect</h1></b> <h1><b>This is correct</b></h1> The bold tag must be correctly nested or contained within the parent element, in this case the H1 tag. Ask google - she'll probably reveal endless tutorials... Also, a bit of colour could really brighten up this design, and perhaps a bit of attention to font sizes & colours too. I've had a quick play with it, let me know what you think?
March 3, 200818 yr Author I like the idea of that - especially like the left and right hand column borders. I attached the logo - prob need a smaller version to fit into that top left hand box Thanks very much - I'd like to learn how you did all of that?! Cheers, Jonny Hi Jonny The site is going to be a BIG improvement However, don't feel obliged to have a full width header if it's not working. How about putting a logo into the left column as in my screenshot? OK, I'm not the best logo designer in the world, but I think from an overall design point of view this aproach could work. You'd just need a better logo! A few other quick pointers: If you want your html to validate, you need to learn about nesting your tags correctly. For example: <h1><b>This is incorrect</h1></b> <h1><b>This is correct</b></h1> The bold tag must be correctly nested or contained within the parent element, in this case the H1 tag. Ask google - she'll probably reveal endless tutorials... Also, a bit of colour could really brighten up this design, and perhaps a bit of attention to font sizes & colours too. I've had a quick play with it, let me know what you think?
March 3, 200818 yr Hi Jonny didn't actually change much - put the logo together quickly in GIMP and played around with your html and css files: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Sounds Visual Radio and Music Production</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="generator" content="www.csscreator.com" /> <link rel="stylesheet" href="Web5.css" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"> <img src="sv_logo.gif" alt="sounds visual" /> <ul id="nav"> <br> <b>Browse Our Site</b> <br><br> <li><a href="#" title="home">HOME</a></li> <li><a href="voices.html" title="voiceovers">VOICEOVERS</a></li> <li><a href="#" title="Jingles">JINGLES & SONIC LOGOS</a></li> <li><a href="#" title="portfolio">RADIO SCRIPTS & STUDIO</a></li> <li><a href="#" title="testimonials">BUYING AIRTIME & INDUSTRY LINKS</a></li> <li><a href="#" title="contact us">CONTACT US</a></li> </ul> <br> <br> <br> <div id="boxinnav"> <font color="#696969"><i>"The service I've received from Sound Visual has been excellent. We recently had to turn around a recording really quickly and they were extremely helpful and efficient, producing a high quality ad for us in record time. Not only did it sound really good, but was also extremely cost-effective. Great value for money!" <br><b></i>Sandy Vossos, ThirtyThreeWest</b> <br> <br> <i>"Sounds Visual never fail to deliver"<br> <b></i>Mark Struthers,<br>Norwich Union</b><br><br> <i>"Rock solid radio ad production. Time after time they deliver the goods." <b></i>Tim Burley, <br>Red Rocket Advertising</b><br><br> <i>"Sounds Visual are creative, reliable and produce commercials that are fantastic value for money. I wouldn't go anywhere else!" <br></i><b>Judy Ware,<br> Radio Powered</b> <br><br> </i></font></b> </div> <br><br><br> </div> <div id="center"> <h1 class="top">Sounds Visual Radio and Music Production</h1> <p>From a dry voice over to a fully sung jingle <b>Sounds Visual</b> is your one-stop-shop for radio commercials. With over 18 years experience in delivering top quality production at sensible prices we have earned our reputation as the radio specialists.</p> <div id="picbox"> <img src="iStock2.jpg" alt="Go" align="center"> </div> <div id="rightcentre"> <h1>ON THE RADIO SIMPLE MESSAGES WORK BEST<br> Take a listen to a few of our winners...</h1> </div> <br> <div id="jingle1"> <font color="white"><h1>The Driving Instructor</h1></font> <font color="white">Driving instructors and striptease dancing...</font> <br><br><script language="JavaScript" src="audio/audio-player.js"></script> <object type="application/x-shockwave-flash" data="audio/player.swf" id="audioplayer2" height="17" width="180"> <param name="movie" value="audio/player.swf"> <param name="FlashVars" value="playerID=2&soundFile=MP3/Striptease.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object> </div> <div id="jingle2"> <font color="white"><h1>Falcon Plumbing & Heating</h1></font> <font color="white">Do you like to play with your duck...?</font> <br><br><script language="JavaScript" src="audio/audio-player.js"></script> <object type="application/x-shockwave-flash" data="audio/player.swf" id="audioplayer3" height="17" width="180"> <param name="movie" value="audio/player.swf"> <param name="FlashVars" value="playerID=3&soundFile=MP3/Duck.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object> </div> <div id="jingle1"> <font color="white"><h1>Another amazing ad</h1></font> <font color="white">Driving instructors and striptease dancing...</font> <br><br><script language="JavaScript" src="audio/audio-player.js"></script> <object type="application/x-shockwave-flash" data="audio/player.swf" id="audioplayer4" height="17" width="180"> <param name="movie" value="audio/player.swf"> <param name="FlashVars" value="playerID=4&soundFile=MP3/Striptease.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object> </div> <div id="jingle2"> <font color="white"><h1>Another ad</h1></font> <font color="white">Do you like to play with your duck...?</font> <br><br><script language="JavaScript" src="audio/audio-player.js"></script> <object type="application/x-shockwave-flash" data="audio/player.swf" id="audioplayer5" height="17" width="180"> <param name="movie" value="audio/player.swf"> <param name="FlashVars" value="playerID=5&soundFile=MP3/Duck.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object> </div> <div id="centrebottom"> <p><b>Think your business could benefit from a musical approach to your radio advertising...? Prices start from as little as £350. <br>To find out more call Jonathan on 01225 470011.</b></p> </div> </div> <div id="right"> <div style="text-align:justify"> <b><font color="#696969">Unbeatable value!</b><br>A 1 voice over radio commercial with music and sound effects costs from just £130! Same day turnaround is possible.</font><br> <br> <i><a href="RateCard.pdf"target="_blank"><font color="mediumpurple">Click here to see the full UK Radio Station Rate Card pdf (right click to save the pdf to your computer).</a></i></font></b> <br><br><font color ="purple"><b>Same day voice overs</b> for radio ads,TV ads, podcasts,telephone hold & web audio. Just call 01225 470011 and ask for Jonathan.</font> <br><br><b><font color="#696969">Have a script ready to produce?</b> For an immediate quote fax it to 01225 470022 or email to radio@soundsvisual.com. We are happy to offer free advice on timing,RACC clearance, voice casting & music selection. <br><br><b>Looking for a voice over?</b> Take a listen to a selection of the best voice artists available <a href="voices.html"> Click here!</font></a> <br><br> <div id="boxinright"> <font color="white"><b>Sung jingles make you stand out from the rest.</b> Take a listen to some examples of what we could do for you.</font> <script language="JavaScript" src="audio/audio-player.js"></script> <object type="application/x-shockwave-flash" data="audio/player.swf" id="audioplayer1" height="12" width="145"> <param name="movie" value="audio/player.swf"> <param name="FlashVars" value="playerID=1&soundFile=MP3/Jingles.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object></div> <br> <p><font color="#696969"><align="justify">From local clients on local radio to national companies like Tesco, Abbey National and Barclaycard, Sounds Visual has the experience and facilities to give you quality radio productoin at excellent prices. We have two digital radio studios and work with the best voiceovers to celebrity voices like Jeoffrey Palmer, Jon Culshaw and Brian Cox.</p></font></div> </div> <div class="clearer"></div></div> <div id="footer"><p>Sounds Visual Radio and Music Prodution<br> PO BOX 4700 Bath BA1 6AH Tel. 01225 470011 Fax. 01225 470022</p> </p> </div> </div> </body> </html> body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333; text-align: center; margin: 0px; padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 0px; } a {text-decoration: none; } #wrapper { width: 956px; padding: 10px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; height: auto; text-align: left; border: 1px solid #DDDDDD; } #header { margin: 0px; padding: 0px; height: 0px; width: auto; } #container { padding: 0px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background-attachment: scroll; background-image: url(back.gif); background-repeat: repeat-y; background-position: 0px 0px; height: 1%; width: auto; } #left { margin: 0px; margin-bottom: 10px; width: 160px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; float: left; background-color: #e5eaf1; height: 100%; } #boxinnav { height: auto; width: 160px; padding:5px; background-color:; } #navbottom { height: auto; width: 160px; padding:5px; background-color: #d3d3d3; } #nav { margin: 0px; padding: 0px; list-style-image: none; list-style-type: none; font-size: 14px; color: #625394; } #nav li { margin: 0px; padding: 0px; display: block; background-attachment: scroll; background-image: url(bullet.gif); background-repeat: no-repeat; background-position: 0px 50%; } #nav li a:link, #nav li a:visited, #nav li a:active { color: #4e82cb; text-decoration: none; display: block; margin: 0px; padding-top: 3px; padding-right: 0px; padding-bottom: 3px; padding-left: 10px; width: 150px; } #nav li a:hover { //background: #625394; //color: #ffffff; text-decoration: none; font-weight:bold; } #center { text-align: center; height: auto; width: 504px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; float: left; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 6px; line-height: 1.8em; } h1.top { color: #62558d; font-size: 24px; font-weight:bold; font-family: serif; } #picbox { text-align: center; height: auto; padding: 0px; margin: 0px; border: 0px solid #DDDDDD; } #rightcentre { float: center; text-align: center; height: auto; padding: 0px; margin-left: auto; margin-right: auto; width: 426px; color: #62558d; } #boxcentre { text-align: left; height: auto; padding: 5px; line-height: 1.2em; width: 500px; } #voiceleftbox { text-align: left; height: 60px; padding: 5px; margin-right: 20px; margin-left: 20px; margin-bottom: 2px; width: 201px; float: left; background-color: #1e90ff; line-height: 1.2em; } #voicerightbox { text-align: left; height: 60px; padding: 5px; margin-left: 20px; margin-bottom: 2px; width: 201px; float: left; background-color: pink; line-height: 1.2em; } #jingle1 { text-align: left; height: 70px; padding: 5px; margin-right: 0px; margin-left: 30px; margin-bottom: 0px; width: 210px; float: left; background-color: black; line-height: 1.2em; } #jingle2 { text-align: left; height: 70px; padding: 5px; margin-left: 0px; margin-bottom: 0px; width: 210px; float: left; background-color: black; line-height: 1.2em; } #centrebottom { float: left; text-align: center; margin-top: 30px; margin-left: auto; margin-right: auto; height: auto; padding: 5px; width: auto; color:#62558d; } h1 { font-size: 14px; margin: 0px; padding: 0px; } #right { padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; height: 100%; width: 160px; float: left; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 6px; background-color: #e5eaf1; } #boxinright { height: auto; width: 160px; padding:5px; background-color: #4e83c9; } .clearer { font-size: 0px; line-height: 0px; display: block; margin: 0px; padding: 0px; clear: both; height: 0px; width: auto; } #footer { margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; text-align: center; padding-top: 15px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; background-color: #F1F1F1; } #footer p { color: #999999; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding: 0px; } #footer a:link, #footer a:visited, #footer a:active { color: #999999; text-decoration: none; } #footer a:hover { color: #CCCCCC; text-decoration: none; } hope that helps
March 3, 200818 yr Looking good. There was one problem I came across though: the audio button under "Falcoln Plumbing" is slightly hidden in Safari. I imagine this is because you've put a fixed height on that box, and the text has jumped onto 2 lines and pushed the button out of the box. Rob
March 3, 200818 yr Author Looking good. There was one problem I came across though: the audio button under "Falcoln Plumbing" is slightly hidden in Safari. I imagine this is because you've put a fixed height on that box, and the text has jumped onto 2 lines and pushed the button out of the box. Rob Thanks for spotting that. What would you suggest to avoid that happening? The code for that bit is: #voiceleftbox { text-align: left; height: 60px; padding: 5px; margin-right: 20px; margin-left: 20px; margin-bottom: 2px; width: 201px; float: left; background-color: #1e90ff; line-height: 1.2em; } #voicerightbox { text-align: left; height: 60px; padding: 5px; margin-left: 20px; margin-bottom: 2px; width: 201px; float: left; background-color: pink; line-height: 1.2em; Thanks Jonny
March 3, 200818 yr You could try taking off the height: element; that way it will resize to fit the content inside. Or just make the height taller, as a temporary fix.
March 4, 200818 yr I've seen many web design companies that couldn't put something together like you have... No honestly there are some real bad designers out there that actually manage to run a business. The new design is a great improvement. I would strongly consider looking at your W3C standards, as your HTML has lots of errors and your CSS has a few also. Use the web design validators over at W3C.
Create an account or sign in to comment