[XHTML/CSS] design lukt niet in FF

[semicon]

Hallo

Ik ondervindt het een, voor mij, raar probleem met FireFox als ik een layout met "semantische opmaak" in XHTML/CSS wil maken. De site komt door de test heen van w3c als een valid XHTML.
Maar in FF wordt het menu boven de content geplaatst en loopt alles niet meer met mijn "holder".
Het is zeer waarschijnlijk een css probleem denk ik zo, maar het kan ook XHTML zijn aangezien ik hier zelden eerder mee hebt gewerkt.

Na eindelijk ontdekt te hebben welke voordelen eraan zitten aan een div-layout, wil gewoon eens geen tables. Maar kan iemand mij dan wel helpen het in FF wel goed te laten zien, ik kan namelijk geen fout vinden?

_{Aangezien ik ook geen foutmelding had kon ik ook niet op google zoeken :x}

URL: url
CSS: css

Alvast reuze bedankt!

[Verwijderd]

Ik zie sowieso al één fout: je server geeft het Content-Type verkeerd door. Daarom rendert Fx de pagina als HTML, en daarom worden je elementen niet goed afgesloten.

[ikbenwouter]

Als je dat menu onder je content wil hebben zet je toch simpelweg je "menu-data" div onder je "content-data" div in je html?

Die "content-holder" kan je gewoon een height: 500px; (bijvoorbeeld) geven in je css als je wilt dat die border doorloopt.

[ Voor 49% gewijzigd door ikbenwouter op 09-05-2005 14:20 ]

[semicon]

De hoogte moet gewoon variabel zijn, en het menu moet gewoon links van de content.

is de content-type dus de schuldige? moet hij dan op utf-8 ofzo? kan me haast niet voorstellen dat dat het is maar goe :x

ISO-8859-1, also known as Latin-1, is still the default encoding in all cases

[ Voor 20% gewijzigd door semicon op 09-05-2005 14:24 ]

[André]

woutor schreef op maandag 09 mei 2005 @ 14:18:
Als je dat menu onder je content wil hebben zet je toch simpelweg je "menu-data" div onder je "content-data" div in je html?

Hij wil het menu niet onder zijn conten maar links van zijn content.

Die "content-holder" kan je gewoon een height: 500px; (bijvoorbeeld) geven in je css als je wilt dat die border doorloopt.

Met 500px zet je hem vast en dat lijkt me niet de bedoeling. Dat die border niet doorloopt komt door het feit dat beide child div's gefloat zijn en daarmee dus uit de 'flow' gehaald zijn. Om die border toch goed te laten lopen kun je een
onderaan in de parent div zetten.

Dat de content onder je menu staat komt denk ik omdat je geen width hebt gegeven aan je content.

semicon schreef op maandag 09 mei 2005 @ 14:22:
De hoogte moet gewoon variabel zijn, en het menu moet gewoon links van de content.

is de content-type dus de schuldige? moet hij dan op utf-8 ofzo? kan me haast niet voorstellen dat dat het is maar goe :x


[...]

Hij bedoeld niet je character set maar je content-type, de server hoort deze pagina als application/xhtml+xml te serveren (voor FF tenminste, in IE gewoon text/html ).

[ Voor 24% gewijzigd door André op 09-05-2005 14:26 ]

[Verwijderd]

Gebruik semantische HTML en een deel van je problemen zijn weg.

[ikbenwouter]

André schreef op maandag 09 mei 2005 @ 14:25:
[...]

Hij wil het menu niet onder zijn conten maar links van zijn content.

Ok, dan moet je de content-data een width geven. Bijvoorbeeld width: 75%;

[semicon]

dus er zijn twee bugs :x

1 me server :x

2.) ik moet een width meegeven, nou heb je daar wel gelijk in, want hij werkte met vast breedte wel, maar dan is hij altijd zo groot, maar nu werkt hij met procenten, en als ik geen width in geef bij IE dan pakt hij gewoon het overige (lekker makkelijk)
voor deze weet ik ook geen oplossing

Verwijderd schreef op maandag 09 mei 2005 @ 14:27:
Gebruik semantische HTML en een deel van je problemen zijn weg.

doe ik da nog niet d8 net goed bezig te zijn

[ Voor 25% gewijzigd door semicon op 09-05-2005 14:30 ]

[Sappie]

Het ligt idd aan de floating elements die uit de flow worden gehaald zoals André al zegt.

edit:
verder stond hier onzin.. niet goed gelezen / gekeken

semicon schreef op maandag 09 mei 2005 @ 14:29:
doe ik da nog niet d8 net goed bezig te zijn

Hij doelt waarschijnlijk op je menuutje waarvoor je nu gewoon een div gebruikt. Semantisch correcter zou het zijn om een <ul> te gebruiken.

[ Voor 83% gewijzigd door Sappie op 09-05-2005 14:33 ]

[Verwijderd]

Je gebruikt XHTML momenteel; met een HTML MIME type. Waar ik op doelde was dat je in plaats van XHTML beter HTML kon gebruiken. (UTF-8 is overigens ook een beter keus dan je huidige encoding.) Verder is je HTML niet geheel semantisch, nee.

[Verwijderd]

Ah, nu zie ik het probleem. Je geeft je a elementen een display: block in je menu.

Dat moet eruit.

Edit: Of je moet die elementen ook een float: left; geven

[ Voor 23% gewijzigd door Verwijderd op 09-05-2005 14:34 ]

[semicon]

!
zonder float helpt al inderdaad, maar nu is het menu dus nog boven, en onder de content, OOK in IE nu :x


