Avatar billede Slettet bruger
18. januar 2008 - 18:36 Der er 8 kommentarer og
1 løsning

CSS i ældre browsere

Hej.
Det evindeligt tilbagevendende problem:
Hvordan får jeg dette stylesheet til at virke i ældre Opera og Mozilla browsere?
CSS-siden validerer uden fejl i W3C...

Det er et design med en topbar, en bar herunder til topgrafikken af indholdsfelterne i centersektionen nedenfor, en centersektion med en højre side (menu) og en venstre side (indhold), derunder en bundbar og tilsidst (nederst) et link.
Problemet er, at bundbar'en og linket (de to sidste punkter) lægger sig grafisk lige under topbar og det felt umiddelbart herunder, altså før selve indholdet kommer,  indeholdet lægegr sig så ovenpå dette. Bundbar og link skulle selvfølgelig gerne komme efter al indhold og menu, altså efter højre- og venstre kolonne.
Det virker fint i IE7, IE6, Navigator 9, Opera 9 og Firefox 2, altså de nyere browsere. Det virker IKKE i feks. Opera 8.5 Navigator 8 m. fl.
Nogen der kan gennemskue hvorfor?
Mvh Jesper


Koden :

* {margin: 0; padding: 0;}

#container {width: 985px;
            margin: 10px auto;
}

#top {height: 144px;
background-image:url(../img/topgrafik_x.jpg);
}

#undertop {height: 30px;
background-image:url(../img/centertop_x.jpg);
}

#indhold{
background-image:url(../img/center_x.jpg);
}

#leftColumn {width: 263px;
padding-top:10px;
padding-bottom:15px;
margin-left:20px;
margin-right:0px;
float: left;
}

#rightColumn {width: 675px;
padding-top:15px;
padding-bottom:15px;
margin-left:0px;
margin-right:25px;
float: right;
}

#clear {clear: both;
}

#bundbar {height: 36px;
background-image:url(../img/centerbottom_x.jpg);
}
       
#kontaktinfo_i_bundbar {height: 36px;
text-align:center;
padding-top:16px;
}

#link {height: 30px;
text-align:center;
}
Avatar billede olebole Juniormester
18. januar 2008 - 22:21 #1
<ole>

prøv at lægge et link til siden

/mvh
</bole>
Avatar billede Slettet bruger
19. januar 2008 - 10:51 #3
Siden ligger på
http://norddesign.dk/Lederskabet/
css ligger på http://norddesign.dk/Lederskabet/css/layout.css
Det ville da klart være nummer 1 med 1 stylesheet til alle browsere...
Avatar billede olebole Juniormester
19. januar 2008 - 22:40 #4
Et hurtigt bud på din 'Kommunikation' side:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>LEDERSKABET || ledelses- og organisationsudvikling</title>
<META NAME="Title" CONTENT="LEDERSKABET || ledelses- og organisationsudvikling">
<META NAME="Description" CONTENT="LEDERSKABET || ledelses- og organisationsudvikling">
<META NAME="Keywords" CONTENT="LEDERSKABET || ledelses- og organisationsudvikling">
<META NAME="Robots" CONTENT="ALL">
<META NAME="Revisit-after" CONTENT="7">
<META NAME="Author" CONTENT="Nord Design">
<LINK REV=made href="mailto:info@norddesign.dk">
<META HTTP-EQUIV="Reply-to" CONTENT="info@norddesign.dk">
<META NAME="Copyright" CONTENT="Nord Design 2008 - All rights reserved">

<META NAME="DC.Title" CONTENT="LEDERSKABET || ledelses- og organisationsudvikling">

