Avatar billede nanni Nybegynder
25. september 2006 - 22:12 Der er 7 kommentarer

CSS ser underligt ud i alle windows baserede browsere

Hej

Jeg har siddet og bygget en side op, og tjekket den løbende i Firefox på Mac og alt ser fint ud. Så ville jeg tjekke den i Internet Explorer og andre browsere i Windows, og så var den gal. Ifølge W3 så er min CSS helt i orden, og jeg kan heller ikke selv forstå hvad problemet er. For det første er det som om at IE ikke helt kan forstå at jeg vil ha arial som font + at den skal være bold nogle steder. For det andet laver den rod i min menulinje (den grå linie). Denne skulle være 20 px høj, og jeg bruger padding til at placere teksten i midten, men så er det at IE bare laver menulinjen højere.

Min CSS kode:

a:link {
    color: #F2A000;
    text-decoration: none;
}
a:visited {
    color: #F2A000;
    text-decoration: none;
}
a:active {
    color: #F2A000;
    text-decoration: none;
}
a:hover {
    color: #F2A000;
    text-decoration: none;
}

.maintable {
    background-color: #FFFFFF;
    border: 5px solid white;
    }
       
.bg {
    background-color: #8D8D8D;
}
.header {
    background-image: url(images/header.jpg);
    background-repeat: no-repeat;
}
.content {
    border-right: 5px solid white;
    border-top: 5px solid white;
    }
.content_right {
    border-top: 5px solid white;
}

.menu {
    background-color: #5B5B5B;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: bold;
    color: #FFFFFF;
    font-variant: normal;
    padding: 5px 0px 0px 25px;
}
.news {
    background-color: #F2A000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: bold;
    color: #FFFFFF;
    font-variant: normal;
    padding: 5px 0px 0px 5px;
}
.catchline {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 22px;
    font-style: normal;
    line-height: 26px;
    font-weight: normal;
    font-variant: normal;
    color: #000000;
    padding: 25px 0px 0px 25px;
}
.content_text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
    line-height: 16px;
    color: #000000;
    font-variant: normal;
    padding: 25px 25px 0px 25px;
}
.headlines {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: bold;
    color: #F2A000;
    font-variant: normal;
    }
.news_content {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
    line-height: 12px;
    color: #000000;
    font-variant: normal;
    padding: 10px 5px 15px 5px;
}
.newsmail {
    background-color: #5B5B5B;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: bold;
    color: #FFFFFF;
    font-variant: normal;
    padding: 5px 0px 0px 5px;
}

.newsmail_content {
    padding: 15px 5px 15px 5px;
}
.contact {
    background-color: #5B5B5B;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    color: #FFFFFF;
    font-variant: normal;
    padding: 5px 0px 0px 5px;
    font-weight: bold;
}
.contact_content {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
    line-height: 16px;
    color: #000000;
    font-variant: normal;
    padding: 15px 5px 15px 5px;
}

.footer {
    background-color: #FFFFFF;
}
Avatar billede nanni Nybegynder
25. september 2006 - 22:13 #1
Og så glemte jeg lige et link til siden

http://www.nannioxboll.dk/cimweb

:)
Avatar billede nanni Nybegynder
25. september 2006 - 22:14 #2
Det går aldeles ikke godt i aften

Linket er forkert, det er:

http://www.nannioxboll.dk/webcim
Avatar billede roenving Novice
25. september 2006 - 23:59 #3
Et element bør ændre størrelse, hvis det får tilført ekstra størrelse !-)

-- og ifølge definitionen af css er også padding ekstra størrelse, så f.eks. beregningen af den viste totalhøjde af et element bør være:

margin-top + border-top-width + padding-top + element-højde + padding-bottom + border-bottom-width + margin-bottom !o]
Avatar billede nanni Nybegynder
26. september 2006 - 08:54 #4
så du mener at hvis jeg ligger 5px adding til i toppen så skal jeg trække det fra højden på elementet i html koden?

Hvis det er det du mener dur det jo bare ikke, for så vil elementet se underligt ud i de browsere hvor det ligenu ser fint ud.

Og hvad med fonten, det er det jeg synes er mest underligt.
Avatar billede roenving Novice
26. september 2006 - 12:12 #5
Jamen det skulle gælde _alle_ browsere, hvis du sætter dem til at overholde css-rekommendationerne (og det gør du jo med den fuldt kvalificerede doctype i starten !-)
Avatar billede nanni Nybegynder
26. september 2006 - 13:47 #6
Fandt en løsning på problemet så det så ens ud i alle browsere. Satte et div tag ind alle steder jeg brugte padding, og skiftede padding ud med margin på disse div tags, så virker det!
Avatar billede olebole Juniormester
27. september 2006 - 10:27 #7
<ole>

Prøv at lytte efter roenving i stedet. Så gør du tingene ordentligt - og undgår unødigt arbejde og ubehagelige overraskelser på sigt  ;o)

/mvh
</bole>
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