Mystified by CSS IMG Problem

[Jim]

Hi,

I am hoping that someone here can help me out on this.

The following code works just fine and gives me a nice margin between
my image to the left and the text that appears adjacent to it on the
right:

<p>Figure 2. xxxx</p>
<img style="float:left; margin-right:14px; margin-bottom:8px;"
src="pic.jpg" width="128" height="473" alt="pic" />
<p>This is a paragraph of text.....</p>

Now I take that inline CSS and add it to my style sheet as follows:

img.ileft {float:left; margin-right:14px; margin-bottom:8px;}

and then use the following HTML:

<p>Figure 2. xxxx</p>
<img class="ileft" src="pic.jpg" width="128" height="473" alt="pic" />
<p>This is a paragraph of text.....</p>

What happens is that while my text still displays to the right of my
image (obviously the float attribute still works), the nice margin
between the image and my text disappears (margin-right fails but as
far as I can tell, margin-bottom still works).

Any ideas? Thanks.

PS. Please reply to the list as the email address is a fake to foil
spammers.


Best Regards, Jim
http://artsnova.com/blog

[Harlan Messinger]

Jim wrote:

Hi,

I am hoping that someone here can help me out on this.

The following code works just fine and gives me a nice margin between
my image to the left and the text that appears adjacent to it on the
right:

<p>Figure 2. xxxx</p>
<img style="float:left; margin-right:14px; margin-bottom:8px;"
src="pic.jpg" width="128" height="473" alt="pic" />
<p>This is a paragraph of text.....</p>

Now I take that inline CSS and add it to my style sheet as follows:

img.ileft {float:left; margin-right:14px; margin-bottom:8px;}

and then use the following HTML:

<p>Figure 2. xxxx</p>
<img class="ileft" src="pic.jpg" width="128" height="473" alt="pic" />
<p>This is a paragraph of text.....</p>

What happens is that while my text still displays to the right of my
image (obviously the float attribute still works), the nice margin
between the image and my text disappears (margin-right fails but as
far as I can tell, margin-bottom still works).

The odds are very high that it has something to do with the rest of your
code, but since you haven't given us a way to see it, it's hard to tell.

>
Any ideas? Thanks.

PS. Please reply to the list as the email address is a fake to foil
spammers.

Responding to the newsgroup is the norm.

[Jukka K. Korpela]

Scripsit Jim:

The following code

Where's the URL?

PS. Please reply to the list

Where else?

as the email address is a fake to foil spammers.

Thanks for the hint. Please don't change the forged From field before
you have a clue.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Jim]

Hello Jukka,

On Fri, 18 Jan 2008 19:16:09 +0200, "Jukka K. Korpela"
<jk******@cs.tut.fiwrote:

>Scripsit Jim:

>The following code

Where's the URL?

No URL because it is not online.

>

>PS. Please reply to the list

Where else?

There are folks out there who do attempt to respond offlist. Hence
the explicit statement.

>

>as the email address is a fake to foil spammers.

Thanks for the hint.

You're welcome.

Please don't change the forged From field before
you have a clue.

A clue about what?

Best Regards, Jim
http://artsnova.com/blog

[Nik Coughlin]

Jim wrote:

>>
Where's the URL?

No URL because it is not online.

Hi Jim,

The reason you're not getting any help is because you haven't provided
enough information for us to help you. If you put what you have up
somewhere and give us the URL, even on some kind of crappy free hosting
site, then we can help you figure out what's wrong. Posting bits and bobs
of code doesn't help. No context. Could be one of any number of things
that you haven't thought of that are causing your problem.

Cheers

[Ben Bacarisse]

Jim <Fa*********@astrodigitalNOT.orgwrites:

On Fri, 18 Jan 2008 10:25:53 -0500, Harlan Messinger
<hm*******************@comcast.netwrote:

>>Jim wrote:

<snip>

>>Now I take that inline CSS and add it to my style sheet as follows:

img.ileft {float:left; margin-right:14px; margin-bottom:8px;}

and then use the following HTML:

<p>Figure 2. xxxx</p>
<img class="ileft" src="pic.jpg" width="128" height="473" alt="pic" />
<p>This is a paragraph of text.....</p>

What happens is that while my text still displays to the right of my
image (obviously the float attribute still works), the nice margin
between the image and my text disappears (margin-right fails but as
far as I can tell, margin-bottom still works).

The odds are very high that it has something to do with the rest of your
code, but since you haven't given us a way to see it, it's hard to tell.

Hmmm. Well the image does appear within a DIV and I do have the
following line of code related to images in that DIV:

.contentblock img {margin-right:auto; margin-left:auto; }

Ah! We needed to see this.

I had thought about inheritance but I am specifically stating that the
image in question is to use the class ILEFT and I would think that
trumps all.

Am I wrong on this?

Yes. Look up the rules on specificity of selectors in:
http://www.w3.org/TR/1998/REC-CSS2-1...2/cascade.html
(but read the whole thing if you can).

Your img.ileft rule has lower specificity than the one you did not show
us at first.

--
Ben.

[Jim]

Hello Ben,

On Sat, 19 Jan 2008 16:03:14 +0000, Ben Bacarisse
<be********@bsb.me.ukwrote:

>Jim <Fa*********@astrodigitalNOT.orgwrites:

>On Fri, 18 Jan 2008 10:25:53 -0500, Harlan Messinger
<hm*******************@comcast.netwrote:

>>>Jim wrote:

<snip>

>>>Now I take that inline CSS and add it to my style sheet as follows:

img.ileft {float:left; margin-right:14px; margin-bottom:8px;}

and then use the following HTML:

<p>Figure 2. xxxx</p>
<img class="ileft" src="pic.jpg" width="128" height="473" alt="pic" />
<p>This is a paragraph of text.....</p>

What happens is that while my text still displays to the right of my
image (obviously the float attribute still works), the nice margin
between the image and my text disappears (margin-right fails but as
far as I can tell, margin-bottom still works).

The odds are very high that it has something to do with the rest of your
code, but since you haven't given us a way to see it, it's hard to tell.

Hmmm. Well the image does appear within a DIV and I do have the
following line of code related to images in that DIV:

.contentblock img {margin-right:auto; margin-left:auto; }

Ah! We needed to see this.

>I had thought about inheritance but I am specifically stating that the
image in question is to use the class ILEFT and I would think that
trumps all.

Am I wrong on this?

Yes. Look up the rules on specificity of selectors in:
http://www.w3.org/TR/1998/REC-CSS2-1...2/cascade.html
(but read the whole thing if you can).

Your img.ileft rule has lower specificity than the one you did not show
us at first.

Grumble grumble. And I thought I knew CSS.

Ben: thanks for pointing out the w3.org page. I've gone through it but
it seems to me that the margin in ileft should have higher specificity
than the one in contentblock based on my reading of:
http://www.w3.org/TR/1998/REC-CSS2-1...ml#specificity

I think I'll try adding the !important declaration to ileft and see if
that has any impact.

Thanks again Ben.

Best Regards, Jim
http://artsnova.com/blog

[Jim]

Hi Nik,

On Sat, 19 Jan 2008 16:21:43 +1300, "Nik Coughlin"
<nr******@gmail.comwrote:

>Jim wrote:

>>>
Where's the URL?

No URL because it is not online.

Hi Jim,

The reason you're not getting any help is because you haven't provided
enough information for us to help you. If you put what you have up
somewhere and give us the URL, even on some kind of crappy free hosting
site, then we can help you figure out what's wrong. Posting bits and bobs
of code doesn't help. No context. Could be one of any number of things
that you haven't thought of that are causing your problem.

Cheers

You make a very good point. I've been on the other side of this sort
of thing in the past so hear exactly what you're saying.

Fortunately I think Ben hit the nail on the head in that the problem
is with my misunderstanding the hierachy of inheritance.

Thanks for taking the time to respond to my post.


Best Regards, Jim
http://artsnova.com/blog

[Ben Bacarisse]

Jim <Fa*********@astrodigitalNOT.orgwrites:

Fortunately I think Ben hit the nail on the head in that the problem
is with my misunderstanding the hierachy of inheritance.

For the record, I said no such thing (though I got a detail wrong)!

Inheritance is probably the most miss-understood thing in CSS but I
know enough to know that is has nothing to do with your problem.
Inheritance kicks in only when no CSS rules specify a value for a
property, or when the rule that *does* apply gives "inherit" as the
property value. Neither is the case here.

--
Ben.