[CSS] Layout goed in IE, fout in Firefox

[Verwijderd]

Ik ben vrij nieuw in CSS en ik heb nu een layout gemaakt maar er is een probleem. In IE krijg ik mijn layout goed te zien, maar in Firefox wordt de footer opeens veel groter en begint de footer net onder de header, zelfde plek waar menu en inhoud beginnen.

Dit is mijn CSS:

Cascading Stylesheet:

/* Container */
#container {
    width: 750px;
    background-image: url(../images/airbackground.jpg);
    border: 1px dashed silver;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}
    
/* Body */
body{
    background: #F1F2E3;
    font-family: verdana, arial;
    font-size: 12px;
}

/* Content Titel */
#ctitel{
    font-size: 12px;
    font-weight: bold;
    border-bottom: 1px solid white;
}

/* Header */
#header{
    background-image: url(../images/logo.jpg);
    width: 750px;
    height: 150px;
}

/* Menu */
#menu{
    float: left;
    background-color: #C2CED1;
    padding: 2px;
    width: 142px;
    border: 1px dashed white;

}

/* Inhoud */ 
#inhoud{
    float: right; 
    background-color: #E0D943;
    padding: 2px;
    width: 590px;
    height: 590px;
    border: 1px dashed white;
    overflow: auto;
}

/* Footer */
#footer {
    background-color: #8FA4AB;
    width: 741px;
    padding: 4px;
    border: 1px dashed white;
    font: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
}
#footer a:link {color: #FFFFFF; text-decoration:none;}
#footer a:visited {color: #FFFFFF; text-decoration:none;}

/* Mijn Foto */
#mijnfoto {
    padding: 6px;
    border: 1px dashed silver;
    background-color:#FFFF66;
    
}

/* Menu Links */
.menulink {
    width: 142px;
    height: 30px;
    border: 0px;
}

/* W3 button */
#w3button {
    width: 88px;
    height: 31px;
    border: 0px;
}

Ik kan het in firefox goed eruit laten zien door in dit:
/* Footer */
#footer {
background-color: #8FA4AB;
width: 741px;
padding: 4px;
border: 1px dashed white;
font: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}

height: 590px;

toe te voegen, maar dan gaat die in IE ook 590px omlaag en zie je een hele lege plek.

Iemand enig idee wat ik fout doe?

[StevenK]

Verwijderd schreef op zondag 24 september 2006 @ 14:51:
Ik ben vrij nieuw in CSS en ik heb nu een layout gemaakt maar er is een probleem. In IE krijg ik mijn layout goed te zien, maar in Firefox wordt de footer opeens veel groter en begint de footer net onder de header, zelfde plek waar menu en inhoud beginnen.
<knip>
Iemand enig idee wat ik fout doe?

Volgens mij zijn er hele boeken en sites volgeschreven over de verschillen in de CSS implementatie tussen de diverse agents.

[McFreak]

je doet niet iets fout, je maakt iets niet af.
als je beide correcte css-en weet van beide browsers, dan vang je toch de browser af en selecteer je op basis van dat resultaat de betreffende css op.

[Rowanov]

Wat kunnen we nou zien aan een lap css, zonder je html code en zonder een online test-case? Moeten we de html er bij denken of zo? Maak dat eerst eens op orde, want tot die tijd blijft het raden en kan niemand een accuraat antwoord geven.

[Verwijderd]

Via google kwam ik op een site met wat meer informatie hierover en ik probeerde dit toe te voegen aan footer:

html>body #footer {margin-top: 600px;}

en het werkt

Bedankt voor de reacties.

[eghie]

Tip ontwikkel je site onder Firefox. Dit is zowieso makkelijker, gezien Firefox veel handige extenties ondersteund die het developen erg aangenaam maken (bijv. Webdeveloper Toolbar, Console², ColorPicker). En omdat Firefox zich aan de standaard houdt, wordt je site door meerdere browsers meteen goed ondersteund. Gebruik dan Conditional Comments om aparte CSS voor IE te gebruiken. Die css voor IE moet dan een aanvulling zijn op de normale css.

Voorbeeld:

HTML:

<link rel="stylesheet" href="styles/main.css">
<!--[if lte IE 5.5]>
<link rel="stylesheet" href="styles/ieonly.css">
<![endif]-->

[Verwijderd]

eghie schreef op zondag 24 september 2006 @ 15:42:
Tip ontwikkel je site onder Firefox. Dit is zowieso makkelijker, gezien Firefox veel handige extenties ondersteund die het developen erg aangenaam maken (bijv. Webdeveloper Toolbar, Console², ColorPicker). En omdat Firefox zich aan de standaard houdt, wordt je site door meerdere browsers meteen goed ondersteund. Gebruik dan Conditional Comments om aparte CSS voor IE te gebruiken. Die css voor IE moet dan een aanvulling zijn op de normale css.

Voorbeeld:

HTML:

<link rel="stylesheet" href="styles/main.css">
<!--[if lte IE 5.5]>
<link rel="stylesheet" href="styles/ieonly.css">
<![endif]-->

Ik heb nu geen keus en moet dit inderdaad doen omdat ik nieuwe problemen heb gekregen, maar er is een probleempje.

Als ik dit invul in plaats van mijn normale 'include css' script:
<!--[if IE]>
<link rel="stylesheet" href="stylesheetie.css">
<![endif]-->

dan wordt stylesheetie.css in IE geladen en niet in firefox, maar zodra ik dit doe:
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE]>
<link rel="stylesheet" href="stylesheetie.css">
<![endif]-->

dan wordt de eerste code in IE en firefox geladen. Met de tweede css wordt er niks gedaan.

[Radiance]

Je moet ook alleen de code waar het fout gaat tussen die tags zetten en dan aanpassen tot het ook werkt in IE.

Voorbeeld:

HTML:

<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css">
body{
    background: #000000;
    font-family: verdana, arial;
    font-size: 12px;
}
</style>
<![endif]-->

Nu is alleen in IE je achtergrond zwart.

[ Voor 62% gewijzigd door Radiance op 26-09-2006 11:22 ]

[Verwijderd]

DnB-Terrorists schreef op dinsdag 26 september 2006 @ 11:15:
Je moet ook alleen de code waar het fout gaat tussen die tags zetten en dan aanpassen tot het ook werkt in IE.

Voorbeeld:

HTML:

<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css">
body{
    background: #000000;
    font-family: verdana, arial;
    font-size: 12px;
}
</style>
<![endif]-->

Nu is alleen in IE je achtergrond zwart.

Bedankt! Weer wat bijgeleerd