Siden min bugger (kraftig!) i IE..og litt i Opera

Tha_Zaynt · 28. desember 2004

Jeg lager en side for et dataparty og har holdt på i over en måned med registreringssystem design og koding i over en måned, men jeg får ikke siden til å se riktig ut i IE og Opera og det plager vettet av meg (for å si det mildt). Noen som kan være så snill å hjelpe meg å gjøre den kompiotabel i disse browserne?

Jeg har lagt ut noen screenshots, et der siden vises riktig (Firefox) og et der den vises feil (IE seff). Jeg la til en 2px border på hvert element med forskjellig farge slik at det skulle bli bedre å se hvor feilen ligger..

RIKTIG (Firefox)

FEIL (IE)

CSS

*{
   margin:0;
   padding:0;
}

body {
background: url(images/back.png);
text-align: center;
}

html, body {
height: 100%;
}

h1 {
   border: 2px solid blue;
background: url(images/top.png) no-repeat 19px 100%;
font-size: 1px;
height: 173px;
margin: 0 auto;
margin-right: 50px;
text-indent: -9999px;
width: 667px;
}

h2{
   font-family: "Trebuchet MS", Times, serif;
   color: #999;
   font-size: 1.4em;
   font-weight: bold;
}

h3{
   font-family: "Trebuchet MS", Times, serif;
   color: #999;
   padding-bottom: 8px;
   font-weight: lighter;
   font-size: 1.1em;
}


#content {
   border: 2px solid red;
font-family: "Trebuchet MS", Times, serif;
width: 450px;
font-size: 1em;
color: #999;
line-height: 170%;
margin-left: 201px !important;
padding: 0 30px 0 20px !important;
text-align: left;
}

#content p {
   margin: 0;
   padding: 0 0 1.6em 0;
}

#menu {
display: inline;
float: left;
list-style-type: none;
margin: 0;
padding: 20px 0 0 28px;

}

#menu a {
background: url(images/link.png) no-repeat 0px 0px;
color: #94A2BC;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
height: 23px;
margin-bottom: 4px;
overflow: hidden;
padding: 7px 0 0 15px;
text-align: left;
text-decoration: none;
width: 136px;

}

#menu a:hover {
background: url(images/link.png) no-repeat 0px -30px;
color: #96777A;
}

#menu li {
display: inline;

}

#menywrap{
   border: 2px solid green;
   width: 140px;
height: auto;
   float: left;
}

#kontrollpanel {
display: inline;
float: left;
list-style-type: none;
margin: 0;
padding: 20px 0 0 28px;
}

#kontrollpanel a {
background: url(images/link.png) no-repeat 0px 0px;
color: #94A2BC;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
height: 23px;
margin-bottom: 4px;
overflow: hidden;
padding: 7px 0 0 15px;
text-align: left;
text-decoration: none;
width: 136px;

}

#kontrollpanel a:hover {
background: url(images/link.png) no-repeat 0px -30px;
color: #96777A;
}

#kontrollpanel li {
display: inline;
}


#wrap {
   border: 2px solid;
background: url(images/background.png) repeat-y;
margin: 0 auto;
min-height: 100%;
   height: auto !important;
   height: 100%;
width: 704px;
}

#content a{
   text-decoration: none;
   color: #5D86B7;
}

#content a:hover{
   text-decoration: underline;
   color: #96777A;
}

select{
   margin: 8px 0 0 0;
}

option {
   padding: 0 8px 0 0;
}

textarea, input {
font-family:  "Trebuchet MS", Times, serif;
font-size: .9em;
padding: 1px;
border: 1px solid #B8C0D4;
margin: 8px 0 0 0 !important;
background: #fff;
color: #555;
}

.border td {
   border-bottom: 1px solid #B8C0D4;
   font-size: 0.9em;
}

#form{
   list-style-type: none;
   margin: -20px 0 0 0;
}

fieldset{
   background: #F3F3F3;
   width: auto;
   padding: 10px;
   border: 1px solid #C2B9B9;
}

fieldset label{
   color: #666;
   border-bottom: 1px dotted #B8C0D4;
   margin-left: 3px;
}

legend{
   font-family: "Trebuchet MS", Times, serif;
   color: #999;
   font-weight: lighter;
   font-size: 1.1em;
}

i{
   color: red;
}

