Firefox CSS floating probleem - Softwareontwikkeling

zaterdag 11 november 2006 13:58

Acties:

Topicstarter

Het volgende:

Ik heb 2 blokken naast elkaar welke beide weer verdeeld zijn in 3 opgestapelde blokken. het rechterblok (middelste deel) moet helemaal, dus 100%, mee rekken met de content (linker blok, middelste deel). Hoe krijg ik dat voor elkaar? Beide blokken moeten dus even hoog worden afhankelijk van de content in het linkerblok.

Ik had begrepen dat dit mogelijk was m.b.v. <br clear=all>. Maar dat wil niet lukken (zie code).

Huidige werk is te zien op: http://deepfreeze.stx.nl/test

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#Container { width: 700px; margin-left: auto; margin-right: auto; }
    #Header { width: 700px; height: 100px; margin-top: 10px; margin-bottom: 10px; }
    #Navigation { width: 700px; height: 35px; background-image: url(navigation_bg.gif); margin-bottom: 10px; }
    
    #Box_Wrap {width:190px; height:100%; float:right;}
    #Box_Border_Top { width: 190px; height: 30px; background-image: url(images/box_border_top.gif); background-repeat: no-repeat; }
    #Box_Content { width: 190px; height: 100%; background: url(images/box_bg.gif) repeat-y 50% 0; }
    #Box_Border_Bottom { width: 190px; height: 6px; background-image: url(images/box_border_bottom.gif); background-repeat: no-repeat; }
    
    #Border_Top { width: 490px; height: 20px; background-image: url(images/border_top_temp.gif); background-repeat: no-repeat; padding-top: 8px; padding: 5px; float: left;}
    #Content { height: auto; width: 480px; background: url(images/content_bg_temp.gif) repeat-y 50% 0; padding: 10px; }
        #Direct_To_Top { height: 20px; width: 480px; padding-top: 20px; }
    #Border_Bottom { width: 500px; height: 6px; background-image: url(images/border_bottom_temp.gif); background-repeat: no-repeat; }
</style>
</head>

<body>
<div style="width:700px;">

<div id="Box_Wrap">
<div id="Box_Border_Top"></div>
<div id="Box_Content">Dit blok moet mee rekken met div id Content, zodat de hoogte van beide blokken gelijk blijft</div>
<div id="Box_Border_Bottom"></div>
</div>

<div id="Border_Top">Hoofdpagina</div>
<div id="Content"><h1>Hoofdpagina</h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed fermentum quam a ante. Donec ullamcorper neque interdum sem. Praesent pede ante, semper ut, convallis ac, malesuada sed, lorem. Ut ut nunc non nulla dignissim porta. Ut orci. Morbi vel dui sit a<a href="#">met libero ultrices co</a>ngue.<hr /><h1>Hoofd</h1><h2>Hoofd</h2><h3>Hoofd</h3>Proin bibendum lobortis turpis. Duis sit amet magna non nulla bibendum ornare. Suspendisse arcu. Nulla pulvinar. Nam pede. Sed ligula ante, egestas eget, feugiat ac, pellentesque sit amet, purus. In fringilla placerat leo. Proin fringilla massa aliquet ipsum. Suspendisse dui nunc, nonummy eu, suscipit id, fringilla imperdiet, libero. Nunc malesuada turpis ut nisi viverra scelerisque. Nullam non ipsum.
</div><!-- end Content -->
<div id="Border_Bottom"></div>

<br clear=all>

</div>

</body>
</html>

[ Voor 18% gewijzigd door DeepFreeze.NL op 15-11-2006 15:42 ]

zaterdag 11 november 2006 14:28

Acties:

crisp

Devver

Pixelated

Er zit hier wel een bugje in Firefox maar dat is niet wat jij denkt. Bekijk je pagina eens in Opera 9 - die laat 'm zien zoals ik verwacht (en volgens specificaties).
Het probleem zit 'm overigens in de clear:both van Box_Content; in feite is het juist IE die hier de fout ingaat door dit te negeren.

Ik denk persoonlijk dat je de #Border_Top niet moet floaten en je #Box_ elementen in 1 wrapper moet zetten en die in z'n geheel naar rechts moet floaten.

[ Voor 24% gewijzigd door crisp op 11-11-2006 14:30 ]

Intentionally left blank

woensdag 15 november 2006 15:43

Acties:

DeepFreeze.NL

Topicstarter

crisp schreef op zaterdag 11 november 2006 @ 14:28:
Er zit hier wel een bugje in Firefox maar dat is niet wat jij denkt. Bekijk je pagina eens in Opera 9 - die laat 'm zien zoals ik verwacht (en volgens specificaties).
Het probleem zit 'm overigens in de clear:both van Box_Content; in feite is het juist IE die hier de fout ingaat door dit te negeren.

Ik denk persoonlijk dat je de #Border_Top niet moet floaten en je #Box_ elementen in 1 wrapper moet zetten en die in z'n geheel naar rechts moet floaten.

Die Wrap bood inderdaad uitkomst. Dankje wel! Nu zit ik dus met het volgende probleem (zie startpost).

woensdag 15 november 2006 19:21

Acties:

DeepFreeze.NL

Topicstarter

Niemand? Of ben ik te voorbarig?

woensdag 15 november 2006 19:29

Acties:

BtM909

Watch out Guys...

Ja, let even op het volgende als je wilt:

Je probleem binnen 24 uur met een 'schopreactie' onder de aandacht brengen.

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

zaterdag 18 november 2006 16:01

Acties:

DeepFreeze.NL

Topicstarter

Nog even een subtiel schopje. Het is namelijk nog steeds niet gelukt

zaterdag 18 november 2006 16:36

Acties:

Rekcor

Dit wil je zeker niet?

HTML:

<script>
var iContentHeight = document.getElementById('Content').scrollHeight;

/* hier moet nog een browser-detectie */

//FF
document.getElementById('Box_Content').style.height=(iContentHeight-33)+'px';

//IE
document.getElementById('Box_Content').style.height=(iContentHeight)+'px';
</script>

Werkt namelijk wel...

zaterdag 18 november 2006 16:48

Acties:

DeepFreeze.NL

Topicstarter

Ik ben in principe opzoek naar een CSS oplossing. Dit moet namelijk toch gewoon met CSS op te lossen zijn?!

zaterdag 18 november 2006 17:56

Acties:

Rekcor

DeepFreeze.NL schreef op zaterdag 18 november 2006 @ 16:48:
Ik ben in principe opzoek naar een CSS oplossing. Dit moet namelijk toch gewoon met CSS op te lossen zijn?!

Als CSS bugfree weergegeven werd iig wel ja...

Ik weet in ieder geval dat 100% height alleen werkt als de hoogte van de parentNode van dat element bekend is. Anders weet HTML niet wat 100% is... http://www.bigbaer.com/cs...n_liquid_maxheight_02.htm

[ Voor 29% gewijzigd door Rekcor op 18-11-2006 18:02 ]

maandag 20 november 2006 16:28

Acties:

Rekcor

HTML:

<div id="Box_Wrap"> 
<div id="Box_Border_Top"></div> 
<div id="Box_Content">Dit blok moet mee rekken met div id Content, zodat de hoogte van beide blokken gelijk blijft</div> 
<div id="Box_Border_Bottom"></div> 
</div>

Wat volgens mij ook wel helpt is de tekst niet in een aparte 'Box_content' zetten, maar gewoon in - wat nu heet - 'Box_wrap'.

Je krijgt dan meer het twee-kolommen-op-100%-model waar veel online tutorials het over hebben