Sv: problem med Form

problem med Form

Postades av 2007-07-02 10:45:25 - Sina Tikab, i forum html/css, Tråden har 3 Kommentarer och lästs av 1597 personer

Hej

Har problem med <form id="formen1" runat="server">

då jag inte har det så ser sidan bra ut men när jag använder <form id="formen1" runat="server">

så hamnar hela sidan en bit ner?
detta är bara i IE?

<body id="home">
<form id="formen1" runat="server">

<div id="widerstrap">
<div id="headstrap">

<div id="header">

<ul id="nav">

<li>Web design portfolio.</li>
<li>Contact Nice Design in Brighton.</li>


</ul>
<div id="logo">

<h1>Nice Design, Brighton-based website design for accessibility</h1>
</div>
<div id="star"></div>
</div>

</div>
</div>


<div id="content">

<div id="leftcol">

<div id="pad">

<div id="pad-top"></div>


<div id="pad-mid">

<p>We lovingly craft chic, supple, accessible web sites which achieve
cheeky search engine positions. Use our experience to increase your
profits using clever web alchemy.</p>
</div>
<div id="pad-bot"></div>

</div>




<div id="dyk">
<div id="dyk-top"></div>
<div id="dyk-mid">
<p>I'm currently fully booked on web design consultancy work with   Clearleft, and am not taking on other work.</p>
</div>
<div id="dyk-bot"></div>
</div>

</div>


<div id="maincol">

<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">

</asp:contentplaceholder>
</div>


<div class="clearboth"></div>
</div>

<p> </p>

<div id="footer">

<ul id="foot">

<li>© 2005-2007  LectureWay.com</li>
<li>Terms of use .</li>
<li>Privacy policy .</li>
<li>XHTML .</li>
<li>CSS .</li>
</ul>
</div>
</form>
</body>
</html>

CSS

*{
font-size:100%;
margin:0;
padding:0;
list-style: none;
border: 0;
}
.clearboth {
clear: both;
}
body {
background: #fff url("images/bg.jpg") fixed top no-repeat;
color:#333;
font: 70%/2.25em "lucida sans",verdana,arial,helvetica,sans-serif;
text-align: center;
}
p {
margin-top: 1em;
}
a {
color: #633;
background-color: #FFFFDE;
text-decoration: none;
padding: 2px;
border-bottom: 1px dotted #C99 !important; /* nice dotted underlines for FF */
border-bottom: 1px solid #DCC; /* lighter solid underlines for IE */
}
a:hover {
color: #036;
background: #CFF url("images/link-hover.gif") repeat-x;
border-bottom: 1px solid #C99;
}
a.more {
color: #06C;
padding: 2px 16px 2px 1px;
margin: 0 0 0 3px;
background: transparent url("images/link-arrow.gif") top right no-repeat;
border-bottom: 1px dotted #06C !important; /* nice dotted underlines for FF */
border-bottom: 1px solid #6CC; /* lighter solid underlines for IE */
}
a.more:hover {
color: #036;
background: transparent url("images/link-hover.gif") top right no-repeat;
border-bottom: 1px solid #036;
}
#widerstrap {
background: #c14 url("images/bg-sides.gif") top repeat-x;
width: 100%;
height: 130px;
position: fixed;
z-index: 10;
top:0; left:0;
}
#headstrap {
background: url("images/bg-header.gif") center no-repeat;
width: 100%;
height: 130px;
position: fixed;
z-index: 20;
top:0; left:0;
}
#header {
margin: 0 auto;
position: relative;
width: 710px;
height: 130px;
text-align: left;
z-index: 30;
}
#logo h1 {
position: absolute;
display: block;
margin: 50px 0 0 0;
float: left;
font-size: 1px;
}
#logo h1 a {
display:block;
width:222px;
height:80px;
float:left;
overflow:hidden;
text-indent:-9999px;
margin: 0;
padding: 0;
border: 0 !important;
background-color: transparent;
}
#home #logo h1 a, #about #logo h1 a { background: url("images/logo-clip.gif") 0 0 no-repeat; }
#home #logo h1 a:hover, #about #logo h1 a:hover { background: url("images/logo-clip.gif") 0 -80px no-repeat; }