<META NAME="DC.Description" CONTENT="LEDERSKABET || ledelses- og organisationsudvikling">
<META NAME="DC.Subject" CONTENT="LEDERSKABET || ledelses- og organisationsudvikling">
<META NAME="DC.Creator" CONTENT="Nord Design">
<META NAME="DC.Rights" CONTENT="Nord Design 2008 - All rights reserved">
<META NAME="DC.Identifier" CONTENT="http://www.norddesign.dk">
<META NAME="DC.Publisher" CONTENT="Nord Design">
<LINK REL="schema.dc" HREF="http://purl.org/metadata/dublin_core_elements">
<link rel="stylesheet" type="text/css" href="css/ny.css">
</head>
<body>

<div id="container">
    <div id="header"><a alt="Til forsiden" title="Til forsiden" href="index.php">&nbsp;</a></div>
    <div id="centertop">&nbsp;</div>
    <div id="center">
       
        <div id="leftColumn">
            <ul>
                <li><a alt="Til forsiden" title="Til forsiden" href="index.php">Forside</a></li>
                <li><a alt="Om Lederskabet" title="Om Lederskabet" href="side.php?kat_id=103">Om Lederskabet</a></li>
                <li><a alt="Foredrag" title="Foredrag" href="side.php?kat_id=116">Foredrag</a>
                    <ul>
                        <li>- <a alt="Motivation" title="Motivation" href="subside.php?menu_id=267&kat_id=116">Motivation</a></li>
                        <li>- <a alt="Arbejdsglæde og effektivitet" title="Arbejdsglæde og effektivitet" href="subside.php?menu_id=268&kat_id=116">Arbejdsglæde og effektivitet</a></li>
                        <li>- <a class="activeMenuItem" alt="Kommunikation" title="Kommunikation" href="subside.php?menu_id=269&kat_id=116">Kommunikation</a></li>
                        <li>- <a alt="Skab kampkraft i virksomheden" title="Skab kampkraft i virksomheden" href="subside.php?menu_id=270&kat_id=116">Skab kampkraft i virksomheden</a></li>
                    </ul>
                </li>
                <li><a alt="Referencer" title="Referencer" href="side.php?kat_id=117">Referencer</a></li>
            </ul>
        </div>
       
        <div id="rightColumn"><div class="billede_subside"><img src="http://norddesign.dk/Lederskabet/billeder/1200768322.jpg"></div>
            <h1>Kommunikation</h1>
            <p><em>- hop en gang, du sidder på ledningen!</em></p>
           
            <p class="doublePara">Misforståelser og fejlopfattelser koster hvert år virksomheder mistede ordre, utilfredshed og dårlig omtale.<br>
                Den mest effektive løsning på denne udfordring er at lære medarbejderne at kommunikere hurtigere skarpere og med målet for øje.</p>
           
            <p>Kommunikation betyder "at gøre fælles"! Kan det lade sig gøre?<br>
                Effektiv kommunikation er et must for at opretholde det gode samarbejde og dermed konkurrence evnen.<br>
                Stærk kommunikation skaber stærke resultater.&nbsp; Coordinated management of mening, CMM, er et bud på hvordan dette kan opnås.<br>
                2 timers humoristisk ta’ fat i kommunikationens domæne.</p>
           
            <p><strong>Hovedpunkter:</strong><br>
                •&nbsp;Øg forståelsen af andre og skab kunderelationer med tillid<br>
                •&nbsp;Undgår misforståelser og fejltagelser<br>
                •&nbsp;Koordination af meningsudveksling<br>
                •&nbsp;Hvordan skal det svære siges?<br>
                •&nbsp;Opbygge og fastholde det klare budskab "rapport" med andre<br>
                •&nbsp;At lytte med det formål at forstå frem for at blive forstået<br>
                •&nbsp;At håndtere flere kommunikationsteknikker</p>
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <div id="centerbottom">
        <div id="kontaktinfo">Lederskabet - Egøjevej 97 - 4600 Køge - Tlf : 2179 7601 - <a href="mailto:lederskabet@gmail.com" title="Kontakt Lederskabet" alt="Kontakt Lederskabet">lederskabet@gmail.com</a></div>
    </div>
