WordPress.org

1. Jaja..
   Member
   Posted 4 months ago #

   Dear friends,

   I've been using the Twenty Ten theme for many years now but for some reason i can't get a hold on this 'CSS' ? Glitch-/Bug.

   I've made the shadow RED this way the problem is better visible for everybody.
   image

   Everything you see is basic Twenty Ten code the only thing i added is a transform-rotate and a shadow to the .format-gallery .gallery-thumb

   .format-gallery .gallery-thumb,
   .category-gallery .gallery-thumb {
   	float: left;
   	margin-right: 25px;
   	margin-top: -10px;
   	-webkit-box-shadow: -1px 1px 5px #333;
   	-moz-box-shadow: -1px 1px 5px #333;
   	box-shadow: -1px 1px 5px #ff0000;
   	-webkit-transform:rotate(-2.6deg);
   	-moz-transform:rotate(-2.6deg);
   	-o-transform:rotate(-2.6deg);
   	-ms-transform:rotate(-2.6deg);
   }

   But it seems like there is a 'transparent' height of a few pixels at the bottom of a.size-thumbnail without content.

2. esmi
   Theme Diva & Forum Moderator
   Posted 4 months ago #

   Try using Firefox with the Firebug add-on for this kind of CSS work.
   http://getfirebug.com/

3. Jaja..
   Member
   Posted 4 months ago #

   Well sorry maybe this will sound like i hate Firefox but this perfectly reminds me of WHY i delete and gave up on Firefox a while ago.
   connection problems - just downloading a plugin

   It's really sloppy software.

   :(

4. dragonsjaw
   Member
   Posted 4 months ago #

   You could use Chrome and it's inspect element add on, to see the CSS and trouble shoot.

5. Jaja..
   Member
   Posted 4 months ago #

   I use Safari and the default Web Inspector tool that comes build-in. It's all the same.

   But the problem here is i know CSS and how to troubleshoot but there is just a Glitch in the WP Global Reset of TwentyTen.

   Look at the trouble-maker.
   Image

   Just for the record this is all default TwentyTen code I only did few CSS images edits.

   At the image-/link above you see that a.size-thumbnail gets a (none-visible) height when there is no Caption-text.
   Thats why it pushed the border or padding down at the bottom of the gallery image.

   The only way to solve this problem and i'm doing this for a few years now is adding this to the Gobal Reset but it's not very nice to use margin-bottom minus.

   a.size-thumbnail {
        display: block;
        margin-bottom -7px;
   }

   Now the problem is solved all borders are equal to the image when there is no Caption-text.
   Image

Reply

You must log in to post.