Avatar billede fusentasten Nybegynder
24. marts 2006 - 10:20 Der er 10 kommentarer og
1 løsning

Hvorfor kommer den padding rundt om mine giffer i Firefox?

Hej eksperter.

Jeg vil helst være fri for den røde "luft" over og under min top.gif og bund.gif. Gifferne er kun 5 px høje, men alligevel kommer der luft over og under dem i Forefox. Hvorfor?


<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<head>
    <title>Velkommen</title>

  <style type="text/css">
  body {
      background-color : #3e647e;
    text-align : center;
    margin : 30px 0;
  }
 
  #site-wrapper {
    margin : 0px auto;
    width : 629px;
    text-align : left;
    background-color : #fff;
    padding : 0 0 0 0;
  }
  #top, #bund {
      margin : auto;
    background-color : red;
  }
  img {
      padding : 0px;
    margin : 0px;
  }
 
  #content {
      margin : 20px 40px 0px ;
  }
  h1 {
      font-family : georgia, "times new roman", times, serif;
    font-weight : normal;
  }
 
  p {
      font-family : verdana,arial,helvetica,sans-serif;
    font-size : 80%;
  }
 
</style>

</head>
<body>

<div id="site-wrapper">
    <div id="top"><img src="ill/top.gif" width="629" height="5" alt="" /></div>
   
    <div id="content">
        <h1>Velkommen til min hjemmeside</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere, velit nec posuere porttitor, tellus nunc tincidunt nulla, ut luctus lorem est eu erat. Curabitur fringilla fringilla elit. Pellentesque commodo sodales neque. Integer in est quis lorem porta cursus. Nunc at quam. Proin eu enim. Praesent euismod tristique dolor. Sed eu orci. Duis iaculis risus id lectus. Vestibulum id sem. Nulla dignissim, nibh at faucibus feugiat, mi tellus ullamcorper tellus, eu euismod lorem mi eu risus. Nam pellentesque magna quis augue. </p>
        <p>Nam neque velit, viverra at, pellentesque et, posuere et, arcu. Etiam condimentum vulputate neque. Etiam dapibus. Aliquam erat volutpat. In euismod, neque a luctus sodales, turpis libero pharetra arcu, vel cursus quam justo a justo. Quisque fringilla, pede ut mollis faucibus, lorem nisi faucibus tellus, in bibendum mi massa vitae nulla. Curabitur rhoncus nisl ac mauris. Vivamus enim est, porta eget, imperdiet quis, imperdiet quis, mauris. Phasellus nec dolor sit amet pede porta scelerisque. Vestibulum dapibus convallis elit. Mauris velit ligula, imperdiet quis, cursus pharetra, auctor in, nunc. Etiam congue arcu vitae nisi. Praesent augue. Aenean felis purus, ornare ac, placerat in, semper at, dui. Mauris ac eros sed felis elementum sollicitudin. </p>
    </div>
   
    <div id="bund">
        <img src="ill/bund.gif" width="629" height="5" alt="" border="0" />
    </div>
</div>


</body>
</html>
Avatar billede notes2c Nybegynder
24. marts 2006 - 10:56 #1
sæt din font size og line height

#top, #bund {
margin : auto;
background-color : red;
font-size: 0;
line-height:0;
}
Avatar billede fusentasten Nybegynder
24. marts 2006 - 11:01 #2
but why? Firesucks!
Tak for hjælpen
Avatar billede notes2c Nybegynder
24. marts 2006 - 11:08 #3
tja... Synes nu det er meget validt... Du fortæller jo at du vil have et element som ikke fylder noget i højden, således at ex mellemrum ikke fylder noget og det er der jo i bunden bl.a.. Og synes iøvrig at IE er endnu være en FF med den slags...
Avatar billede fusentasten Nybegynder
24. marts 2006 - 11:10 #4
mja, du har sikkert ret. Det ville være dejligt, hvis de to opfattede tingene helt ens... Og IE stinker på en lang række områder.

Men et element burde pr definition ikke fylde noget i højden. Det er mere logisk at gå ud fra nul frem for "et par pixels" som default. :-)
Avatar billede notes2c Nybegynder
24. marts 2006 - 11:44 #5
Men når man skriver sin html sådan:
    <div id="bund">
        <img src="ill/bund.gif" width="629" height="5" alt="" border="0" />
    </div>

Så fylder den noget (her er CR LF Space og endda TAB), så i ovenstående ex bliver det fortolket som to mellemrum... Derfor fylder den noget... Men er ellers enig i at et tomt element ikke (burde) fylder noget med mindre man giver det en højde eller brede....
Avatar billede fusentasten Nybegynder
24. marts 2006 - 11:53 #6
jeg prøvede også at skrive det hele på én linie. Lige lidt hjalp det. Så skrev jeg det lidt pænt for at eksperterne herinde kunne danne sig et hurtigt overblik:

