Hi, i tried to vertically center some text in a button, and i had success with a method that works in all browsers but in IE6. I don't really care about IE6, but my client wants it working. You can see the fault in the buttons to the right: http://5com.ro/65-accesorii-pentru-mese The guy who wrote the method said it works in IE6, but either i did something wrong or he was mistaken. The method is: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html Any idea is appreciated.
Lol, yeah I know the feeling, screw IE6 I say, it isn't worth it at all, but you gotta keep the customers happy, right? Couldn't you just style a button input, which centres the text automatically?
dude no offense but that is a LOT of useless bloated code in that fix. Are you just trying to vertically align the text in the cell or the button? Any reason you are using tables? Outdated method and better served with CSS and divs. You could try setting a line-height on the button text.
Even using divs, you still have to vertically and horizontally align the text inside it. I only used that method because i couldn't find any other. Thanks for the critics, but i don't see you providing a better solution. What does line-height has to do with vertical centering?
to vertically align text use vetical-align: middle or try setting the line-height. I'm not going to give you the code if that's what you're asking. You don't learn that way. And if you don't know about line-height perhaps you should read up on what it does and how to use it by searching google. For horizontal centering use margin: 0 auto. Anyway this should point you in the right direction http://www.student.oulu.fi/~laurirai/www/css/middle/
The height of the text box is variable, it needs to stay center regardless of how many words wrap inside it. Thanks for he link, there seems to be a lot of good info in there, i'll try some of those methods and see how it goes.
I'm not sure if you can add a variable or not but you may try putting it in the line-height: style. Worth a try line-height: <? blah ?> Code (markup): Centering horizontally is always the same. No need for variable. It will always be margin: 0 auto or just try text-align: center around your text (example below but remove the inline style and place it in a class in your style sheet.) <p style="text-align: center">asdfasdf</p> Code (markup): It seems your containers with the orange border are too large in both FF and IE6. I'm not seeing the right side of the box on either browser.
The containers are ok, they just don't have a border on the right side. That was the desired effect. I tried the input button technique and it looks fine except i can't manage to break the text in ie6. I used white-space:normal; for other browsers, but in IE6 the text just disappears when it reaches the right border.