tables, centering in IE6

Discussion in 'CSS' started by Abh, Feb 22, 2011.

  1. #1
    Abh, Feb 22, 2011 IP
  2. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #2
    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?
     
    jeremyhowell, Feb 23, 2011 IP
  3. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #3
    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.
     
    AtSeaDesign, Feb 23, 2011 IP
  4. Abh

    Abh Active Member

    Messages:
    162
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    60
    #4
    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?
     
    Abh, Feb 24, 2011 IP
  5. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #5
    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/
     
    AtSeaDesign, Feb 24, 2011 IP
  6. Abh

    Abh Active Member

    Messages:
    162
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    60
    #6
    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.
     
    Abh, Feb 24, 2011 IP
  7. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #7
    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.
     
    AtSeaDesign, Feb 24, 2011 IP
  8. Abh

    Abh Active Member

    Messages:
    162
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    60
    #8
    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.
     
    Abh, Feb 24, 2011 IP