2 svar · 327 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 :r
Men stor tack till dig jarvklo :bire
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 :l