![]() |
|
|||||||
| Notices |
| Graphic Design and Web Design Help Get Graphic Design and Web Design related help here |
![]() |
|
|
LinkBack (2) | Thread Tools | Display Modes |
|
||||
|
Iam currently building a website and everything is a'ok in firefox, safari etc but im getting nasty gaps between my header image and my image below the header which is just a pic of a line.
Now i know this is a doc type problem but cant find the right doc type does anyone know it? this is the website: White Hawk Designs {only got a home page at the moment, i wanna fix this bug before i code the other pages} Thanks guys |
|
|
|
||||
|
Hmmmm, you don't have any html tags. I'd drop your current code into this set up:
Code:
__________________
Standards Compliant Web Consulting and Development | Labs - Free Snippets and Codes | CSS Wizardry |
|
||||
|
Looks good to me... IE7
BUT... It's not W3C Compliant as you tout. Markup Validation: FAILED 20 Errors W3C CSS Validation: FAILED 2 Errors 49 Warnings Opacity isn't valid per the CSS 2.1 standards (hopefully in 3.0) SInce I like your design, I thought I'd throw this in for you: White Hawk Designs in all Valid XHTML 1.0 Strict HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>White Hawk Designs</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <script type="text/javascript" src="js/prototype.js"> </script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"> </script> <script type="text/javascript" src="js/lightbox.js"> </script> <style type="text/css"> /*<![CDATA[*/ br.c1 {clear: both;} /*]]>*/ </style> </head> <body> <div id="header"> <div class="mainLogo"><img src="http://www.graphic-design-forum.com/images/header/logo.gif" width="286" height="137" alt="White Hawk Designs" title="White Hawk Designs" /></div> <div id="topIcons"> <div class="icons"><a href="#"><img src="http://www.graphic-design-forum.com/images/header/homeIco.gif" width="76" height="104" alt="home" title="home" /></a></div> <div class="icons"><a href="#"><img src="http://www.graphic-design-forum.com/images/header/portfolioIco.gif" width="76" height="104" alt="Portfolio" title="Portfolio" /></a></div> <div class="icons"><a href="#"><img src="http://www.graphic-design-forum.com/images/header/servicesIco.gif" width="76" height="104" alt="Services" title="Services" /></a></div> <div class="icons"><a href="#"><img src="http://www.graphic-design-forum.com/images/header/contactIco.gif" width="76" height="104" alt="Contact Us" title="Contact Us" /></a></div> </div> <div class="headerLine"><img src="http://www.graphic-design-forum.com/images/header/headerLine.gif" width="845" height="31" alt="** IMAGE DESCRIPTION **" /></div> </div> <div id="mainHolder"> <div id="homeLeft"><img class="designWords" src="http://www.graphic-design-forum.com/images/home/designWords.gif" width="274" height="79" alt="Design" title="Design" /> <!--START OF REVIEWS--> <div class="reviews"><img src="http://www.graphic-design-forum.com/images/home/quoteOne.gif" width="11" height="9" alt="** IMAGE DESCRIPTION **" /> <span class="reviewText">I thought whitehawk did a fantastic job. I needed a new company logo and website and White Hawksdesign team understood exactly what I was looking for and delivered right on time.</span> <img src="http://www.graphic-design-forum.com/images/home/quoteTwo.gif" width="10" height="9" alt="** IMAGE DESCRIPTION **" /> <span class="reviewer">Michael Wakeham - Hampton Knight</span> <img src="http://www.graphic-design-forum.com/images/home/reviewArrow.gif" width="7" height="6" alt="** IMAGE DESCRIPTION **" /></div> <div class="reviews"><img src="http://www.graphic-design-forum.com/images/home/quoteOne.gif" width="11" height="9" alt="** IMAGE DESCRIPTION **" /> <span class="reviewText">The next time I need some design work doing I know exactly who to call. White Hawk delivered exceptional work exactly when they said they would. And during the whole design process I was never kept in the dark.</span> <img src="http://www.graphic-design-forum.com/images/home/quoteTwo.gif" width="10" height="9" alt="** IMAGE DESCRIPTION **" /> <span class="reviewer">Tom Russell - London DJ</span> <img src="http://www.graphic-design-forum.com/images/home/reviewArrow.gif" width="7" height="6" alt="** IMAGE DESCRIPTION **" /></div> <!--END OF REVIEWS--> <img class="lineBreak" src="http://www.graphic-design-forum.com/images/home/lineBreak.gif" width="308" height="9" alt="** IMAGE DESCRIPTION **" /> <div id="companyPoints"> <ul class="bulletOne"> <li><span class="bullet">Professional and affordable web and graphic design</span></li> <li><span class="bullet">All web designs coded to new web standards and for all web browsers (SAFARI, FIREFOX, I.E, OPERA)</span></li> <li><span class="bullet">Exceeding expectations</span></li> <li><span class="bullet">kept updated from start to finish</span></li> </ul> </div> <img class="lineBreak" src="http://www.graphic-design-forum.com/images/home/lineBreak.gif" width="308" height="9" alt="** IMAGE DESCRIPTION **" /></div> <!--END OF HOME LEFT--> <div id="homeRight"> <div id="homeTop"><img class="titleArrow" src="http://www.graphic-design-forum.com/images/home/arrowTitle.gif" width="26" height="25" alt="** IMAGE DESCRIPTION **" /> <h1 class="welcome">Welcome</h1> <img class="rightBreak" src="http://www.graphic-design-forum.com/images/home/lineBreakRight.gif" width="459" height="8" alt="** IMAGE DESCRIPTION **" /> <p class="homeText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod <span class="homeTextGreen">White Hawk Designs</span> ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation <span class="homeTextGreen">White Hawk Designs</span> suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla <span class="homeTextGreen">White Hawk Designs</span> at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatu zzril delenit augue duis dolore te <span class="homeTextGreen">White Hawk Designs</span> nulla facilisi.</p> </div> <div id="homeBottom"><img class="titleArrow" src="http://www.graphic-design-forum.com/images/home/arrowTitle.gif" width="26" height="25" alt="** IMAGE DESCRIPTION **" /> <h1 class="welcome">Our Work</h1> <img class="rightBreak" src="http://www.graphic-design-forum.com/images/home/lineBreakRight.gif" width="459" height="8" alt="** IMAGE DESCRIPTION **" /> <p class="homeText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod <span class="homeTextGreen">White Hawk Designs</span> ut laoreet dolore magna aliquam erat volutpat. Ut wisi</p> <div class="threeImages"> <div class="webImage"><a href="http://www.graphic-design-forum.com/images/image-1.jpg" rel="lightbox" title="Marketing Company web design"><img src="http://www.graphic-design-forum.com/images/home/webOne.gif" width="151" height="78" alt="Kumo" title="Kumo" /></a> <span class="webImageText">clean web style</span></div> <div class="webImage"><a href="http://www.graphic-design-forum.com/images/image-3.jpg" rel="lightbox" title="Estate agency company website"><img src="http://www.graphic-design-forum.com/images/home/webThree.gif" width="151" height="78" alt="Kumo" title="Kumo" /></a> <span class="webImageText">Professional web style</span></div> <div class="webImage"><a href="http://www.graphic-design-forum.com/images/image-2.jpg" rel="lightbox" title="Photographers personal portfolio"><img src="http://www.graphic-design-forum.com/images/home/webTwo.gif" width="151" height="78" alt="Kumo" title="Kumo" /></a> <span class="webImageText">Advanced web style</span></div> </div> <p class="bottomHomeText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod <span class="homeTextGreen">White Hawk Designs</span> ut laoreet dolore magna aliquam erat volutpat. Ut wisi</p> <img class="w3ok" src="http://www.graphic-design-forum.com/images/home/w3Ok.gif" width="48" height="50" alt="w3c compliant" title="w3c compliant" /></div> </div> <br class="c1" /></div> <div id="footer"> <div id="footerMenu"><img class="footerArrow" src="http://www.graphic-design-forum.com/images/footer/footerArrow.gif" width="25" height="23" alt="** IMAGE DESCRIPTION **" /> <ul> <li><a href="#">Home</a></li> <li>|</li> <li><a href="#">Services</a></li> <li>|</li> <li><a href="#">Portfolio</a></li> <li>|</li> <li><a href="#">About Us</a></li> <li>|</li> <li><a href="#">Contact Us</a></li> <li>|</li> </ul> <br class="c1" /> <img class="footerBreak" src="http://www.graphic-design-forum.com/images/footer/lineBreak.gif" width="339" height="7" alt="** IMAGE DESCRIPTION **" /></div> <div id="footerMenuTwo"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <div id="footerMenuThree"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <img class="lineSide" src="http://www.graphic-design-forum.com/images/footer/lineSide.gif" width="8" height="90" alt="** IMAGE DESCRIPTION **" /> <div class="browsers"> <div class="browser"><img src="http://www.graphic-design-forum.com/images/footer/firefox.gif" width="55" height="60" alt="FireFox" title="FireFox" /></div> <div class="browser"><img src="http://www.graphic-design-forum.com/images/footer/explorer.gif" width="55" height="60" alt="Internet Explorer" title="Internet Explorer" /></div> <div class="browser"><img src="http://www.graphic-design-forum.com/images/footer/safari.gif" width="55" height="60" alt="Safari" title="Safari" /></div> <div class="browser"><img src="http://www.graphic-design-forum.com/images/footer/opera.gif" width="55" height="60" alt="Opera" title="Opera" /></div> <img src="http://www.graphic-design-forum.com/images/footer/xhtml.gif" width="66" height="26" alt="xhtml" title="xhtml" /> <img src="http://www.graphic-design-forum.com/images/footer/css.gif" width="66" height="26" alt="css" title="css" /></div> </div> </body> </html> alt="** IMAGE DESCRIPTION **" Good Luck man **EDIT** On second thought, you may consider soing this in XHTML 1.0 Transitional... less rules, but it's up to you.
__________________
Tommy Logic ™ Web Design :: Valid XHTML & CSS :: SEO :: CMS :: eCommerce Web Design Tutorials :: Computer Tutorials Last edited by tommylogic; 30-10-2007 at 02:04 PM. |
![]() |
|
|
| Thread Tools | |
| Display Modes | |
|
|
Similar Threads
|
||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| Problem with IE | spnwebdesign | Graphic Design and Web Design Help | 7 | 24-02-2008 03:07 PM |
| Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8 - Graphic Design Forum and Web Design | Graphic Design Links | Graphic Design Links | 0 | 24-01-2008 07:40 PM |
| Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8 | Toon | CSS Forum | 0 | 23-01-2008 07:08 PM |
| IE.. problem | maiova | CSS Forum | 7 | 09-12-2007 06:23 AM |
| CSS / IE 6 -- what's the problem? | inbetweendays | CSS Forum | 3 | 03-07-2007 03:04 PM |
| All times are GMT. The time now is 03:22 AM. |