CSS and PHP

@comptech520Nov 27.2009

Hi,

I have a style sheet that has this code:
#sc a img {
border: 0;
}

It HAS to be there, mean while I have a photo gallery that has this CSS and PHP code. The above code makes it so there is no border and I want there to be a border with this code. How can I make that happen?

img.pwthumbs {
margin-left:20px;
margin-right:20px;
margin-top:20px;
padding:8px;
border:solid;
border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
border-width: 1px 2px 2px 1px;
}

<?
for ($i = $start; $i < $limit; $i++) {
if (!isset($photos[$i])) break; // No more photos
echo ‘<li><a href=”‘ . $eventinfo[‘photo_path_url’] . ‘/web/’ . $photos[$i] . ‘” rel=”lightbox[event]”><img src=”‘ . $eventinfo[‘photo_path_url’] . ‘/thumbs/’ . $photos[$i] . ‘” alt=”” class=”pwthumbs” border=”0″ width=144 height=95/></a></li>’;
}
?>

img.pwthumbs {
margin-left:20px;
margin-right:20px;
margin-top:20px;
padding:8px;
border:solid;
border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
border-width: 1px 2px 2px 1px;
}

to post a comment

PHP

11 Comments(s) _↴

@SrWebDeveloperNov 27.2009 — #First off, always insert code in the proper code tag, please.

Secondly, your CSS references an id with the name "sc" associated with a link with an image inside which is [B]not[/B] referenced anywhere within your posted PHP/HTML. That code instead references a class named "pwthumbs" which does set the border (regardless of the HTML border attribute being 0) thus I do not see how the border ends up being disabled.

You also posted the img.pwthumbs CSS selector stuff twice, what's that about? Talk about confusing.

-jim

@artemisNov 27.2009 — #

img.pwthumbs {
 margin-left:20px;
 margin-right:20px;
 margin-top:20px;
 padding:8px;
 border:[B]1px[/B] solid;
 border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
 border-width: 1px 2px 2px 1px;
 }

@MindzaiNov 27.2009 — #

img.pwthumbs {
 margin-left:20px;
 margin-right:20px;
 margin-top:20px;
 padding:8px;
 border:[B]1px[/B] solid;
 border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
 border-width: 1px 2px 2px 1px;
 }

[/QUOTE]

That won't change anything since the border-width property will over-ride it.

I do not see how the border ends up being disabled.[/QUOTE]

The first rule has a higher specificity so it overrides the later rule - even though it may come first in the source. Basically (and ignoring !important and inline styles for simplicity):

id selectors (#foo) have a value of 100

class selectors (.foo) have a value of 10

element selectors (foo) have a value of 1

So:

#sc a img = 100 + 1 + 1 = 102

img.pwthumbs = 1 + 10 = 11

Since 102 > 11 the first rule will take precedence. The simple fix is make the desired rule specific enough to override the first. Assuming #sc is a container, the following ought to do it:

#sc a img.pwthumbs {}

BTW Firebug is your friend for debugging CSS specificity issues ?

W3C: Specificity

@SrWebDeveloperNov 28.2009 — ##sc a img = 100 + 1 + 1 = 102

img.pwthumbs = 1 + 10 = 11[/QUOTE]

The first (not referenced in any HTML posted by the OP so far) is applied [U]only[/U] to an element with ID sc which in turn has a child element anchor tag (link) which in turn has a child element image. The second is applied [U]only[/U] to images with class name pwthumbs, and as you know border is 1px for that selector. The first is [U]not[/U] overriding the second [B]based on the HTML/CSS posted in this topic[/B]. UNLESS the OP includes HTML or CSS different than what has been posted (i.e. a div with ID named sc wrapping the rest, typical for content areas) which would change the scenario, which I suspect is the case. The HTML as posted does not contain any references to sc, and that's critically important.

You may be right, but not based on the posted HTML which also includes a list item tag to further distinguish it from being affected by the first selector, may I add.

To emphasize --- my responses here have been based on the posted HTML, and let's not forget they posted one class twice (major confusion) so I'm sure what we're seeing is not 100% accurate anyway.

-jim

@MindzaiNov 28.2009 — #I think it's pretty clear that #sc is a container around the html posted here or else it would not be overriding the border settings of the .pwthumbs class - which as the OP stated, it is. I agree it's not very helpful only having partial code, but it's not rocket science to work out what is the likely cause. The OP can try my fix, which I think will solve the issue, and if not then we'll have another think. Either way hopefully it's a bit more helpful than a glorified "I don't know" ?

You may add what you like, bu the list item's presence is neither here nor there. The rule is a simple ancestor descendant selector, not parent > child.

I'm not really interested in another debate with you though, this is my last post until the OP comes back :rolleyes:

@toicontienNov 28.2009 — #

[CODE]#sc a img {
 border: 0;
 }
 
 #sc a img.pwthumbs {
 margin-left:20px;
 margin-right:20px;
 margin-top:20px;
 padding:8px;
 border:solid;
 border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
 border-width: 1px 2px 2px 1px;
 }[/CODE]

@SrWebDeveloperNov 29.2009 — #I know it seems clear to [U]us[/U] why we both mentioned the wrapper as the likely cause and even agree on said solution.

[COLOR=Red]Maybe I asked the OP to explicitly re-post the proper code [B]prior[/B] to anyone posting the solution (even as obvious as it is) so anyone following this thread learning CSS would not be confused (as other users did, already, who posted the wrong advice for the wrong selector). I'm a little mindful of the newbies who would suffer a much steeper learning curve having to "imagine" code in their head. We all should be vigilant when possible on the forum.[/COLOR]

That's my focus, certainly NOT to debate you.

-jim

@MindzaiNov 29.2009 — #I know it seems clear to [U]us[/U]...the solution (even as obvious as it is)...[/QUOTE]

...thus I do not see how the border ends up being disabled.[/quote]

Funny how you knew the problem all along but decided not to post it until after I explained it :rolleyes:

@SrWebDeveloperNov 29.2009 — #[COLOR=Indigo]Secondly, your CSS references an id with the name "sc" associated with a link with an image inside which is [B]not[/B] referenced anywhere within your posted PHP/HTML. That code instead references a class named "pwthumbs" which does set the border (regardless of the HTML border attribute being 0)[/COLOR] [B]thus[/B] I do not see how the border ends up being disabled.[/QUOTE]

The full quote above, including parts you left out which sets the proper context, meaning the posted code thus far cannot cause the stated technical problem (fact). My comments to you were to point out it might be confusing at times to newbies when solutions are posted based on assumptions. It's just an opinion I expressed, it never was a debate question or a knock on the solution.

I think you could have waited for the OP to repost, as I did, so the question and solution are paired better. I am hoping next time you might consider the same as it helps those learning the tech stuff struggle less.

It's okay if you want to focus all your negative energy on me and misconstrue my motivation. You have the right, I can't stop you. But doing that certainly makes it less interesting for others.

-jim

@opifexNov 29.2009 — #[I]I don't feel a whole lotta love in this thread, folks.[/I] ?

@SrWebDeveloperNov 29.2009 — #Moving on.

Also in #PHP _↴

[RESOLVED] How to use php classes between other classes select last inserted data from primary and foreign key [RESOLVED] Need A String Explanation

Success!

Help @comptech520 spread the word by sharing this article on Twitter...

Tweet This

CSS and PHP

11 Comments(s) _↴

Also in #PHP _↴

Success!

Social

Version

CSS and PHP

11 Comments(s) ↴

Also in #PHP ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #PHP _↴