[css] firefox witruimte - Softwareontwikkeling

dinsdag 11 april 2006 15:54

Acties:

Verwijderd

Topicstarter

Ik ben bezig met een website en als ik de website bekijk met firefox krijg ik onverklaarbare witruimte's ten gevolg.

In Internet Explorer ziet de website er als volgt uit:

Afbeeldingslocatie: http://www.hostedscripts.nl/upload/ie.jpg

Afbeeldingslocatie: http://www.hostedscripts.nl/upload/ie.jpg

En firefox zo:

Afbeeldingslocatie: http://www.hostedscripts.nl/upload/ff.jpg

Let op de 2 regels witruimte onder de knoppenbalk. Nu staan er toch echt geen spaties oid in. Dit is de source nl:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <meta http-equiv="Content-Language" content="nl" />
        <meta name="copyright" content="" />
        <meta name="robots" content="all" />
        <meta name="keywords" content="Logboek" />
        <meta name="description" content="" />
        <title>Logboek</title>
        <link rel='stylesheet' type='text/css' href='includes/default.css' />
    </head>
    <body>
        <div id='container'>
            <div id='content'>
                [img]'images/top.jpg'[/img]
                <map id='top' name='top'>
                    <area shape='rect' coords='287,73,361,93' href='logout.php' title='' alt='' />
                    <area shape='default' nohref='nohref' alt='' />
                </map>
                <div class='textlayer' style='left: 380px; top: 72px; width: 160px; height: 28px;'>
                    Ingelogd als admin<br />(Administrators)
                </div>
                <div class='text' style='width: 800px; border: 0px solid red;'>
                    [img]'images/menu/storingen_selected.jpg'[/img]<a href='storing_melden.php'>
                    [img]'images/menu/melden_deselected.jpg'[/img]</a><a href='gebruikersbeheer.php'>[img]'images/menu/gebruikersbeheer_deselected.jpg'[/img]</a><a href='applicatie.php'>[img]'images/menu/applicatie_deselected.jpg'[/img]</a><a href='procedures.php'>[img]'images/menu/procedures_deselected.jpg'[/img]</a><a href='werkzaamheden.php'>[img]'images/menu/werkzaamheden_deselected.jpg'[/img]</a><a href='backup.php'>[img]'images/menu/backup_deselected.jpg'[/img]</a>[img]'images/header/storingen.gif'[/img]
                    <table style='width: 100%;'>
                        <tr class='top'>
                            <td><b>Onderwerp</b></td>
                            <td><b>Toepassing</b></td>
                            <td><b>Tijd</b></td>
                            <td colspan='4'><b>Status</b></td>
                        </tr>
                        <tr class='odd'>
                            <td class='col1'>mailen</td>
                            <td class='col2'>Alchemy</td>
                            <td class='col3'>27/03/2006 - 11:58:55</td>
                            <td class='col4' align='center'>[img]'images/stoplicht_rood.gif'[/img]</td>
                            <td class='col5' align='center'><a href='storing_details.php?id=114'>[img]'images/details.gif'[/img]</a></td>
                            <td class='col6' align='center'><a href='storing_edit.php?id=114'>[img]'images/edit.gif'[/img]</a></td>
                            <td class='col7' align='center'><a href='/logboek/admin/index.php?action=delete&amp;=114' onclick="return(confirm('Weet u zeker dat u de storing met als onderwerp \'mailen\' wilt verwijderen?'))">[img]'images/trash.gif'[/img]</a></td>
                        </tr>
                        <tr class='even'>
                            <td class='col1'>sjablonen</td>
                            <td class='col2'>Windows</td>
                            <td class='col3'>08/03/2006 - 11:39:35</td>
                            <td class='col4' align='center'>[img]'images/stoplicht_oranje.gif'[/img]</td>
                            <td class='col5' align='center'><a href='storing_details.php?id=113'>[img]'images/details.gif'[/img]</a></td>
                            <td class='col6' align='center'><a href='storing_edit.php?id=113'>[img]'images/edit.gif'[/img]</a></td>
                            <td class='col7' align='center'><a href='/logboek/admin/index.php?action=delete&amp;id=113' onclick="return(confirm('Weet u zeker dat u de storing met als onderwerp \'sjablonen\' wilt verwijderen?'))">[img]'images/trash.gif'[/img]</a></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </body>
</html>

En de CSS:

code:

html,body {
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: #FEF7E5;
}

div#container {
    position: relative;
    margin: auto;
    width: 800px;
    margin-top: 50px;
    text-align: left;
}

div#content {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 800px;
    line-height: 12px;
    border: 1px solid #000;
}

table {
    border: none;
    border-collapse: collapse;
}

tr.top {
    background-color: #FF6400;
    color: #ffffff;
    height: 25px;
}

tr.even {
    background-color: #FDF3D9;
    color: #000000;
}

tr.odd {
    background-color: #FFE4BA;
    color: #00000;
}

td.col1 {
    width: 30%;
}

td.col2 {
    width: 30%;
}

td.col3 {
    width: 20%;
}

td.col4 {
    width: 5%;
}

td.col5 {
    width: 5%;
}

td.col6 {
    width: 5%;
}

td.col7 {
    width: 5%;
}

img {
    border: none;
}

a {
    text-decoration: none;
    outline: none;
    color: #B50000;
}

a:visited {
}

a:active {
}

a:hover {
    text-decoration: underline;
}

h1 {
    color: #012C41;
    font-family: arial, helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    display: inline;
}

.textlayer {
    position: absolute;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000000;
    overflow: auto;
    border: 0px solid black;
}

.text {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
}

Nu ben ik erachter gekomen dat als ik de line-height op 1px zet hij de witruimtes weglaat. Maar onnodig te vermelden, wordt de tekst dan totaal onleesbaar.

Iemand een logische verklaring waarom firefox witruimte toepast, en wat ik daar eventueel tegen kan beginnen?

[ Voor 21% gewijzigd door Verwijderd op 11-04-2006 15:56 ]

dinsdag 11 april 2006 16:05

Acties:

JHS

Splitting the thaum.

De line-heigth van images in je menu aanpassen

?

DM!

dinsdag 11 april 2006 16:06

Acties:

André

Analytics dude

Dit witruimtes zijn waarschijnlijk de line-breaks, haal die maar eens weg

dinsdag 11 april 2006 16:09

Acties:

Verwijderd

lijkt mij eigenlijk juist de vertical-align van de plaatjes, zet die even op bottom (ipv baseline, wat standaard is)

dinsdag 11 april 2006 16:13

Acties:

Verwijderd

Topicstarter

André schreef op dinsdag 11 april 2006 @ 16:06:
Dit witruimtes zijn waarschijnlijk de line-breaks, haal die maar eens weg

De html die ik hier net heb gepost heb ik al netjes uitgelijnd om het leesbaar te maken. Maar in mijn echte html staat het gewoon op elkaar gepropt. Anders zou je in IE zelf al witruimte krijgen.

JHS schreef op dinsdag 11 april 2006 @ 16:05:
De line-heigth van images in je menu aanpassen ?

Dat mocht helaas gaan soelaas bieden.

Verwijderd schreef op dinsdag 11 april 2006 @ 16:09:
lijkt mij eigenlijk juist de vertical-align van de plaatjes, zet die even op bottom (ipv baseline, wat standaard is)

Ja!! Bedankt $_/-\o_$ , dat is de oplossing. Daar had ik dus zelf echt niet meer achter gekomen he

[ Voor 23% gewijzigd door Verwijderd op 11-04-2006 16:14 ]