Search code examples
htmlcssalignment

Alignment problems in Firefox

I am having an alignment issue in Firefox with my table. In Chrome/IE, it looks correct. Is there something wrong or do I need to add in an "FF Fix?"

It looks like the little dot in the bottom right corner of each cell (in chrome/ie) is in the bottom right corner of the page in FF. On the live page, however, it's in the top right of the screen somewhere.

http://jsfiddle.net/P3JnP/5/

NOTE - seems to not work in Safari, either.

Solution

  • Here is the idea I have. Put a div inside your each TD and make it relative. Wrap that div around both your number and dot and make it full height and width of the cell. Something like this:

    <td class="td_time">
   <div class="time-wrapper"><div class="time"></div><span class="time_note"></span>     
   </div>
</td>

CSS:
.time-wrapper
{
width:100%;
height:100%;
position:relative
}

    This should fix it. Also you should be able to take out "relative" position from td_time class.