/ Forside/ Teknologi / Internet / Browser / Spørgsmål
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Browser
#NavnPoint
Klaudi 20366
molokyle 12124
o.v.n. 8114
miritdk 4839
stl_s 3840
refi 3598
dk 2598
arlet 2470
tedd 2383
10  webnoob 2075
Hvorfor skaber den sig i Firef
Fra : Reset
Vist : 705 gange
100 point
Dato : 07-07-08 19:53

Jeg har fundet en template, som jeg godt kunne tænke mig at bruge. Jeg har prøvet at teste den hos W3C, og de godkender den.
Imidlertid, fucker siden i Firefox, men ikke i IE. Hvis der er nogen der har mulighed for at have begge browsere åbne samtidig, så prøv at skifte fra den ene til den anden, og se hvilken forskel der er. Templaten findes her: http://www.oswd.org/design/preview/id/2139
Og der er 500 p. til den der først løser gåden.

 
 
Kommentar
Fra : molokyle


Dato : 07-07-08 21:03

Øehh.... hvor finder vi stylesheet'et: antwhite_journal2.css ???

Har du valideret CSS koden separat hér: http://jigsaw.w3.org/css-validator/

???

Uden at se koden ka' vi ik' hjælpe dig videre. Det må bli' det rene gætværk:

Koden er uden tvivl skrevet specifikt for IE. Selv i 'moderne' browsere er det stadig nødvendigt at tage visse forbehold. Selv benytter jeg IE-betingede kommentarer til dette. Her et eksempel fra min egen hjemmeside:
Kode
<link rel="stylesheet" type="text/css" media="all" href="/css/black_layout.css" />
<!--[if IE]>
<meta http-equiv="page-exit" content="blendtrans(duration=3)" />
<![if lte IE 6]>
<link rel="stylesheet" type="text/css" media="all" href="/css/ie6.css" />
<![endif]>
<![if gt IE 6]>
<link rel="stylesheet" type="text/css" media="all" href="/css/ie7.css" />
<![endif]>
<![endif]-->


black_layout.css indeholder standard stylesheet'et

ie6.css indeholder specifik overstyring af de elementer som rederes forskelligt fra standarden af IE 6 og IE versioner med lavere versionsnummer.

ie7.css indeholder specifik overstyring af de elementer som rederes forskelligt fra standarden af IE 7

ALLE ovennævnte stylesheets validerer korrekt. Det har sådan set intet at gøre med om koden overholder standarden, men om BROWSEREN renderer 'standard' kode korrekt.

Der findes flere metoder til at løse ovennævnte problem på. Læs f.eks.:

http://www.positioniseverything.net/

</MOLOKYLE>

Kommentar
Fra : Reset


Dato : 07-07-08 21:19

Undskyld. Havde jeg ikke tænkt på. Men her kommer de så:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Antique White Journal 2</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="antwhite_journal2.css">
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" class="main">
   <tr>
      <td class="mainheader">Editorial Journal 2</td>
   </tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" class="submain">
   <tr>
      <td>
         <table width="75%" cellspacing="0" cellpadding="0" align="center">
            <tr>
               <td><a href="" class="nav">HOME</a>
               <a href="" class="nav">ABOUT US</a>
               <a href="" class="nav">CONTACT US</a>
               <a href="" class="nav">SERVICES</a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>
<h3 align="center" class="header">Lorem Ipsum Articles</h3>
<table width="96%" align="center">
   <tr valign=top>
      <td width="32%" class="contentleft">
      <span class="contenthead">Praesent porttitor</span><br> Sed ac quam in lorem pulvinar sodales.
      In pellentesque mi nec lorem. Donec id odio a augue tincidunt tempus. <br><br>
      <hr>
      <br>
      <span class="contenthead">Suspendisse potenti.</span><br>
      Nulla lectus neque, lobortis rhoncus, varius commodo, venenatis vitae, risus. Vivamus et
      lorem nec libero malesuada dapibus. Etiam turpis. Proin lacinia. Phasellus massa pede,
      ornare ac, ornare in, rutrum eget, lacus.
      Donec sem sapien, auctor sit amet, pharetra et, placerat id, metus. <br><br>
      <hr>
      <br>
      
      <span class="contenthead">Maecenas accumsan</span><br>
      lectus ut lacus. Duis pellentesque suscipit odio. Suspendisse sed velit. Vivamus in dui.
      Curabitur quis quam. In et nunc laoreet urna scelerisque
      <hr width="250" class="hr2"><br>
      <div class="signup">
      <div class="signuptxt">
      Signup For A Free Subscription
      </div><br>
      <div class="subscribe">
      Name <span class="subright"><input type="text" size="25"></span>
      </div>
      <div class="subscribe">
      Address <span class="subright2"><input type="text" size="25"></span>
      </div>
      <div class="subscribe">
      Email <span class="subright3"><input type="text" size="25"></span>
      </div><br>
         <input class="submit" type="submit">   
      <div class="signuptxt2">
      You will receive your new subscription within two weeks. If you do not receive a subscription or a notice of subscription, <a href="mailto:support@editorialjournal.com">email us</a>
      or call us at 1 800 555 1234.
      </div>
      </div>
      </td>
      <td width="32%" class="content">
      <span class="dropcaps">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit.
      Quisque consequat pretium tellus. Vestibulum eget urna bibendum orci laoreet vestibulum.
      Nulla in erat et mauris tristique pulvinar. Suspendisse hendrerit, turpis in vestibulum accumsan,
      dui purus commodo erat, et consequat libero leo at enim. Curabitur viverra, orci sit amet consequat
      gravida, enim dui ullamcorper purus, at pellentesque orci pede eu odio. Maecenas sem turpis,
      consequat sit amet, nonummy nec, sagittis et, magna. Integer sed metus sodales orci sagittis
      egestas.
      
      <p class="pullquote">
<span style="color:NavajoWhite;font-size:x-small;">LOREM ON IPSUM</span>
<br><br>
<span style="font-size:large;">"</span>
Nulla in erat et mauris tristique pulvinar.
<span style="font-size:large;">"</span>
</p>
      
      Sed sagittis odio eget erat egestas posuere. Proin tincidunt cursus ligula.
      Sed id erat vel lorem ultrices malesuada. Aenean ut est. Quisque dapibus suscipit sem. Sed rhoncus.
      Integer ultrices dolor sit amet neque. Pellentesque habitant morbi tristique senectus et netus et
      malesuada fames ac turpis egestas. Phasellus semper, nibh at imperdiet auctor, arcu massa cursus
      tortor, molestie porttitor wisi ipsum placerat ligula. Aliquam mi. In rutrum ultrices ipsum.
      </td>
      <td width="32%" class="contentright">
      <span class="dropcaps">D</span>onec sem sapien auctor sit amet, pharetra et, placerat id, metus.
      Maecenas accumsan lectus ut lacus. Duis pellentesque suscipit odio. Suspendisse sed velit. Vivamus
      in dui. Curabitur quis quam. In et nunc laoreet urna scelerisque tincidunt.
      
      <p class="pullquote2">
<span style="color:DarkSlateGray;font-size:x-small;">AMET SHOWS QUORUM</span>
<br><br>
<span style="font-size:large;">"</span>
In et nunc laoreet urna scelerisque tincidunt.
<span style="font-size:large;">"</span>
</p>
      
      Donec tortor sem, tempor   vitae, dignissim sit amet, porta sed, mi. Mauris laoreet mattis lacus. Phasellus imperdiet, felis
      vitae volutpat vulputate, nibh augue auctor nibh, sed tincidunt metus lacus at sapien. In hac habitasse
      platea dictumst. Fusce magna. Pellentesque habitant morbi tristique senectus et netus et malesuada
      fames ac turpis egestas. Pellentesque ultrices eros a nulla. Nam lacinia sodales mi. Sed lacinia
      augue quis ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent congue.
      Morbi rutrum. Praesent auctor adipiscing nunc. Etiam ultrices feugiat leo. In scelerisque
      ligula sit amet enim. Mauris sed orci. Donec luctus wisi ac metus. Quisque tempus. Phasellus
      quis quam sed lorem ullamcorper semper.Pellentesque vel sapien.
      </td>
   </tr>
</table>
<br><br><br>
<table width="100%" align=center border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td>
         <table width="75%" cellspacing="0" cellpadding="0" align="center">
            <tr>
               <td align="center"><a href="" class="footernav">HOME</a>
               <a href="" class="footernav">ABOUT US</a>
               <a href="" class="footernav">CONTACT US</a>
               <a href="" class="footernav">SERVICES</a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>
</body>
</html>







