|
#1
Mar 31, 2012, 01:57 PM
|
|
|
|
59 posts · Nov 2010
WordPress 3.0/Atahualpa 3.4.9/Firefox 3.6.12/XP sp3/
|
|
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.
|
#2
Mar 31, 2012, 03:17 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
ezw123.com/cheap-gas gets a 'Not Found'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#3
Mar 31, 2012, 03:19 PM
|
|
|
|
59 posts · Nov 2010
WordPress 3.0/Atahualpa 3.4.9/Firefox 3.6.12/XP sp3/
|
|
I apologize - wrong site... it's greenvilleconcerts.com/cheap-gas
|
#4
Mar 31, 2012, 04:00 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Have you looked at the table using FireBug?
specifically at the table cell?
If so, did you look at ALL the CSS being applied?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#5
Mar 31, 2012, 04:43 PM
|
|
|
|
59 posts · Nov 2010
WordPress 3.0/Atahualpa 3.4.9/Firefox 3.6.12/XP sp3/
|
|
Yes. In the html snippet that I downloaded from a gas pricing site,
HTML Code:
<table width="100%">
<tr>
<td align="center" style="font-family:Arial; font-weight:bold; font-size:16px;">Lowest Gas Prices in<span id="tenlowest_title"> Greenville</span>
</td>
</tr>
<tr>
<td align="center" id="gasbuddy_22783">
Immediately after the above line, it runs a Javascript script that calls the feed. The feed gets dumped into this tiny little table that looks like its ready to explode. I don't visually see a place to change the attributes for the table element.
|
#6
Mar 31, 2012, 07:27 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
FireBug has this nifty feature, the 'inspector'
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 )
(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)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
Last edited by juggledad; Mar 31, 2012 at 07:45 PM.
|
#7
Apr 1, 2012, 10:30 AM
|
|
|
|
59 posts · Nov 2010
WordPress 3.0/Atahualpa 3.4.9/Firefox 3.6.12/XP sp3/
|
|
Quote:
Take a look at the <TD> for the first address then look at ALL the CSS that applies to it.
|
I was not sure what you meant by "first address" so i looked at first <TD> in the table:
HTML Code:
<td align="center" style="font-family: Arial; font-weight: bold; font-size: 16px;">
That is for header cell, and it fits nicely. If I continue down to next table description,
HTML Code:
<table id="prices" cellspacing="0" width="413" style="border: 1px dotted rgb(172, 172, 172);">
and increase the cellspacing and the width, the text inside the cells is still illegible: it's looks like text that does not have a <br> after each line. Does that mean I need to change the line height?
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)
|
#8
Apr 1, 2012, 10:45 AM
|
|
|
|
59 posts · Nov 2010
WordPress 3.0/Atahualpa 3.4.9/Firefox 3.6.12/XP sp3/
|
|
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.....
|
#9
Apr 1, 2012, 11:12 AM
|
|
|
|
59 posts · Nov 2010
WordPress 3.0/Atahualpa 3.4.9/Firefox 3.6.12/XP sp3/
|
|
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 {
cellspacing: 10px;
width: 600px;
border: 1px dotted rgb(172, 172, 172)
}
Can you give me a hint as to why the CSS is being ignored? Table looks much better though:
http://greenvilleconcerts.com/cheap-gas
Last edited by webgurl; Apr 1, 2012 at 11:15 AM.
Reason: wrong url
|
#10
Apr 1, 2012, 11:17 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
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;}
or you could go into the theme options (ato->Body, Text & Links->Body Style) and ponder on why you added a css rule to set the line height to .05em........
(I'm giving you an A- - you found what was causing it, just not where )
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
Last edited by juggledad; Apr 5, 2012 at 09:28 AM.
|
#11
Apr 5, 2012, 09:17 AM
|
|
|
|
59 posts · Nov 2010
WordPress 3.0/Atahualpa 3.4.9/Firefox 3.6.12/XP sp3/
|
|
Quote:
Originally Posted by juggledad
....or you could go into the theme options (ato->Body, Text & Links->Body Style) and ponder on why you added a css rule to set the line height to .05em........
(I'm giving you an A- - youfound what was causing it, just not where )
|
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.
|
Thread Tools |
Search this Thread |
|
|
Display Modes |
Linear Mode
|
|