label{
   border-bottom: 1px dotted #B8C0D4;
   margin-left: 3px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nisselink</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<div id="wrap">

<h1>Nisselink</h1>
<div id="menywrap">
<ul id="menu">

	<li><a href="?page=hovedsiden">Hovedsiden</a></li>
	<li><a href="?page=info">Info</a></li>
	<li><a href="?page=crew">Crew</a></li>
			<li><a href="?page=registrering">Registrering</a></li>
	<li><a href="?page=priser">Priser</a></li>
	<li><a href="?page=kontakt">Kontakt</a></li>
</ul>


 <ul id="kontrollpanel">

     <li><a href='?page=minside'>Min Profil</a></li>
<li><a href='?page=redigerprofil'>Rediger Profil</a></li>
  <li><a href='?page=logut'>Logg ut</a></li>

  </ul></div>

 <div id="content">

<h3>Nødvendig informasjon</h3>

<table class='border'>
<tr>
   <td><strong>Brukernavn:</strong> Aspaas </td>	 
 </tr>
 <tr>
   <td><strong>Navn:</strong> Hallvard Nilsen Aspaas </td>
 </tr>
<tr>
   <td><strong>Registrert:</strong> 21/12/2004</td>
 </tr>

<p>Denne informasjonen kan du ikke forandre selv. Hvis noen av opplysningene er uriktige så kan du sende en mail med kontaktskjemaet på siden med den korrekte informasjonen, så vil informasjonen bli oppdatert.</p>



<form method='post' action='./rediger.php?brukernavn=Aspaas'>
<fieldset>
<legend>Oppdater din info</legend>
<p>

<label>Fødselsdato</label>
<select name="day"><option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12" selected="selected">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select><select name="month"><option value="01">Januar</option>
<option value="02">Februar</option>
<option value="03">Mars</option>
<option value="04">April</option>
<option value="05">Mai</option>
<option value="06">Juni</option>
<option value="07">Juli</option>
<option value="08">August</option>
<option value="09" selected="selected">Oktober</option>
<option value="10">November</option>
<option value="11">September</option>
<option value="12">Desember</option>
</select><select name="year"><option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987" selected="selected">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select><br/>

<label>Telefonnr   </label>
<input type='text' name='tlf' value='47667232' size='12'/>*<br/>

<label>Webside    </label>
<input type='text' name='url' value='fettoterpong i hælvette!' size='30'/><br/>

<input name='send' type='submit' value='Oppdater profil'/>


<input type='reset' value='Reset!'/>


</p>
</fieldset>
</form>


 </div>
</div>

</body>
</html>

Steinmann · 28. desember 2004

jess, en link hadde gjort ting lettere...

btw: du har glemmt å lukke table!

Nicklas · 29. desember 2004

Sett på float: left; (eller right, bare prøv) på en div (den menyen eller den hovedsiden sikkert)

Endret 29. desember 2004 av Nicklas

Tha_Zaynt · 29. desember 2004

jess, en link hadde gjort ting lettere...
btw: du har glemmt å lukke table!

Yes! Den lukkingen av table gjorde underverker! Så lite skal det altså til...takker så meget for hjelpen!

EDIT1: Det er en liten bug i IE enda på fieldset'en. Noen som kan tenke seg hva som kan være feil?

EDIT2: Fant feilen etter litt reasearch. Problemet med legend og fieldset var visst et kjent fenomen i IE. Løsning: Sett position: absolute på legend og position: relative på fieldset og gi minusverdier på margin i legend. Problem solved :cool:

Endret 29. desember 2004 av Tha_Zaynt

laaknor · 29. desember 2004

Prøvd å bruke CSS og HTML validator? (siden du ikke viste at du manglet en </table> tenker jeg med en gang at den ikke er validert....)

Tha_Zaynt · 29. desember 2004

kunne av en eller annen grunn ikke bruker validator, tror det har noe å gjøre med at den aktuelle siden var passordbeskyttet? Men uansett....det går vel an å laste opp fil for validering. Tenkte ikke på det, men takk for hjelpen uansett.

laaknor · 29. desember 2004

Går ann å skru av passordbeskyttelse akkurat i det du validerer også. Validatoren er innmari grei å ha til denne typen ting. Når det ikke fungerer i to nettlesere (a.k.a. IE og Opera), så er det stor sannsynlighet for at det er en feil i formatteringa di, og da sier W3C i fra

Tha_Zaynt · 29. desember 2004

Joda sant det, men nå er jo feilen funnet og rettet opp i, så det er for seint å tenke på det nå. Skal huske det til neste gang.

Logg inn

Siden min bugger (kraftig!) i IE..og litt i Opera

Anbefalte innlegg

Tha_Zaynt

Lenke til kommentar

Videoannonse

Steinmann

Lenke til kommentar

Nicklas

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

laaknor

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

laaknor

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Håndveivinga til Elon Musk 1 2 3 4 8

RTX 5090 - 8900 XTX (9070 XT) Utgivelse dato - Rytker? 1 2 3 4 29

Hvem er aktive 0 medlemmer