Avatar billede louiselahn Nybegynder
13. juni 2004 - 19:03 Der er 5 kommentarer og
1 løsning

Billedtekst "flyder ind over billedet" i Mozilla men ikke IE

Hej eksperter

Kan nogle se, hvad det er der går galt i forhold til Mozilla ang. de de tekstboxe ved siden af billederne?

Her kommer selve den ene html-side + et laaaangt CSS-dokument, som altså anvendes til en hel del andre sider på sitet.

Hilsen Louise

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Projekter</title>
    <link rel="stylesheet" type="text/css" href="../style.css">
</head>

<body><a name="top"></a>
    <div id="bigbox">
        <div id="side"><div id="indhold">
            <h1>Fredensborg Slotskirkes Pigekor</h1>
            <h2>Tidligere projekter</h2>


    <table id="stil2">
        <tr>
            <td><img src="../../fotos/billedserier/pigekor6.jpg" alt="Ventiler"></td>
            <td><img src="../../fotos/billedserier/pigekor1.5.jpg" alt="Orgelpiber"></td>

            <td><img src="../../fotos/billedserier/pigekor1.1.jpg" alt="Orgeltr&aelig;k"></td>
            <td><img src="../../fotos/billedserier/pigekor2.3.jpg" alt="Orgel"></td>
        </tr>
          </table>

<p align="right"><img src="../../fotos/pilhoejre.gif" alt="L&aelig;s mere om vores rejser" class="img1"><a href="../undersider/rejser.html">[Tidligere rejser]</a></p>

                <p>I efter&aring;ret og vinteren <b>1995</b> deltog pigekoret for f&oslash;rste gang i den landsd&aelig;kkende b&oslash;rnekorkonkurrence <a href="http://www.sangerdyst.u-net.dk/" title="G&aring; til hjemmesiden">Sangerdyst fra kyst til kyst</a> og kom p&aring; 5. pladsen i A-r&aelig;kken.</p>

                <p>Pigekoret opf&oslash;rte ved 2 koncerter i efter&aring;ret <b>1996</b> et rytmisk korv&aelig;rk af Michael Bojesen sammen med 2 andre kor, kammerorkester og rytmegruppe.</p>

                <p>Koret opf&oslash;rte i p&aring;sken <b>1997</b> hele Pergolesis "Stabat Mater" med sangsolister og strygekvartet i Fredensborg Slotskirke og Skelg&aring;rdskirken som en optakt til italiensturen.</p>

<div id="billede">
            <img src="../../fotos/galleri/slotskirken.jpg" alt="Fredensborg Slots 275 &aring;rs jubil&aelig;um">
        </div>

                <p>I efter&aring;ret <b>1997</b> deltog pigekoret ved fejringen af Fredensborg Slots 275 &aring;rs jubil&aelig;um, hvor koret sang til festgudstjeneste og optr&aring;dte for Hendes Majest&aelig;t Dronning Margrethe ved det kongelige taffel.</p>

<p><br><br></p>

                <p>Advent <b>1997</b> opf&oslash;rte koret for f&oslash;rste gang hele <a href="komponister.html#britten" title="L&aelig;s mere om Britten"><b>Brittens</b></a> <a href="cd.html" title="L&aelig;s mere om korets cd">A Ceremony of Carols</a> med harpe og solister. Tine Rehling spillede harpe.</p>

                <p>I perioden <b>1997-99</b>  fungerede koret som &oslash;ve- og eksamenskor for de organiststuderende ved <a href="http://www.sjkms.dk/" title="G&aring; til hjemmesiden">Sj&aelig;llands Kirkemusikskole</a>.</p>

                <p>Koret medvirkede i for&aring;ret <b>1999</b> i en ops&aelig;tning af operaen Carmen med Den Jyske Opera og Sj&aelig;llands Symfoniorkester.</p>

<div class="billede">
            <img src="../../fotos/galleri/sangerdyst-2.jpg" alt="Sangerdyst">
        </div>

                <p>Fredensborg Slotskirkes Pigekor deltog i <b>1999</b> endnu engang i <a href="http://www.sangerdyst.u-net.dk/" title="G&aring; til hjemmesiden">Sangerdyst fra kyst til kyst</a> og opn&aring;ede en 3. plads i den fjernsynstransmitterede finale.</p>


