Jump to content

Tiling images vertically, HTML vs XHTML


mindcooler
 Share

Recommended Posts

I'm trying to build graphics by tiling smaller images side by side. Horizontally this is no problem, just put <img>:s on the same line. But how are you supposed to do it vertically? If I <br/> and start on a new line, there is a gap between the two lines. And if I build a table with no padding and spacing, it only works in HTML 4.01. In XHTML there is a vertical gap of two pixels between lines.In short, how do I do this in XHTML?Adding to the woes; IE seems to add yet another pixel vertically.I guess I could make DIV:s of the rows and position them manually, but deters editability.

Link to comment
Share on other sites

I'm not sure at the moment if it will work, but maybe you should try this CSS:img {display: block;}And it should work just fine with line breaks (<br />).You can also do the folllowing and you shouldn't need a <br /> tag.img {display: block;clear: both;}

Link to comment
Share on other sites

It did that even without the clear property. It is the block property that inserts newlines on each the images.This is what I want to achieve. It seems to work in all browsers. But I have to position each line manually:

<div class="row" style="top: 0px">...</div><div class="row" style="top:18px">...</div><div class="row" style="top:36px">...</div>

etc.A bit tedious to edit, but it works.

Link to comment
Share on other sites

I'm sorry about that, I usually have to go testing through a lot of CSS properties to end up making things well.Hmm, I don't really know how to solve it. I'll keep looking.EDITI find thatimg {vertical-align: middle;}solves the problem for me in Firefox and Internet Explorer.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...