Simple div/css help required

Get Started
1

I’m trying to display a list of images on my website with master div 240px wide

Inside I need divs to display the following:

A LH div of 120px width for the image which can vary in size up to max 100x100px

A RH div of 120px width which contains Title (up to 60 characters). At 10px font size this is approx 65px high

Underneath the title I need Price in a new div

Underneath the price I need to display Time

I have tried to do this and got quite close but need it to display in IE6 and greater. Here’s the CSS:

.container {
background:url("images/bg.png") no-repeat;
float:left;
width:240px;
height:119px;
background-color:#000000;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

.container a, a:visited {
color: #cccccc;
text-decoration: none;
}
	
.containerleft {
float:left;
width:120px;
height:119px;
margin:0px;
padding:0px;
}

.containerright {
float:right;
width:120px;
height:119px;
margin:0px;
padding:0px;
}


.image {
margin: 10px 0px 0px 10px;
float: left;
}
	
.price, .price a {
margin: 5px 0px 0px 10px;
color:#FF0000;
font-size:12px;
padding:0px;
float: left;
}

.title {
float:left;
font-family:"Lucida Grande", Verdana, sans-serif;
font-size:10px;
text-align:left;
color:#FFFFFF;
margin:10px 10px 0px 10px;
padding:0px 0px 0px 0px;
}

.time {
float:left;
font-family:"Lucida Grande", Verdana, sans-serif;
font-size:10px;
text-align:left;
color:#FF0000;
margin:10px 0px 0px 10px;
padding:0px 0px 0px 0px;
}

Here’s the html:

<div class="container">
			
		<div class="containerleft">
			
			<div class="image">
			<a href="xxx">
			<img src="xxx"/></a>
			</div>
		</div>
		
		<div class="containerright">	
			<div class="title">
			<p><a href="xxx">
			title</a></p>
			
			</div>
			<div class="price">
			<p><a href="xxx">price</a></p>
			</div>

			<div class="time">
			<p><a href="xxx">time</a></p>
			</div>
		</div>	

	</div>

The container is repeated 5 times per page (eg 5 items) in a 240px wide div.

Can anyone see where my code is failing for IE6 or a better way to tidy this so it works across all browsers?

Thanks in advance;)

2

Hi,
You have way too many divs for wrapping things in. All those title ,time, and price classes can simply be hooked on to your p tags. That saves three divs there alone.

You don’t have to set up that inner div for the left column either, just adjust the width and use paddings to do what the margins on the inner div was doing.

Here is a working example that complies with IE6 as well :slight_smile:
http://www.css-lab.com/demos/image-display/image-data.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Image Caption Demo</title>

<style type="text/css">

.imgwrap {
    background:red url("images/bg.png") no-repeat;
    float:left;
    width:240px;
    height:119px;
    margin:20px 0 0 20px;
    display:inline;/*IE6 margin bug*/
    background:#000;
}
.imgwrap a,
.imgwrap a:visited {
    color: #CCC;
    text-decoration:none;
}
.image,
.imagedata {
    float:left;
    width:110px; /*120px with padding*/
    height:109px;/*119px with padding*/
    margin:0px;
    padding:10px 0px 0px 10px;
}