edit: display:block is eruit, probleem is ongewijzigd

[ Voor 22% gewijzigd door semicon op 09-05-2005 14:34 ]

[Sappie]

Wat ik zou doen is het menuutje absoluut in je #content-holder positioneren en je eigenlijke content relatief positioneren, zodat de content-holder's hoogte in ieder geval aanpast aan de hoogte van de content. Wel ga ik er dan vanuit dat de content altijd "hoger" is dan je menuutje.

[Verwijderd]

Je moet ook de display: block; eruithalen, en die float laten staan, dan werkt 't wel.

[semicon]

Verwijderd schreef op maandag 09 mei 2005 @ 14:38:
Je moet ook de display: block; eruithalen, en die float laten staan, dan werkt 't wel.

klopt, in IE dan, niet in FF.

_{Menu is nu ook in ul geplaatst :x}


edit: super Sappie thnx !

[ Voor 7% gewijzigd door semicon op 09-05-2005 14:44 ]

[Sappie]

je vergeet je ul af te sluiten verder kun je ff in je #menu_data "list-style: none" opgeven om de bullets weg te halen. Ook kun je net zo goed de menu_data div weghalen en je ul hetzelfde id opgeven. Zijn immers beiden block-level elements en de style die toepast op je menu_data div kun je net zo goed toepassen op je ul.

verder ga ik je ff een beetje op weg helpen.. momentje

bij deze:
html:

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-Style-Type" content="text/css" />
    <title>lorem ipsum</title>
    <link rel="stylesheet" href="bef.css" />
</head>

<body>
<div id="content-holder">
    <ul id="menu-data">
        <li><a href="#">link</a></li>
        <li><a href="adxmlcls.asp">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
    </ul>
    <div id="content-data">
        <h1>Lorem ipsum</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus tellus. Quisque metus. Sed mollis sem eu nulla. Nulla facilisi. Fusce accumsan elementum ante. Integer aliquam volutpat dui. Suspendisse potenti. Nulla id mauris. Maecenas egestas tortor non odio. Ut tempus cursus ipsum. Etiam elit quam, suscipit eget, feugiat vitae, luctus blandit, elit. Nam sollicitudin luctus turpis. Vestibulum metus neque, commodo non, ultricies at, blandit nec, odio. Vestibulum hendrerit. Aenean facilisis lobortis quam. 
        </p>

        <p>
            Sed lobortis tempus orci. Nam dignissim. Cras mi neque, vehicula in, lobortis quis, molestie a, arcu. Nullam suscipit, elit id vulputate tempus, tortor pede vehicula est, at egestas metus dolor consectetuer justo. Vestibulum fringilla. In sodales congue est. Ut fermentum. Curabitur malesuada posuere enim. Cras id diam. Praesent auctor scelerisque velit. Donec porttitor. Nulla facilisi. In ac dui nec lectus fringilla tincidunt. Cras ac urna. 
        </p>

        <p>

            Donec bibendum velit at sapien. Vestibulum vel odio non orci eleifend lobortis. Pellentesque eu mauris quis lectus fringilla dictum. Maecenas ut nibh eu mi placerat volutpat. Aenean sit amet nulla eget leo congue semper. In id odio. Vivamus vestibulum accumsan lacus. Mauris eget ligula. Donec leo est, dignissim vitae, vestibulum non, ullamcorper non, urna. Morbi eget wisi sed urna tempus aliquam. 
        </p>
    </div>
</div>
</body>
</html>

css, waarbij ik verder niet gekeken heb naar selectors die er nix mee te maken hebben

code:

body {
    background-color: #ffffff;
    margin      : 0;
}

p, li {
    font-family : Arial;
    font-size   : 12px;
    color       : #494949;
}

pre {
    font-family : Courier New, Lucida Console;
    font-size   : 12px;

    margin      : 2px;
    padding     : 2px;

    border-style    : solid;
    border-width    : 1px;
    border-color    : #dfdfdf;
    background-color: #efefef;
}

h1 {
    font-family : Verdana, Arial;
    font-size   : 18px;
    font-weight : normal;
    color       : #494949;
}

a:link, a:active, a:visited {
    color       : #545454;
}

a:hover {
    color       : #656565;
}

#content-holder {
    width       : 85%;
    position: relative;
    background-color:#FFFFFF;
    margin-top  : 30px;
    margin-bottom   : 10px;
    margin-left : auto;
    margin-right    : auto;
    padding     : 5px;
    border      : 1px solid #000000;
}

#menu-data {
    position: absolute;
    top: 0;
    left: 0;
    width       : 120px;
    padding     : 5px;
    margin      : 0;
    list-style  : none;
}


#menu-data a:link,
#menu-data a:active,
#menu-data a:visited {

    padding     : 2px;
    margin      : 0;
    font-family : Arial;
    font-size   : 11px;
    font-weight : bold;
    color       : #212121;
    text-decoration : none;

    border-style    : solid;
    border-width    : 0 0 1px 3px;
    border-color    : #e2e2e2;
}

#menu-data a:hover {
    border-color    : #999999;
    background-color: #e2e2e2;
}

#content-data {
    margin: 0 0 0 130px;
    padding     : 5px;
    border: 1px solid #afafaf;
}

Hierbij ga er ik dus, zoals ik al zei, vanuit dat de content altijd "hoger" is dan het menuutje. Is dat niet zo dan moet je ff je floats clearen.

[ Voor 136% gewijzigd door Sappie op 09-05-2005 14:56 ]

[semicon]

Zeer ingebruikelijk op dit forum, maar ZEEER bedankt

het werkt eindelijk, super m8