[CSS] Cross browser probleem - Softwareontwikkeling

zondag 6 maart 2005 16:38

Acties:

Topicstarter

Mijn site lay-out is nu volledig met divs gemaakt.

Maar natuurlijk niet alles kan zonder tabellen.
Daar om dacht ik ik gooi er een tabel in. Maar dit gaat helemaal fout met firefox terwijl het goed gaat in internet explorer...

dit is de css

Cascading Stylesheet:

body {
    margin:80px;
    padding:10px;
    background:#FFF;
    background-image:url(Images/background.gif);
    color:#000;
    text-align:center;/*centre for ie5 */

    scrollbar-3dlight-color:#E55B17;
    scrollbar-arrow-color:#E55B17;
    scrollbar-darkshadow-color:#95989B;
    scrollbar-face-color:#EE9468;
    scrollbar-highlight-color:#95989B;
    scrollbar-shadow-color:#95989B;
    scrollbar-track-color:#EE9468;
}
#container {
    width:617px;
    margin:auto;/* centre for compliant browsers*/
    text-align:left;
    /*border:1px solid #000; debug border*/
}
#header {
    height:35px;
    margin-bottom:4px;
    background-image:url(Images/header.gif);
    text-align:center;
}
#left {
    margin-left:-152px;
    float:left;
    width:150px;/* this width is the same as the margin on #middle */
    height:245px;
    position:relative;
    left:-2px;/* line it up exactly without losing pressure on footer*/
    background-image:url(Images/menu.gif);
}
#middle {
    margin-left:154px;/*this is the space for the left column */
    background-image:url(Images/content.gif);
}
* html #middle {height:1%;margin-left:155px}/* combat ie's 3 pixel jog */
#menu {
    padding-left:15px;
    padding-top:7px;
}
#footer {
    clear:both;
    height:35px;
    margin-top:4px;
    background-image:url(Images/footer.gif);
    text-align:center;
}

h1,h3,p {
    margin:0px;/* centre for compliant browsers*/
    position:relative;
    font-size:15px;
    padding-right:10px;
    padding-left:8px;
}

#middle p{
    margin-top:10px;
    margin-bottom:-16px;
    padding-top:10px;
    padding-bottom:-10px;
    overflow: auto;
    height: 197px;
    width: 442px;
}

dit de code

HTML:

<body>
    <div id="container">
        <div id="header"><!-- header --></div>
        
        <div id="middle">
            <div id="left">
                <!-- menu -->
                <div id="menu">
                    Mijn menu
                </div>
            </div>
            <h1>pagina naampje</h1>
            
            <p>
                <table style="position:relative;display:inline;">
                    <tr>
                        <td>
                            <a href="index.asp?page=Agenda&sort=Date DESC">Datum</a>
                        </td>
                    </tr>
                </table>
            </p>
            
            <br style="clear:both" />
        </div>
        
        <div id="footer"><!-- footer --></div>
    </div>
</body>

Dit is de site waar het om gaat : linkje kan nu wel weg

[ Voor 10% gewijzigd door Mischa_NL op 06-03-2005 17:48 ]

zondag 6 maart 2005 16:47

Acties:

crisp

Devver

Pixelated

a) wat werkt er niet?
b) waarom heb je daarvoor een table nodig?
c) waarom geef je de table een display:inline en een position:relative?

Intentionally left blank

zondag 6 maart 2005 16:55

Acties:

Mischa_NL

Topicstarter

a) de tabel lijkt niet binnen de div te komen. Het is nogal lastig uit te leggen. Als je firefox hebt kun je gewoon even kijken...

b)omdat ik data wil uitlijnen in kolommen... lijkt me iets voor een tabel. De css variant: 'display: table' werkt in IE niet anders had ik dat gebruikt!

c) geen idee. ik was wat aan het prutsen.

hier inclusief plaatje wat er in firefox gebeurt:

Afbeeldingslocatie: http://www.mischablog.nl/v2foutje.png

Afbeeldingslocatie: http://www.mischablog.nl/v2foutje.png

[ Voor 10% gewijzigd door Mischa_NL op 06-03-2005 16:56 ]

zondag 6 maart 2005 17:37

Acties:

MNeMoNiCS

Vreemd, als je in FireFox op een kolom-titel klikt dan werkt ie bij mij ineens wel goed?

zondag 6 maart 2005 17:44

Acties:

Borizz

Bij mij geeft Firefox de pagina gewoon goed weer met de tabel op de juiste plaats. Ik gebruik Firefox 1.0.1.

If I can't fix it, it ain't broken.

zondag 6 maart 2005 17:47

Acties:

Mischa_NL

Topicstarter

Ik ben eruit! alle content stond binnen een <p> tag...
Deze kan geen tabellen bevatten!

Even de oplossing

dit

Cascading Stylesheet:

h1,h3,p {
    margin:0px;/* centre for compliant browsers*/
    position:relative;
    font-size:15px;
    padding-right:10px;
    padding-left:8px;
}

#middle p{
    margin-top:10px;
    margin-bottom:-16px;
    padding-top:10px;
    padding-bottom:-10px;
    overflow: auto;
    height: 197px;
    width: 442px;
}

word

Cascading Stylesheet:

h1,h3,p,#content {
    margin:0px;/* centre for compliant browsers*/
    position:relative;
    font-size:15px;
    padding-right:10px;
    padding-left:8px;
}

#content {
    margin-top:10px;
    margin-bottom:-16px;
    padding-top:10px;
    padding-bottom:-10px;
    overflow: auto;
    height: 197px;
    width: 442px;
}

dit

HTML:

<p>
    <table style="position:relative;display:inline;">
        <tr>
            <td>
                <a href="index.asp?page=Agenda&sort=Date DESC">Datum</a>
            </td>
        </tr>
    </table>
</p>

word

HTML:

<div id="content">
    <table style="position:relative;display:inline;">
        <tr>
            <td>
                <a href="index.asp?page=Agenda&sort=Date DESC">Datum</a>
            </td>
        </tr>
    </table>
</div>

Damn dit heeft me echt een hele dag gekost om uit te vinden.
Bedankt voor de moeite maar weer.

zondag 6 maart 2005 18:10

Acties:

crisp

Devver

Pixelated

dat had je met de validator ook wel kunnen vinden lijkt me (maar ik keek er ook overheen)

Intentionally left blank