Avatar billede hkb-x Nybegynder
15. oktober 2007 - 15:11 Der er 7 kommentarer og
1 løsning

<h1> f**kup i IE med store skriftstørrelser

Jeg sider lige og leger lidt med designet til en ny hjemmeside jeg laver...

http://www.hkb.it/InTune/


Overskriften på hver side er et <h1> tag med følgende style:

h1 {

    font-family: Verdana, sans-serif;

    font-weight: bold;

    font-style: normal;

    font-size: 120px;

}


Hvis man ser siden i Firefox eller Opera så er det helt fint men går man over i Internet Explorer så bliver halvdelen af fonten hugget af... Hvordan undgår jeg det?
Avatar billede sw_red_6 Nybegynder
15. oktober 2007 - 15:17 #1
hmm det kan være IE ikke kan finde ud af line-height automatisk og derfor skærer af..
Avatar billede hkb-x Nybegynder
15. oktober 2007 - 15:32 #2
danke... havde helt gemt hvor meget det bras skal hjælpes... kast svar for point...
Avatar billede sw_red_6 Nybegynder
15. oktober 2007 - 16:09 #3
var det fejlen? hmm
Avatar billede sw_red_6 Nybegynder
15. oktober 2007 - 16:10 #4
og du får også lige et svar
Avatar billede olebole Juniormester
15. oktober 2007 - 16:41 #5
<ole>

"havde helt gemt hvor meget det bras skal hjælpes" >> Taler vi her om browseren eller koderen?  ;o)

Det er med garanti ikke den manglende line-height, der var skyld i fejlen. Med denne kode kan jeg i hvertfald ikke få IE til at kappe noget somhelst  :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
h1 {
    font-family: Verdana, sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 120px;
    background: yellow;
}

</style>
</head>
<body>

<h1>Blablabla</h1>

</body>
</html>

/mvh
</bole>
Avatar billede olebole Juniormester
15. oktober 2007 - 16:42 #6
PS: første linje var en venlig ment joke  ;o)
Avatar billede hkb-x Nybegynder
15. oktober 2007 - 16:59 #7
Det var line-height der gav problemer...

Områdedet med brødteksten (og <h1>) har line-height: 1.5em; men det havde <h1> ikke og det fik IE til at fucke up... Så snart <h1> fik tilføjet line-height: 1.5em; så fungerede det helt perfekt...


@olebole
Jeg mente IE ;)
Men prøv enten at kaste line-height: 1.5em; ind i body eller kast en <div> med line-height: 1.5em; rundt om <h1> så cutter den...
Avatar billede olebole Juniormester
15. oktober 2007 - 17:34 #8
Ja, naturligvis! Den arver jo fra sit parent element ;o)

Fejlen var ikke IE's. Fejlen var, at du selv havde sat line-height på h1-elementet ved at sætte den property på det omkransende element. Prøv denne kode i IE, FF og Opera:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
h1 {
    font-family: Verdana, sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 120px;
    background: yellow;
}

</style>
</head>
<body>

<div style="line-height:1.5em">
    <h1>Blablabla</h1>
</div>

</body>
</html>

- så bliver din fejl en del tydeligere  ;o)
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