Sliding Doors: Flexible Buttons Not Working

HTML & CSS
1

I have read this article on Smashing Magazine regarding Sliding Doors: Flexible Buttons and I have developed a test page linked here for your review.

LINK-
http://www.securehostserver.info/prime/

I am needing help with the “Learn More” button in the center column underneath the slideshow and directly beneath the heading “Add Value To Your Home”. The buttons left image appears correctly but the right side of the button (gfx_btn_right.png) is not appearing at all. Can someone take a look and propose a solution to fix the problem?

Thank you in advance!

Todd

2

The problem is that you’ve got your big and small images the wrong way round. The narrow image needs to be applied to the inner element (the span) because that’s on the top of the stack, and the extra-wide image needs to be on the parent element (the anchor) because that gets hidden behind the narrow image on the span.

3

I switched the left and right images and now it appears out of order. What to do now?

4

You have the background position around the wrong way and the pdding.


#main a.t2 span {
  background: url("http://www.securehostserver.info/prime/i/gfx_btn_right.png") no-repeat [B]100% 0[/B];
  display: block;
  float: left;
  font-weight: bold;
  height: 24px;
  margin: 0;
[B]  padding: 8px 28px 0 6px;[/B]
  text-decoration: none;
}

#main a.t2 {
  background: url("http://www.securehostserver.info/prime/i/gfx_btn_left.png") no-repeat  [B]left top[/B];
  color: #FFFFFF;
  display: block;
  float: left;
  font-weight: bold;
  height: 32px;
  margin: 0;
[B]  padding-left: 36px;[/B]
  text-decoration: none;
}
5

Thanks a million Paul. You are the best!

I have corrected the code, and as always, it raises a new issue. When I add another ahref with that class over in the third column it works well but it allows the H3 tag to wrap up onto the same line as the button. I tried to clear the float… nothing doing. I tried adding width: 100% which works but it also extends the blue button background image past the point where I want it to stop. I tried overflow: auto and overflow: hidden but still nothing acceptable.

I am simply wanting any ahref that has the class of “button” to be the only element on that line. What bit of CSS could I add to the “button” so that the H3 heading returns to its own line below?

6

You just need to add clear:both to the h3 concerned.


h3 {
  clear: both;
}

You can give it a class if you don’t want others affected.

To move the h3 downwards you would need to add a bottom margin to the button instead as non floated contents margins slide under floats

7

Thanks again Paul! Perfect fixes every time.