Forum Moderators: not2easy

Message Too Old, No Replies

create google chrome only style

         

zozzen

1:42 pm on Sep 19, 2010 (gmt 0)

10+ Year Member



hi,

when creating a style-sheet for IE only, we would start with:
<!--[if IE 5.5000]> <style...> <![endif]-->

but how would i start to create a style for google chrome?

i've searched the documentation. probably due to wrong key words , i can't find any solution.

any advice is appreciated.

Major_Payne

1:07 am on Sep 20, 2010 (gmt 0)



None of these were what you wanted? Google Chrome CSS only [google.com]

caffinated

7:51 pm on Sep 21, 2010 (gmt 0)

10+ Year Member



From experience, I have found this process works:

Ensure your DOCTYPE is correct and included.
Validate your code regularly.
Test in a standards compliant browser like FF or Chrome etc.

If you do that, you'll find that the pages work pretty well in all the standards-compliant browsers. Then you need to create your IE specific CSS sheets. Generally you only need to worry about IE7 and IE6.

Valid code is the key. [validator.w3.org ]

Major_Payne

8:26 pm on Sep 21, 2010 (gmt 0)



Every browser has it's quirks. Keeping them from parsing your pages in Quirks Mode is good, but not always effective. You do need to check what each browser requires in the CSS for doing the same thing as another browser as the CSS properties required are not always the same.

Many times, the differences noted in browsers is because you are NOT specifically telling browsers how to present your page because you left out some CSS properties. This causes browsers to fall back to their internal default parsing as set by the browser developer(s).

zozzen

4:06 am on Sep 26, 2010 (gmt 0)

10+ Year Member



yes, i understand that it's not effective to build a fix for every browser, but there doesn't seem an alternative for me....

my problem with chrome is that it can't display the margin-left value the same as in IE and FF.

margin-left:235px is more or less around 200px in Google and caused a display aligning error...

#column-content {
border-right:1px solid #CCCCCC;
height:100%;
margin-left:235px;
}

Major_Payne

7:19 am on Sep 26, 2010 (gmt 0)



Try adding this to the very TOP of ALL CSS:

* { margin: 0; padding: 0; border: 0; }


This may not solve your problem and you may need to use the standard browser reset CSS file [meyerweb.com] first. Plus, you may have later CSS embedded or inline CSS overriding that seems to affect only Chrome. You do not give any code to work with so we are just guessing here on everything.

I would get it looking good in Firefox first. Then use the conditional statements for IE.