GithubHelp home page GithubHelp logo

Layout design messed up. about slicomments HOT 9 CLOSED

qEssence avatar qEssence commented on July 21, 2024
Layout design messed up.

from slicomments.

Comments (9)

qEssence avatar qEssence commented on July 21, 2024

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.

from slicomments.

jacquesvg avatar jacquesvg commented on July 21, 2024

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!

from slicomments.

qEssence avatar qEssence commented on July 21, 2024

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.

from slicomments.

jacquesvg avatar jacquesvg commented on July 21, 2024

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?

from slicomments.

qEssence avatar qEssence commented on July 21, 2024

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.

from slicomments.

jonnsl avatar jonnsl commented on July 21, 2024

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.

from slicomments.

jacquesvg avatar jacquesvg commented on July 21, 2024

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

from slicomments.

jonnsl avatar jonnsl commented on July 21, 2024

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.

from slicomments.

jacquesvg avatar jacquesvg commented on July 21, 2024

Thank you

from slicomments.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.