CSS new line issues

Question

Hi,

I'm trying to create a breezebrowser template (used for generating image galleries locally, outputs HTML). I've taken the HTML from my wordpress template and managed to generate the following gallery http://uploads.peasyphotos.com/20100607t-candids/gallery/ but each image goes on a new line and i don't know why, i presume it's in the CSS. What should I be looking for in the CSS to try and stop this, or what can I put around my template code to disable the CSS for that part?

Thanks

Answer 1

In you css files, you have one file called reset.css. At line number 57, you have a one line called display block. comment it out a see. may not be a nice view. but images wont go next line.

Answer 2

For the anchor element having the photos use the float like this. This would take care.

float:left;

Answer 3

your images parent anchor tag do not have correct css. Put a class images over the anchor tags and use following css for them.

a.images {
border-bottom:1px solid #D8048D;
color:#D8048D;
display:block;
float:left;
height:159px;
margin:0 10px;
text-decoration:none;
width:100px;
}

Answer 4

Firstly I would recommend validating your html.

Secondly, I would suggest putting the images in a container element of some sort: possibly an unordered list. There are serious accessibility issues around having a series of links running into each other like this, with no separating non white-space characters.

Thirdly, I would use a css class on the list, and style it like this:

ul.gallery { list-style: none}
ul.gallery li { float: left; clear: none; list-style: none}

Answer 5

So i've got a posible answer for you.

First you have to add this css-styles to the a tag of the pictures:

display: inline-block;
height: 150px;
widht: 150px;
text-align: center;
vertical-align: top;

It works with Firefox 3.6. I'm not sure if it will work with oure lovley IE :P

I hope i could help!