I'm having a small problem that is driving me to distraction. I've customized my blogger template to fit in with the rest of my website design. Everything is great in internet Explorer, but when I view the blog in Firefox the header gets a little screwed up. I think I've traced the problem to something related to IMGs in the table in my header, but I can't pin the problem down enough to fix it. Blog: http://www.dcroe.com/blog.html Template 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" xml:lang="en" lang="en"> <head> <title>:: d.challener roe ::</title> <$BlogMetaData$> <style type="text/css"> body { background:#000; margin:0; padding:0px 0px; font-family: tahoma; text-align:center; color:#635E24; font-size: 12px; line-height:15px; } a:link { font-style: normal; font-weight: normal; letter-spacing: normal; text-decoration: none; color: #884116; } a:visited { font-style: normal; font-weight: normal; letter-spacing: normal; text-decoration: none; color: #884116; } a:hover { font-style: normal; font-weight: normal; letter-spacing: normal; text-decoration: none; color: #CC0000; } a:active { color: #884116; } .style-r{ color:#884116; } img{border:0px none;} /* Header ----------------------------------------------- */ #header { width:766px; height:177px; margin:0 auto 00px; } #blog-title { margin:0px 0px 0; padding:0px20px 0em; font-size:200%; line-height:1.2em; color:#ccc; text-transform:uppercase; letter-spacing:.2em; } #blog-title a { color:#ccc; text-decoration:none; } #blog-title a:hover { color:#ad9; } #description { margin:0 0px 0px; padding:0 0px 0px; font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif; text-transform:uppercase; letter-spacing:.2em; color:#777; } /* Content ----------------------------------------------- */ #content { width:766px; margin:0 auto; padding:0; text-align:left; } #main { width:400px; } #sidebar { width:140px; margin:0px 25px 0; text-align:left; } /* Headings ----------------------------------------------- */ h2 { margin:1.5em 0 .75em; font:bold 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif; text-transform:uppercase; letter-spacing:.2em; color:#884116; } /* Posts ----------------------------------------------- */ .date-header { margin:1.5em 0 .5em; } .post { margin:.5em 0 1.5em; border-bottom:1px dotted #444; padding-bottom:1.5em; } .post-title { margin:.25em 0 0; padding:0 0 4px; font-size:100%; line-height:1.4em; color:#884116; } .post-title a { text-decoration:none; color:#ad9; } .post-title a:hover { color:#fff; } .post div { margin:0 0 .75em; line-height:1.6em; } p.post-footer { margin:-.25em 0 0; color:#333; } .post-footer em, .comment-link { font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif; text-transform:uppercase; letter-spacing:.1em; } .post-footer em { font-style:normal; color:#777; margin-right:.6em; } .comment-link { margin-left:.6em; } .post img { padding:0px; border:0px solid #222; } .post blockquote { margin:1em 20px; } .post blockquote p { margin:.75em 0; } /* Comments ----------------------------------------------- */ #comments h4 { margin:1em 0; font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif; text-transform:uppercase; letter-spacing:.2em; color:#999; } #comments h4 strong { font-size:130%; } #comments-block { margin:1em 0 1.5em; line-height:1.6em; } #comments-block dt { margin:.5em 0; } #comments-block dd { margin:.25em 0 0; } #comments-block dd.comment-timestamp { margin:-.25em 0 2em; font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif; text-transform:uppercase; letter-spacing:.1em; } #comments-block dd p { margin:0 0 .75em; } .deleted-comment { font-style:italic; color:gray; } /* Sidebar Content ----------------------------------------------- */ #sidebar ul { margin:0 0 1.5em; padding:0 0 1.5em; border-bottom:1px dotted #444; list-style:none; } #sidebar li { margin:0; padding:0 0 .25em 15px; text-indent:-15px; line-height:1.5em; } #sidebar p { color:#999; line-height:1.5em; } /* Profile ----------------------------------------------- */ #profile-container { margin:0 0 1.5em; border-bottom:1px dotted #444; padding-bottom:1.5em; } .profile-datablock { margin:.5em 0 .5em; } .profile-img { display:inline; } .profile-img img { float:left; padding:4px; border:1px solid #222; margin:0 8px 3px 0; } .profile-data { margin:0; font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif; text-transform:uppercase; letter-spacing:.1em; } .profile-data strong { display:none; } .profile-textblock { margin:0 0 .5em; } .profile-link { margin:0; font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif; text-transform:uppercase; letter-spacing:.1em; } /* Footer ----------------------------------------------- */ #footer { width:766px; height:87px; clear:both; margin:0 auto; } #footer hr { display:none; } #footer p { margin:0; padding-top:15px; font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif; text-transform:uppercase; letter-spacing:.1em; } </style> </head> <body> <div id="header"> <TABLE WIDTH=766 BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR> <TD ROWSPAN=4 width="191" height="177" background="http://www.dcroe.com/images/secpic1.gif"> </TD> <TD ROWSPAN=4 height="177" width="87" background="http://www.dcroe.com/images/secpic2.gif"> </TD> <TD COLSPAN=7 width="334" height="58" background="http://www.dcroe.com/images/secego.gif"> </TD> <TD ROWSPAN=4 width="154" height="177" background="http://www.dcroe.com/images/secrighttop.gif"> </TD> </TR> <TR> <TD height="47" width="92" background="http://www.dcroe.com/images/sectab0.gif"> </TD> <TD height="47" width="39"> <a href="http://www.dcroe.com/home.html"> <img border="0" src="http://www.dcroe.com/images/sectab1.gif" width="39" height="47"></a></TD> <TD height="47" width="42"> <a href="http://www.dcroe.com/portfolio.html"> <img border="0" src="http://www.dcroe.com/images/sectab2.gif" width="42" height="47"></a></TD> <TD height="47" width="41"> <a href="http://www.dcroe.com/news.html"> <img border="0" src="http://www.dcroe.com/images/sectab3.gif" width="41" height="47"></a></TD> <TD height="47" width="38"> <a href="http://www.dcroe.com/blog.html"> <img border="0" src="http://www.dcroe.com/images/sectab4.gif" width="38" height="47"></a></TD> <TD height="47" width="43"> <a href="http://www.dcroe.com/misc.html"> <img border="0" src="http://www.dcroe.com/images/sectab5.gif" width="43" height="47"></a></TD> <TD height="47" width="39"> <a href="http://www.dcroe.com/contact.html"> <img border="0" src="http://www.dcroe.com/images/sectab6.gif" width="39" height="47"></a></TD> </TR> <TR> <TD COLSPAN=7 width="334" height="38" background="http://www.dcroe.com/images/sectitle1blank.gif"> <img border="0" src="http://www.dcroe.com/images/sectitle1blog.gif" width="334" height="38"></TD> </TR> <TR> <TD COLSPAN=7 width="334" height="34" background="http://www.dcroe.com/images/sectitle2blank.gif"> </TD> </TR> </TABLE> </div> <!-- Begin #content --> <div id="content"> <TABLE WIDTH=766 BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR> <TD valign="top" height="386" width="191" background="http://www.dcroe.com/images/secleft.gif"> <div id="sidebar"><div id="sidebar2"> <h2 class="sidebar-title">Previous Posts</h2> <ul id="recently"> <BloggerPreviousItems> <li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li> </BloggerPreviousItems> </ul> <MainOrArchivePage> <h2 class="sidebar-title">Archives</h2> <ul class="archive-list"> <BloggerArchives> <li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li> </BloggerArchives> </ul> </MainOrArchivePage> </div></div> <!-- End #sidebar --> </TD> <TD valign="top" COLSPAN=8 height="386" width="421" background="http://www.dcroe.com/images/secpageblank.gif"> <div id="main"><div id="main2"> <Blogger> <BlogDateHeader> <h2 class="date-header"><$BlogDateHeaderDate$></h2> </BlogDateHeader> <!-- Begin .post --> <div class="post"><a name="<$BlogItemNumber$>"></a> <BlogItemTitle> <h3 class="post-title"> <BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl> <$BlogItemTitle$> <BlogItemUrl></a></BlogItemUrl> </h3> </BlogItemTitle> <div class="post-body"> <div> <$BlogItemBody$> </div> </div> <p class="post-footer"> <em>posted by <$BlogItemAuthorNickname$> at <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em> <MainOrArchivePage><BlogItemCommentsEnabled> <a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a> </BlogItemCommentsEnabled><BlogItemBacklinksEnabled> <a class="comment-link" href="<$BlogItemPermalinkUrl$>#links">links to this post</a> </BlogItemBacklinksEnabled> </MainOrArchivePage> <$BlogItemControl$> </p> </div> <!-- End .post --> <!-- Begin #comments --> <ItemPage> <div id="comments"> <BlogItemCommentsEnabled><a name="comments"></a> <h4><$BlogItemCommentCount$> Comments:</h4> <dl id="comments-block"> <BlogItemComments> <dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a> <$BlogCommentAuthor$> said... </dt> <dd class="comment-body"> <p><$BlogCommentBody$></p> </dd> <dd class="comment-timestamp"><a href="#<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a> <$BlogCommentDeleteIcon$> </dd> </BlogItemComments> </dl> <p class="comment-timestamp"> <$BlogItemCreate$> </p> </BlogItemCommentsEnabled> <BlogItemBacklinksEnabled> <a name="links"></a><h4>Links to this post:</h4> <dl id="comments-block"> <BlogItemBacklinks> <dt class="comment-title"> <$BlogBacklinkControl$> <a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$> </dt> <dd class="comment-body"><$BlogBacklinkSnippet$> <br /> <span class="comment-poster"> <em>posted by <$BlogBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em> </span> </dd> </BlogItemBacklinks> </dl> <p class="comment-timestamp"><$BlogItemBacklinkCreate$></p> </BlogItemBacklinksEnabled> <p class="comment-timestamp"> <a href="<$BlogURL$>"><< Home</a> </p> </div> </ItemPage> <!-- End #comments --> </Blogger> </div></div> <!-- End #main --> </TD> <TD valign="top" height="386" width="154" background="http://www.dcroe.com/images/secright.gif"> </TD> </TR> </TABLE> <!-- Begin #marleft --> <div id="marleft"><div id="marleft2"> </div></div> <!-- End #sidebar --> <!-- Begin #main --> <!-- Begin #sidebar --> </div> <!-- End #content --> <!-- Begin #footer --> <div id="footer"><hr /> <TABLE WIDTH=766 BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR> <TD COLSPAN=10 width="766" height="87" background="http://www.dcroe.com/images/secfoot.gif"> </TD> </TR> </TABLE> <!-- End #footer --> </body> </html> Code (markup):
The problem is subtle, but visible in the thumbnail you attached. Note the black line under the icon tabs, and compare it to the header from the pages reachable by any one of the tabs. Sorry I wasn't clearer about the issue. P.S. The unique thing about those cells is that the tabs are links so they are URLs in cells with empty backgrounds as opposed to the rest of the header where the images are backgrounds of the cells.