Forskjellig nettside, med samme kode i chrome vs firefox??

Forskjellig nettside, med samme kode i chrome vs firefox??

Innleggav rios » ons 12.09.2012 0:29

Hei, lurte bare på om det var noen glupinger der ute som kunne fort svare meg på dette spm. Jeg driver og setter opp en leke nettside, men når jeg starter å jobbe med den så merker jeg fort at det er noe forskjell mellom de forskjellige nettleserne. Jobber nå med firefox og chrome. Forskjellen er ikke stor, men stor nok til at man ser forskjell. Trenger ikke hjelp til noen annent, enn at noen kan forklare meg hvordan jeg kan få koden min likt på begge nettleserne.

På forhånd takk, og her kommer koden med css.


Kode: Merk alt
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Do you got milk?</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>


<body>
<div id="firkant"> </div>


<div id="wrapper">


<div id="bilde1"><img src="images/theplace.jpg" alt="2pac"  /></div>
<h1>Do you got Milk?</h1>
<div id="ord1"><p>I</p></div>



<div id="bilde2"><img src="images/theplace.jpg" alt="2pac"  /></div>
<div id="ord2"><p>Got</p></div>

<div id="bilde3"><img src="images/theplace.jpg" alt="2pac"  /></div>
<div id="ord3"><p>No &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Milk  &nbsp;&nbsp; &nbsp; &nbsp; OR &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ?   &#916;</p></div>

<div id="bilde4"><img src="images/theplace.jpg" alt="2pac"  /></div>

</div>
<hr/>



</body>


</html>


og her kommer css:

Kode: Merk alt

/*rest css*/

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
   
}




html {
   height:100%;
   width:100%;
   background-color:#000;
/*this code her reset the default styles in the browsers*/
   margin:0;
   padding:0;

}

body {
   height:100%;
   width:100%;

/*this code her reset the default styles in the browsers*/
   margin:0;
   padding:0;
}

#wrapper {
   width:100%;
   min-height:100%;
/*    min-width: 100%; */
/*    position: relative; */
}

p {
   color:#fff;
   font-size: 200%;

}

h1{
   color:#fff;
   margin:0% 0 0 35%;
   word-spacing: 0.3em;
   padding: 2% 2% 2% 2%;
   font-family: "American Typewriter";
   font-size: 200%;
      
   }




hr{
   
   background-color: white;
   width: 100%;
   height: 14%;
   border: white;
   margin: 89% 0% 0% 0%;
}





#firkant {
   background-color:#fff;
   position:absolute;
   opacity:0.1;
   height:100%;
   width:100%;
   z-index:-2;
   margin-top:-0;
   margin-left:-0;
}




img {
/* height: 220px; */ /*why do i have to use px but not % here? firefox dont like %%% ????*/
/*     width: 426px; */
   height:30%;
   width:30%;
   
   min-height:10%;
   min-width:10%;
   border-top: 20px solid white;
   border-right: 20px solid white;
   
}




#bilde4 img {
   /*
height:30%;
   width:30%;
*/
   float:right;
   margin:-29% 0% 30% 1%;
/*putts the hr element al the way down with the margin bottim 34%*/
   opacity:-.1;
   filter:alpha(opacity=40);
/* For IE8 and earlier */
   
   border: none;

}


/*when you hover over the pic so will the picure appear 100 perfect with 100% colors*/
#bilde4 img:hover {
   opacity:1;
   filter:alpha(opacity=100);
/* For IE8 and earlier */
}



hr{
   
   background-color: white;
   width: 100%;
   height: 10%;
   border: green;
   /*position: absolute;when i use this code, the hr element goes 100% width*/
   margin: -5% 0% 0% 0%;/*why do i have to have 43 in margin here??*/
   position: absolute;
   z-index: 30;



}

#ord1 p {
   font-size:500%;
}

#ord1{
   
   margin:15% 0 0 4%;
   height: 20%;
   width: 10%;
}

#ord2 p {
/*
position: absolute;
   z-index: 50;
   
*/
}

#ord2 {
   margin:8% 0 0 16%;
   float:left;
   height: 20%;
   width: 10%;
   


}
#ord3 p {
   color:black;
/*    font-size:500%; */
   
   }

#ord3  {

   margin:21% 0% 0% 35%;
   height: 20%;
   width: 100%;
   float: left;
   padding: 4px 2px 2px 2px;
   position: absolute;
   z-index: 60;

   }








#bilde1 img {

   float:left;
   margin:-1% 0% 0% 0%;
   border-top: 60px solid white;
   position: absolute;
   z-index: 10;
   }

#bilde2 img {

   float:left;
   margin: -10.65% 0% 0% 14%;
   border-top: 24px solid white;
   position: absolute;
   z-index: 8;
}

#bilde3 img {

   float:left;
   margin: 4.4% 0% 0% 2%;
   position: absolute;
   z-index: 6;
   border-top: 39px solid white;

}



medlem i 193 måneder
 

Returner til XHTML/HTML



Hvem er i Forumene

Registrerte brukere: Google [Bot]