<p><br><br><br><br><br><br><br></p>

                <p>Ved prins Nikolais d&aring;b i Fredensborg Slotskirke oktober <b>1999</b> medvirkede pigekoret i kirken. Dagen efter sang koret til radiotransmitteret allehelgensgudstjeneste.</p>

                <p>Pigekoret modtog i december <b>1999</b> Nykredit og Scheel &amp; Orloffs Kulturpris i Fredensborg-Humleb&aelig;k kommune.</p>

                <p>I maj <b>2000</b> p&aring;begyndtes indspilningen af pigekorets <a href="cd.html" title="L&aelig;s mere om korets cd">pr&aelig;sentations-CD</a>. Den udkom i november 2001.</p>

                <p>I august <b>2000</b> fik slotskorene bes&oslash;g af et b&oslash;rnekor fra San Fransisco, Kairos Youth Choir. De amerikanske b&oslash;rn og unge blev privat indkvarteret hos kormedlemmerne i Fredensborg.</p>

                <p>Advent og jul <b>2000</b> opf&oslash;rte pigekoret igen <a href="cd.html" title="L&aelig;s mere om korets cd">A Ceremony of Carols</a> med harpe og solister samt andre v&aelig;rker som en optakt til CD-indspilningen. Denne gang spillede <a href="cd.html#guillois" title="L&aelig;s mere om Guillois"></a>Sofie Guillois Larsen harpe.</p>

                <p>Julen <b>2001</b> sang koret 3 dage i tr&aelig;k til radiotransmitterede gudstjenester.</p>

                <p><a href="../pigekoret.html" title="L&aelig;s mere om pigekoret">Fredensborg Slotskirkes Pigekor</a> var i efter&aring;ret <b>2002</b> sammen med andre nordsj&aelig;llandske kirkekor med i en musical om Johannes og Thit Jensen. Henrik Schr&oslash;der havde skrevet musikken og dirigerede koncerterne p&aring; Tik&oslash;b skole.</p>

                <p>Klods Hans af Michael Bojesen blev sammen med andre b&oslash;rnekorv&aelig;rker opf&oslash;rt igen i september <b>2003</b>. Denne gang havde 7 kor sl&aring;et sig sammen om det store projekt. Efter at have &oslash;vet p&aring; musikken i et &aring;r, kunne korene slutte projektet af med en koncert p&aring; Øster Farimagsgades skole og  p&aring; det flotte Gentofte R&aring;dhus.</p>

                <p align="center"><a href="#top" title="Til toppen"><img src="../../fotos/pilop.gif" alt="Til top" class="img1"><br>Til toppen</a></p>
    </div>
    <div>
        <div id="rightbox">
                <p><a href="../../index.html"><img src="../../fotos/hjemikon.jpg" alt="Forfra" border="0"></a>
<a href="mailto: f_s_pigekor@hotmail.com"><img src="../../fotos/kontaktikon.jpg" alt="Send en mail" border="0"></a>
<a href="../navigation.html"><img src="../../fotos/sitemapikon.jpg" alt="Navigation" border="0"></a>
<a href="../engelsk/begin.html"><img src="../../fotos/engelskikon.jpg" alt="English Version" border="0"></a></p>

                <p><br><br><br>
                    <ul>
                      <li><a href="../pigekoret.html">Pigekor</a></li>
                        <li><a href="lillekor.html">Lille Kor</a></li>
                        <li><a href="korskolen.html">Korskolen</a><br><br></li>
                    <li><a href="../login.html">Korets sider</a></li>
                    <li><a href="legestue.html">Legestue</a></li>
                    <li><a href="medlem.html">Bliv medlem</a><br><br></li>

                        <li><a href="../korledelse.html">Korledelse</a></li>
                        <li><a href="../repertoire.html">Repertoire</a></li>
                        <li><a href="cd.html">CD</a><br><br></li>

                        <li><a href="../historisk.html">Historie</a></li>
                        <li><a href="../kalender.html">Kalender</a></li>
                    <li><a href="links.html">Links</a></li>
                    </ul>
        </div>
    </div>
</div>

    <div id="bund">
        <table class="stil2">
            <tr>
                <td><p align="left"><b>Fredensborg Slotskirkes Pigekor</b><br>Kordegnekontoret<br>Asminder&oslash;dgade 48<br>3480 Fredensborg</p></td>
                <td><img src="../../fotos/logo.gif" alt="Logo" class="img1"></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>



Og CSS'en:


