fixed width of table ignored

Please register or log in to post to the forums
3 replies [Last post]
March 17, 2012 - 9:34am
Bert
Bert's picture
Offline
Joined: 2012-02-01
Posts: 13
fixed width of table ignored

i'm trying to create a newsletter for a website I'm working on. This means working with tables. As mentioned in several articles, I gave the table a width of 600 pixels (in both table and td tag). But on my webpage the table is stretched to the full width of the content-section of my fusion sub-theme (780px). It seems that for some reason, the width of table is being ignored.

Using firebug I discovered tables get a width of 100% in style.css in fusion-core. The css in the newsletter-page is all inline since it has to be mailed. Does the css file override any inline css? And if so, is there a way I can override this? Or should I create a seperate template file for the online version of the newsletter and use divs to get the desired layout?

Top
Tags:
March 17, 2012 - 2:33pm
#1
sheena
TopNotchThemer
sheena's picture
Offline
Joined: 2010-02-09
Posts: 1600

Inline CSS (applied directly to the HTML element) always overrides any CSS applied to that element from external CSS files. There is no way for Fusion core's CSS files to override inline styles.

If you are using an internal stylesheet (CSS included in the HTML document but not applied directly to individual HTML elements) then the styles from Fusion core could override your CSS if your CSS selectors are not sufficiently specific. You can learn more about CSS specificity here: http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheri...

It is possible that there is some invalid code on your page that is causing the styling to not take effect as you expect. Also, it is possible that the table's content is forcing the table to expand wider than the CSS specifies. You might try adding table-layout:fixed; to the CSS on your <table> tag.

Top
March 18, 2012 - 5:27am
#2
Bert
Bert's picture
Offline
Joined: 2012-02-01
Posts: 13

I found another solution this morning. I used the id tag on the tables and used that tag in my stylesheet to define the width of the tables. This works fine.

I thought that inline CSS would always override external CSS. But for some reason the tables got stuck with a 100% width from Fusion core CSS. My first thought was indeed invallid code, but then I used the code of a e-mail template of mailchimp, and that had the same result: The tables were streched to the full width of the page. And when the same code is sent as an e-mail, the tables have the right width. So that's still a bit strange to me.

I think I have been staring so long at this problem yesterday that I couldn't see the solution of using the id tag anymore. But thanks again for your reply. And the link is also very usefull.

Top
March 20, 2012 - 8:44am
#3
Bert
Bert's picture
Offline
Joined: 2012-02-01
Posts: 13

I'm still bugged by the fact that the inline CSS doesn't seem to override the external CSS. When I select a table in firebug and look at the css, this is the part used from fusion-core CSS:
table {
border-spacing: 0; style.css?R (regel 69)
width: 100%;
}

I tried using table-layout:fixed as you suggested, but this doesn't make a difference.

Top