Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts

    Problems With CSS Validation

    I use the IE hack '/' before an element that needs to be read by IE only. The only problem with this is it creates a parse error when I try to validate the CSS. Are there any quirks or hacks, or ways around this to make my stylesheet valid like the HTML in the rest of the page?

    I've thought about creating two stylesheets, one for each, but don't know how to do the @import thingy and, because the stylesheets are quite large, believe this to be a hell of a ball-ache! Anyone have any ideas how this could be done more easily??
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Ie-only

    Microsoft themselves recommend using conditional comments over CSS hacks to feed IE-specific styles to the desired versions of IE; these are placed in the HTML document so using different style sheets is recommended. Remember that you only need to override those styles in the general style sheet that are specific for IE; this usually means that the IE-specific style sheet only contains a subset of the general styles.

    Here's more about the @import "thingy"; although it can be used to hide certain advanced styles from ancient browsers that don't understand the @import rule, it won't help much in feeding IE specific styles.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    So you're saying that all that needs to be in the IE stylesheet are the elements that I used to hack to make them look right in IE? Everything else will be read from the normal stylesheet I use?

    I'm a bit confused now. I put this conditional statement in the <head>, right? And do I put it before or after the normal stylesheet I use?

    I have this so far:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>The Plant Hire Register - planthiresolutions.com</title>
    <link href="/resources/style.css" rel="stylesheet" type="text/css" media="screen">
    <!--[if IE]>
    	<style type="text/css">
      		@import url(/resources/ie-style.css);
    	</style>
    <![endif]-->
    <script type="text/javascript" src="/resources/script.js"></script>
    </head>
    yet it doesn't seem to be reading from that IE stylesheet??
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Okay. I've sorted that out now... but what the heck does this mean:

    "To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML."

    My HTML is valid, but does this mean I should indent everything and write it all out correctly?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Other way around

    I guess you found it out, but since the "conditional" stylesheet is only visibile to--the selected versions of--IE, it should be last; everyone gets the first, general one, IE only gets the overrides following it.

    Where did you get the remark about the document parse tree? I can only imagine that this refers to the proper nesting order of elements and such, which not all HTML versions demand to be valid (but which is good practice in any case).
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    When attempting to validate my CSS, I get a load of warnings about not supplying a background-color with my color. But for text objects that are placed on gradiented backgrounds and such, if I supply a background-color it would stand out over the background?? Is there some way of putting a background color in that would not show up? I tried background-color: transparent; but that is not recognised.

    Also, that parse tree thingy comes up when I validate my CSS, but because I have a strict doctype, would that mean it's validating the CSS strict too?

    I thought you could pass validation with some warning allowed?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The background image will supercede the background color. They are warnings NOT errors. It says you need to have a valid parse tree meaning your html that uses the CSS needs to be valid as well. You can live with the warnings if you like or just add what it says you should have. Its for accessibility reasons. Disable images and background images and see if text is still legible. Don't assume default background color is white and default text color is black. Its not.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    I never mentioned anything about Errors?? I know they are all warnings, but for some reason this site does not give me the option of displaying a passed validation image even tho technically it has passed but with a few warnings?

    I know the default background color is actually transparent, I did do a bit of homework on this before asking you guys. I do have a valid parse tree, plus my friend has a site that has warnings and that line about the parse tree, yet he has got the validation image to go with, which is another thing that's confusing me. I have correctly used the IE conditional statement and created a separate stylesheet for IE... could someone tell me exactly how to draw in a stylesheet from another file?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #9
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Okay nevermind guys. Thanks for your help. The reason it wouldn't tell me it was validated is because I was uploading a local file and until I made it live for some reason it wouldn't allow it as valid CSS??

    Oh well, sorted now. Thanks again
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well the image links to an online site. Keyword: online. When you uploaded the local file they didn't give you the image because it was a file that was online.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    The reason it wouldn't tell me it was validated is because I was uploading a local file and until I made it live for some reason it wouldn't allow it as valid CSS??
    I get that warning all the time when I use the Web Developer plugin on FF to validate my local code. It'll validate the CSS for me but will always tell me my HTML needs to be validated. I just don't worry about it until I post it online.

  • #12
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Okay, an update in case people don't know.

    When validating CSS I've been getting loads of errors saying that 'You have no background-color with your color'. To sort this using a transparent background didn't work, but if you put background-color: inherit;, or color: inherit; where you need a colour to get rid of the warnings it will validate and won't mess up your site.

    The whole point of needing to give a background colour with a color on a page is because some users have their own styles and colour that they use to display a web page, which means, if you haven't set one it will use theirs, which can make the page look wrong.

    Setting it as inherit means it will take whatever their default is for that particular element of the page, or if they don't have one, which is in most cases, it won't display one at all. Sorted!
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •