Advanced CSS Help FAST!

  • SharkShark
  • Guru
  • Guru
  • User avatar
  • Posts: 1013
  • Loc: Living In Today

Post 3+ Months Ago

Hey guys,

I have a button in CSS, complete with background image that changes on rollover. I have inside this button, some text. But not just one line of text, it can hold up to 5 lines of text. I need this the text INSIDE the button to always align vertically to the middle, no matter how many lines of text there are. I have placed the button inside a table cell, and it still will not vertically align with the table set to vertical align middle. Does anyone have any ideas how I can do this? Anyone?

My CSS is below.:

Code: [ Select ]
.bigButtons {
    color: #cccccc;
    font-family:Arial, Helvetica, sans-serif;
    vertical-align:middle;

}
.bigButtons a:link{
    display:block;
    width: 260px;
    height:92px;
    background-image:url(blueBG.png);
    color: #FFFFFF;
    font-size:16px;
    padding-top:5px;
    padding-left:12px;
    text-decoration:none;
    font-weight:bold;
    vertical-align:middle;
    line-height:17px;
}

.bigButtons a:visited{
    display:block;
    width: 260px;
    height: 92px;
    background-image:url(blueBG.png);
    color: #FFFFFF;
    font-size:16px;
    padding-top:5px;
    padding-left:12px;
    text-decoration:none;
    font-weight:bold;
    vertical-align:middle;
    line-height:17px;
}
.bigButtons a:hover{
    display:block;
    width: 260px;
    height: 92px;
    background-image:url(orngBG.png);
    color: #336699;
    font-size:16px;
    padding-top:5px;
    padding-left:12px;
    text-decoration:none;
    font-weight:bold;
    vertical-align:middle;
    line-height:17px;
}
.bigButtons a:active{
    display:block;
    width: 260px;
    height: 92px;
    background-image:url(orngBG.png);
    color: #336699;
    font-size:16px;
    padding-top:5px;
    padding-left:12px;
    text-decoration:none;
    font-weight:bold;
    vertical-align:middle;
    line-height:17px;
}
  1. .bigButtons {
  2.     color: #cccccc;
  3.     font-family:Arial, Helvetica, sans-serif;
  4.     vertical-align:middle;
  5. }
  6. .bigButtons a:link{
  7.     display:block;
  8.     width: 260px;
  9.     height:92px;
  10.     background-image:url(blueBG.png);
  11.     color: #FFFFFF;
  12.     font-size:16px;
  13.     padding-top:5px;
  14.     padding-left:12px;
  15.     text-decoration:none;
  16.     font-weight:bold;
  17.     vertical-align:middle;
  18.     line-height:17px;
  19. }
  20. .bigButtons a:visited{
  21.     display:block;
  22.     width: 260px;
  23.     height: 92px;
  24.     background-image:url(blueBG.png);
  25.     color: #FFFFFF;
  26.     font-size:16px;
  27.     padding-top:5px;
  28.     padding-left:12px;
  29.     text-decoration:none;
  30.     font-weight:bold;
  31.     vertical-align:middle;
  32.     line-height:17px;
  33. }
  34. .bigButtons a:hover{
  35.     display:block;
  36.     width: 260px;
  37.     height: 92px;
  38.     background-image:url(orngBG.png);
  39.     color: #336699;
  40.     font-size:16px;
  41.     padding-top:5px;
  42.     padding-left:12px;
  43.     text-decoration:none;
  44.     font-weight:bold;
  45.     vertical-align:middle;
  46.     line-height:17px;
  47. }
  48. .bigButtons a:active{
  49.     display:block;
  50.     width: 260px;
  51.     height: 92px;
  52.     background-image:url(orngBG.png);
  53.     color: #336699;
  54.     font-size:16px;
  55.     padding-top:5px;
  56.     padding-left:12px;
  57.     text-decoration:none;
  58.     font-weight:bold;
  59.     vertical-align:middle;
  60.     line-height:17px;
  61. }
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

I can't see what is wrong, but I've had troubles with that aswell ... see this example from W3C, maybe that'll help ... http://www.w3schools.com/js/tryit.asp?f ... ticalalign
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Could you provide the associated markup? What are the containing objects for the text? LI? P? Is it just in the TD?

At first glance, it seems that you're way over defining these.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

righteous_trespasser wrote:
I can't see what is wrong, but I've had troubles with that aswell ... see this example from W3C, maybe that'll help ... http://www.w3schools.com/js/tryit.asp?f ... ticalalign


I believe this example is written in quirks mode. The browser should default to HTML 4.01 where a TD by default aligns to the middle. In XHTML, the default alignment is top, I think.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Oh yeah, I think you're right ... sorry ... my bad ...
  • SharkShark
  • Guru
  • Guru
  • User avatar
  • Posts: 1013
  • Loc: Living In Today

Post 3+ Months Ago

You can view the whole source code here:

http://www.nuinspiration.com/buttons/buttons.html

The links are just in the TD themselves as link tags. They are not list units or anything like that.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Brother, I spent an hour looking into this. I tried various methods with TABLES and with DIVS as containers. I tried inline and block level schemes. I tried many nasty, fugly workarounds and hacks.

I don't see any clean, clear, reliable solutions here.

Here are some possible solutions, though...

1. Write to a HTML 4.01 DTD using TABLEs.
I don't like this solution as it's not very forward thinking in regards to the way markup seems to be headed.

2. Use one of the very vulgar nested container hacks and try to please all the browsers.
I don't like this solution, either. These hacks are, almost inveriably, cumbersome and antithetical to the spirit of good markup (even when it's so-called standards based). Also, as browsers evolve, they'll tend to break at some point down the road

3. The design solution.
This is the one I would go with. Make it a design consideration by aiming toward a natural render flow which all browsers do well. I actually prefer what you have now(visually). I think it's more clear than having the text centered vertically.

Sorry, man. I hope someone will give you what you want. I can't. :(
  • SharkShark
  • Guru
  • Guru
  • User avatar
  • Posts: 1013
  • Loc: Living In Today

Post 3+ Months Ago

Thanks mate, I appreciate your help. I tried everything you did, and got zip. As long as its NOT inside a link tag, it works, once the link goes on.. forget it.

If anyone else has an idea, that would be great. Thanks for all your help.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

The only luck I've had with vertical centering is by playing with the vertical-align and line-height properties, and it looks like you've already tried that.

If the things digitalMedia tried didn't work, I sure don't know what will.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

padding-top? that might make a difference ... but then you'll have to set each one on its own though ...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

I have no idea if the following will help you. Worth a try I guess...

Code: [ Select ]
margin-top: auto;
margin-bottom: auto;
  1. margin-top: auto;
  2. margin-bottom: auto;


...and if that doesn't work change the "margin" to "padding".

Also, doesn't the following work?

Code: [ Select ]
<td valign="center">
...
</td>
  1. <td valign="center">
  2. ...
  3. </td>

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 33 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.