3 replies [Last post]
grimby
Offline
newbie
Last seen: 15 years 48 weeks ago
Timezone: GMT+9
Joined: 2004-01-05
Posts: 4
Points: 0

i have a decent understaning of css, and now i'm attempting to use it instead of tables on my new web site.

my site is basically a search engine for images that displays each result inside it's own <span> tag, one after another to give the impression of table cells. my problem is that the <div> box they're all inside of won't stretch to allow all of the "cells" to be seen unless i put them inside of a table (which i have been forced to use for now). anyone have any suggestions?

here is a sample page: http://www.grimbythehutt.com/swimages/searchresults.asp?browse=tpm

here's the style sheet: http://www.grimbythehutt.com/scripts/imagesstyle.css

the <span> cells use this style:

.searchcell {
	background-color: white;
	font-size: 10px;
	text-align: center;
	border: 3px ridge lightgrey;
	width: 170px;
	height: 170px;
	overflow: visible;
	margin: auto;
	float: left;
	display: inline;
	clear: none;
	
}


and here's the <div> they're inside of.

.searchcontent {
	overflow: visible;
	width: auto;
	height: auto;
	display: block;
	clear: none;
	background-color: white;
	visibility: visible;
	position: static;
	padding: 20px;
	margin: 20px;
	border: 3px inset lightgrey;
	line-height: normal;
	text-align: center;
}

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 4 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

content not displaying properly

Try not setting the height or width at all. You should not need overflow visible, Display block, clear, visible or line-height either. I think you should make it position relative, and not sure that you need text-align but have left it in.

.searchcontent { 
   width: 100%
   position: relative; 
   padding: 20px; 
   margin: 20px; 
   border: 3px inset lightgrey; 
   text-align: center; 
}

hmmm - after a second thought I re-added width: 100%

Regards
Day

The only way to learn is to do it yourself

grimby
Offline
newbie
Last seen: 15 years 48 weeks ago
Timezone: GMT+9
Joined: 2004-01-05
Posts: 4
Points: 0

content not displaying properly

i'm not really sure why i had all those extra things in there. lol!

anyway your suggestion works fine in IE 6, but netscape 7 is a completely different story. the top part of the first line of cells shows up inside the div, but that's it. the rest are visible, but outside the block. is there some kind of work-around for this?

this is pretty much what was happening before, which is why i was putting the cells inside a table.

grimby
Offline
newbie
Last seen: 15 years 48 weeks ago
Timezone: GMT+9
Joined: 2004-01-05
Posts: 4
Points: 0

content not displaying properly

this style is displaying a bit differently on each computer i test it out on. on this one in particular (IE6 win2000), the content div stretches vertically to accomodate all the cells except the very last line, messing up my footer in the process.

here is my alternate link to show you what is happening:
http://www.grimbythehutt.com/swimages/searchresults2.asp?browse=tpm