SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    960 Grid suffix and prefix property in IE6

    hello

    i am trying to revamp the UI of a web application for a client and i am using to 960 grid to have a rapidly protype something.

    But i have a problem in IE6, the client's default/standard Internet Browser.

    The homepage of the application has a box containing the login form that is centered in the midle of the page.

    I used suffix and preifx of equal value to center that box, i get the desired effect of a grid_4 box centered by prefix_4 and suffix_4. But in IE6 although the box is centered, it looks wider than the desired effect i was looking for.

    I am using the 960 fluid version and my doctype is xml 1.0 strict with no xml declaration in the html tag.

    Thanks in advance for your help
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Is it a nested grid?

    If so you will need the alpha and omega classes added to it if it's a single element.
    Code:
    <div class="grid_4 prefix_4 suffix_4 alpha omega">

  3. #3
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes it is nested grid
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  4. #4
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello here is the entire code

    It wroks perfectly on firefox but on the IE6 if you take time to have a look you will notice that the central box is way too bigger
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Homepage</title>
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/grid.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
    <!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" /><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" /><![endif]-->
    </head>
    <body>

    <!-- main container -->
    <div class="container_12" id="main">

    <!-- header: logos & branding -->
    <div class="grid_12" id="header">
    <img id="header_logo" src="img/header_logo.gif" border="0" alt=""/>
    <img id="header_logo_cee" src="img/cee_header_logo.jpg" border="0" alt=""/>
    </div>
    <div class="clear"></div>

    <!-- main navigation menu -->
    <div class="grid_12" id="navigation">
    <div class="navitem_s">HDC Home Page</div>
    <div class="navitem"><a href="browsing.html">Browsing Area</a></div>
    <div class="navitem"><a href="project.html">Project Area</a></div>

    <!-- <div class="rnavitem"><a href="#">Logout</a></div> -->
    <div class="rnavitem"><a href="#">User Guide</a></div>
    <div style="clear: both;"></div>
    </div>
    <div class="clear"></div>

    <!-- main content -->
    <div class="grid_12" id="main-content">
    <div class="grid_4 prefix_4 suffix_4 alpha omega" id="central-box">
    <h1 id="hdc-title">
    The Hardware Design Checker
    </h1>
    <!-- Image Map representing the CEE Know-How
    <img src="img/HDC_moteur_aminee_344x260.gif" id="know-how-logo"/> -->


    <!-- login, pwd recovery & registration box -->
    <div class="box">
    <h2>
    Identification
    </h2>

    <!-- Login, Registration & Password recovery -->
    <div class="block" id="login-forms">

    <!-- Login -->
    <form action="">
    <fieldset class="login">
    <legend>Login</legend>
    <p class="notice">Login to Access the Project Area</p>
    <p>
    <label>Username: </label>
    <input type="text" name="username" />
    </p>
    <p>
    <label>Password: </label>
    <input type="password" name="password" />
    </p>
    <input class="login button" type="submit" value="Login" />
    </fieldset>
    </form>

    <!-- Registration/Password recovery -->
    <form action="">
    <fieldset>
    <legend>Registration/Password Recovery</legend>
    <p>If you do not already have an account or have lost your password, access the password/account request form!</p>
    <input type="submit" value="Request Pwd/Account" class="button"/>
    </fieldset>
    </form>
    </div>
    </div>

    </div>

    </div>
    <div class="clear"></div>

    <!-- footer: contacts & help -->
    <div class="grid_12" id="footer">
    <ul class="grid_12" id="footer-links">
    <li class="grid_4"><a href="#">Contact</a></li>
    <li class="grid_4"><a href="#">User Guide</a></li>
    <li class="grid_4"><a href="#">HDC Google Site</a></li>
    </ul>
    </div>
    <div class="clear"></div>
    </div>
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  5. #5
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Is it a nested grid?

    If so you will need the alpha and omega classes added to it if it's a single element.
    Code:
    <div class="grid_4 prefix_4 suffix_4 alpha omega">
    Tried this solution and no luck!
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  6. #6
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Is it a nested grid?

    If so you will need the alpha and omega classes added to it if it's a single element.
    Code:
    <div class="grid_4 prefix_4 suffix_4 alpha omega">
    By the way do you happen to know where i can get a good documentation on this framework i really started with it and come to apreciate it, but for an advanced use, a good reference document could be great... the basic tutorial are good but good doc is way better... blueprint has that...
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Have you got it online somewhere ?

    As far as I can tell I'm getting exactly the same results in IE6 and Firefox. Which element exactly do you see bigger? I have overlaid Firefox and IE6 and at the same window widths they appear to be the exact same width. However I only coloured the middle element to check so you may be talking about something else.

    Have you linked to the IE css files correctly?

    The fluid version isn't very good in IE6 anyway because they haven't allowed enough room for the rounding errors and the horizontal scrollbar keeps flicking in and out which can be seen on their own demo page.

  8. #8
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Have you got it online somewhere ?

    As far as I can tell I'm getting exactly the same results in IE6 and Firefox. Which element exactly do you see bigger? I have overlaid Firefox and IE6 and at the same window widths they appear to be the exact same width. However I only coloured the middle element to check so you may be talking about something else.

    Have you linked to the IE css files correctly?

    The fluid version isn't very good in IE6 anyway because they haven't allowed enough room for the rounding errors and the horizontal scrollbar keeps flicking in and out which can be seen on their own demo page.
    No i don't have it online because the application i am workin on will be available only within the company's network...

    But i can put it for comparison with the rendering you 're getting...

    in the Ie6 rendering that i get the box that contain both the title of the application+the login form is bigger than what it looks like in ff...
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  9. #9
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By the way is there a way to imitate margin-auto to center an element in a document with 960grid... do you happen to know where there is a documentation that explains all the functionalities of this framework cause if compare with blueprint, when it comes to documentation 960grid is really poor!
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  10. #10
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what i get is the blue box, the green box and the grey one surronding the form are bigger in IE6 than FF
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  11. #11
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Have you got it online somewhere ?

    As far as I can tell I'm getting exactly the same results in IE6 and Firefox. Which element exactly do you see bigger? I have overlaid Firefox and IE6 and at the same window widths they appear to be the exact same width. However I only coloured the middle element to check so you may be talking about something else.

    Have you linked to the IE css files correctly?

    The fluid version isn't very good in IE6 anyway because they haven't allowed enough room for the rounding errors and the horizontal scrollbar keeps flicking in and out which can be seen on their own demo page.
    Do you know if blueprint has a fluid version that works better in ie6?
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Ok - I looked at the live site Via PM and it seems to be a haslayout issue for others that are watching this thread and not a grid problem as such.

    Code:
    .box,.box h2,h1{zoom:1.0}

  13. #13
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for your help, it is solved!
    On a PHP/Java/XML/Javascript/MySQL internship right now!


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
  •