.imagedata p {
    float:left;
    clear:left;
    margin:0 10px 5px 0;
    padding:0;
}    
.price,.price a {
    color:#FF0000;
    font-size:12px;
}
.title,.time {
    font-family:"Lucida Grande", Verdana, sans-serif;
    font-size:10px;
    text-align:left;
    color:#FFF;
}
.time {color:#FF0000;}

img {/*for testing without actual images*/
    display:block;
    width:100px;
    height:100px;
    background:#444;
    border:none;
}
</style>
</head>
<body>


<div class="imgwrap">        
    <div class="image">
        <a href="#"><img src="images/demo.jpg"/></a>
    </div>
    <div class="imagedata">    
        <p class="title"><a href="#">title</a></p>
        <p class="price"><a href="#">price</a></p>
        <p class="time"><a href="#">time</a></p>
    </div>    
</div>

<div class="imgwrap">        
    <div class="image">
        <a href="#"><img src="images/demo.jpg"/></a>
    </div>
    <div class="imagedata">    
        <p class="title"><a href="#">title</a></p>
        <p class="price"><a href="#">price</a></p>
        <p class="time"><a href="#">time</a></p>
    </div>    
</div>

<div class="imgwrap">        
    <div class="image">
        <a href="#"><img src="images/demo.jpg"/></a>
    </div>
    <div class="imagedata">    
        <p class="title"><a href="#">title</a></p>
        <p class="price"><a href="#">price</a></p>
        <p class="time"><a href="#">time</a></p>
    </div>    
</div>

</body>
</html>
3

Thanks very much Rayzur, will give that a try. A few questions:

Some images can be a few px smaller or larger, will that break this?

Can I fix the size of the image somehow (don’t mind too much if I chop a bit off)?

4

Vero, I am not any sort of graphic guru. For me, using Photoshop is like juggling vials of nitroglycerin. :slight_smile: When I want to trim a graphic, I use a very simple, free tool called IrfanView. It has a relatively extensive toolbox, including a very easy way of resizing and cropping graphics. If you’re as ham-handed as I am with graphics, IrfanView might be something you find useful.

5

Hi,
No it won’t break the layout if the images are smaller but I would not go over 100px by 100px for your image sizes.

If you look at the code I posted above you will see that I set dimensions on the image via the css. That was just done to show the image without using an actual image.


img {/*for testing without actual images*/
    display:block;
    width:100px;
    height:100px;
    background:#444;
    border:none;
}

However, on the live example I linked to there was an actual image being used and it was 75px by 75px. The css has stretched that image to 100px by 100px though. You could use max-width in place of the width though but it would not work in IE6.

Here is an update of the live code using max-width/height.

By setting max-width/height it will scale the image according to the greatest value. For example, I just updated the link above with an image in the first div that is 375x500. It is setting the height at 100px and then scaling the width accordingly.

Be sure to target only the images in that parent div or you would be applying those rules to all images on your site.

.imgwrap img {
    float:left; /*generate block box and kill whitespace*/
    max-width:100px;
    max-height:100px;
    border:none;
}
6

You could target IE6 with an expression but be aware that they can be resource hogs. However, I would not be to concerned about it if I was just using one expression.

I would target the height, as long as your images were proportional it should be fine. If you had some images that were wider than they were tall then it could be a problem for IE6.


* html .imgwrap img { /* sets max-height for IE6 and scales the width accordingly */
    height: expression( this.scrollHeight > 99 ? "100px" : "auto" ); 
}
7

@BlackMax: Thanks but the issue is not image resizing in a program, it’s code related. Irfanview is very good though!

Well I dropped it all into a containing div of 240px wide. I want the imgwrap divs to stack vertically. I had to remove the top and left margins of 20px and it works fine in Firefox. In IE6 if I have 5 imgwraps the 4th and 5th are all out of skew on text and titles, the content overflows the box vertically. Also there is a blue border around the image in IE6.
Any ideas?

8

I want the imgwrap divs to stack vertically. I had to remove the top and left margins of 20px and it works fine in Firefox. In IE6 if I have 5 imgwraps the 4th and 5th are all out of skew on text and titles, the content overflows the box vertically. Also there is a blue border around the image in IE6.
Hi,
I replied back to your PM. Here are the fixes to all the problems you mentioned.

.imgwrap {
   background:url("images/kevlarbg.png") no-repeat;
   float:left;
   width:240px;
   height:119px;
}
.imgwrap a,
.imgwrap a:visited {
   color: #CCC;
   text-decoration:none;
}
.image,
.imagedata {
   float:left;
   width:110px; /*120px with padding*/
   height:109px;/*119px with padding*/
   margin:0px;
   padding:10px 0px 0px 10px;
    [COLOR=Blue]overflow:hidden;/*IE6 needs this*/[/COLOR]
}
.imagedata p {
[COLOR=Blue]   margin:0 10px 5px 0;
   padding:0;[/COLOR]
}
.price,.price a {
   color:#FF0000;
   font-size:12px;
}
.title,.time {
   font-family:"Lucida Grande", Verdana, sans-serif;
   font-size:10px;
   text-align:left;
   color:#FFF;
}
.time {color:#FF0000;}

.imgwrap img {
    float:left;
    max-width:100px;
    max-height:100px;
    [COLOR=Blue]border:none;[/COLOR]
}
* html .imgwrap img { /* sets max-height for IE6 and scales the width accordingly */
    height: expression( this.scrollHeight > 99 ? "100px" : "auto" ); 
}
9

Thank you so much for the help, you certainly know your stuff Rayzur!