ALERT: Changes for imgBorder and imgBorderOn

[{JT}]

EDIT: This "future change" is now in affect - if you have problems with your image borders, please see the solution below.

We changed how the border changed on hovering over images in an effort to kill the IE 6 flicker problem. This is how you should update your CSS if you have customized .imgBorderOn:

This is how your old code probably looked:

.imgBorderOn {
border-color: red;
}

This is how your new code should look; add the text that is in red:

a:hover .imgBorder, .imgBorderOn {
border-color: red;
}

[Andy]

And, if you are getting the "pressable" thumbnails now and you didn't before, try this:

/* fix the depressing thumbnails */
a img.imgBorder, .imgBorder {border: solid 0px;}
a:hover img.imgBorder, .imgBorderOn {border: solid 0px;}

[javier.rinaldi]

And, if you are getting the "pressable" thumbnails now and you didn't before, try this:

/* fix the depressing thumbnails */
a img.imgBorder, .imgBorder {border: solid 0px;}
a:hover img.imgBorder, .imgBorderOn {border: solid 0px;}

Andy,

can this be made gallery specific. I tried doing the .gallery_XXXXXX then the code, but it still propagated globally.

[Andy]

Andy,

can this be made gallery specific. I tried doing the .gallery_XXXXXX then the code, but it still propagated globally.



.gallery_XXXXXXX a:hover img.imgBorder, .gallery_XXXXXXX .imgBorderOn {border: solid 0px;}

[javier.rinaldi]

hmm,
tried it. no dice
somehow this part of the code get's defined globally instead of getting attached to the gallery.
.gallery_XXXXXXX a:hover img.imgBorder, .imgBorderOn {border: solid 0px;}
Maybe I just have a conflict,

I have a global definition earlier in the css code to make border grey, and hover white. Then I defined the gallery specific border controls.
If all else fails I'll just make the borders disappear globally.

[bigwebguy]

hmm,
tried it. no dice
somehow this part of the code get's defined globally instead of getting attached to the gallery.
.gallery_XXXXXXX a:hover img.imgBorder, .imgBorderOn {border: solid 0px;}
Maybe I just have a conflict,

I have a global definition earlier in the css code to make border grey, and hover white. Then I defined the gallery specific border controls.
If all else fails I'll just make the borders disappear globally.

you need to have

.gallery_XXXXXXX a:hover img.imgBorder, .gallery_XXXXXXX .imgBorderOn {border: solid 0px;}

[javier.rinaldi]

you need to have

.gallery_XXXXXXX a:hover img.imgBorder, .gallery_XXXXXXX .imgBorderOn {border: solid 0px;}

Thanks bigwebguy, that's the ticket!

[KeithH]

I hope the Internet Explorer Flicker can be fixed soon. When do you think the change will be made?

[{JT}]

Maybe the next larger push we have. Important to remember though that the IE flicker is caused when you change the default caching options - most users don't know how to do this and thus don't see the flicker.

Lets use the word flash from now on instead of flicker, that word makes me ill.

I hope the Internet Explorer Flicker can be fixed soon. When do you think the change will be made?

[Mike Lane]

Lets use the word flash from now on instead of flicker, that word makes me ill.
flicker or flikr?

[gfxartist]

Why do I have to specify #critique in my code when I want to change the image border color in critique style?

Go to this gallery http://gfxartist2.smugmug.com/gallery/986539 and view in Smugmug style. Run your mouse over the display photo and you'll see a pink border show up around the photo. Then change your style to Critique and run your mouse over the display photo there. It's Smugmug green. The only way to get the pink border in that style is to specify #critique with the border code.

Am I missing something here? I should think that the image border codes would work on all images. Why does the image in Critique seem to be an exception?

Laurie

[bigwebguy]

Why do I have to specify #critique in my code when I want to change the image border color in critique style?

Go to this gallery http://gfxartist2.smugmug.com/gallery/986539 and view in Smugmug style. Run your mouse over the display photo and you'll see a pink border show up around the photo. Then change your style to Critique and run your mouse over the display photo there. It's Smugmug green. The only way to get the pink border in that style is to specify #critique with the border code.

Am I missing something here? I should think that the image border codes would work on all images. Why does the image in Critique seem to be an exception?

Laurie
because JT had a temporary loss of sanity and put
.critique a:hover img.imgBorder, .imgBorderOn {
border: solid 1px #8CCA1E;
}in the smugmugblack.css file

so as you found out, you have to be at least as specific as that to override.

[gfxartist]

because JT had a temporary loss of sanity...

JT.....is it possible not to be that specific, or is there a reason you wrote the code that way? :wxwax :D

I don't mind making my code specific, but if I don't have to then it would be nice to have one less piece of code in my themes.

[{JT}]

I had to make the code that specific yes - because it was causing problems elsewhere on the site (it made images look like depressed buttons when you moused over them). The next release we make will not be so specific and will be made site wide.

EDIT: That "next release" just happened :)

JT.....is it possible not to be that specific, or is there a reason you wrote the code that way? :wxwax :D

I don't mind making my code specific, but if I don't have to then it would be nice to have one less piece of code in my themes.

[gfxartist]

EDIT: That "next release" just happened :)

You're awesome! :thumb

[digitalpins]

cool, sweet, I just saw this thread after posting a question on it, great just fixed my border problem.

Thanks guys

[JamesJWeg]

You didn't point out that you only add "a:hover .imgBorder," in front of ".imgBornerOn" and NOT ".imgBorder". It took me a few min of cursing you out to figure this out.

James.

[Cindy]

Not sure what to change in my code to fix it... can someone show me what I need to switch?
Here's my current code:

