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
PaulOB
February 16, 2010, 1:56pm
2
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.
<div class="grid_4 prefix_4 suffix_4 alpha omega">
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 ”>
<!-- 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>
Tried this solution and no luck!
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…
PaulOB
February 16, 2010, 5:32pm
7
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.
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…
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!
what i get is the blue box, the green box and the grey one surronding the form are bigger in IE6 than FF
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?
PaulOB
February 17, 2010, 11:07am
12
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.
.box,.box h2,h1{zoom:1.0}
thank you for your help, it is solved!