Joomla 2.5 table isn't straight in Firefox (line is broken sort of)

HTML & CSS
1

Hello!

I have this small problem in Mozilla FF. When I open the article in FF (I usually use this program), the table line isn’t straight.
I should probably add that after re-loading the page, this issue corrects itself somehow.
Strangely enough, some ppl say they can’t see my problem in their own Mozilla browsers.

Thanks!
2

I’m using Firefox 29 on Ubuntu Gnome, and I can’t reproduce your problem.

3

It looks ok on my Firefox (29.0.1) also. What version are you using?

Older Firefox used to have trouble with table-borders but the newer versions seem more stable.

Remove the border=“2” and align=“left” from the table tag as they are deprecated elements anyway.

Don’t use keywords for borders as “thin” can mean either 1px or 2px (or anything else) depending on browser. Just use the exact px you want.

Try adding:


.art-article table{table-layout-fixed}
.art-article table td:first-child{border-left:none}
.art-article table td:last-child{border-right:none}

I don’t think any of those will make any difference though and wonder if you have an old Firefox version running.

4

Thanks for your replies! I have ver. 28 of FF. I don’t like the newest one. I don’t know how to remove table tags. That CSS code below hasn’t change a thing as you wrote.

5

As an experiment, comment out {border-collapse:collapse} (template.css, line 1469). Doing this will cause default borders to appear within the table, but the purpose of the test is to see if the border-collapse property is involved in the display jog.

6

Even the newest Firefox has a 1px jog on the table and if you open or close the browser one pixel at a time the td borders do not meet the table borders so I guess other versions of Firefox may have a similar problem or indeed overlap the borders. That’s one of the reasons that I avoid putting borders on the table element itself but use a wrapper div instead.

Are you able to change the html?

If so then I suggest that you remove the 2px border from the table itself and then wrap a div around the table and apply the border, margins and other styles to that div instead.

If you can confirm that you are able to do that then I will supply the required css.

Also run a test on what Ron suggests above so we can look at other possibilities.

7

Hi, abrodski.

I rewrote the table code on the home page and added some CSS in the <head> section to remove the inline styles from the HTML table. The CSS that I wrote is “longhand”, no shortcuts, so hopefully it will be understandable.

Copy this code to a new HTML file and open it in your browser. See that the appearance of the table is very similar to your original.

The CSS still uses {border-collapse:collapse}. I do not believe it is causing the problem, but I cannot tell because I do not see the pixel jog.

I hope you have access to the HTML :slight_smile:

8

Hello everyone here!
Thanks for your help!
Well…The problem is solved now! Even updating Firefox to its last ver. didn’t do the trick. I re-built half of the table, played a little with Joomla’s table settings, applied CSS overrides here and there. Now it’s fine. I went back to ver. 28 and it’s okay there as well.
I’m starting to think that it would’ve taken me less time to become a coder after all this time wasted trying to fix small Joomla’s bugs.

9

Glad you managed to fix it :slight_smile:

10