2 svar · 330 visningar · startad av trygge
Hej,
Kan någon förklara mig varför sidan som jag har gjort blir fel? Allt såg bra ut i både IE och FF innan jag la länkar på divvarna. Nu har bilderna (messenger och assitant) i IE lagt sig längre ner än den huvudraden de borde vara på.
Så ser koden ut nu.
<div id="wrap">
<div id="header">
<div id="logo"></div>
<div id="flags">
<ul>
<li><a href="index.htm"><img alt="" src="../Images/flag_se30.gif" /></a></li>
<li><a href="../fi/index.htm"><img src="../Images/flag_fi30.gif" alt="" border="0" /></a></li>
<li><a href="../en/index.htm"><img src="../Images/flag_uk30.gif" alt="" border="0" /></a></li>
</ul>
</div>
<div id="trialyear"><a href="#" onMouseDown="OpenCreateUser()"></div>
<div id="messenger"><a href="#" onMouseDown="return OpenMessenger();"></div>
<div id="assistant"><a href="#" onMouseDOwn="return OpenAssistant();"></div>
</div>
<div id="nav">
#wrap
{
width: 970px;
padding: 0px 0px 0px 0px;
margin: 10px auto;
position: relative;
background-color:#fff;
}
#header
{
height: 117px;
}
#logo
{
margin-top: 25px;
background: transparent url("Images/logo.gif") no-repeat;
width: 120px;
height: 96px;
float:left;
}
#flags
{
float:left;
margin: 40px 0px 0px 0px;
padding: 8px 0px 0px 0px;
}
#flags ul{ padding: 0px; margin:0px; list-style-type: none; }
#flags ul li{ margin: 0px; clear:both; }
#flags ul li img{ border: none; }
#trialyear
{
margin-left: 30px;
float:left;
}
#trialyear a{
display: block;
background: transparent url("Images/trialyear.gif") no-repeat;
width: 280px;
height: 117px;
}
#trialyearFI
{
margin-left: 30px;
float:left;
}
#trialyearFI a{
display: block;
background: transparent url("Images/trialyearFI.gif") no-repeat;
width: 280px;
height: 117px;
}
#trialyearEN
{
margin-left: 30px;
float:left;
}
#trialyearEN a{
display: block;
background: transparent url("Images/trialyearEN.gif") no-repeat;
width: 280px;
height: 117px;
}
#messenger
{
margin-left: 160px;
margin-top: 30px;
float:left;
}
#messenger a{
display: block;
background: transparent url("Images/logon_m.gif") no-repeat;
width: 146px;
height:80px;
}
#messengerFI
{
margin-left: 160px;
margin-top: 30px;
float:left;
}
#messengerFI a{
display: block;
background: transparent url("Images/logon_mFI.gif") no-repeat;
width: 146px;
height:80px;
}
#messengerEN
{
margin-left: 160px;
margin-top: 30px;
float:left;
}
#messengerEN a{
display: block;
background: transparent url("Images/logon_mEN.gif") no-repeat;
width: 146px;
height:80px;
}
#assistant
{
margin-top: 30px;
margin-left: 15px;
float:left;
}
#assistant a{
display: block;
width: 146px;
height:80px;
background: transparent url("Images/logon_a.gif") no-repeat;
}
Originalkoden såg ut såhär
#logo
{
margin-top: 25px;
background: transparent url("Images/logo.gif") no-repeat;
width: 120px;
height: 96px;
float:left;
}
#flags
{
float:left;
margin: 40px 0px 0px 0px;
padding: 8px 0px 0px 0px;
}
#flags ul{ padding: 0px; margin:0px; list-style-type: none; }
#flags ul li{ margin: 0px; clear:both; }
#flags ul li img{ border: none; }
#trialyear
{
margin-left: 30px;
float:left;
width: 280px;
height: 117px;
background: transparent url("Images/trialyear.gif") no-repeat;
}
#messenger
{
margin-left: 160px;
margin-top: 30px;
float:left;
width: 146px;
height:80px;
background: transparent url("Images/logon_m.gif") no-repeat;
}
#assistant
{
margin-top: 30px;
margin-left: 15px;
float:left;
width: 146px;
height:80px;
background: transparent url("Images/logon_a.gif") no-repeat;
}
Hoppas någon kan hjälpa mig. Om ni vill gå in på sidan på nätet så pm:a mig för att jag vill inte lägga det ut här.
Hmm...
Om det saknas ett par </a> i din originalkod också
<div id="trialyear"><a href="#" onMouseDown="OpenCreateUser()"></div>
<div id="messenger"><a href="#" onMouseDown="return OpenMessenger();"></div>
<div id="assistant"><a href="#" onMouseDOwn="return OpenAssistant();"></div>
så *kan* det vara följden av att FF och IE felhanterar din trasiga (X)HTML-kod på olika sätt och att det i sin tur påverkar exakt vad "display: block" för länkarna i din nya CSS påverkar...
Att det var en så enkel grej...man skäms 
Men stor tack till dig jarvklo 
Kanske någon kan hjälpa mig med några saker till som jag inte får att funka.
I denna problem så försvinner bilden då jag försöker göra en länk av bilden.
i html ser koden såhär. Den första divven funkar bra.
<div id="onlinedemo" class="subpageblock"><a href="../img/demo-1.wmv" ></a></div>
<div id="trial" class="subpageblock"><a href="#" onMouseDown="OpenCreateUser_Free()"></a></div>
Style sheeten ser ut såhär
.subpageblock
{
margin-top: 10px;
width: 318px;
height: 100px;
background-color: #transparent;
}
#onlinedemo
{
clear: both;
float:left;
}
#onlinedemo a{
display: block;
background-image: url(Images/demo.gif);
width: 318px;
height: 100px;
}
#trial
{
margin-left: 6px;
float: left;
background-image: url(Images/trial.gif);
}
#trial a{
display: block;
width: 318px;
height: 100p;
}
Är det något som jag har missat 