I'm writing a simple page over here. I want my text aligned beside my image, but I can only get it to show up BELOW my image.

Relevant HTML:

<p><a class="hasImage" href="http://www.amazon.com/dp/1440467005/ref=nosim?tag=lukeprogcom-20"><img class="alignleft" src="/images/front-separated thumbnail.png"></a><b>Have you ever wanted to publish your own book?</b></p>

Relevant CSS:

img.alignleft {
  float: left;
}

a.hasImage { border: 0 none }
a:link.hasImage { border: 0 none }
a:visited.hasImage { border: 0 none }
a:active.hasImage { border: 0 none }
a img { border: none }

Why doesn't this work? I keep reading CSS documentation (for example) and it looks like this should work, but it doesn't.

Many thanks.

Try:

<p class="hasImage"><a class="hasImage" href="http://www.amazon.com/dp/1440467005/ref=nosim?tag=lukeprogcom-20"><img class="alignleft" src="/images/front-separated thumbnail.png"></a><b>Have you ever wanted to publish your own book?</b></p>

p.hasImage {
  float: left;
}

a.hasImage { border: 0 none }
a:link.hasImage { border: 0 none }
a:visited.hasImage { border: 0 none }
a:active.hasImage { border: 0 none }
a img { border: none }

Nope, same problem. Maybe there's something else wrong with my CSS?

Try creating a class to float your images that is seperate from the .p classes and I think you may find success.

Nope, still doesn't work.

The pseudo class MUST be after the class name declaration

a.className:pseudoClass

Originally Posted by lukeprog

Nope, still doesn't work.

It may not be the 100% correct way to do it

and

It may not have worked as you tried to do it but don't tell me it doesn't work.

Here is an image to show you that it does.

Originally Posted by colbyt

It may not have worked as you tried to do it but don't tell me it doesn't work.

No, of course I know it works, I just can't figure out why it isn't working when I try it. I must be doing something wrong, I just can't figure out what.

Originally Posted by chrishirst

The pseudo class MUST be after the class name declaration

Okay, thanks, fixed all those.

I dunno: I copy/paste the "relevant" code over here and it works, but it won't work if I copy/paste ALL my code. So there must be something in my CSS that is messing things up that I don't think is relevant but is affecting things.

It doesn't work even if I make the entire img object do float:left;

It also doesn't help if I preface the img and p objects with #content (since that's the div they appear in on the page).

Both HTML and CSS now validate for that page.

Harumph.

Sweet, I was editing the wrong CSS file. I rule.

Thanks for your help.

Just wait more than like you can have just as much fun with missing semicolons in php files. I know I have.

Now when I get the message I just d*** semicolon.

Originally Posted by lukeprog

Sweet, I was editing the wrong CSS file. I rule.

Thanks for your help.

What's even more amusing is editing files on a live site while refreshing the development site in a browser.
or
Deleting entries on a development site DB, then realising it's actually using the live site database, because some fool didn't edit the config file after uploading.

Oh, how I laughed that day!!