I am having an issue with IE7 and alignment of items within a DIV.
In FireFOx, Chrome and Safari, it looks and acts 100% as it should... But in IE7, the wrapping does not behave itself...
Should be like this... (FireFox)
In IE, two items:
The first, the grouping of the label and inputs (this is not supposed to seperate as shown in the first image.
The second, if you contract the page more, the wrapping (as with the second image) also does not align to the left as it does in the first image...
Code, and CSS...below, if any one has a clue why IE does not align nicely? Please reply...
Thanks in advance!!
Brad
QUOTE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.Toolbar
{
display: inline-block;
background-color: #cccccc;
min-height: 30px;
width: 100%;
}
.Toolbar select,
.Toolbar input,
.Toolbar div,
.Toolbar span,
.Toolbar label
{
display: inline-block;
float: left;
margin: 2px;
min-height: 14px;
}
.Toolbar select
{
width: 100px;
min-height: 18px;
}
.Toolbar input
{
width: 100px;
}
.Toolbar div /* separator */
{
min-height: 23px;
border-top: solid 1px #888888;
border-bottom: solid 1px white;
border-left: solid 1px #888888;
border-right: solid 1px white;
}
.Toolbar span
{
white-space: nowrap;
}
.Toolbar label
{
white-space: nowrap;
padding-top: 3px;
}
.Toolbar-Button
{
cursor: pointer;
text-align: center;
white-space: nowrap;
border-width: 1px;
border-style: solid;
padding: 2px 5px;
}
</style>
</head>
<body style="margin:0px;margin:0px;height:100%;width:100%;">
<div id="toolbar1" class="Toolbar">
<span class="Toolbar-Button">Text item1</span>
<span class="Toolbar-Button">Text item2</span>
<span class="Toolbar-Button">Text item3</span>
<div><!--seperator--></div>
<span>
<label>Label for item4</label>
<input type="text" value="value for item4" />
</span>
<span>
<label>Label for item4</label>
<select>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</span>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
.Toolbar
{
display: inline-block;
background-color: #cccccc;
min-height: 30px;
width: 100%;
}
.Toolbar select,
.Toolbar input,
.Toolbar div,
.Toolbar span,
.Toolbar label
{
display: inline-block;
float: left;
margin: 2px;
min-height: 14px;
}
.Toolbar select
{
width: 100px;
min-height: 18px;
}
.Toolbar input
{
width: 100px;
}
.Toolbar div /* separator */
{
min-height: 23px;
border-top: solid 1px #888888;
border-bottom: solid 1px white;
border-left: solid 1px #888888;
border-right: solid 1px white;
}
.Toolbar span
{
white-space: nowrap;
}
.Toolbar label
{
white-space: nowrap;
padding-top: 3px;
}
.Toolbar-Button
{
cursor: pointer;
text-align: center;
white-space: nowrap;
border-width: 1px;
border-style: solid;
padding: 2px 5px;
}
</style>
</head>
<body style="margin:0px;margin:0px;height:100%;width:100%;">
<div id="toolbar1" class="Toolbar">
<span class="Toolbar-Button">Text item1</span>
<span class="Toolbar-Button">Text item2</span>
<span class="Toolbar-Button">Text item3</span>
<div><!--seperator--></div>
<span>
<label>Label for item4</label>
<input type="text" value="value for item4" />
</span>
<span>
<label>Label for item4</label>
<select>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</span>
</div>
</body>
</html>