I am getting various behavior across browsers with trying to align
labels, selects and input elements across a row. I was hoping that
blueprint would help me with this. I am using 0.8.
In the HTML below, there are three div rows. The top and bottom div
rows, I would like the label, select, anchor, checkbox and input
elements to align across their middles vertically.
In FireFox and Chrome (webkit),
The first row, labels and selects align properly, but the input text
box is higher. The last row, the anchor and checkbox are higher than
the label, select.
In IE7,
Everything is unaligned. The first row, the labels are too low and
the input text box is too high. The last row, the anchor and checkbox
are higher, the label is lower and the select is in the middle.
I have attempted to wrap things in spans and/or adjust each elements
vertical-align (as suggestion on a previous thread), but it seems if I
push an element one way to fix in FireFox, IE goes in the other
direction.
Any help or pointers would be greatly appreciated to help align these
elements up. My last resort is to use a table, but I really don't
want to stoop that low ;)
Thanks,
Jason
Here is the html I am trying to align across each row. I removed all
my attempts to align these elements, just left the blueprint classes
<html>
<head>
<link rel="stylesheet" href="blueprint/screen.css" type="text/css"
media="screen, projection">
<link rel="stylesheet" href="blueprint/print.css" type="text/css"
media="print">
<!--[if IE]>
<link rel="stylesheet" href="blueprint/ie.css" type="text/css"
media="screen, projection">
<![endif]-->
</head>
<body>
<div id="project" class="container showgrid">
<div class="span-24 last">
<form action="/project/index.brail" method="post">
<div class="span-4">
<label for="tn">Label A:</label>
<select id="tn" name="tn" >
<option value="0">All</option>
</select>
</div>
<div class="span-6">
<label for="ou">Label B:</label>
<select id="ou" name="ou" >
<option value="0">All</option>
</select>
</div>
<div class="span-5">
<label for="s">Label C:</label></span>
<select id="s" name="s" >
<option value="0">All</option>
</select>
</div>
<div class="span-7">
<input type="text" id="q" name="q" value="" size="40" />
</div>
<div class="span-2 last">
<input type="submit" value="search" />
</div>
<div class="prepend-15 span-9 last quiet small">
searches project name and description only
</div>
<div class="span-4">
<a href="/project/new.brail">Add new project</a>
</div>
<div class="prepend-2 span-9">
<label for="org">Label D:</label></span>
<select id="org" name="org" >
<option value="0">All</option>
</select>
</div>
<div class="span-9 last">
<input type="checkbox" id="o" name="o" value="true"
checked="checked" /><input type="hidden" id="oH" name="o"
value="false" />show only projects I own
</div>
</form>
</div>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Blueprint CSS" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/blueprintcss?hl=en
-~----------~----~----~----~------~----~------~--~---
