0

I have a table for links and when I hover on them, they are supposed to get bold. It is working properly, but it pushes the elements on the right. How can I fix it?

PS: I think my CSS is pretty bad. Do you think that I should change it in order to get rid of these problem like these?

              <table class="table" id="right-personal">
                    <tr class="left">
                        <td>
                            <img class="icon" src="img/twitter_alt.png"/>
                            <a href="http://twitter.com/ozmen_burak">twitter.com/ozmen_burak</a>
                        </td>
                        <td>
                            <img class="icon" src="img/facebook.png"/>
                            <a href="http://facebook.com/ozmen.b">facebook.com/ozmen.b</a>
                        </td>
                    </tr>

                    <tr class="right">
                        <td>
                            <img class="icon" src="img/quora.png"/>
                            <a href="http://twitter.com/ozmen_burak">twitter.com/ozmen_burak</a>
                        </td>
                        <td>
                            <img class="icon" src="img/github_alt.png"/>
                            <a href="http://github.com/bozmen">github.com/bozmen</a>
                        </td>
                    </tr>
                </table>

http://jsfiddle.net/XxLeY/

Burak Özmen
  • 865
  • 2
  • 11
  • 28

2 Answers2

1

Try setting a fixed width on the td elements.

iwal
  • 36
  • 2
1

The issue does appear to be with the width of your tds so that when the bold is implemented it increases the size of all your tds. Setting a fixed width should work. Personally though i hate working with tables because of the fact that certain css doesnt always work in them. I would maybe instead of using tables use Divs and the such like. I hope this helped! :D

Andy-Pandy
  • 37
  • 5