#contact #logo h1 a { background: url("images/logo.gif") 0 0 no-repeat; }
#contact #logo h1 a:hover { background: url("images/logo.gif") 0 -80px no-repeat; }
h1 a:hover { background-color: transparent !important; }
html>body #logo h1 a {
margin: 0 0 0 5px;
padding: 0;
border: 0;
background-color: transparent;
}

#star {
display: block;
margin: 0 0 0 530px;
padding: 0;
}
#star a {
margin: 0;
padding: 0;
border: 0 !important;
background-color: transparent;
}
#star a:hover {
background: transparent url(none.html);
}
ul#nav {
position: absolute;
left: 280px;
top: 94px !important;
top: 92px;
display: block;
font-size: 1px;
}
#nav li {
display: inline;
float: left;
}
#nav li a {
color: #fff;
margin-top: -2px !important;
margin: 0 15px 0 0;
padding: 0;
border: 0 !important;
background-color: transparent;
}
a.pic, a.pic:hover {
color: #fff;
padding: 0;
margin:0 0 -2px 0;
border: 0 !important;
background-color: white;
background: url("") 0 -38px no-repeat;
}
a#nav-home {
background: url("images/nav-home.gif") 0 -38px no-repeat;
display:block;
width:99px;
height:38px;
overflow:hidden;
text-indent:-9999px;
}
a#nav-about {
background: url("images/nav-about.gif") 0 -38px no-repeat;
display:block;
width:72px;
height:38px;
overflow:hidden;
text-indent:-9999px;
}
a#nav-resources {
background: url("images/nav-resources.gif") 0 -38px no-repeat;
/* display:block; temporarily hiding this option with... */ display: none;
width:101px;
height:38px;
overflow:hidden;
text-indent:-9999px;
}
a#nav-contact {
background: url("images/nav-contact.gif") 0 -38px no-repeat;
display:block;
width:86px;
height:38px;
overflow:hidden;
text-indent:-9999px;
}
a#nav-weblog {
background: url("images/nav-photos.gif") 0 -38px no-repeat;
display:block;
width:84px;
height:38px;
overflow:hidden;
text-indent:-9999px;
}
a#nav-home:hover { background: url("images/nav-home.gif") 0 -76px no-repeat; }
a#nav-about:hover { background: url("images/nav-about.gif") 0 -76px no-repeat; }
a#nav-resources:hover { background: url("images/nav-resources.gif") 0 -76px no-repeat; }
a#nav-contact:hover { background: url("images/nav-contact.gif") 0 -76px no-repeat; }
a#nav-weblog:hover { background: url("images/nav-photos.gif") 0 -76px no-repeat; }

#home #nav-home { background: url("images/nav-home.gif") 0 0 no-repeat; }
#about #nav-about { background: url("images/nav-about.gif") 0 0 no-repeat; }
#resources #nav-resources { background: url("images/nav-resources.gif") 0 0 no-repeat; }
#contact #nav-contact { background: url("images/nav-contact.gif") 0 0 no-repeat; }
#weblog #nav-weblog { background: url("images/nav-photos.gif") 0 0 no-repeat; }

