Hi all.
I'm trying to put a small form at the top of my page. I am using the
following code:
[CODE]
<html><head><style type="text/css">
div {border:2px solid navy}
body {
background-color: white;
font-family: arial, sans-serif;
text-align: center;
}
#mini-form {
position: relative;
float: left;
width: 70%;
top: 1pc;
left: 1pc;
}
.list {
float: left;
margin: .8pt;
color: rgb(142, 142, 142);
font-size: 12px;
}
.textbox {
font-size: 17px;
height: 1.25em;
margin: 0.2em;
vertical-align: bottom;
width: 100%;
}
.button {
font-size: 15px;
height: 1.85em;
margin: 0.2em;
padding: 2px 12px;
vertical-align: middle;
}
</style></head>
<body>
<div id="mini-form">
<form>
<a href=""><img alt="image" height="50" style="float:left"></a>
<div style="float:left;width:auto">
<div style="width:100%">
<input type="text" value="text" class="textbox">
</div>
<div style="margin-bottom:.6pc;text-align:left;cursor:pointer">
<div class="list" style="cursor:default">Select:</div>
<div class="list"> < </div>
<div class="list">element</div>
<div class="list"> > </div>
</div>
</div>
<div style="float:right">
<input type="submit" value="button" class="button">
</div>
</form>
</div>
<div style="border: 1px solid red">
rest of the page
</div>
</body></html>
[/CODE]
To create:
(IMAGE)
(TEXTBOX )
(BUTTON)
(LIST < > ELEMENT)
(rest of the page)
But I get the following in IE8 & Maxthon:
(rest of the page)
(IMAGE)
(TEXTBOX
)
(LIST < >
ELEMENT )
(BUTTON)
And the following in FF & Chrome:
(rest of the page)
(IMAGE)
(TEXTBOX)
(BUTTON)
(LIST < > ELEMENT)
There are three problems here:
1) It seems that for some reason, the "mini-form" div is removed from
the document (though its position is not 'absolute'), to make "the
rest of the page" div jump to the top of the page.
2) In IE & Maxthon: The button drops down to a new "line" in the div.
3) In FF & Chrome: The textbox does not stretch all the way to the
button.
Can anyone point out my mistakes to me?
Thanks.
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
