Avatar billede mccookie Seniormester
06. januar 2005 - 15:18 Der er 19 kommentarer og
1 løsning

CSS og margin

Hejsa

Jeg har lidt problemer med en side når jeg kigger henholdsvis i mozilla og *IE

Min plan var at der skulle være 5px i margin rundt om de farvede bokse.

Nogen der kan hjælpe med en kompetent og kompatibel løsning som virker i begge browsere.

mvh.
Henning
Avatar billede basementjack Nybegynder
06. januar 2005 - 15:55 #1
Kode?
Link?
Noget? :)
Avatar billede knudgert Nybegynder
06. januar 2005 - 16:09 #2
Brug en doctype, der sætter IE i standard mode, f.eks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
allerøverst på siden uden noget over.

Ellers vil et link til siden absolut være en god ide, som tidl. foreslået.
Avatar billede basementjack Nybegynder
06. januar 2005 - 16:49 #3
Jeg går ud fra det måske er den side jeg har hjulpet med før..

http://www.strandboerne.dk/newdesign/

Men du kan gøre så IE og Mozilla ikke ser helt det samme CSS
I det nedenstående ser IE kun style.css og mozilla ser både style og anitIE.
    <style type="text/css">
        @import url( style.css );
        @import url(antiIE.css) screen;
    </style>
Tricket er at overskrive værdierne i antiIE, i dette tilfælde din margin.
Avatar billede mccookie Seniormester
06. januar 2005 - 16:52 #4
basementjack>> Det lyder som du har fat i noget...... du må lige forklare dig nærmere ;)
Avatar billede mccookie Seniormester
06. januar 2005 - 16:53 #5
og ja undskyld det drejer sig den af basementjack henviste side...
Avatar billede basementjack Nybegynder
06. januar 2005 - 17:11 #6
Jeg har forsøgt at få det til at ligne hinanden..

html____________________________________________________
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <style type="text/css">
        @import url( style/style.css );
        @import url( style/anti.css ) screen;
    </style>
<title>..::KFUM-spejderne på Københavns Vestegn - Strandboernes gruppe::..</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

    <div class="main">
        <div id="toplogo">
          <!-- Toplogo indsættes som baggrund i et div tag og centreres via main -->
        </div> <!-- Toplogo afsluttes -->
      <h1>
          Velkommen her på siden...
          </h1>
               
          <div id="left">
            <div id="left_down">
                volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium
            </div>
                <div id="spacer"> </div>
            <div id="left_down">
              volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium
            </div>
          </div>
       
          <div id="right">
            <div id="right_down">
                volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium
            </div>
                <div id="spacer"> </div>
            <div id="right_down">
              volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium
            </div>
          </div>
       
          <div id="middle">
            <div id="billede"><img src="http://www.strandboerne.dk/newdesign/main_pic/spejder1.gif" alt="KFUM-spejderne" /> </div>volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,  volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas,    volgus rectum videt,  est ubi peccat. Si veteres ita miratur laudatque  poetas, 
          </div>
             
    </div> <!-- Main afsluttes -->

    <div class="bottom">

      <p>
      <a href="http://validator.w3.org/check?uri=referer"><img
          src="http://www.w3.org/Icons/valid-xhtml10"
          alt="Valid XHTML 1.0!" height="31" width="88" /></a>
 
        <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.strandboerne.dk/newdesign"><img
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Valid CSS!" height="31px" width="88px" />
        </a>
      </p>
    </div> <!-- Bottom afsluttes -->

</body>

</html>

style___________________________________________________
body {
    background-color: #003333;
    background-repeat: repeat;
    padding-top: 20px;
        }