#content {
margin: 0 auto;
position: relative;
width: 750px;
height: 100%;
color: #633;
text-align: left;
z-index: 0;
}
#leftcol {
width: 237px;
margin: 130px 0 0 18px !important;
margin: 0 0 0 12px;
position: fixed;
z-index: 1;
}
#pad {
width: 237px;
background: url("images/pad-mid.gif") 0 -10px repeat-y;
}
#pad-top {
width: 237px;
height: 65px;
background: url("images/pad-top.gif") 0 0 no-repeat;
}
#about #pad-top {
width: 237px;
height: 140px;
background: url("images/pad-top-pic.jpg") 0 0 no-repeat;
}
#pad-mid {
display: block;
margin: -48px 0 0 0;
}
#about #pad-mid {
display: block;
margin: -123px 0 0 0;
}
#pad-mid p {
margin: 0 23px;
}
#pad-mid img {
align: right;
background-position: right;
}
#pad-bot {
width: 237px;
height: 26px;
background: url("images/pad-bot.gif") 0 0 no-repeat;
}
#dyk {
margin: 20px 0 0 5px;
width: 237px;
background: url("images/dyk-bg.gif") 0 -10px repeat-y;
}
#dyk-top {
width: 237px;
height: 40px;
background: url("images/dyk.gif") 0 0 no-repeat;
}
#dyk-mid {
display: block;
margin: 0.5em 0 0.7em 0;
}
#dyk-mid p {
margin: 0 25px 0 19px;
font-size: 81%;
line-height: 1.8em;
color: #360;
}
#dyk-bot {
width: 237px;
height: 7px;
margin: 0;
background: url("images/dyk-bot.gif") 0 0 no-repeat;
}
#maincol {
display: block;
width: 453px;
margin: 0 0 0 280px !important;
padding-top: 170px !important;
margin-top: -25em;
}
#maincol h1 {
margin-top: 1em;
font-size: 120%;
color: #c03;
}
#footer {
margin: 0 auto;
margin-top: 50px;
padding: 20px 0;
position: relative;
width: 750px;
border-top: 1px solid #eee;
color: #aaa;
text-align: center;
font: 81%/2.25em verdana,arial,helvetica,sans-serif;
}
#foot li {
display: inline;
margin: 0 0 0 15px;
}
#footer a {
color: #aaa;
background: transparent url(none.html);
border-bottom: 1px dotted #aaa !important; /* nice dotted underlines for FF */
border-bottom: 1px solid #eee; /* lighter solid underlines for IE */
}
#footer a:hover {
color: #aaa;
background-color: #fafafa;
}
#footer #locations {
text-indent:-9999px;
}
.item {
margin: 50px 0 0 0;
}
.bar {
margin: 1em 0 -1px 0;
padding: 0;
width: 448px;
background: url("images/bar-middle.gif") 0 0 repeat-y;

}
.bar-top {
width: 448px;
height: 8px;
background: url("images/bar-top.gif") 0 0 no-repeat;
}
.bar-mid {
margin: -0.5em 0 !important;
margin-left: 3px;
margin-right: 3px;
margin-top: -0.9em;
}
.bar-mid span {
font: 81%/1.5em verdana,arial,helvetica,sans-serif;
color: #aaa;
background: url("images/bar-bar.gif") 0 0 no-repeat;
padding: 0 6px 0 8px;
}
.bar-mid span.date {
background: none;

}
.bar-bot {
width: 448px;
height: 8px;
margin: 0;
background: url("images/bar-bot.gif") 0 0 no-repeat;
}
.intro {
padding-top: 0 !important;
padding-top: 120px;
margin-bottom: -20px;
color: #8cb;
}
* html .intro {
margin-top: -16em;
}
.large {
font: 200%/3em arial,helvetica,sans-serif;
color: #C03;
margin-top: -0.7em;
}
form {
margin-top: -2.3em;
}
* html form {
margin-top: 26em;
}

form legend {
padding-bottom: 1em;
}
form input {
background-color: #C1F0E7;
padding: 2px;
font-size: 140%;
}
form textarea {
background-color: #C1F0E7;
padding: 2px;
}
form input.submit {
margin-top: 2em;
background-color: #920031;
color: #fff;
}
#ad {
margin: 5px 0 5px 8px;
}

#ad a, #ad a:hover {
border:0 !important;
background-color: transparent !important;
background: none !important;
}
.notneeded {
position: absolute;
left: -1000px;
width: 900px
}

/* the following hack appears to make the CSS not validate!!! grrr... */

/* horrible "media queries" hack for Opera 7 follows */
/* note - this may break the site in future - be ready to remove it! */
/* see http://virtuelvis.com/archives/2004/01/css-for-opera-7 */

@media all and (min-width: 0px){

ul#nav li {
}
#leftcol {
position: absolute;
}}

Svara