body, p, h1, h2, h3, h4, ol, li, a {
    font-family: "Verdana", "Trebuchet MS", "Lucida Sans Unicode", sans-serif;
    color: #369;
    background: #fff;
}
body    {
    color: #fff;
    background: #369;
    margin: 0;
    padding: 0;
    border: 0;
}
.login{
    color: #fff;
    background: #8B2252;
}
p{
    font-size: 70%;
}
h1 {
    font-size: 120%;
}
h2{
    font-size: 90%;
}
h3 {
    font-size: 85%;
}
h4 {
    font-size: 75%;
}
img {
    border: 1px solid #000;
}
.img1 {
    border: 0;
}
hr {
color: #369;
background: #fff;
height: 1px;
}
.galleri {
    line-height: 150%;
}
#bigbox    {
    color: #369;
    background: #fff;
    margin: 30px auto;
    padding: 0;
    border-bottom: 20px solid #369;
    width: 700px;
}
#side    {
    padding: 0;
    margin: 0;
    border: 0;
    text-align: left;
    clear: both;
}
#indhold    {
    float: left;
    margin: 0;
    padding: 50px;
    width: 440px;
}

#indhold    ol li{
    font-size: 70%;
    line-height: 150%;
}
#billede {
    float:left;
    width: 110px;
    padding-right: 10px;
}
.billede {
    float:left;
    width: 110px;
    padding-right: 10px;
}
#bund {
    border: 0;
    border-top: 1px solid #ccc;
    background: #eee;
    color: #369;
    padding: 1px 0px 1px 50px;
    text-align: left;
    clear: both;
}
#bund p {
background: #eee;
color: #369;
}
#rightbox    {
    margin: 0 0 25px 0;
    padding: 50px 10px 0px 0px;
    height: 100%;
}
ul    {
    margin: 0;
    padding: 0;
    text-align: left;
    border: 0;
}
ul li    {
    list-style: disc inside;
    font-size: 70%;
    margin: 0;
    padding: 0;
    line-height: 150%;
}
a:link{
    text-decoration: none;
    color: #2B2B2B;
    background: transparent;
}
a:visited {
    text-decoration: none;
    color: #2B2B2B;
    background: transparent;
}
a:hover {
    text-decoration: underline;
    color:#369;
    background: transparent;
}
table {
    border: 1px dotted #369;
}
#stil2 {
    width: 100%;
    border: 0px;
    text-align: center;
    line-height: 110%;
}
.stil2 {
    width: 100%;
    border: 0px;
    text-align: center;
    line-height: 110%;
}
#stil3 {
    border: 0px;
    text-align: left;
}
#stil4 {
    font-size: 70%;
    border: 0px;
    text-align: left;
}
td {
    vertical-align: top;
}

På forhånd tak :-)
Avatar billede skovenborg Nybegynder
13. juni 2004 - 21:53 #1
er du sikker på at dine billeder er 110px bredde? I IE floater teksten til venstre for billedet lige meget hvor bred denne er, men i mozilla gør den ikke det, fordi den kun floater til venstre for de 110px du har defineret div'en med billedet til at være (nåja plus de 10px i paddingen ;-)

I stedet skulle du bare helt fjerne width:110px fra dit stylesheet eller definere en større bredde - IE er jo ligeglad med bredden, så det er kun Mozilla der bliver påvirket.
Avatar billede skovenborg Nybegynder
13. juni 2004 - 21:55 #2
i grunden er det lidt mærkeligt du har både en #billede og .billede som er fuldstændig ens. Hvorfor ikke bare nøjes med klassen .billede og sætte den på hvert af de div-elementer, med billederne i?

Altså:
<div id="billede">
            <img src="../../fotos/galleri/slotskirken.jpg" alt="Fredensborg Slots 275 &aring;rs jubil&aelig;um">
        </div>
kunne ligeså godt hedde:
<div class="billede">
            <img src="../../fotos/galleri/slotskirken.jpg" alt="Fredensborg Slots 275 &aring;rs jubil&aelig;um">
        </div>
Avatar billede louiselahn Nybegynder
13. juni 2004 - 23:24 #3
du er sør'me skarp! Grunden til at der både er en class og en id for det samme er, at jeg oprindeligt kaldte begge for id - men så kunne den jo ikke validere fordi en id kun må optræde én gang på en side... Så jeg lavede lige en hasteløsning, og har så glemt at ændre det...

Mht. dit forslag må jeg liige kigge nærmere på det - så skal jeg nok vende tilbage!
:-) Louise

Hov billedet er 250 x 122 - betyder det noget? Skal jeg bare definere som 110 i stedet for?
Avatar billede skovenborg Nybegynder
13. juni 2004 - 23:37 #4
prøv først bare at fjerne width ;-)

Ellers skal du udvide din width til i minimum 112px (da du også har en 10px padding) og nok helst 122px, som billedets bredde jo er.
Avatar billede louiselahn Nybegynder
13. juni 2004 - 23:48 #5
Hurra hvor er du god! Det med width virkede da bare med det samme!!! 1000 tak!

/Louise
Avatar billede skovenborg Nybegynder
13. juni 2004 - 23:50 #6
det var så lidt - og tak for points :-)
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