webForumDet fria alternativet

Olika resultat i Fx och IE

HTML & CSS

1 svar · 278 visningar · startad av wally_91

Medlem sedan feb. 2006511 inlägg
Frågan#1

Hej alla!

Jag har hållit på med detta hela dagen och har fortfarande inte lyckats lösa det. Därför vänder jag mig hit för hjälp!

Problemet är att i IE ser det ut som det ska göra (ovanligt :p) men i Fx ser det helt fel ut. Jag vet inte varför men ramen runt vill inte bli större, hur jag än gör. Ni kan se på bilderna vad jag menar.

Lite kod...
ibox.css (fx's stildokument)

/* CSS Document */

#ibox_w{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index:100;
	width: 100%;
	height: 100%;
	background-color: #000;
	margin:0;
	padding:0;
	filter:alpha(opacity=0);
	-moz-opacity: 0.0;
	opacity: 0.0;
}

#ibox_progress {	
	margin:0;padding:0;
	position: absolute;
	z-index:105;
}
#ibox_wrapper {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index:1000;
	padding:10px;
	border:1px solid #CCC;
	width:500px;
	height:800;
	background-color:red;
	margin:0;
}
#ibox_content {
	background-color:#FFF;
	width:620px;
	height:150px;
	margin-bottom:5px;
	position:relative;
	border:1px solid #000;
	padding:2px;
    text-align:left;
}

#ibox_footer_wrapper {
	position:relative;padding:0;margin:0;top:0px;left:0px;
}

iboxie.css (IEs stilmall)

/* CSS Document */

#ibox_w{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index:100;
	width: 100%;
	height: 100%;
	background-color: #000;
	margin:0;
	padding:0;
	filter:alpha(opacity=0);
	-moz-opacity: 0.0;
	opacity: 0.0;
}

#ibox_progress {	
	margin:0;padding:0;
	position: absolute;
	z-index:105;
}
#ibox_wrapper {
	position: absolute;
	z-index:1000;
	padding:10px;
	border:1px solid #CCC;
	width:600px;
	height:400px;
	background-color:#999999;
	padding-bottom:10px;
}
#ibox_content {
	background-color:#FFF;
	width:620px;
	height:150px;
	margin-bottom:5px;
	position:relative;
	border:1px solid #000;
	padding:2px;
    text-align:left;
}

#ibox_footer_wrapper {
	position:relative;padding:0;margin:0;top:0px;left:0px;
}

Själva sidan

<div id="login" style="padding:5px; margin: 5px;">
<div style="float:right;">
<h3>Inte medlem?</h3>
Skapa ett konto
<table>
<tr>
 <td><label for="username">Anv&auml;ndarnamn</label></td>
 <td><input type="text" name="user" /></td>
</tr>
<tr>
 <td><label for="pw">E-post</label></td>
 <td><input type="text" name="passwd" /></td>
</tr>
<tr>
 <td><input type="button" style="float:right;" onClick="window.location = 'register.php';" value="Registrera dig!" /></td>
</tr>
</table>
</div>
<div style="float:left;">
<form action="http://www.guida.nu/include/left.php" method="post">
<h3>Logga in</h3>
<table>
<tr>
 <td><label for="username">Anv&auml;ndarnamn</label></td>
 <td><input type="text" name="user" /></td>
</tr>
<tr>
 <td><label for="pw">L&ouml;senord</label></td>
 <td><input type="password" name="passwd" /></td>
</tr>
<tr>
 <td><input type="submit" name="submit" style="float:right;" value="Logga in" /></td>
</tr>
</table>
</form>
</div>
<img src="ajaxlogin/spacer.png" alt="eller" style="margin-top:30px;margin-left:22px;" />
</div>

Alla filer har blivit bifogade med.

Alla svar uppskattas!

Mvh wally_91

Medlem sedan nov. 20051 596 inlägg
#2

Är det meningen att vi ska gissa oss till hur du lagt dina divar och klasser :) eller ska vi hitta på.
Då tar jag den med röd bakgund...
börjar html-koden så här

div id="ibox_wrapper">
<div id="ibox_content">
<div id="login">
<div style="float:right;">
<h3>Inte medlem?</h3>
Skapa ett konto
<table>... och </iv></iv>efter>/table>

och sedan använt de här två för att få den röda att komma runt alltihop. med ändringar så content är mindre bl.a. Sånt tar iE ingen hänsyn till den spänner ut den som ligger under så att widden inte längre stämmer. Vilket ff inte gör vilket är rätt!! IE fel!

#ibox_wrapper {
	position: absolute;
	z-index:1000;
	padding:10px;
	border:1px solid #CCC;
	width:620px;
	height:auto;
	background-color:red;
	padding-bottom:10px;
}
#ibox_content {
	background-color:#FFF;
	width:95%;
	height:150px;
	margin:0 auto 5px auto;
	position:relative;
	border:1px solid #000;
	padding:2px;
    text-align:left;
} {

Så ska de nog hamna rätt både i IE och FF. :OO

256 ms totalt · 4 externa anrop · v20260731065814-full.e96017d9
120 ms — deklarationer (db)
0 ms — hämta statistik (cache)
130 ms — hämta tråd, inlägg och bilagor (db)
123 ms — ändringar (db)