3 replies [Last post]
jaeSun
Offline
Regular
Last seen: 15 years 36 weeks ago
Timezone: GMT-8
Joined: 2004-10-31
Posts: 25
Points: 0

I am doing a small image gallery.

they are organized by each category, which then displays the albums within the category. and does it for each category. I would like to have some more space between each category, but can't seem to get it to work in FF except one way. Of course, IE has to goof up when i do it that way.

the category code is like this, which is then repeated for each category:

<div class="categorycontainer">
<h2>Category 1</h2>
<div>Description of category goes here.  blah blah blah blah blah blah blah</div>

<div class="gallerycontainer">

<div><img src="../i/box_border.png" alt="" /><br />Album Description goes here Lorem Ipsum Blah blah blah</div>
<div><img src="../i/box_border.png" alt="" /><br />Album Description goes here Lorem Ipsum Blah blah blah</div>
<div><img src="../i/box_border.png" alt="" /><br />Album Description goes here Lorem Ipsum Blah blah blah</div>
<div><img src="../i/box_border.png" alt="" /><br />Album Description goes here Lorem Ipsum Blah blah blah</div>
<div><img src="../i/box_border.png" alt="" /><br />Album Description goes here Lorem Ipsum Blah blah blah</div>

</div>

</div>

the CSS is:

.categorycontainer {
	clear: both;
	margin-bottom: 20px;
}

.gallerycontainer {
	clear: both;
	width: 650px;
}

.gallerycontainer div {
	float: left;
	width: 150px;
	margin-right: 10px;
	margin-top: 15px;
	display: inline;
}

.categorycontainer h2 {
	font-size: 14px;
	font-family: "Times New Roman", Times, serif;
	color: #636360;
}

the normal mode is that in FF, the next category is placed right below the category above.

to get it to work in FF, i add a padding-top to the H2 CSS selector (like padding-top: 20px). but then in IE, it doubles it and gets bigger.

anyone know of a way to get around this?

personal website | www.whiteAzn.com

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 11 years 26 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

float an image gallery, trying to have space between ...

Try this:

.categorycontainer {
   margin: 0 0 20px 0;
   padding: 0;
} 

or

.categorycontainer {
   margin: 0;
   padding: 0 0 20px 0;
} 

Antibland

jaeSun
Offline
Regular
Last seen: 15 years 36 weeks ago
Timezone: GMT-8
Joined: 2004-10-31
Posts: 25
Points: 0

float an image gallery, trying to have space between ...

nope .... seemed to "work" in IE ....

unless i do something like 200px, it doesnt do anything in FF ....

it seems to apply that bottom padding from the floated location (after the last image in the category, itll apply the float to the right of that as if its expecting another float ... if that made sense)

personal website | www.whiteAzn.com

jaeSun
Offline
Regular
Last seen: 15 years 36 weeks ago
Timezone: GMT-8
Joined: 2004-10-31
Posts: 25
Points: 0

float an image gallery, trying to have space between ...

well, i had to do this:

add another clear element after the end gallerycontainer class and before the end categorycontainer class

<div class="categorycontainer">
<h2>Category 1</h2>
<div>Description of category goes here.  blah blah blah blah blah blah blah</div>

<div class="gallerycontainer">

<div><img src="../i/box_border.png" alt="" /><br />Album Description goes here Lorem Ipsum Blah blah blah</div>
<div><img src="../i/box_border.png" alt="" /><br />Album Description goes here Lorem Ipsum Blah blah blah</div>
<div><img src="../i/box_border.png" alt="" /><br />Album Description goes here Lorem Ipsum Blah blah blah</div>
<div><img src="../i/box_border.png" alt="" /><br />Album Description goes here Lorem Ipsum Blah blah blah</div>
<div><img src="../i/box_border.png" alt="" /><br />Album Description goes here Lorem Ipsum Blah blah blah</div>

</div>
<div class="clear_b"></div>
</div>

then i had to use the padding to specify the space between categories, as using margins wouldnt work

.categorycontainer {
	clear: both;
	margin: 0;
	padding: 0 0 15px 0; 
}

whatever works!

personal website | www.whiteAzn.com