[xhtml/css] <hr /> in IE7 anders dan in FF - Softwareontwikkeling

maandag 7 januari 2008 17:25

Acties:

Topicstarter

In een script waar ik mee bezig ben, wordt een horizontal rule in IE niet goed weergegeven. In firefox werkt het echter wel. Ook is de code XHTML strict en CSS gevalideerd. Ik heb nog eens naar de code gekeken, maar kwam er zelf niet meer uit.
De code:

XHTML:

code:

...
<link rel="stylesheet" type="text/css" href="test.css" title="test" />
</head>

<body>

<div id="page">
    <div class="title">Hoi</div>
    <div class="date">Test</div>
    <br /><hr /><br />
</div>
</body>
...

CSS:

code:

body {
    background-color:#111;
    font-size:11px;
    font-family:Georgia, Verdana, Arial, Helvetica, sans-serif;
    letter-spacing:0.5px;
    color:#eee;
    padding:0px;
    margin:0px;
    margin-bottom:20px;
    text-align:center;
    }

html, body {
     min-height:100.1%;
    }

.title {
    font-weight:bold;
    font-size:12px;
    letter-spacing:1px;
    color:#eee;
    margin:0px;
    margin-bottom:5px;
    margin-left:15px;
    padding:0px;
    text-align:left;
    float:left;
    }

.date {
    font-style:italic;
    font-size:10px;
    color:#eee;
    margin:0px;
    margin-bottom:5px;
    margin-right:15px;
    padding:0px;
    text-align:right;
    float:right;
    }

#page {
    background:#111;
    padding:10px;
    text-align:left;
    width:65%;
    margin:0px auto;
    line-height:16px;
    }
    
div.page{
    white-space:nowrap;
    }
    
div.div.page{
    display:inline;
    }

maandag 7 januari 2008 17:30

Acties:

disjfa

be

In IE staat de HR gewoon tussen de twee boxjes. En in FF staat het gewoon als een blockelement door de boxjes heen.

Tip: Geen hr gebruiken aangezien IE en FF die altijd anders renderen. Kan je veel gemakkelijker oplossen door een border op je container.

disjfa - disj·fa (meneer)
disjfa.nl

maandag 7 januari 2008 17:34

Acties:

Freedom

Topicstarter

Dank je wel, op de border manier opgelost. Toch vind ik het erg frustrerend dat, als je je aan de specificaties van een ML houdt, vervolgens niet alle browsers hetzelfde doen. (maar ja, dat is hetzelfde als die smiley-test....

)

[ Voor 178% gewijzigd door Freedom op 07-01-2008 17:49 ]

maandag 7 januari 2008 18:19

Acties:

Verwijderd

aan de spec houden? een hr heeft hier semantisch helemaal niks te zoeken, het is gewoon een layout dingetje, dat hoort dus niet in de html

maandag 7 januari 2008 23:41

Acties:

crisp

Devver

Pixelated

Volgens mij heeft dit meer te maken met de floats en IE's brakke layout-model.

Desalniettemin klopt het dat browsers verschillende default styles toepassen op het HR element, en dat het in IE vaak net niet helemaal naar de hand te zetten is.

mophor: HR kan in HTML prima gebruikt worden om een logische afscheiding te markeren tussen bepaalde stukken content, HTML 5 beschrijft het ook als zodanig:

The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

maar ik ben het ermee eens dat dat in het geval van TS niet opgaat en hij beter gewoon van borders gebruik kan maken

Intentionally left blank

maandag 7 januari 2008 23:59

Acties:

Blaise

Het hr element heeft wel een semantische waarde, maar die is enorm specifiek: het is bedoeld om plotwendingen aan te geven.

quote: http://www.whatwg.org/specs/web-apps/current-work/#the-hr
The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

Zie ook http://fantasai.inkedblade.net/weblog/2005/art-of-semantics/

In de praktijk wordt het hr element soms gebruikt om meerdere sectie van elkaar te scheiden op een manier die ook in niet-visuele omgevingen werkt. Zie ook onderaan deze pagina.

[ Voor 0% gewijzigd door Blaise op 08-01-2008 00:00 . Reden: Te lang bezig geweest met lezen, crisp is me voor :) ]

dinsdag 8 januari 2008 08:06

Acties:

Verwijderd

ik vind hr altijd het beste te vergelijken met het deuntje tussen newsitems op de radio of met 3 sterretjes in een boek bij een plotselinge verspringing in plaats en of tijd