HTML5 och Opera

html:

<nav>
<a class="icon one" href="javascript:Action.click();"><span class="visa">Länk 1</span></a>
<a class="icon two" href="javascript:Action.click();"><span class="visa">Länk 2</span></a>
<a class="icon three" href="javascript:Action.click();"><span class="visa">Länk 3</span></a>
</nav>
[B]<div class="clearfix"></div>[/B]
<div id="container">
<header>	
<h1> Hanterk</h1>
<article>..

.clearfix {
display: inline-block;
}

Allt fungerar godkänt i IE8, IE9:s testversion(bäst), Safari, Google Crome och FF men av någon anledning så vill inte Opera läsa clearfixen eller clear:both; i nav. Den lägger sig en bit ner i container och skjuter header åt sidan.
Jag är tämligen ovan med Opera. Finns det någon hake med den läsaren? Trodde att den skulle ligga i fronten för det nya. Men har problem med både detta och få den att ladda ner alla bilder i en slide,vilket inte tagits med här...
Någon som har en ide´om vad det kan vara?

tanten skrev:

html:

<nav>
<a class="icon one" href="javascript:Action.click();"><span class="visa">Länk 1</span></a>
<a class="icon two" href="javascript:Action.click();"><span class="visa">Länk 2</span></a>
<a class="icon three" href="javascript:Action.click();"><span class="visa">Länk 3</span></a>
</nav>
[B]<div class="clearfix"></div>[/B]
<div id="container">
<header>	
<h1> Hanterk</h1>
<article>..

.clearfix {
display: inline-block;
}

Allt fungerar godkänt i IE8, IE9:s testversion(bäst), Safari, Google Crome och FF men av någon anledning så vill inte Opera läsa clearfixen eller clear:both; i nav. Den lägger sig en bit ner i container och skjuter header åt sidan.
Jag är tämligen ovan med Opera. Finns det någon hake med den läsaren? Trodde att den skulle ligga i fronten för det nya. Men har problem med både detta och få den att ladda ner alla bilder i en slide,vilket inte tagits med här...
Någon som har en ide´om vad det kan vara?

det sorgliga är att "IE9:s testversion(bäst)", har sämst stöd idag för html 5. google chrome, safari och ff skall ligga bra till. Opera har jag ingen susning om. har inget bra svar på clearfixen dock. men det är väl som med alla webläsare.. ibland får man hacka. :)

det sorgliga är att "IE9:s testversion(bäst)", har sämst stöd idag för html 5.

Menar du verkligen det? De försök jag gjort så har IE9 visat rätt direkt medan de andra varit lite si och så med att visa en del saker. Som t.ex importerade fonter. Nu har jag försökt undvika css3 för att eventuellt kunna publicera sidor och som inte blir helt körda i gamla IE-versioner. Nu har jag iofs inte gjort några försök med t.ex <video>... men, men det går ju att påpeka buggar och annat till de som jobbar fram IE9 och jag får en känsla av att det händer saker varenda dag...

Hacka för IE har man ju gjort tidigare, men Opera???
Hur ser det ut? :) :q

Hmm...

<rant>
Om man ger sig på "bleeding edge" får man räkna med att "hacka" för både det ena och det andra. ;)

HTML5 är inte fastställt som "standard" ännu, och därför kan man inte *garanterat* räkna med att *alla* de nya delarna i HTML5 skall fungera "stabilt" och exakt likadant i "alla" webbläsare.

Vill du slippa "bleeding edge hacks" är tyvärr den enda riktigt "säkra" metoden att fortsätta köra HTML4/XHTML1(text/html) och vara medveten om de vid de här laget väldefinierade IE-hacks som tyvärr fortfarande krävs...

</rant>

Med det sagt - din fråga är tyvärr omöjlig att undersöka i detalj om du inte anger vilken version av Opera som uppvisar problemet.
Varje ny version innehåller dels nya HTML5/CSS3/andra funktioner och varje ny version "täpper till" buggar som rapporterats i tidigare versioner - och just Opera säger sig, som du säger, ligga "i fronten för det nya" på så sätt att man lägger in hyfsat mycket nytt i varje ny version (och versionerna kommer ganska tätt)...

Jo kanske det går att ana vad som är problemet om man gissar lite förresten...
... för inte ens i HTML5 kan du lita på att det blir "rätt" utan en reset-CSS (iallafall inte ännu ;) )...
Så...
Vad har du deklarerat för stilar för <header>? (display: block? display: inline-block? är den floatad ? etc)
Vad har du deklarerat för stilar för <nav> ? (har den display: block, inline-block eller någon form av float t.ex. ?)

Nej då jag vet att säkraste är att använda det gamla men med den fart det går där ute med bl.a w3-validatorn så ser jag ingen anledning att inte lära och testa på mindre viktiga siter under tiden. Det är ju så mycket enklare och renare kod.
Men...

versionen är Opera 10.51

reset

header, footer, section, aside, nav, article, div, h1, h2, img, ul, li {
margin:0; 
padding:0;
}
header, footer, section, aside, nav, article {
display: block;
}
nav{
width:100%;
clear:both;}

header ingenting annat än

header h1:before {
color: #fff;
content: 'A';
font-family: 'IconPack';
padding-right: 10px;
font-size:35px;
}

Förutom det har jag med

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

i head

Hmm...

Om det där är *all* kod du använder så behöver du ingen clearfix överhuvudtaget !!!

... Dels pga du enbart har element med "display: block" samt en helt ostylad div#container inblandade i den kod du visar upp,
... men framförallt att clearfixar (och clear:both som du har på <nav>) enbart behövs när man använder float (vilket du inte visar upp i koden du lagt upp här) ;)

... och enbart utifrån den kod du givit här går det inte att återskapa ditt problem i Opera 10.51/WinXP (jag testade att klippa ihop ett dokument) ;)

Ledsen - men det behövs fler detaljer för att kunna undersöka vad dina problem beror på

// red: (för det är väl inte så enkelt att det är din

header h1:before

(som baserat på det du tillhandahåller lägger upp ett stort vitt a på en vit bakgrund) som du uppfattar som fel pga att Opera (med flera) hanterar header h1:before korrekt och därmed "sjuter in" en till synes vit fyrkant före rubriken ?) :bire

Usch,skäms på mig :P
Tycker inte det är roligt när folk är snåla med kod i sina frågor och så är jag det själv...

nav{
width:100%;/*tagit bort clear eftersom det inte gjorde någon nytta.
}
nav a{
color: #000;
cursor: pointer;
float: left;
margin-right: 10px;
padding: 0 4px;
font-size:18px;
}
nav a:hover {
color: #000;
text-shadow: #ccc 18px 5px 2px;
}
nav a span {
float: right;
font-family: "Comic Sans MS",arial, sans-serif;
padding-left: 5px;
}
#container{
width:570px;
background:#423e3e;
margin:20px auto;
padding-bottom:20px;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-khtml-border-radius: 30px;

}

Som du ser finns både float right och left för att få ikonerna på plats.

Så tar jag bort clearfixen så visar alla webläsare likadant som opera.
Så som bilden visar. Där ikonen med stjärnan är vitt A, så det var inte det som var osynligt...

Kom fram till att det fungerade i Opera om jag satte width 600px på clearfixen. Men det blir liksom ändå obegripligt för mig...

OK...

Utifrån den koden tycker jag att det verkar som att du använder din "clearfix" felaktigt mer än att det har med HTML5 att göra ;)

Normalt stoppar man (oavsett HTML-dialekt) in en "clearfix" inuti samma container som de element man använder för att omsluta sina float-element - dvs inuti <nav> i ditt fall....

<nav>
<a class="icon one" href="javascript:Action.click();"><span class="visa">Länk 1</span></a>
<a class="icon two" href="javascript:Action.click();"><span class="visa">Länk 2</span></a>
<a class="icon three" href="javascript:Action.click();"><span class="visa">Länk 3</span></a>
<span class="clearfix"></span>
</nav>
<div id="container">
<header>

och gör man det i den kod du visat upp här, funkar det (om jag inte missförstår dig)

.. fast å andra sidan kan du antagligen också klara dig lika bra genom att t.ex. ta bort din clearfix helt och istället helt enkelt ställa in

nav{
width:100%;
display: inline-block;
}

eller motsvarande.

Extra markup för clearfix skall inte behövas om man lägger sig på "the bleeding edge" även CSS-mässigt ;)

Lycka till :birp

Det obegripliga blev begripligt... och display: inline-block; räckte för att det skulle bli lika i alla.
Tack så mycket för att du vände blicken åt rätt håll. :bire

NP :bire