/* CSS that changes bad green to whatever color including misc. texts and the hover image link */
.title {color: #cccccc;}
a.title {color: #cccccc;}
a:hover .imgBorderOn {border: solid 1px #cccccc;}

/* This makes each thumbnail turn into a "button" that appears to "push down" when you hover the mouse over it. */
.imgBorderOn {position: relative;top: 1px;left: 1px;}
.imgBorder {border-color: transparent;
_border-color: #cccccc; position: relative;top: 0px;left: 0px;}

Thanks,

[Cindy]

Not sure what to change in my code to fix it... can someone show me what I need to switch?
Here's my current code:

/* CSS that changes bad green to whatever color including misc. texts and the hover image link */
.title {color: #cccccc;}
a.title {color: #cccccc;}
a:hover .imgBorderOn {border: solid 1px #cccccc;}

/* This makes each thumbnail turn into a "button" that appears to "push down" when you hover the mouse over it. */
.imgBorderOn {position: relative;top: 1px;left: 1px;}
.imgBorder {border-color: transparent;
_border-color: #cccccc; position: relative;top: 0px;left: 0px;}

Thanks,

Just bumping this hoping someone who knows this stuff can help. Thank you.

[jeffluke]

EDIT: This "future change" is now in affect - if you have problems with your image borders, please see the solution below.

We changed how the border changed on hovering over images in an effort to kill the IE 6 flicker problem. This is how you should update your CSS if you have customized .imgBorderOn:

This is how your old code probably looked:

.imgBorderOn {
border-color: red;
}
This is how your new code should look; add the text that is in red:

a:hover .imgBorder, .imgBorderOn {
border-color: red;
}


I added the code above but the FLASHING still occurs. Am I missing something: jeffluke.smugmug.com

Thanks.

[{JT}]

Might want to empty your cache and try again. Sounds odd but it fixed the problem in my testing.

I added the code above but the FLASHING still occurs. Am I missing something: jeffluke.smugmug.com

Thanks.

[jeffluke]

Might want to empty your cache and try again. Sounds odd but it fixed the problem in my testing.
Bingo. Thanks.

[halvlions99]

Bingo. Thanks.

My problem is still there anyone have any ideas. I have cleared my cache and I have added the code but I still have the same problems. Check out my link for my testimonial page and please let me know if anyone else can see my problem. Every time I hover over an image in my journal page it flickers and the text next to can move.

http://picturesinfocus.smugmug.com/gallery/1012642

Move your cursor over the first image.

Thanks for ANY advise.

-Steve

[Andy]

My problem is still there anyone have any ideas. I have cleared my cache and I have added the code but I still have the same problems. Check out my link for my testimonial page and please let me know if anyone else can see my problem. Every time I hover over an image in my journal page it flickers and the text next to can move.

http://picturesinfocus.smugmug.com/gallery/1012642

Move your cursor over the first image.

Thanks for ANY advise.

-Steve


try this:

a:hover .imgBorder, .imgBorderOn {border: solid 1px;}

[halvlions99]

try this:

a:hover .imgBorder, .imgBorderOn {border: solid 1px;}

Thanks Andy.

Here is the strange thing. If I do 1px everything is cool. But if I do 0px then it goes back to the glitch.

Mine:
.gallery_990913 a:hover img.imgBorder, .gallery_990913 .imgBorderOn {border: solid 0px;}

Yours:
.gallery_990913 a:hover img.imgBorder, .gallery_990913 .imgBorderOn {border: solid 1px;}

I am just trying to not have a border at all.

I will put the tow link out there one:
.gallery_990913 a:hover img.imgBorder, .gallery_990913 .imgBorderOn {border: solid 0px;}

Link:
http://picturesinfocus.smugmug.com/gallery/990913

Then one with your code:
.gallery_1012642 a:hover img.imgBorder, .gallery_1012642 .imgBorderOn {border: solid 1px;}
http://picturesinfocus.smugmug.com/gallery/990913

I guess worse case I can keep the border out there...if I have to. I was hoping not to.

Thanks for any feedback!

-Steve

[Mike Lane]

You've just got conflicting CSS is all. Here is some CSS that deals with the image borders early in your customization:

.imgBorderOn {position: relative;top: 0px;left: 0px;}
.imgBorder {border-color: transparent;
_border-color: white; position: relative;top: 0px;left: 0px;}

/* Snip */

.imgBorderOn {border: solid 0px #A4080B;}

And here are your gallery declarations:


.gallery_990913 a:hover .imgBorder, .gallery_990913 .imgBorderOn {border: solid 0px;}



.gallery_990150 a:hover img.imgBorder, .gallery_990150 .imgBorderOn {border: solid 0px;}
.gallery_404480 a:hover img.imgBorder, .gallery_404480 .imgBorderOn {border: solid 0px;}
.gallery_408778 a:hover img.imgBorder, .gallery_408778 .imgBorderOn {border: solid 0px;}
.gallery_610837 a:hover img.imgBorder, .gallery_610837 .imgBorderOn {border: solid 0px;}
.gallery_1012642 a:hover img.imgBorder, .gallery_1012642 .imgBorderOn {border: solid 1px;}
.gallery_1013603 a:hover img.imgBorder, .gallery_1013603 .imgBorderOn {border: solid 0px;}
.gallery_1054550 a:hover img.imgBorder, .gallery_1054550 .imgBorderOn {border: solid 0px;}


Your CSS is confusing so really I'm not sure what you're going for on your site. It appears that you don't wan any imgaes to have borders anywhere on your site. Is that true? If not, what are you going for?

[halvlions99]

Well I changed the CSS around and I have it working but I had to leave the border at 1px. I was wanting to have some journal galleries not have any borders at all. But if I change it to 0px then it goes back to the bug!

Oh well.

Thanks Mike.

[halvlions99]

OK I just changed the border to white and now it seems as though there is no border:

a:hover .imgBorder, .imgBorderOn {border: solid 1px;}
.imgBorder {border-color: transparent;
_border-color: white; position: relative;top: 0px;left: 0px;}
.gallery_990913 a:hover .imgBorder, .gallery_990913 .imgBorderOn {border: solid 1px #FFFFFF;}

http://picturesinfocus.smugmug.com/gallery/990913

It seems to work!

[Cindy]

Not sure what to change in my code to fix it... can someone show me what I need to switch?
Here's my current code:

/* CSS that changes bad green to whatever color including misc. texts and the hover image link */
.title {color: #cccccc;}
a.title {color: #cccccc;}
a:hover .imgBorderOn {border: solid 1px #cccccc;}

/* This makes each thumbnail turn into a "button" that appears to "push down" when you hover the mouse over it. */
.imgBorderOn {position: relative;top: 1px;left: 1px;}
.imgBorder {border-color: transparent;
_border-color: #cccccc; position: relative;top: 0px;left: 0px;}

Thanks,

I posted the above awhile back but no one answered and I got busy. I would try further to fix it myself but my customization looks wacky anyway (at least to me) and it gets me all confused. I think I've allready forgotten what I learned months ago regarding this stuff and probably need to hire someone one of these days to help me finish my site.

Thanks for any & all help,

[Andy]

I posted the above awhile back but no one answered and I got busy. I would try further to fix it myself but my customization looks wacky anyway (at least to me) and it gets me all confused. I think I've allready forgotten what I learned months ago regarding this stuff and probably need to hire someone one of these days to help me finish my site.

Thanks for any & all help,

Cindy:

You can lose this:

/* This makes each thumbnail turn into a "button" that appears to "push down" when you hover the mouse over it. */
.imgBorderOn {position: relative;top: 1px;left: 1px;}
.imgBorder {border-color: transparent;
_border-color: #cccccc; position: relative;top: 0px;left: 0px;}

and replace with this:

a:hover .imgBorder, .imgBorderOn {border-color: #ccc;}

[Cindy]

They don't 'push down' anymore but that's okay. Just for keepin it clean sake and knowing what is what... I left the description for the moment in the /* */ as was until I know what to change it to say... not sure what is doing what at this point or if it's all needed. What exactly should be kept out of all the following (note there was additional link stuff above what you had me change. Thanks so much Andy.

/* CSS that changes bad green to whatever color including misc. texts and the hover image link */
.title {color: #cccccc;}
a.title {color: #cccccc;}
a:hover .imgBorderOn {border: solid 1px #cccccc;}

/* This makes each thumbnail turn into a "button" that appears to "push down" when you hover the mouse over it. */
a:hover .imgBorder, .imgBorderOn {border-color: #ccc;}

[Cindy]

Nevermind figured out what is doing what. Is there away to make them 'push' buttons again?

Changed my code description to read as follows (I think this is right, comments).

/* Change bad green Text to preferred color */
.title {color: #cccccc;}
a.title {color: #cccccc;}
a:hover .imgBorderOn {border: solid 1px #cccccc;}
/* Changes green box borders to new color. */
a:hover .imgBorder, .imgBorderOn {border-color: #ccc;}

[Andy]

Nevermind figured out what is doing what. Is there away to make them 'push' buttons again?

Changed my code description to read as follows (I think this is right, comments).

/* Change bad green Text to preferred color */
.title {color: #cccccc;}
a.title {color: #cccccc;}
a:hover .imgBorderOn {border: solid 1px #cccccc;}
/* Changes green box borders to new color. */
a:hover .imgBorder, .imgBorderOn {border-color: #ccc;}

Cindy, I'm on another project right now, but if you have FIREFOX and the FIREFOX web dev you can easily play with your original code and the new code :deal

[Cindy]

Cindy, I'm on another project right now, but if you have FIREFOX and the FIREFOX web dev you can easily play with your original code and the new code :deal

I have both. The web dev mostly looks greek to me but I'm slowly figuring some of it out. Just not enough time to do so and since I use it so rarely (customize once and move on) I tend to forget it pretty quickly.

[Andy]

I have both. The web dev mostly looks greek to me but I'm slowly figuring some of it out. Just not enough time to do so and since I use it so rarely (customize once and move on) I tend to forget it pretty quickly.

Just click on Edit CSS while you are on your site. Then start making changes - you see them instantly! I'm sure Mike or Lee or Dev can help with the depressing buttons etc..

[Cindy]

Just click on Edit CSS while you are on your site. Then start making changes - you see them instantly! I'm sure Mike or Lee or Dev can help with the depressing buttons etc..

sorry but potential big dummy question I have to ask... I don't wanna totally screw up what is good so... when I edit the css in web dev am I correct to assume it only shows you a preview of what it would look like if/when I actually really put the stuff in my SM custom page? Is so way cool.

[Mike Lane]

sorry but potential big dummy question I have to ask... I don't wanna totally screw up what is good so... when I edit the css in web dev am I correct to assume it only shows you a preview of what it would look like if/when I actually really put the stuff in my SM custom page? Is so way cool.

:nod

You are correct.

[brandofamily]

I had this code:
.gallery_1311481 #journal img.imgBorder,
.gallery_1311481 #journal img.imgBorderOn
{ border-width: 0px; }
Changed to this code:

.gallery_1311481 #journal a:hover img.imgBorder, .gallery_1311481 #journal img.imgBorderOn {border: solid 0px;}

When I changed...this gallery...
http://www.brandolinoimaging.com/gallery/1311481
got bo0rked.
When I mouse over with the new code, the image moves (kinda like a button) and a dashed border shows up.
With the old code that did not happen.
Am I mistaken in thinking this new code mentioned here is to replace my old code?
I commented out the new code and returned to the old code...Any thoughts?

[Mike Lane]

I had this code:
.gallery_1311481 #journal img.imgBorder,
.gallery_1311481 #journal img.imgBorderOn
{ border-width: 0px; }
Changed to this code:

.gallery_1311481 #journal a:hover img.imgBorder, .gallery_1311481 #journal img.imgBorderOn {border: solid 0px;}

When I changed...this gallery...
http://www.brandolinoimaging.com/gallery/1311481
got bo0rked.
When I mouse over with the new code, the image moves (kinda like a button) and a dashed border shows up.
With the old code that did not happen.
Am I mistaken in thinking this new code mentioned here is to replace my old code?
I commented out the new code and returned to the old code...Any thoughts?

You went essentially from

.imgBorder,
.imgBorderOn {border:0;}

to

a:hover .imgBorder,
.imgBorderOn {border:0;}

Notice how in your new code you didn't have anything for .imgBorder? Try this (shortened for my convenience):

.gallery_1311481 .imgBorder,
.gallery_1311481 a:hover .imgBorder,
.gallery_1311481 .imgBorderOn {border: 0;}

[brandofamily]

You went essentially from

.imgBorder,
.imgBorderOn {border:0;}

to

a:hover .imgBorder,
.imgBorderOn {border:0;}

Notice how in your new code you didn't have anything for .imgBorder? Try this (shortened for my convenience):

.gallery_1311481 .imgBorder,
.gallery_1311481 a:hover .imgBorder,
.gallery_1311481 .imgBorderOn {border: 0;}
Your code put the gallery back to where it was before trying to change to the new code...thanks
Why do I need that a:hover ? The old code w/o it seemed to be doing OK.

[Mike Lane]

Your code put the gallery back to where it was before trying to change to the new code...thanks
Why do I need that a:hover ? The old code w/o it seemed to be doing OK.

It's the new hotness. You can thank IE for it I think. Or if that's not good enough because JT said so. :thumb

[brandofamily]

It's the new hotness. You can thank IE for it I think. Or if that's not good enough because JT said so. :thumb

Now I do have this also:

.gallery_1311481 #journal .photo.right { cursor: auto; }
.gallery_1311481 #journal .photo a { cursor: auto; }
.gallery_1311481 #journal .photo img { cursor: auto; }
that Andy told me to put in a long while back. It was a set of 5 lines...is it OK.

[nonilady]

EDIT: This "future change" is now in affect - if you have problems with your image borders, please see the solution below.

We changed how the border changed on hovering over images in an effort to kill the IE 6 flicker problem. This is how you should update your CSS if you have customized .imgBorderOn:

This is how your old code probably looked:

.imgBorderOn {
border-color: red;
}

This is how your new code should look; add the text that is in red:

a:hover .imgBorder, .imgBorderOn {
border-color: red;
}


thanks JT, that solved my problem, it has indeed stopped flickering. :D

[Mike Lane]

Now I do have this also:

.gallery_1311481 #journal .photo.right { cursor: auto; }
.gallery_1311481 #journal .photo a { cursor: auto; }
.gallery_1311481 #journal .photo img { cursor: auto; }
that Andy told me to put in a long while back. It was a set of 5 lines...is it OK.

That's got nothing to do with the img border.

[Sizemore]

Yucky! Y’all turned my image border a yucky green…..

I tried to fix it yesterday and wondered why I couldn’t. Dropped in the board today and saw this thread and managed to fix it no problem.

I love Smugbug and this board! Friendly help on this board and I found the motivation to try CCS. Thanks for all the time y’all put into helping folks with CSS here on the board. I’m here to stay!

[Andy]

Yucky! Y’all turned my image border a yucky green…..

I tried to fix it yesterday and wondered why I couldn’t. Dropped in the board today and saw this thread and managed to fix it no problem.

I love Smugbug and this board! Friendly help on this board and I found the motivation to try CCS. Thanks for all the time y’all put into helping folks with CSS here on the board. I’m here to stay!


:clap :wave welcome to Dgrin - and glad you got sorted!