Avatar billede alexanderan Nybegynder
01. juli 2010 - 07:32 Der er 6 kommentarer og
1 løsning

CSS gør noget temmelig uventet i Firefox (men virker i IE)

Jeg sidder og er ved at lægge sidste hånd på et sidedesign til mit band, får finrettet de sidste småting og skal nu til at lege med menuens udseende.

Min sides opbygning er sådan her:

logo og titel
menubar
indholdsbox
copyright/kontaktbox

Tag et kig på hpb.dk/soc11ny

Jeg skal til at lave en tynd border i bunden af menubaren da følgende indtræffer lige efter jeg har trykket F5:
Der sker det at i Firefox begynder padding pludselig ikke at virke, den ignorerer det bare.
Indholdsboxen flyver 140 pixels op, ganske uprovokeret.

Det hele virker perfekt i IE, har ikke testet de andre browsere.

Her kommer den CSS jeg benytter (Jeg ved godt at noget af koden kan sammentrækkes, men det er ikke det væsentlige):

#menu{
    width : 999px;
    min-height : 150px;
    height : 45px;
    position : relative;
    background : url(F.gif);
    background-repeat : repeat-y;
    border-right : solid 1px;
    border-right-color : #194D99;
    border-left : solid 1px;
    border-left-color : #194D99;
        border-bottom : solid 1px;
        border-bottom-color : #194D99;
}

#menu_tekst{
    text-align : center;
    padding-top : 12px;
}

#indhold{
    width : 999px;
    min-height : 450px;
    height : 450px;
    position : relative;
    background-color : #EEEEEE;
    font-size : 16px;
    border-right : solid 1px;
    border-right-color : #194D99;
    border-left : solid 1px;
    border-left-color : #194d99;
    background-image : URL(../images/sloejfe.gif);
    background-position : center center;
    background-repeat : no-repeat;
}

Det hele virkede før jeg satte border i bunden af menuboxen.

Håber virkelig der er et klogt hoved der kan hjælpe mig med den her, for min hjerne har stået af.
Avatar billede keysersoze Guru
01. juli 2010 - 07:41 #1
din HTML, primært din doctype, har lige så stor indvirkning på hvordan din CSS virker som selve CSS'en har - så kom med mere kode eller bedst et link så vi kan se det hele i en sammenhæng.
Avatar billede alexanderan Nybegynder
01. juli 2010 - 07:51 #2
Har aldrig angivet doctype da det altid har voldet mig store problemer.
Siden virkede udemærket, men pludselig gik den amok.

Jeg fjerner lige min midlertidige løsning med min-height.

Men den kan ses her, værsågod

www.hpb.dk/soc11ny
Avatar billede alexanderan Nybegynder
01. juli 2010 - 08:25 #3
Fandt en løsning på problemet, det var attributten "float" der voldte skaden.

Ellers første gang at jeg nogensinde har haft problemer med den, håber det bare er en midlertidig bug.

Underetter lige Mozilla :)
Avatar billede keysersoze Guru
01. juli 2010 - 09:40 #4
Uden en DOCTYPE beder du bare om endnu flere problemer da det bla disabler store dele CSS og tvinger browseren i en tilstand ikke tiltænkt år 2010; http://www.web-dev.dk/post/DOCTYPE-og-valid-kode-ens-udseende-i-Internet-Explorer-og-FireFox.aspx

float skal bruges med omhu - oftest kræver den et element med clear: both; for at ophæve floatingen, som gør, at elementet sådan set ingenting fylder.
Avatar billede alexanderan Nybegynder
01. juli 2010 - 10:00 #5
Tak for linket, jeg vil kigge på det når jeg har fået mig lidt søvn :)
Avatar billede alexanderan Nybegynder
02. juli 2010 - 14:10 #6
Nu har jeg fået styr på designet :)

DOCTYPE hjalp en rigtig stor del, specielt med FF.

Og så lærte jeg om attributten height :)

Tak for hjælpen.
Avatar billede keysersoze Guru
02. juli 2010 - 14:30 #7
godt at høre :)
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

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