body {
            margin: 0;
            background-color:AntiqueWhite;
         }
         table.main {
            width: 100%;
            height: 10%;
            background-color: #FFFACD;
            /*border-bottom: 4px solid NavajoWhite;
            border-top: 4px solid NavajoWhite;*/
         }
         table.submain {
            width: 100%;
            background-color: NavajoWhite;
            border-top: 1px solid Silver;
            border-bottom: 1px solid Silver;
            height: 18px;
         }
         a.nav {
            text-align: center;
            width: 140px;
            height: 18px;
            text-decoration: none;
            font-family: "BankGothic Md BT";
            font-size: 16px;
            border-right: Silver;
            border-left: silver;
            color: #800000;
            font-weight: bold;
         }
         a.footernav {
            text-align: center;
            width: 100px;
            height: 10px;
            text-decoration: none;
            font-family: "BankGothic Md BT";
            font-size: 10px;
            color: DarkSlateGray;
            font-weight: bold;
         }
         a.nav:hover {background-color:#FFFACD;border:0;border-right:1px solid silver;border-left:1px solid silver;}
         a.footernav:hover {color:#800000;background-color: NavajoWhite;border:0;border:1px outset silver;}
         td.mainheader {font-family: "BankGothic Md BT";font-size: 26px;font-weight: bold;color: #800000;}
         td.content {
         padding-left:5px;padding-right:5px;font-family: "BankGothic Md BT";font-size:12px;color:DarkSlateGray;}
         }
         td.contentleft {
         padding-left:5px;padding-right:5px;font-family: "BankGothic Md BT";font-size:12px;color:DarkSlateGray;border-right:1px solid Silver}
         }
         td.contentright {
         padding-left:5px;padding-right:5px;font-family: "BankGothic Md BT";font-size:12px;color:DarkSlateGray;border-left:1px solid Silver}
         }
         span.contenthead{
         color:#800000;
         font-size:16px;
         }
         h3.header {
         color:NavajoWhite;
         font-family: "BankGothic Md BT";
         background-color:#800000;
         }
         .pullquote
{width: 145px;
background:#800000;
color:AntiqueWhite;
float: right;
border:1px solid maroon;
font-weight:bold;
line-height:140%;
padding:5px;
margin-top:10px;
margin-left:10px;
}
.pullquote2
{width: 145px;
background:NavajoWhite;
color:#800000;
float: right;
border:1px solid maroon;
font-weight:bold;
line-height:140%;
padding:5px;
margin-top:10px;
margin-left:10px;
}
.dropcaps {
   float: left;
   color: #800000;
   font-size: 100px;
   line-height: 70px;
   padding-top: 2px;
   font-family: "BankGothic Md BT";
   background-color: NavajoWhite;
   border: thin outset #800000;
}
hr.myhr {
   color:#800000;
   size:15px;
}

div.signup {
   background-color:NavajoWhite;
   color:#800000;
   border:2px solid DarkSlateGray;
   width:100%;
   height:200px;
}
div.signuptxt {
   text-align:center;
   font-weight:bold;
   font-size:11px;
   position:relative;
   top:5px;
}
div.signuptxt2 {
   text-align:left;
   font-size:11px;
   color:DarkSlateGray;
   position:relative;
   top:25px;
   left:5px;
   padding-right:3px;
}
div.signuptxt2 a {
   color:#800000;
   text-decoration:none;
}

div.signuptxt2 a:hover {
   background-color:AntiqueWhite;
   color:DarkSlateGray;
   border:1px solid #800000;
}

div.subscribe {
   text-align:left;
   font-size:11px;
   position:relative;
   top:11px;
   left:5px;
}
input {
   font-size:10px;
   color:DarkSlateGray;
   height:17px;
}
span.subright {
   position:relative;
   top:2px;
   left:45px;
   margin-bottom:5px;
}
span.subright2 {
   position:relative;
   left:25px;
   top:4px;
}
span.subright3 {
   position:relative;
   top:6px;
   left:45px;
   margin-bottom:5px;
}
hr.hr2 {
   color:#800000;
}
input.submit {
position:relative;
top:7px;
left:87px;
}

Accepteret svar
Fra : molokyle

Modtaget 100 point
Dato : 07-07-08 21:59

Wild gues ...again:

I containerne table.main og table.submain sættes: width: 100%;

..man kan spørge sig selv ...100% af hvad?

..af det overordnede element selvfølgelig ...som er body. Hvor stor er body?

Prøv evt. at fjerne ALLE default marginer og paddings og sæt body til 100%:
Kode
* {margin:0;padding:0;}
html, body {width:100%;height:100%;}


Jeg ville nu tænke mig om 2 gange inden jeg brugte et 'færdigt' CSS layout, som ikke er crossbrowser kompatibelt og ydermere er et stort misk-mask af HTML relateret layout og CSS layout. Det kan vist kun give hovedbrud i al fremtid

At layoute med HTML elementer (..i dette tilfælde; <table> ..</table>) spolerer ligesom hele ideen med CSS. Husk:

HTML handler om opmærkning af indhold (Tekst, billeder og andre objekter)

CSS handler om præsentation (Position og dimension)

</MOLOKYLE>

Godkendelse af svar
Fra : Reset


Dato : 14-07-08 06:43

Tak for svaret molokyle. Ikke, at det hjalp mig ret meget. Men du skal have point, da du altid stiller din viden til rådighed.

Du har følgende muligheder
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.

Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
Søg
Reklame
Statistik
Spørgsmål : 177579
Tips : 31968
Nyheder : 719565
Indlæg : 6409073
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste