Avatar billede aruchri Nybegynder
11. februar 2008 - 14:44 Der er 5 kommentarer

IE<>Firefox

Hej Eksperter
I IE ser mit design rigtigt ud, men i Firefox er der en "lille" ting der driller, nemlig at der ikke er den samme margin på hver side af ydreramme/indhold tags'ene. Er ikke sikker på hvor det går galt, men her er CSS'en:
@charset "utf-8";
/* CSS Document */

* {
    margin:0px;
    padding:0px;
}
body {
background:#7F878F none repeat scroll 0%;
color:#333333;
font-family:Arial,Helvetica,sans-serif Verdana,sans-serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:18px;
margin:auto;
text-align:center;
}
#page {
    background-color:#FF9933;
    margin:55px auto auto auto;
    padding:0px;
    width:750px;
    height:600px;
    text-align:center;

}
#top {
background:transparent url(../billeder/header.jpg) no-repeat scroll 0%;
height:110px;
width:750px;


}

#navi {
    font-size:12px;
    font-weight:bold;
    left:330px;
    margin:auto;
    padding:90px;
    width:650px;
    height: 37px;
}
#navi ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-left:0px;
padding-left:0px;
padding-right:0px;
padding-top:0px;
text-align:right;
}
#navi li {
display:inline;
margin:12px;
}
#navi li a {
color:#797549;
font-size:1.25em;
line-height:1em;
text-decoration:none;
}
#navi li a:hover {
color:#330000;
}
#ydreramme {
    background-color:#EDEBD6;
    font-size:14px;
    width:750px;
    border-color: #FFCC00;
    height:400px;
    padding-top:30px;
    margin-top:25px;
    text-align:center;
    position:inherit;
    left: auto;
    top: 155px;
   
}
#indhold {
    padding-top:15px;
    background-color:#787548;
    width:710px;
    height:300px;
    position:inherit;
   
   

   
}

#indhold p, h1, h2 {
margin-left:5px;
padding:10px;
text-align:left;
}
#profil {

height:170px;
margin-bottom:0px;
margin-left:0px;
margin-top:0px;
width:170px;
}

Sitet kan ses på: http://www.skanvision.com/forside.html

På venstre side af boksen mangler der et eller andet i Firefox. Hvad kan jeg gøre for at rette op på det?

På forhånd tak.
Avatar billede jokkejensen Novice
11. februar 2008 - 14:53 #1
#indhold {
    padding-top:15px;
    background-color:#787548;
    width:710px;
    height:300px;
    position:inherit;
margin: 0 auto; /* Denne centrere */
   
}
Avatar billede aruchri Nybegynder
11. februar 2008 - 15:11 #2
tak skal du ha' jokkejensen, det virkede. Men hvad gør din tilføjelse helt konkret, altså oversat til dansk? tak.
Avatar billede jokkejensen Novice
11. februar 2008 - 15:17 #3
det er fordi et div er et block element.

Du har altså et lille div (#normal) inde i #ydreramme, når man sætter margin til : 0 auto;

er det det samme som:

margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;

Og hvis margin mellem #normal og #ydreramme skal være ens (auto) vil #indhold ligge sig centreret.

Skal det udddybes yderligere må du sige til..

/JJ
Avatar billede aruchri Nybegynder
13. februar 2008 - 09:44 #4
Mit næste problem er også IE-Firefox relateret. Som siden http://www.skanvision.com/niels.html# er nu vises også 2 meget forskellige layout i de to browsere, ingen af dem særlig attraktive. Hvordan får jeg den hvide baggrund bag teksten til at "følges" med teksten nedad?

@charset "utf-8";
/* CSS Document */

* {
    margin:0px;
    padding:0px;
}
body {
background:#7F878F none repeat scroll 0%;
color:#333333;
font-family:Arial,Helvetica,sans-serif Verdana,sans-serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:18px;
margin:auto;
text-align:center;
}
#page {
    background-color:#7F878F;
    margin:55px auto auto auto;
    padding:0px;
    width:750px;
    height:600px;
    text-align:center;
}
#top {
background:transparent url(../billeder/header.jpg) no-repeat scroll 0%;
height:110px;
width:750px;
}

#logo {
       
        padding-top:0px;
        padding-left:2px;
        height:110px;
        text-align:left;
       

}
#navi {
    font-size:12px;
   
    left:330px;
    margin-top:-120px;
    padding:90px;
    width:650px;
    height:37px;
    position:absolute;
}
#navi ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-left:0px;
padding-left:0px;
padding-right:0px;
padding-top:0px;
text-align:right;
}
#navi li {
display:inline;
margin:8px;
}
#navi li a {
    color:#797549;
    font-size:1.25em;
    line-height:1em;
    text-decoration:none;
}
#navi li a:hover {
    color:#797549;
    border-bottom-style: solid;
    border-bottom-color: #797549;
    border-bottom-width: 2px;
}

#ydreramme {
    background-color:#EDEBD6;
    font-size:14px;
    width:750px;
    border-color: #878e94;
    height:400px;
    padding-top:30px;
    margin-top:15px;
    text-align:center;
    position:inherit;
    left:auto;
        }
   
#indhold {
    padding-top:15px;
    background-color:#fff;
    width:720px;
    height:auto;
    position:inherit;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    /*margin: 0 auto;  Denne centrere p samme mde som ovenstende */
   
}   

#ydreramme-forside {
    background-color:#EDEBD6;
    font-size:14px;
    width:750px;
    border-color: #FFCC00;
    height:400px;
    padding-top:30px;
    margin-top:25px;
    text-align:center;
    position:inherit;
    left: auto;
    top: 155px;
   
}
#indhold-forside {
    padding-top:15px;
    background-color:#787549;
    width:720px;
    height:300px;
    position:inherit;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    /*margin: 0 auto;  Denne centrere p samme mde som ovenstende */
   

   
}

#indhold p, h1, h2 {
margin-left:5px;
padding:10px;
text-align:left;
}
#citat{
    float:left;
    padding-left:10px;
    height:170px;
    margin-bottom:0px;
    margin-left:0px;
    margin-top:0px;
    width:170px;
    color:#EDEBD5;
   
}

#citat2{
    float:right;
    padding-right:20px;
    height:170px;
    margin-bottom:0px;
    margin-left:0px;
    margin-top:225px;
    width:150px;
    color:#EDEBD5;
}

#logo-stor{

position:absolute; width:288px; height:175px; top: 278px; left: 489px;
   
    }
   
    #profilbillede{
    float:left;
    padding-left:10px;
    height:170px;
    margin-bottom:0px;
    margin-left:0px;
    margin-top:0px;
    width:170px;
    color:#EDEBD5;
   
}

#profiltekst{
    float:right;
    padding-left:10px;
    height:auto;
    margin-bottom:0px;
    margin-left:0px;
    margin-top:0px;
    width:470px;
    color:#EDEBD5;


}

#profiltekst p {color:#787549;

}
Avatar billede jokkejensen Novice
13. februar 2008 - 09:54 #5
Du har sat en fast højde på #ydreramme, hvis indholdet bliver højere vil det selvølgeligt ligge sig uden på. Brug min-height: hvis du vil sætte en minimums højde.

Du bliver nød til at oprette et spørmål pr problem, ellers kan dine spørgsmål aldrig lukkes.

/JJ
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