Denne kode giver samme resultat:
<div id="site-wrapper"><div id="top"><img src="ill/top.gif" width="629" height="5" alt="" /></div><div id="content"><h1>Velkommen til min hjemmeside</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere, velit nec posuere porttitor, tellus nunc tincidunt nulla, ut luctus lorem est eu erat. Curabitur fringilla fringilla elit. Pellentesque commodo sodales neque. Integer in est quis lorem porta cursus. Nunc at quam. Proin eu enim. Praesent euismod tristique dolor. Sed eu orci. Duis iaculis risus id lectus. Vestibulum id sem. Nulla dignissim, nibh at faucibus feugiat, mi tellus ullamcorper tellus, eu euismod lorem mi eu risus. Nam pellentesque magna quis augue. </p>
<p>Nam neque velit, viverra at, pellentesque et, posuere et, arcu. Etiam condimentum vulputate neque. Etiam dapibus. Aliquam erat volutpat. In euismod, neque a luctus sodales, turpis libero pharetra arcu, vel cursus quam justo a justo. Quisque fringilla, pede ut mollis faucibus, lorem nisi faucibus tellus, in bibendum mi massa vitae nulla. Curabitur rhoncus nisl ac mauris. Vivamus enim est, porta eget, imperdiet quis, imperdiet quis, mauris. Phasellus nec dolor sit amet pede porta scelerisque. Vestibulum dapibus convallis elit. Mauris velit ligula, imperdiet quis, cursus pharetra, auctor in, nunc. Etiam congue arcu vitae nisi. Praesent augue. Aenean felis purus, ornare ac, placerat in, semper at, dui. Mauris ac eros sed felis elementum sollicitudin. </p>
</div><div id="bund"><img src="ill/bund.gif" width="629" height="5" alt="" border="0" /></div></div>
Avatar billede notes2c Nybegynder
24. marts 2006 - 12:43 #7
Beklager jeg lige overså dette fra starten. Men det skyldes du har en invalid doctype, hvilket gør at IE går i quirkmod hvilker FF ikke gør. Derfor er der forskel.

Hvisdu derimod bruger en standard doctype så virker de som jeg har skrevet ovenfor:

Eks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>
<head>
    <title>Velkommen</title>

  <style type="text/css">
  body {
      background-color : #3e647e;
    text-align : center;
    margin : 30px 0;
  }

  #site-wrapper {
    margin : 0px auto;
    width : 629px;
    text-align : left;
    background-color : #fff;
    padding : 0 0 0 0;
  }
#top, #bund {
    margin : auto;
    background-color : red;
}
  img {
      padding : 0px;
    margin : 0px;
  }

  #content {
      margin : 20px 40px 0px ;
  }
  h1 {
      font-family : georgia, "times new roman", times, serif;
    font-weight : normal;
  }

  p {
      font-family : verdana,arial,helvetica,sans-serif;
    font-size : 80%;
  }

</style>

</head>
<body>

<div id="site-wrapper">
    <div id="top"><!-- img src="ill/top.gif" width="629" height="5" alt="" border="0"/ --><img src="Billeder\Bjergtoppe.jpg" alt="" width="629" height="5" border="0" /></div>
 
    <div id="content">
        <h1>Velkommen til min hjemmeside</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere, velit nec posuere porttitor, tellus nunc tincidunt nulla, ut luctus lorem est eu erat. Curabitur fringilla fringilla elit. Pellentesque commodo sodales neque. Integer in est quis lorem porta cursus. Nunc at quam. Proin eu enim. Praesent euismod tristique dolor. Sed eu orci. Duis iaculis risus id lectus. Vestibulum id sem. Nulla dignissim, nibh at faucibus feugiat, mi tellus ullamcorper tellus, eu euismod lorem mi eu risus. Nam pellentesque magna quis augue. </p>
        <p>Nam neque velit, viverra at, pellentesque et, posuere et, arcu. Etiam condimentum vulputate neque. Etiam dapibus. Aliquam erat volutpat. In euismod, neque a luctus sodales, turpis libero pharetra arcu, vel cursus quam justo a justo. Quisque fringilla, pede ut mollis faucibus, lorem nisi faucibus tellus, in bibendum mi massa vitae nulla. Curabitur rhoncus nisl ac mauris. Vivamus enim est, porta eget, imperdiet quis, imperdiet quis, mauris. Phasellus nec dolor sit amet pede porta scelerisque. Vestibulum dapibus convallis elit. Mauris velit ligula, imperdiet quis, cursus pharetra, auctor in, nunc. Etiam congue arcu vitae nisi. Praesent augue. Aenean felis purus, ornare ac, placerat in, semper at, dui. Mauris ac eros sed felis elementum sollicitudin. </p>
    </div>
 
        <!-- img src="ill/bund.gif" width="629" height="5" alt="" border="1" / -->
    <div id="bund"><img src="Billeder\Bjergtoppe.jpg" alt="" width="629" height="5" border="0" /></div>
</div>


</body>
</html>
Avatar billede notes2c Nybegynder
24. marts 2006 - 12:47 #8
Husk lige at rette billede referencerne hvis du afprøver ex....
Avatar billede fusentasten Nybegynder
24. marts 2006 - 12:51 #9
ok. Det har jeg gjort. Det virker bare stadig ikke :-(
Den er stadig rød over og under top og bund giferne

Men jeg havde nu nok på fornemmelsen at, at det var noget med doctype...
Avatar billede notes2c Nybegynder
24. marts 2006 - 13:04 #10
Det kan jeg godt se... XHTML fortolkes dårligt i IE

Prøv med standard her burde det virke men hjælper ikke dit design:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Så er der kun vores workaround tilbage....
Avatar billede fusentasten Nybegynder
24. marts 2006 - 13:22 #11
nu virker det. Men nu er det bare ikke strict mere :-(
Tak for hjælpen :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester