[SOLVED] Cannot change table in widget generated by Javascript
I created a widget area(#text-23 .textwidget) and placed it on a page. I added a text wigdet to the text widget area, and placed some code in it from a third party vendor. It uses Javascript to display up to the minute gas prices. My problem is that the cells of the table that is generated are all on top of one another, making it impossible to read. I used firefox to look at the generated code, and the table layout parameters show cellspacing and padding to be 0, but since it is generated within the Javascript, I am not able to change them.
I've tried CSS inserts to affect the #text-23 .textwidget selector, but to no avail. Can this be done? I am using Atahualpa 3.6.4. and the site url is ezw123.com/cheap-gas. Thanks for any help you can give me. |
ezw123.com/cheap-gas gets a 'Not Found'
|
I apologize - wrong site... it's greenvilleconcerts.com/cheap-gas :o
|
Have you looked at the table using FireBug?
specifically at the table cell? If so, did you look at ALL the CSS being applied? |
Yes. In the html snippet that I downloaded from a gas pricing site,
HTML Code:
<table width="100%"> |
1 Attachment(s)
FireBug has this nifty feature, the 'inspector'
Attachment 1810 You can point at an element and see the CSS in the right hand column. Take a look at the <TD> for the first address then look at ALL the CSS that applies to it. oh yeah, you can click on the css and change the value part of a rule. So...now that you have inspected the CSS have you figured it out? (The answer is worth 80% of your final grade, the other 20% will be determined by your 'buttering up' the teacher :p) (You can also add new CSS by tab past the last CSS rule - but you don't need to do this to discover what is happening in this case) |
Quote:
HTML Code:
<td align="center" style="font-family: Arial; font-weight: bold; font-size: 16px;"> HTML Code:
<table id="prices" cellspacing="0" width="413" style="border: 1px dotted rgb(172, 172, 172);"> I guess I am failing this course...:( I seem to be overlooking the code that needs to be changed to affect cell size. Is it cellpadding? Also, I'm using Firefox 3.6.2.7 - and I always use the "inspect code tool", but the CSS on the right - should it be STYLE, COMPUTED, or DOM when working with CSS? Thanks for your tireless patience and esteemed knowledge. (REAL butter, not an imitation) :o |
Well, I might have it. I changed the line height from .5 to 1.5, and the text seems to fit nicely. Last question - for now ;) .....
How can I change the line height in code that I cannot see? Since the javascript is generating the code, would I be able to make the change in CSS Inserts? I've worked with that before, but usually run into problems with knowing how deep I have to make the CSS path. Would starting the page div and working down to the table "Prices" be sufficient? I am going to give that a try now. Thank you for the fishing lesson..... ;) |
I changed the line height in ATA options/body, text, links/ to 1.5 and that did the trick. But when i added this code to CSS inserts, it changed nothing..
Code:
div#text-23 .textwidget, table#prices { http://greenvilleconcerts.com/cheap-gas |
If you go back and look, you will see that the 'line-height' is being set as part of the CSS for 'class' of 'body'. That class is associated with the HTM:L element '<body> and since there is no other 'line-height' rule, it cascades (the first 'c' in 'css) to all it's children (of which the <td> are) on the page
So you have several options, you can set a line hight for all TD's HTML Code:
td {line-height: 1.5em;} (I'm giving you an A- - you found what was causing it, just not where ;)) |
Quote:
Thank you for helping me solve this. I don't know why I set the line height to .5 in ATA options/Body/Text/Links, but at least now I realize that code in that section affects everything on the pages, and posts - including tables. |
All times are GMT -6. The time now is 08:08 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.