SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: @import method

  1. #1
    SitePoint Enthusiast sumeshbabu's Avatar
    Join Date
    Nov 2007
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question @import method

    Code:
    @charset "utf-8";
    @import "master.css";
    /* CSS Document */
    
    html, body {
    	height: 100%;
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    
    body {
    	text-align: center;
    	min-width: 799px;
    	background: #fecf37;
    }
    I am importing one style sheet into another like above. The sites working fine, but in CSS Validation of that particular css file showing the error "File not foundimport file://localhost/master.css: Operation not permitted"


    But as a whole XHTML validation, its working fine. Is this a correct method?
    or need to attach both in the html file like :?

    Code:
    <style type="text/css" media="all">@import "css/master.css";</style>
    <style type="text/css" media="all">@import "css/home.css";</style>

    Regards,
    Sumesh

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't use the online W3C CSS validator to validate a style sheet on your local hard drive, if it contains an @import directive with a relative path. The W3C validator cannot access your local filesystem!

    If you upload your style sheets to a web server and validate from there, it will probably work better.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast sumeshbabu's Avatar
    Join Date
    Nov 2007
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    When I validate online, I am getting some warning:

    79 Same colors for color and background-color in two contexts body and #navigation li a
    79 Same colors for color and background-color in two contexts body and #navigation li a
    91 Same colors for color and background-color in two contexts body and #navigation li#contact
    91 Same colors for color and background-color in two contexts body and #navigation li#contact
    91 Same colors for color and background-color in two contexts body and #navigation li#contac


    Is this an issue?

    For more, please have a look at: http://www.hbwebdesigning.com/sumesh/dewaag/index.html

    Is this web page has any layout issue? In Safari for Windows 3, there is some problem in navigation menu. The font-size is little bigger in Safari, so that navigation is collapsed. I don't have Mac PC to check with Mac OS.

    Can you help me in this regards?

    Regards,
    Sumesh

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sumeshbabu View Post
    When I validate online, I am getting some warning:

    Is this an issue?
    Not in this case. It's just saying that the text colour of your navigation links is the same as the page background colour. Since you don't place the navigation links directly on the page background, it's not an issue.

    Quote Originally Posted by sumeshbabu View Post
    Is this web page has any layout issue? In Safari for Windows 3, there is some problem in navigation menu. The font-size is little bigger in Safari, so that navigation is collapsed.
    That's what happens when you specify the width in pixels for something that contains text. The layout will break for anyone who uses a different font size than you do.

    It doesn't happen in IE, since you have specified the text size in a way that prevents users who need it from enlarging the text. But try increasing the font size in Firefox and you'll see what happens.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Enthusiast sumeshbabu's Avatar
    Join Date
    Nov 2007
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Yes, Firefox also its happens. For Safari, I have a Hack also.
    Code:
    /* Hack for Safari and IE6 */
    /*\*/
    html*#navigation {
    	font-size: 10px;
    	font-weight: bold;
    	_font-size: 11px;
    }/**/
    /* End Hack */
    When I use this, CSS validation goes wrong. and get error:
    Parse Error - html*#navigation { font-size: 10px; font-weight: bold; _font-size: 11px; }

    Red tags are invalid. So I am not using this hack. How to rectify this issue?

    Regards,
    Sumesh

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's not a fix. That's a Band-Aid on a severed artery.
    If the user enlarges the text size (e.g., using Ctrl+scroll wheel), it will still break the layout. The reason is that you have specified the page width in pixels.

    Making the text smaller may prevent the layout from breaking initially, but will also make it more likely that the user bumps up the text size – thus breaking your layout anyway. The only way to avoid this is to rectify the fundamental problem, which is that you are setting the width in pixels for something that can vary in size.

    Invalid CSS will cause validation errors. There's no way around that. For IE, you can relegate the hacks to a separate style sheet served via conditional comments, to keep the main style sheet clean.
    Code HTML4Strict:
    <!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="/css/ie.css" media="screen"><![endif]-->
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Enthusiast sumeshbabu's Avatar
    Join Date
    Nov 2007
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually IE6 is ok with this design, I hv checked, but I stucked up with Safari. It seems pixel width is ok with this design, percentage is very difficult. Can you suggest me some other method?

    Regards,
    Sumesh

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sumeshbabu View Post
    It seems pixel width is ok with this design
    Well, if you think it's okay that the menu wraps for people who need to increase the font size, then I guess it's okay. I assume that restaurant doesn't want any guests that don't have 20/20 vision.

    Quote Originally Posted by sumeshbabu View Post
    percentage is very difficult.
    Everything is difficult until you learn. A fixed pixel width may be easier for you, but it will be more difficult for some of the site's visitors. I would say it's more important for the site to be friendly to its visitors than to make life easy for its designer.

    Quote Originally Posted by sumeshbabu View Post
    Can you suggest me some other method?
    In this case – as for most sites – a constrained fluid layout seems to be the best choice. That means a layout where you don't specify any width at all, but set a min-width (probably in em in this case, to accommodate the horizontal menu) and a max-width (in em to prevent ovely long lines of text).

    IE6 and older are a problem, of course, since they don't support min-width or max-width. You can give them an elastic layout (width set in em) and impose the constraints through Microsoft's proprietary expression() value.
    Birnam wood is come to Dunsinane

  9. #9
    SitePoint Enthusiast sumeshbabu's Avatar
    Join Date
    Nov 2007
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, actually I am on the way of CSS Layouts. If you can give me some tutorial site for constrained fluid layout is highly appreciable.

    Regards,
    Sumesh

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sumesh, as Paul and I said in the other thread, the "fix" you used is anything but. I've got a dentist's appointment in a couple of hours (have to walk there), and from there I'll be gone until either Sunday or Monday (depending on where I go once I get back into town), but when I return, I'll be more than happy to rewrite your page for you if you like so the problems go away completely regardless of what modern desktop/notebook UA the visitor is using (and that includes their text size preference).

  11. #11
    SitePoint Enthusiast sumeshbabu's Avatar
    Join Date
    Nov 2007
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK Dan......


Bookmarks

Posting Permissions

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