Сверстал вот такую вот форму
[IMG]http://gerasim.com.ru/form.jpg[/IMG]
В FF как всегда все отлично, а вот подонок IE отображает все это с какими то зазубренами. Помогите пожалуйста! Подскажите в чем косяк.
Вот html код:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>untitled document</title>
<link href="splashstyle.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="content">
<div class="header">Send your demo to Domorph.rec</div>
<script language="JavaScript" type="text/javascript">
function HandleFileButtonClick()
{
document.domorpform.truefile.click();
document.domorpform.fakefile.value = document.domorpform.truefile.value;
}
</script>
<form method="post" action="url" name="domorpform">
<div class="star">
<div class="cn tl"></div>
<div class="cn tr"></div>
<div class="whitebg">
<input onBlur="if(this.value=='')value='Your name';" onFocus="if(this.value=='Your name')value='';" id="name" />
</div>
<div class="cn bl"></div>
<div class="cn br"></div>
</div>
<div class="star">
<div class="cn tl"></div>
<div class="cn tr"></div>
<div class="whitebg">
<input onBlur="if(this.value=='')value='Your e-mail';" onFocus="if(this.value=='Your e-mail')value='';" id="email" />
</div>
<div class="cn bl"></div>
<div class="cn br"></div>
</div>
<div class="star">
<div class="cn tl"></div>
<div class="cn tr"></div>
<div class="whitebg">
<textarea name="textbox" rows="10" cols="50" onFocus="if(this.value==this.defaultValue)this.value='';" onBlur="if(this.value=='')this.value=this.defaultValue;" id="text">Type your text</textarea>
</div>
<div class="cn bl"></div>
<div class="cn br"></div>
</div>
<div class="star">
<div class="fileinputs">
<input type="file" id="truefile" name="truefile" onchange="HandleFileButtonClick();"/>
<div class="fakefileform">
<div class="cn tl"></div>
<div class="cn tr"></div>
<div class="whitebg">
<input onBlur="if(this.value=='')value='Choose your file';" onFocus="if(this.value=='Choose your file')value='';" id="fakefile" name="fakefile"/>
</div>
<div class="cn bl"></div>
<div class="cn br"></div>
</div>
</div>
</div>
<input type="submit" value="OK" id="submit" />
</form>
</div>
</body>
</html>
А вот CSS:
html {font-size:12pt;}
body { background:#660099; color:white; font:1em arial; letter-spacing:100%;}
#content {width:550px; margin:150px auto 0;}
.header {width:350px; font-size:2em; font-weight:bold; margin-bottom:5px;}
#name, #email, #text {width:538px; padding:4px; color:white; background:#660099; border:0; font:1em arial; font-weight:bold;}
#text {overflow:hidden;}
#fakefile {width:478px; padding:4px; color:white; background:#660099; border:0; font:1em arial; font-weight:bold;}
#submit {background:#660099 url(ok.gif) no-repeat center; border: 0px; font-size:1.4em; font-weight:bold; color:transparent; width:97px; height:32px; margin:5px 0;}
div.fileinputs {position: relative; background:white;}
div.fakefileform {position: absolute; top: 0px; left: 0px; z-index: 1; background:#660099 url(search.gif) no-repeat right center;}
.fakefileform .whitebg {margin-right:60px;}
input#truefile {position: relative; text-align: right; -moz-opacity:0; filter:alpha(opacity: 0); opacity: 0; z-index: 2; margin-left:304px; height:32px; font:1em arial; font-weight:bold;}
.star {padding:5px 0; position:relative;}
.star .whitebg {background:white;}
.star .whitebg input, .star .whitebg textarea {margin:2px;}
.star .cn.tl {background:transparent url(star.gif) no-repeat -4px -4px;}
.star .cn.tr {background:transparent url(star.gif) no-repeat 0px -4px; margin:0px 0px 0px 546px;}
.star .cn.bl {background:transparent url(star.gif) no-repeat -4px 0px; margin:-4px 0px 0px 0px;}
.star .cn.br {background:transparent url(star.gif) no-repeat 0px 0px; margin:-4px 0px 0px 546px;}
.fakefileform .cn.tr {background:transparent url(star.gif) no-repeat 0px -4px; margin:0px 0px 0px 486px;}
.fakefileform .cn.br {background:transparent url(star.gif) no-repeat 0px 0px; margin:-4px 0px 0px 486px;}
.star .cn {height:4px; position:absolute; width:4px;}
А вот тут я выложил страничку:
http://gerasim.com.ru/splashpage.htmlЗаранее спасибо, очень нужна ваша помощь.
Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
|
Сообщение сайта
Стилиция формы.
gerasim13
0 
Рассылка ваших сообщений в контакт формы!
6.4.2009, 16:57;
Сообщений: 31
