Sample page displaying issue: https://andy3k.com/index.htm
Sample page displaying desired outcome: https://andy3k.com/travel/japan2024/index.htm
CSS: https://www.andy3k.com/Andy3k.css
JavaScript file for header: https://www.andy3k.com/header.js
On the sample page, you'll see in the top banner that the table row/TD containing "Email me" extends further down than the 30px tall graphic to the left of it; there is a purple square corner, instead of a rounded corner, where the row/TD is taller (goes further down) than it should. The row with "Home" and the dropdowns also extends further down than the height:33px I coded.
The "desired outcome" page (linked above) is coded in, and identified, as HTML 3. When I changed the index.htm DOCTYPE and elements to comply with HTML 5 instead of 3, without changing the table or CSS, that's when this issue first started. I updated the index.htm code further by changing all deprecated table attributes to CSS and no joy. I tried using max-height and line-height but they made the issue worse. Copious amounts of padding:0 also didn't do anything. Making the text size smaller decreased the issue a little but did not fix it. I'm sure someone is going to tell me to change from HTML Table to Div Table but is that REALLY the fix or will that just be a lot of work and no solution?
What is causing those two rows or TDs to become taller than intended?
The thing is that in html there are elements that behave like blocks (for example, div), and there are elements that behave like inlines (for example, p, span). The img element, with which you make the rounding, is an inline element. For simplicity, you can imagine any inline element as a letter in the text. In addition to its image, such a letter has mandatory intervals: line spacing, character spacing, and interword spacing.
So, your image has a line spacing. The height of the table cell is set strictly, so the following formula is obtained - cell height = image height + line spacing. You can fix this by turning the image into a block element using the CSS property display: block. And you must have noticed that the text-align: right alignment has stopped working. This is because block elements are not affected by inline alignment. Let's correct this using the margin-left: auto property. Thus, in the end, you need to add two properties to img:
IMG.header {
border: 0;
border: 1px solid green;
margin: 0;
display: block;
margin-left: auto;
}
I would also like to point out that it is a good practice to separate design elements, such as your rounding, from images that are the content, semantic part of the page. Semantic images are recommended to be placed using img and picture tags. While design elements are placed using CSS properties, such as background-image.