I have a table currently containing the main layout of my website found on (http://www.enl-esports.com ).
The table column with id “menu” has a specified width of 150px, yet it randomly decides to become 160px in safari. I have no padding, nor a margin and the problem still occurs when I remove its inner HTML (which might be forcing it to become bigger..). It works fine in Chrome.
I have tried using a fixed table-layout (as found here: http://www.w3.org/TR/REC-CSS2/tables.html#width-layout) which did not fix the problem.
The page you can mostly see this is found here: http://www.enl-esports.com/seasons/
I was thinking this might have something to do with the lists bug in safari where margins/paddings which weren’t set to 0 can indent the items but it wasn’t that.
What I did discorev is that your html is grossly invalid. For instance the only elements allowed as children in an unordered list are list items (
li) but in that menu you have an anchor as a direct child of the unordered list.Non-valid html can always result in funky behaviour across different platforms/browsers, I suspect this is one of them.
Then theres the problem of using a table layout which are so last century you should probably be ashamed of it (there is no good reason you should be using one in this layout regardless).
Anyway, to start fixing your problems take a look here and go down the list resolving them:
http://validator.w3.org/check?uri=www.enl-esports.com