Image Margins Do Not Work Unless Applied Directly

[mr_director]

When I try to apply these properties to an image (by defining an image with a class, e.g, <img src="image.jpg" class="listimage" />, the float works but the margin doesn't:

.listimage {	float:left;	margin-right:10px;}

However, when I apply them directly, the margins work fine, e.g., <img src="image.jpg" style="float:left;margin-right:10px;" />Why would this be happening? Not sure if it matters, but I'm trying to do this in an unordered list:

[mr_director]

Hey, I have a new issue. What I'm trying to do is create a list of images and text wrapped around it, with the image having a margin. Like I explained above. However, now I'm running into a new issue:http://www.grabup.com/uploads/5a5c0e35a9fb...c4b4fa5f6c2.pngI think this happens when the text is too short. Not positive. Is there a way to fix this?

[jeffman]

You need to post more code. Without more context, it is impossible to know if this is a typo, an inheritance issue, or what.

[mr_director]

Sorry. Thanks. Here's the entire code for the list:

<ol>	<li><img src="http://www.collegeisamovie.com/writings/yearthree/apicturesworthathousandfriends/images/thedirector.jpg" class="listimage" />The Director - This type of friend is easy to spot and, surprisingly, come in great numbers on the various community sites. You’ll be able to find Directors easily because they take pictures of themselves in the mirror and, often times, are hidden behind the camera. Upon meeting this friend, they will undoubtedly try and control or “direct” your life any way they see fit. These people also tend to be mysterious, ugly, or both – reinforced by the fact that they are hiding their face.</li>	<li> <img src="http://www.collegeisamovie.com/writings/yearthree/apicturesworthathousandfriends/images/thejohnsmith.jpg" class="listimage" />The John Smith - John Smith, Jane Doe, Richard ######, or whatever. The point is, these friends aren’t real. Yes, believe it or not – sometimes you’ll stumble across fakers on the cyber web. TheirSpace isn’t real because they aren’t real. But don’t take these friends lightly. It’s sometimes hard to spot these “decoys.” The major clue to their fakeness is the amount of pictures they have. Make sure that they appear in multiple pictures – both group and solo pictures. (Note: Be extra careful when you’re looking at pictures of Blacks or Asians as they tend to get away with looking like their next-door neighbors more so than the White man does).</li>	<li><img src="http://www.collegeisamovie.com/writings/yearthree/apicturesworthathousandfriends/images/thescanner.jpg" class="listimage" />The Scanner - A Scanner is a friend who is quite obviously inept at using any sort of technology. Notice how they simply scan the image of their high school junior yearbook photo and uploaded it without any signs of photographic manipulation, i.e., cropping, rotating, or color correction. These friends will come into your life and constantly disappoint you in everything they do. It’s good to note, however, that it’s a rare occasion when you meet a Scanner because most of them don’t know how to use telephones, either.</li>	<li><img src="http://www.collegeisamovie.com/writings/yearthree/apicturesworthathousandfriends/images/thetightrope.jpg" class="listimage" />The Tightrope - Constantly trying to keep their balance in life, the Tightrope friend typically ends up overcompensating which results in a skewed outlook on life. These are the friends who try to be nice but come off too caustic. Questions like, “Do I look fat in this dress?” should never be asked to a Tightrope. Not only could the answer be something you don’t want to hear, but they could fall over in the process of answering it.</li>	<li><img src="http://www.collegeisamovie.com/writings/yearthree/apicturesworthathousandfriends/images/thetrentbrooke.jpg" class="listimage />The Trent/Brooke - The Trent/Brooke friend is a nasty trip down your high school memory lane. Remember Trent from Student Government? He slept with every girl in school – including the ones that were guys. And Brooke? She was every girl in school that Trent slept with. These friends will never contact you because they already have enough friends, which they never mind showing you with a constant stream of group shots. What’s worse is that even if you wanted to be friends with the Trent/Brooke, you wouldn’t know which person in the picture is them.</li>	<li><img src="http://www.collegeisamovie.com/writings/yearthree/apicturesworthathousandfriends/images/thekleenex.jpg" class="listimage" />The Kleenex - If you’re the type of person who likes to talk to people about their problems, then you need to find a Kleenex. Chances are, they’re ready to cry you a river of their problems and their pictures won’t try to hide this fact. Most of the time they won’t look at the camera in their pictures because a large majority of this friend type believes in Kamera – a religion that supports the belief of “what goes around comes around and takes your soul if you look into a camera.”</li>	<li><img src="http://www.collegeisamovie.com/writings/yearthree/apicturesworthathousandfriends/images/thefrontrow.jpg" class="listimage" />The Front Row - A Front Row friend is a friend who is always looking towards the future. This type of friend is easily identifiable because their eyes lead you to believe that they’re sitting in the very front row of a movie theater. Because their eyes are usually in the “upright and locked” position, you’ll find it hard to say anything without feeling as if they’re rolling their eyes at you. Hello there how are you doing tonight?</li>	<li><img src="http://www.collegeisamovie.com/writings/yearthree/apicturesworthathousandfriends/images/theolsen.jpg" class="listimage" />The Olsen - An Olsen friend type has very little self-esteem. In response to their suicidal tendencies they try to copy themselves in their pictures through advanced camera tricks and “mirrorilogy.” You’ve heard that two heads are better than one, right? Well, the very first Olsen came up with that quote. No joke.</li>	<li><img src="http://www.collegeisamovie.com/writings/yearthree/apicturesworthathousandfriends/images/thefabio.jpg" class="listimage" />The Fabio - I can’t believe it’s not blubber. The Fabio friend has an uncanny ability to take horrible pictures of themselves no matter how attractive they are. Over time they’ve tried to evolve their picture taking techniques – high angles, black and white photography, “deep” facial expressions, and “soul searching” eyes. It’s sad, though, because no matter what these friends do they always look like losers without a life goal of any sort. (Note: You might also recognize these people from that local non-chain college coffee shop. Look for black hair, lip rings, circles under their eyes, circles carved in their arms, etc.)</li>	<li><img src="http://www.collegeisamovie.com/writings/yearthree/apicturesworthathousandfriends/images/theandy.jpg" class="listimage" />The Andy - Excuse me, sir’am. I hope I’m not being too forward when I ask, but, well, what’s your gender? The Andy is just that – a bender of the gender. Just when you think that you’ve found their Adam’s apple, twelve tampons fall out of their purse. Then when you ask them why they carry so many tampons they say that they’re for a “friend.” Now you’re back to square one – are they really her tampons or are they for a friend? And why did their ###### just flop right out? Is it their ###### or is THAT for a friend also?</li></ol>

[mr_director]

Let me know if you need anything else. The CSS is the same from above.

[jeffman]

Yeah, this is one of those reverse inheritance things. The float property of the image somehow gets transferred to the <li> elements. I still don't know how. You can fix that part by adding clear:both to the CSS for your li elements.The margin is tougher. I see it correctly in Firefox. Are you in IE? You might try putting your text inside a <p> element.FWIW, you missed a quote mark here: class="listimage />The Trent/Brooke

[jlhaslip]

you need to post the css for the entire page, or a link would be the best.

[mr_director]

Thanks guys. Here's a link to the page:http://www.collegeisamovie.com/2006/10/a-p...ousand-friends/I'm seeing no margins. The text is hitting right up against the images and it looks awkward. Perhaps there's a better way to do what I'm trying to do? I'm viewing in Firefox on Mac. I noticed that Safari puts the ordered list numbers directly overtop the images, which looks really weird. Not sure if there's a way to fix that:

[jeffman]

On line 380 you have this img definition that overrides the .listimage definition:

.post img {	margin: 0 0 5px 0;	border: 2px solid #FFF;}

.listimage uses a class designator, and this combines a different class designator with a child designator, but they point to the same elements. Because definitions cascade, the last one wins. That is why it worked when you put the definition in the element tag. That location is always the last definition, so it always wins.What you need to do is combine the above with your definition for .listimage . I suggest the following to replace BOTH of them:

.listimage {	float:left;	margin: 0 10px 5px 0;	border: 2px solid #FFF;}

[mr_director]

Here's what I ended up doing:

.post img {	margin-bottom: 0 0 5px 0;	border: 2px solid #FFF;}.listimage {	float:left;	margin: 0 10px 5px 0;}

That way, all my regular non-list images will still have the border and bottom margins. Deirdre's Dad, I think you suggested to replace my .post img code with your revised .listimage code. But if I did that, then regular images wouldn't have had the proper elements.Thanks so much for your help! Looks great.