div.main {
        width: 750px;
        background:white;
        border: 3px solid black;
        background-image:url(http://www.strandboerne.dk/newdesign/main_pic/baggrund.jpg);
        background-position: 0px 120px;
        background-repeat:no-repeat;
        margin: 0 auto;
        display: table;
        }
             
div.bottom {
        position: relative;
        top: 10px;
        width: 750px;
        background: white;
        border: 3px solid black;
        margin: 0 auto;
        text-align: center;
        }

h1 {
    padding-left: 3px;
    font: bold 14px verdana, sans-serif;
    text-align: left;
    }
     
p {
    padding-left: 5px;
    font: 12px verdana, sans-serif;
    text-align: left;
    }
     
img {
    border: 0;
    }
 
#toplogo {
    width: 700px;
    height: 120px;
    background-image:url(http://www.strandboerne.dk/newdesign/main_pic/toplogo.jpg);
    background-repeat:no-repeat;
    margin: 0 auto;
    background-position: 0 10px;
    }

#billede
{
    float:right;
}

#left
{
  float: left;
  width: 150px;
  padding: 0px;
  margin: 0px 0px 0px 3px;
}

#left_down
{
  width: 100%;
  background-color: green;
  border: 3px solid black;
  padding: 0px;
  margin: 0px;
}

#middle
{
  background-color: blue;
  float:left;
  border: 3px solid black;
  margin: 0px 3px 3px 3px;
  padding: 0px 0px 0px 0px;
  display: table;
}

#right
{
  width: 150px;
  float: right;
  margin: 0px 3px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#right_down
{
  width: 100%;
  background-color: red;
  border: 3px solid black;
  padding: 0px;
  margin: 0px;
}

#spacer
{
    height:3px;
    width:1px;
    line-height:3px;
}

anti____________________________________________
#left
{
  padding: 0px 0px 0px 0px;
  margin: 0px 5px 5px 5px;
}
#middle
{
  margin: 0px 5px 5px 5px;
  padding: 0px 0px 0px 0px;
}
#right
{
  margin: 0px 10px 0px 0px;
  padding: 0px 0px 0px 0px;
}
#spacer
{
    height:5px;
    width:1px;
}
Avatar billede mccookie Seniormester
07. januar 2005 - 00:39 #7
Basementjack vil du forklarer dit import trick hvordan det sådan lige virker og sådan....
Avatar billede basementjack Nybegynder
07. januar 2005 - 19:43 #8
Denne vil både IE og Mozilla se:
        @import url( style/style.css );
Denne vil kun Mozilla se:
        @import url( style/anti.css ) screen;
        IE kan nemlig ikke forstå det hvis der er tilføjet en attribute somfortæller hvor stylen skal bruges.

Så kan man så i anti.css overskrive de værdier som er forskellige i hhv. IE og Mozilla browsere.
Ok?
Avatar billede mccookie Seniormester
08. januar 2005 - 23:08 #9
det virker ikke!!!
Avatar billede basementjack Nybegynder
09. januar 2005 - 00:11 #10
Det virker her hos mig.. Har du uploadet det til http://www.strandboerne.dk/newdesign/ ,  synz nemlig ikke det jeg har lavet er der.. :)
Avatar billede mccookie Seniormester
12. januar 2005 - 17:53 #11
Hej basementjack>>

Jeg havde åbenbart ikke fået lagt det rigtig på serveren.
Nu skulle det være ok.... men syntes at skriftstørrelsen er forskellig
Avatar billede mccookie Seniormester
12. januar 2005 - 17:55 #12
Det er i IE der er problemer
Avatar billede basementjack Nybegynder
12. januar 2005 - 17:57 #13
i min IE og min FF ser http://www.strandboerne.dk/newdesign/ ellers meget ens ud... Kan du være mere præcis?
Avatar billede basementjack Nybegynder
12. januar 2005 - 17:57 #14
hov så ikke begge kommentare.. :)
Avatar billede basementjack Nybegynder
12. januar 2005 - 17:59 #15
Ehm.. Synz da også de ser lige store ud..?
Avatar billede mccookie Seniormester
12. januar 2005 - 22:52 #16
Hvordan får jeg padding på teksten??
Avatar billede basementjack Nybegynder
12. januar 2005 - 22:56 #17
Jeg ville jo nok starte med at sætte din tekst ind i p-tags. <p>....</p>
Hvis det ikke giver den padding du vil have, kan du ændre det i CSS med p {padding:value unit;}.
Avatar billede mccookie Seniormester
12. januar 2005 - 23:04 #18
;o)
Avatar billede mccookie Seniormester
12. januar 2005 - 23:05 #19
Gider du smide et svar? Jeg har givet lidt karma....
Avatar billede basementjack Nybegynder
12. januar 2005 - 23:06 #20
Cool nok.. :D
Et stk svar.
Går ud af at det var det du var ude efter?..
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