What Happened to My CSS?

[marain]

Slide show on https://www.njgunlawyers.com/page.php?here=FID consists of eight images. Each of the eight has its own css parameters (all identical). The css is being ignored. Most obvious is absence of border on any of the eight.

Can y'all help me?

A.

[coothead]

Hi there marain,



first of all remove all of this inline CSS nonsense...



style="margin-top:12px; margin-bottom:8px; border-color:black; border-width:8px; border-style:solid; "

...from the HTML.

Then open your njgunlawyers.css file, go to line #16 and change this...



#slide {
height: 191px; /* adjust this value to suit your taste */
width: auto;
}

...to this...



#slide {
height: 191px; /* adjust this value to suit your taste */
width: auto;
margin: 12px auto 8px;
border: 8px solid black;
}



coothead

[marain]

Coothead,

Your suggestion is, oh, so much more elegant than my nonsense. That's the good news. The bad news is it still does not work.

A.

[coothead]

Hi there marain,


The bad news is it still does not work.


You probably know what I am going to say to that assertion. :D

You have a cache problem. :confused:

As you were having difficulties clearing it, I did post, in
another thread of yours, a drastic solution for you to try...

http://www.dynamicdrive.com/forums/showthread.php?85407-Image-Not-Appearing&p=330574#post330574


coothead

[marain]

Coothead,

Clearing cache works. Thank you.

(But I do not understand why my inline css, inelegant as it was, failed.)

A.

[coothead]

"But I do not understand why my inline css, inelegant as it was, failed."


The code was simply misplaced. :o

it needed to set for this element...



<img id="slide" src="images/fid310x191.jpg" alt="" class="center">

...rather than all these...



<img src="images/fid147x191.jpg" width="156" height="191" alt=" ">
<img src="images/fid156x191.jpg" width="156" height="191" alt=" ">
<img src="images/fid178x191.jpg" width="341" height="191" alt=" ">
<img src="images/fid236x191.jpg" width="236" height="191" alt=" ">
<img src="images/fid284x191.jpg" width="236" height="191" alt=" ">
<img src="images/fid287x191.jpg" width="287" height="191" alt=" ">
<img src="images/fid310x191.jpg" width="310" height="191" alt=" ">
<img src="images/fid341x191.jpg" width="341" height="191" alt=" ">


coothead

[marain]

Coothead,

I thanked you before, and I thank you again. But I continue to profess bepuzzlement over why specifying css information inline at the elementary level fails. https://www.w3schools.com/Css/css_howto.asp leads me to believe my inline css, ineligent as it is, should work. It doesn't. Your method does. I bow to reality.

I've trespassed enough on your time. Please do not feel obliged to respond.

A.

[coothead]

Hi there morain,


let's clear up this misunderstanding.

It seems that you thought that my reply implied that inline CSS would
not work for your problem.
That is not the case. it would have worked had you had just applied
it to the correct HTML element.

Instead of my writing...


"first of all remove all of this inline CSS nonsense.["
...I should have pointed out to you that the use of inline CSS is
actually considered to be bad practice and should be removed
where possible.

What it does do, is override any external CSS that may have
been applied to the element in question. You can test this for
yourself by adding...

style="border: 8px dotted red"
...to this...

<img id="slide" src="images/fid310x191.jpg" alt="" class="center">

You will see that you image now has a dotted red border
instead of a solid black one.

Further reading:-

Avoid using inline styling (https://www.google.com/search?ei=eauEX5jtD5PvgAaIuLHAAQ&q=Avoid+using+inline+styling)

I trust that this will help clear up any confusion that I may have
caused.


coothead

[marain]

Coothead,

Thanks.

I'll reply privately.

Best,

A.

[coothead]

The styles you added to each image only work on block elements.;
This is not true.



img {
border: 0.5em solid #000;
}

I would suggest the you test the above code.
It will confirm my assertion. :cool:


coothead

[greenconcept]

Yes, those styles work. <img> is an exception to the rule. It is technically an inline element, but it behaves more like an inline-block element in many browsers.

I withdraw my solution.





This is not true.



img {
border: 0.5em solid #000;
}

I would suggest the you test the above code.
It will confirm my assertion. :cool:


coothead