I have more issues with the IMG tag in HTML5.
If you take a look at the image 1, you will see an unwanted margin at the top as well as an unwanted margin below the image of the banner. This is the code.
<!DOCTYPE html>
<Head>
<Base HRef="http://www.levelextreme.com/"></Base>
<Style>
BODY
{
Padding-Top: 0px;
Padding-Left: 0px;
Padding-Right: 0px;
Padding-Bottom: 0px;
Margin-Left: 0px;
Margin-Right: 0px;
Margin-Top: 0px;
Margin-Bottom: 0px;
}
</Style>
</Head>
<html>
<body>
<IMG SRC=Images/Point.gif Width=1 Height=2>
<TABLE CELLSPACING=0 CELLPADDING=0 WIDTH=1000 ALIGN=CENTER Style="Border: #444444 1px solid;">
<TR>
<TD Style="Border-Bottom: #444444 1px solid;"><IMG src="Images/Top.jpg" width=1000 height=80></TD>
</TR>
<TR VALIGN=TOP>
<TD BGCOLOR="#FFFFFF"><IMG SRC=Images/Point.gif Width=1 Height=2><BR>Test
<BR>
<IMG SRC=Images/Account.png BORDER=0>a</TD>
</TR>
</TABLE>
</body>
</html> The points I note about image 1 are as follow:
With HTML5, if I start my page with an image, there is a gap on top before the 2 pixels image I have defined. If I start with a letter, there is no gap.
If a text is placed after an image, it will be inline. Thus, we can see that the letter A is inline to the image YOUR PROFILE.
After the banner, there is an unwanted gap.
If a text is placed after the TD which holds the banner, it will be place right below. If I remove that letter and starts directly with an image, there will be a gap, such as the same behavior as in the first line.
Now, on another thread, a solution to avoid all the gapping is to bypass the default inline of an IMG tag and use a block style instead. So, if I add the following style in the code, I will get the result as in image 2.
IMG
{
Display: Block;
}This resolves the gapping issue but, because we overwrite the default IMG style Display with block, this is no longer inline. Thus, as shown in image 2, we can see that whenever I add an image, a line spacing applies before the upcoming text.
So, in overall, I need the IMG tag to preserve its default style Display attribute to be inline. Otherwise, this would imply that I would have to modify thousands of pages. But, I need to avoid this gap when using HTML5 wherever I deal with an image which appears at various locations such as seen on image 1. So, the solution to use Display: Block cannot be used. But, I need to find a way to avoid this gap effect. Because, the goal is to preserve the IMG tag display attribute default inline value.
Anyone would like to try this test code and see if you can come up with image 3? To achieve image 3 result right away, simply use the test code and remove the DOCTYPE declaration. This is what I have presently on the site. However, I need to start supporting DOCTYPE and this image issue is a real difficulty to deal with.
