jim9 Posted December 4, 2011 Share Posted December 4, 2011 Hi every one, Could please tell me why I am getting white space line under the image horizontal menu and above the image line? my page address ishttp://getcash2003.c...te/gallery.html and I have attached explanation image. Thanks in advance for your help Link to comment Share on other sites More sharing options...
jim9 Posted December 4, 2011 Author Share Posted December 4, 2011 HTML5: <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Web gallery</title> <!-- *************************************************************** * Don't change these CSS links * Don't add more CSS links * Don't add JavaScript links * Place all your changes in custom.css *************************************************************** --> <link href="main.css" rel="stylesheet" type="text/css"> <link href="custom.css" rel="stylesheet" type="text/css"></head><body><div id="wrapper"><!-- wrapper start --> <div id="header"><!-- header start --> <div id="navlist"><!-- header menu start --> <ul> <li id="home"><a href="http://www.affinityphotography.com.au/" title="home"></a></li> <li id="contact-us"><a href="http://www.affinityphotography.com.au/Christmas%20portrait%20offer.html" title="contact us"></a></li> <li id="portraits"><a href="http://www.affinityphotography.com.au/Christmas%20portrait%20offer.html" title="portraits"></a></li> <li id="weddings"><a href="http://www.affinityphotography.com.au/Folio%20weddings.html" title="weddings"></a></li> <li id="corporate-commercial"><a href="http://www.affinityphotography.com.au/Folio%20Commercial.html" title="corporate and commercial"></a></li> <li id="latest-news"><a href="http://www.affinityphotography.com.au/Christmas%20portrait%20offer.html" title="latest news"></a></li> <li id="client-images"><a href="http://www.affinityphotography.com.au/client%20images.html" title="client images"></a></li> </ul> </div><!-- header menu end --> </div><!-- header end --> <div id="content"><!-- content start --> <img id="horizontal-image-line" src="index_html_files/1.png" alt="" /> <!-- Put menu, header etc here --> <!-- Do not change this code, it will be generated by server --> <h1 id="idStartTitle" class="cl_page_title">Photo Purchase Area</h1><div class="cl_search_holder">Search: <input id="sEventSearch" type="text" class="clEditBox"></div><table class="cl_events"><tbody><tr><td class="cl_weddings"><h1>Weddings</h1></td><td class="cl_portraits"><h1>Portraits</h1></td></tr><tr><td class="cl_weddings"><table><tbody><tr><td></td><td class="clRegistrations">Registrations</td></tr><tr><td class="clEvent"><a href="#">Michael & Mary</a></td><td class="clRegistrations"></td></tr><tr><td class="clEvent"><a href="#test5">Erwin & Samantha</a></td><td class="clRegistrations">1</td></tr><tr><td class="clEvent"><a href="#john">John & Jane</a></td><td class="clRegistrations"></td></tr><tr><td class="clEvent"><a href="#david">David & Linda</a></td><td class="clRegistrations"></td></tr><tr><td class="clEvent"><a href="#empty-event">Robert & Patricia</a></td><td class="clRegistrations">17</td></tr><tr><td class="clEvent"><a href="#test2">Maria & Jim</a></td><td class="clRegistrations">0</td></tr><tr><td class="clEvent"><a href="#tom%2bbecky">Tom & Becky</a></td><td class="clRegistrations">3</td></tr></tbody></table></td><td class="cl_portraits"><table><tbody><tr><td> </td></tr><tr><td class="clEvent"><a href="#africa">Africa</a></td></tr><tr><td class="clEvent"><a href="#test3">Taylor Family</a></td></tr><tr><td class="clEvent"><a href="#test1">Williams Family</a></td></tr><tr><td class="clEvent"><a href="#test4">Wright Family</a></td></tr></tbody></table></td></tr></tbody></table><div class="cl_powered_by">Powered by <a href="http://www.fotrel.com/">Fotrel</a></div> <!-- End of server-generated content --> </div><!-- content end --></div><!-- wrapper end --></body></html> CSS: /*Put all customizations here*//* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html-------------------------------------------------------------- */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}.clear{clear: both;}a img {border: 0;}body {background: #fff;line-height: 1;}a{}h1{}h2{}h3{}#wrapper{width: 800px;margin-left: auto;margin-right: auto;}#header{}#navlist{}#navlist li{margin:0;padding:0;list-style:none;float:left;}#navlist li, #navlist a{height:38px;display:block;}#home{width:52px;}#home{background:url('index_html_files/13.png');}#home a:hover{background: url('index_html_files/13.png');}#contact-us{width:75px;}#contact-us{background:url('index_html_files/7.png');}#contact-us a:hover{background: url('index_html_files/14.png');}#portraits{width:67px;}#portraits{background:url('index_html_files/8.png');}#portraits a:hover{background: url('index_html_files/15.png');}#weddings{width:72px;}#weddings{background:url('index_html_files/9.png');}#weddings a:hover{background: url('index_html_files/16.png');}#corporate-commercial{width:148px;}#corporate-commercial{background:url('index_html_files/10.png');}#corporate-commercial a:hover{background: url('index_html_files/17.png');}#latest-news{width:80px;}#latest-news{background:url('index_html_files/11.png');}#latest-news a:hover{background: url('index_html_files/18.png');}#client-images{width:92px;}#client-images{background:url('index_html_files/12.png');}#client-images a:hover{background: url('index_html_files/19.png');}#horizontal-image-line{ border:0px solid red; margin: 0px;} Link to comment Share on other sites More sharing options...
Ingolme Posted December 4, 2011 Share Posted December 4, 2011 It took forever to figure this out. I don't like the fact that the #content starts at the very top of the page when there's another element before it. Set the vertical-align of the horizontal-image-line to "top" and it will fix the problem. Personally, instead of an image I'd just give the #content element a top border with that color instead. Link to comment Share on other sites More sharing options...
jim9 Posted December 4, 2011 Author Share Posted December 4, 2011 Thanks for your help. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.