Layout design messed up.

[qEssence]

Im having several issues with the layout of comments, it seems like the DIVS are inheriting the CSS style from the Joomla template. I cannot be sure, because i havent seen any live website using sliComments, bout im pretty sure this is not the "normal" appearance of comments: http://img24.imageshack.us/img24/9403/screenshotcomments.jpg

Take in consideration the "points" inside the " like-dislike-etc" Upside avatar, and such, also, the position the author, comments.. well, almost everything.

Any advice on this?

[qEssence]

Just thinking out loud, maybe the CSS style needs a complete Style reset entry so slicomments can be separately styled from template?

Cant do it by myself, maybe i cannot find the exact div.

[jacquesvg]

I'm also experiencing some layout issues with IE, compatibility ON or OFF gives different layout issues Please see: http://img513.imageshack.us/img513/1575/slicomments.png Chrome seems to work perfectly!

Any advice will be great, thank you!

[qEssence]

Im pretty sure this is "caused" by the default style of the template we are using. I use commas cause i believe that in fact, its not the template's blame, The problem is, as far i can discover by myself, that slicomments needs to override some CSS styles for its UL/LI elements, and, somehow instead of this, is inhieriting the "default" style from the joomla template. So, the problem will vary depending on each user template.

I think the solution is to set a specific "Reset CSS" rule on top of slicomments' stylesheet, but unfortunately, i cant do it by my self.

[jacquesvg]

I'm not so clued up with css, but I read up on "Reset CSS" and your finding makes sense 100%. So how do we fix it without messing up the template?

I played around with this reset code I found: http://yui.yahooapis.com/2.9.0/build/reset-fonts-grids/reset-fonts-grids.css This fixes my problem in IE but messes up my template design, so how do I get the best of both worlds?

[qEssence]

Well, take in mind im not any kind of CSS-Guru, so, every single answer i give could be irremediably wrong.

the code that you have found, takes all the commonly used classes and resets them back to "normal" states, in other words, it completly disables the template styling.

What i meant to say with "Style Reset" is that i thought that @jonnsl would need to introduce some UL LI Style resets in order to disable the template ones, so the component will work as expected, but i was wrong on this, because this means that some parts of the template would need to be disabled and overwritten, not good at all if you uses UL / LI marks on your site.

In short, i do think that the only good solution is to re-write the template.php files, and use DIV and SPAN marks instead of UL/LI, DIV and SPAM are more flexible and invisible, and the Templates does not commonly use them as "global" styles. This will make the component 100% compatible with the 99% of the webtemplates, and will make it cross-browser.

Other option could be to introduce some UL/LI Classes and mark them as !Important, but this will cause the problem described before, the template marks will be overwritten.

This was for my problem, i think i'll need to completly rewrite the sli template files in order to get this to work with span and div, maybe @jonnsl will take mercy for my soul .

Since you use a different webtemplate, you have different problems, i think you will need to choose between the same two options, to overwrite the template default styles, or, re-write the sli template files, for the first option, i recommend Firebug, because you will need to manually find the conflictive CSS classes on your website template, add them in the sli style.css and give them "none" valors, but as i said, this will disable some features of your template.

I know, i know, my english is awful.

[jonnsl]

I can't ensure that the default style looks nice in every template (unless I use an IFrame, but i wont do this). You should include in your template a css file to resolve the conflicts. If you give me a link to a live site with the "problem", maybe I could help you.

[jacquesvg]

Yes please do. Have a look at this link: http://christelphotography.co.za/index.php/blog/12-couple/4-rainier-minette Use IE and you will see that compatibility ON or OFF gives different layout issues. Thank you

[jonnsl]

Fixed: Firefox - Font in the textarea is too big Internet Explorer 9 - A margin is being applied to a absolute positioned element

#comments_form_textarea {
    font-size: 13.33px
}
.comments_form .overTxtLabel {
    margin: 0
}

IE 8 and 7 seems to be having a problem generating the placeholder polyfill, maybe this is a @mootools problem, I will try to create a reduced test case and report this bug.

[jacquesvg]

Thank you