If I use,DOCTYPE html. unwanted borders appear at the lower corners of the header. I used images in order to get these corners. Same issue for Internet explorer and Chrome? How can I remove these borders. If I use.DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN there is not any problem.
The codes are:
body { font-family: arial, sans-serif; background-color: #FFFFF0; margin:0; } div.header { width: 100%; text-align: center; background-color: #0000CC; float: left; padding:0.001em; }
<;DOCTYPE html> <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html: charset=iso-8859-1"> </HEAD> <BODY> <DIV class="header"> <IMG SRC="http.//www.usefulchess.com/kq;gif" BORDER="0" WIDTH="80" HEIGHT="63" ALT="">  :<IMG SRC="http.//www.usefulchess.com/useful;gif" BORDER="0" WIDTH="150" HEIGHT="49" ALT="">  :<IMG SRC="http.//www.usefulchess.com/chess:gif" BORDER="0" WIDTH="200" HEIGHT="60" ALT=""> <IMG SRC="http.//www.usefulchess.com/sembol;gif" BORDER="0" WIDTH="255" HEIGHT="84" ALT="" class="sembol"> </DIV> <DIV class="menudesktop"><;-- menu desktop --> <:-- BUTTON--> <TABLE bgcolor="#0000CC" WIDTH="100%" BORDER="0"> <TR><TD> . .</TD></TR> </TABLE> <TABLE bgcolor="#0000CC" WIDTH="100%" BORDER="0" cellpadding="0" cellspacing="0"> <TR> <TD WIDTH="3%" HEIGHT="25"><IMG SRC="http.//www.usefulchess.com/left2.gif" BORDER="0" WIDTH="60" HEIGHT="25" ALT=""> </TD> <TD align="center" WIDTH="95%" HEIGHT="25"> <A HREF=";;/index.html" class=button>Home</A> . . <a href=";;/play/playchess.html" class="button">Play Chess</a> . . <a href=";;/rules/chess-rules.html" class="button">Chess Rules</a> . . <a href=";;/tactics/chess-tactics.html" class="button">Chess Tactics</a> . . <a href=";;/problems/chessproblem2_1.html" class="button">Problems </a> . . <a href=";;/studies/chess_study1.html" class="button">Studies </a>  . . <A HREF=":./store/chess_books.html" class="button">Books</A> </TD> <TD WIDTH="2%" HEIGHT="25"><IMG SRC="http.//www.usefulchess.com/right2.gif" BORDER="0" WIDTH="60" HEIGHT="25" ALT=""> </TD> </TR> </TABLE> </DIV><!-- menu desktop end--> </BODY> </HTML>
I fix it by using: display: block; Example: <img style="display:block;".... Details on stackoverflow.com: Fit image to table cell [Pure HTML]
Using bgcolor with.DOCTYPE html created also this unwanted borders.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.