Member Avatar for nateuni

Guys,

I normally don't dabble to much in XHTML, but I have been doing up a website for my business and I have hit a wall with the development.

I found some inconsistencies with different browsers. So I carefully went back in Photoshop and made rulers and made sure all my image sizes were all matching and correct with the correct amount of whitespace around the edges. But that wasn't the issue! As it is still happening. I have tried every combo (that I know of and that a search could deliver) for correcting the issue, but still it has not panned out.

I have some nested tables. Perhaps this the issue. (even though it has never caused me grief before)
Here are which browsers are good and which are not ->

On OS X ->
Opera -> Displays Perfect, Chrome-> Displays Perfect!

On Windows ->Chrome -> Displays perfect! Firefox -> Extra spacing in Tables! Explore -> Extra spacing in Tables!

Please see the attached screen capture of the browsers side by side. I have also attached an image with all table and nested table borders="1", this is for 2 reasons. 1 so you can see the table layout. 2. Because with this turned on the page has the exact same spacing as the misaligned pages in Firefox/Explorer which makes me thing though they are set to "0" the browser is still spacing them like they are there.

I am sure there is some logical fix, but as I am not a master of XHTML, so I don't know it. Thus I hope you guys can help.

I hope someone can help... Thanks in advance!

Ok I am off to bed now.

Regards,
Nate

Edited by peter_budo because: Deleting attached images
  • 3 Contributors
  • 5 Replies
  • 411 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by nateuni

Dani AI

Generated

A common cause of the exact symptom you describe (works in WebKit, extra gap in Firefox/IE; goes away when the <a> is removed) is that linked images are being rendered as inline-level content and the browser is reserving text-baseline/descender space or obeying small differences in UA stylesheets. ’s observation that removing the anchor fixed it is a useful clue. was right to ask for a minimal test case, and ’s vertical-align idea pointed correctly at the inline-baseline issue even if baseline didn’t solve it for this layout.

Practical fixes to try (pick one that fits how you want the images to behave):

/* make the linked image a block so no baseline gap remains */
a img {
  display: block;
  border: 0;
}
/* keep inline layout but remove the extra text-line space */
a { line-height: 0; }
a img { vertical-align: top; }
/* for rows of inline images: collapse inter-element whitespace */
.image-row { font-size: 0; }
.image-row img { font-size: 14px; display: inline-block; }

Troubleshooting checklist: build a tiny test page with one linked image and view it in each browser; use the inspector to check computed display, vertical-align, line-height, font-size, margin, padding, and border; toggle properties live to see which one removes the gap. Also confirm you have a standards DOCTYPE (for example <!DOCTYPE html>), and validate that there isn’t stray whitespace or newline characters between inline elements in your HTML.

If you need the images to remain inline and clickable, the line-height:0 or display:block approaches are the simplest. For future layouts, avoid relying on nested tables for spacing—CSS layout (floats/flex/grid) gives far more predictable cross‑browser results.

Recommended Answers

All 5 Replies

Member Avatar for almostbob

cant help you, but I can make it easier for those who know how to asnwer, to be able to help you, the screen shots are useless to anyone
post the code of the page, between
[code=html] put code here

[/code]
code tags so that one of the html mavens can sort out the issues, tables are very 1980s

Edited by almostbob because: n/a
Member Avatar for nateuni

I took out the tables.. again everything worked fine in OS X... but in Firefox / Explorer same misalignment issues..

Edited by peter_budo because: n/a
Member Avatar for nateuni

I removed the <a> tags from around the images and it is correctly spaced. How do I make it so the browser doesn't blow out the spacing with the anchor tags?????!?!?!?!

Anyone??

Member Avatar for tinimic

Try:

img {
	vertical-align: baseline;
}
Member Avatar for nateuni

That didn't help but I went back and redesigned the page.

Thanks for trying anyway.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.