</div>
<div id="design"><a href="http://www.norddesign.dk" alt="&copy; 2008 Nord Design- Webdesign & Programmering" title="&copy; 2008 Nord Design - Webdesign & Programmering" target="_blank">Nord Design 2008</a></div>

</body>
</html>

- og CSS'en:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font: 10px/1.5em verdana, sans-serif;
    color: #000000;
}
h1 {
    margin: 8px 0 24px 0;
    padding: 0;
    font: bold 16px verdana, sans-serif;
    color: #AD0101;
}
p {
    margin: 16px 0;
    padding: 0;
}
p.doublePara {
    margin-top: 24px;
}
a, a:visited {
    text-decoration: none;
    color: #000;
}
a:hover {
    color: #AD0101;
}
#container {
    width: 985px;
    margin: 0 auto;
    padding: 10px 0 5px 0;
}
#header {
    height: 144px;
    background-image: url(http://norddesign.dk/Lederskabet/img/topgrafik_x.jpg);
}
#header a,
#header a:visited,
#header a:hover {
    display: block;
    height: 100%;
    text-decoration: none;
}
#centertop {
    height: 30px;
    background-image: url(http://norddesign.dk/Lederskabet/img/centertop_x.jpg);
}
#center {
    background-image: url(http://norddesign.dk/Lederskabet/img/center_x.jpg);
    width: 100%;
}
#leftColumn {
    width: 207px;
    padding: 10px 0 15px 35px;
    float: left;
}
#leftColumn ul {
    margin: 0;
    padding: 0;
    list-style-image: url(http://norddesign.dk/Lederskabet/img/spacer.gif);
    line-height: 18px;
}
#leftColumn ul li ul {
    margin-top: 0;
    padding-top: 0;
    list-style-image : none;
    list-style-type: none;
}
a.activeMenuItem {
    color: #AD0101;
}
#rightColumn {
    width: 675px;
    padding: 10px 0 15px 33px;
    margin-left: 10px;
    float: left;
    /*background-color: yellow*/
}
.billede_subside {
    float:right;
    padding-right:12px;
    padding-left:10px;
    padding-bottom:5px;
    padding-top:40px;
}
#centerbottom {
    height: 36px;
    background-image:url(http://norddesign.dk/Lederskabet/img/centerbottom_x.jpg);
}
#kontaktinfo {
    padding-top: 14px;
    text-align: center;
}
#design {
    text-align: center;
}
#design a,
#design a:visited,
#design a:hover {
    color: #ddd;
    text-decoration: none;
}
.clear {
    clear: both;
    height: 1px;
    overflow: hidden;
}
Avatar billede olebole Juniormester
19. januar 2008 - 22:45 #5
Ret selv stien til CSS-filen. Jeg har brugt den viste sti til lokal test på min egen PC.

Vær også opmærksom på, at jeg har ændret lidt på dine element-nestings. F.eks. kan et span-element ikke indeholde et p-element, fordi et inline-element kan ikke indeholde et block-element  ;o)

Der er en anelse browser forskelle på listerne i menuen - men de forskelle er efter min mening til at leve med. Ellers burde løsningen være rimelig browser uafhængig  :)
Avatar billede olebole Juniormester
19. januar 2008 - 22:46 #6
PS: Jeg ved godt, jeg ikke har alle menuemnerne med ... dovenskab!  ;D
Avatar billede Slettet bruger
20. januar 2008 - 16:38 #7
Hej Ole
Det ser ud til at virke fint i alle browsere :-)
Smid et svar og du får point. Det samme glæder på mit JS-spørgsmål til skift ml browser-typer...
Mvh Jesper
Avatar billede olebole Juniormester
20. januar 2008 - 16:51 #8
Gerne  ;o)
Avatar billede olebole Juniormester
20. januar 2008 - 22:23 #9
Tak for points  ;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
Kurser inden for grundlæggende programmering

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