Gantry and HTML tables/font sizes issues
-
-
- Juan Luis García
- Jr. Rocketeer
- Posts: 46
- Thanks: 0
-
First of all I would apologize if this is not the correct subforum to post this, but I tried before at the Syndicate Joomla Template Subforum and I haven't recieved any answer.
I have a joomla bridge component that integrates natively in Joomla (1.5) an standalone php script that I have been using for ages in order to control the stats of my favourite soccer team.
This bridge has been working fine without any problem in either Joomla 1.0.x and Joomla 1.5.x with a lot of different templates either free and commercial.
Now I want to make use of the Syndicate template (also in Joomla 1.5.x) but I'm suffering a lot of cosmetic visualization problems cause Syndicate overrides the CSS style used by my component and script.
Just a few examples:
This is how the main page of the component should looks on a template not having the issue:
www.quesomecanico.com/web/estadisticas-p...la-albacete-balompie
This is the link of how it looks using syndicate or any other template using Gantry
www.albazete.com/web/index.php?option=co...ccerstats&task=index
(Please note the changes on each row height)
This image is hidden for guests.
Please log in or register to see it.
(Click to enlarge the image)
Another sample:
www.quesomecanico.com/web/estadisticas-p...-balompie/player/495
Now in Syndicate:
www.albazete.com/web/index.php?option=co...s&task=player&id=495
(Note the size of the "6", the font-size used, the rows height, and also the image border not apperaring)
The "bridged script" running out of joomla is at these links:
www.quesomecanico.com/tpl (for production site)
www.albazete.com/tpl (for testing-syndicate site)
My component load this script and parse them just to convert specific links of the script onto joomla scripts allowing the complete integration of the script with Joomla
How can I solve the issue of the CSS of my component being override by Syndicate?, is there anyway of avoiding this?
Thanks in advance
Juan Luis García
P.S.: I have checked that also other Joomla compoments/modules making use of HTML tables for its data shown have the same problem with row height.
P.S. 2: It is curious how the page source rendered by Joomla using gantry templates include the original HTML code even the one not using CSS style but the result obtained is not the expected.
For instance try the following HTML code inside of a regular Joomla article (using a gantry template):
<p align="left"> <font face="Base 02" size="14" color="#C0C0C0"><span style="letter-spacing: 2pt"> 11 <br> </span> </font> </p> <p style="margin-top: -25" align="left"> <font face="Base 02" size="6" color="#000000"><span style="letter-spacing: 1pt"> ADRIÁ Granell Artal </span> </font> </p>
you will see the correct behaviour, something like this:
This image is hidden for guests.
Please log in or register to see it.
However if you try this code inside of a module/component running on a template using Gantry this is the result you will obtain:
This image is hidden for guests.
Please log in or register to see it.
-
-
-
- zeebeest
- Jr. Rocketeer
- Posts: 20
- Thanks: 0
-
Try adding the following at the end of template.css to change the line height of the rows:
body.font-size-is-default td {
line-height: 1.9em;
}
or add the line-height element to your other style sheet.
1.9em is just an example: you can use any other em value you think is best.
You might want to change this as well for the non default font-sizes (just in case someone selects a different fontsize in the backend settings of the template).
-
-
-
- Juan Luis García
- Jr. Rocketeer
- Posts: 46
- Thanks: 0
-
Hi zeebeest,
Thanks for your answer. Unfortunately adding this style to either the template.css or to my own script style sheet doesn't solve the issue. It has no visible effects
I'm a little bit frustrated, I wanted to have my new wesite ready for this weekend and I'm stuck with this since a lot of weeks and nobody apart from you (thanks a lot) have even tried to help me.
I know that the usage of html tables is a bad practice, but at least some words from somebody telling me: "this is not possible" or something like this, would have reassure me.
But nothing, I'm feeling alone after renewing my RocketTheme subscription for second time.
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi there,
Because you have so many nested tables and none of them have any individual classes added it makes it near impossible to set the stying the way you want.
You could add the following code to the bottom of template.css....This will affect all line-heights in the table cells in the soccerstats div.#soccerstats td { line-height:1em; }
The headers will have the same problem as they will be incorrect due to the change above.
Unless the tables have some sort of class to allow individual styling then you will continue to have problems setting up css code to match your needs.
Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
-
-
-
- Juan Luis García
- Jr. Rocketeer
- Posts: 46
- Thanks: 0
-
Hi David,
Thanks for your help and support on this. The workaround for the row height works fine, I will use it till I will complete the migration of all my tables to DIV's.
On the other hand, what about the issue with the size of the "number 6" and the font I posted at the end of my first message? do you have an idea on how to solve this?
Again many thanks for your support.
Juan Luis
-
Time to create page: 0.099 seconds