Twenty Ten – Gallery-thumb margin bottom problem?

  • Jaja..

    (@jaja-1)


    12 years, 2 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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • esmi

    (@esmi)

    12 years, 2 months ago

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

    Thread Starter Jaja..

    (@jaja-1)

    12 years, 2 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.

    🙁

    dragonsjaw

    (@dragonsjaw)

    12 years, 2 months ago

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

    Thread Starter Jaja..

    (@jaja-1)

    12 years, 2 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

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Twenty Ten – Gallery-thumb margin bottom problem?’ is closed to new replies.