Image border/background doesn't display in IE

[simcoweb]

This code works great in FF but doesn't show in IE. Either I need to add a 'conditional statement' for it to work in IE or modify the code so it works in both. Basically it's a background color and border for an image:

 

 

img.floatLeft {

float: left;

margin: 4px;

border: 1px;

border-style: dotted;

color: #333333;

}

 

If you look at this page in FF you'll see it. In IE you won't. Ideas?

 

www.calcounties.com/bios.php

 

Thanks in advance!

[dropfaith]

your link doesnt load for me

 

 

img.floatLeft {

float: left;

margin: 4px;

border: 1px;

border-style: dotted;

color: #333333;

} so without that im winging it and saying try this your border-color is missing you had  this code try below

 

you may also want to add a background-color:#333; to this so ie reads the background color and the margin should hold that color?

 

img.floatLeft {

float: left;

margin: 4px;

border: 1px dotted #333;

 

[simcoweb]

Sorry about that. Server is being rebooted. Let me try your revision and see if that takes care of it.

[simcoweb]

Ok, modified the code but same results. I'm not sure if IE even recognizes the 'border' command. Take a look at the page in both browsers. I'm hoping there's a conditional statement with some code tweak that makes it work.

[dropfaith]

ie has no issues with the border command  i think i found something you never call img.floatleft as a class you call imageborder which has a different rule

 

img.floatLeft {

float: left;

margin: 4px;

border: 1px dotted #333;

}

 

/* padded image border */

.imageBorder {

padding:7px;

background:#ebeae6;

border:1px solid #c8c8c7;

float:left;

margin: 5px;

}

 

 

 

[simcoweb]

Hey, actually it's my bad on that. I meant to copy/paste the .imageBorder class which is this:

 

.imageBorder {

padding:7px;

background:#ebeae6;

border:1px solid #c8c8c7;

float:left;

margin: 5px;

}

 

The images on that page are all assigned to that class. But, it doesn't show in IE.

[simcoweb]

Ok, I found the fix for it. Basically instead of assigning the class to the <img> tag I have to wrap it in a div named for the class. Like this:

 

<div class="imageBorder"><img src="nameofimage.jpg"></div>

 

Then it works in both.