CSS Overlapping divs firefox

riccardot · 5 mei 2007

Ik weet niet of deze vraag hier hoort, maargoed..
Op mijn frontpage worden berichten getoond (videoberichten) met tekst uiteraard, en een video (float: right). Onder de tekst staat ook de datum, en erboven de titel. Nu is mijn probleem, dat als de tekst kort is, de video groter is dan de div waar hij in is geplaatst en de datum komt dan ook naast de video te staan ipv en rechts onder.

Mijn opbouw van een bericht is:

Code:

<div> //div waar het hele bericht in staat
<p><video></p> //video style: float: right
<h1>titel</h1>
<message> (gewoon tekst tussen <p></p>)
<date> (div, float: right)
</div>

CSS:

Code:

body {
	background: url(images/back.png) center top repeat-y;
	margin: 0;
	text-align: center;
	clear: both;
}

div.main {
	padding: 30px 50px;
}

#container {
	margin: 0px auto; 
	width: 930px;
	background: #FFFFFF;
}

#header {
	background-image: url(images/head.png);
	height: 150px;
}

#menu {
	padding: 0 30px;
	text-align: center;
}

ul{
	margin: 0;
	padding: 0;
}

#content {
	margin-top: 40px;
}

#title {
	height: 60px;
	background-image: url(images/contentback.png);
	text-align: left;
	margin-bottom: 20px;

}

h1 {
	font-family: "trebuchet ms";
	font-size: 18pt;
	color: black;
	font-weight: normal;
	margin: 0px;
	padding: 0 20px;
	padding-top: 10px;
	text-align: left;
}

h2 {
	padding: 15px 20px;
	font-family: "trebuchet ms";
	font-size: 18pt;
	color: black;
	font-weight: normal;
	margin: 0px;
}

p {
	text-align: left;
	font-family: "trebuchet ms";
	font-size: 10pt;
	color: black;
	padding: 0 20px;
	padding-top: 10px;
}

#item {
	background-color: #F8F8F8;
	border: 1px solid #C0C0C0;
	padding: 10px 10px;
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 20px;
	font-family: "trebuchet ms";
	font-size: 10pt;
	color: black;
}

#itemtitle {
	font-family: "trebuchet ms";
	font-size: 10pt;
	color: black;
	font-weight: bold;
}

#msgdate {
	text-align: right;
	font-family: "trebuchet ms";
	font-size: 8pt;
	color: black;
	padding: 10px 20px;
}

#msg {
	background-image: url(images/itemback.png);
	margin-bottom: 15px;
	height: auto;
}

#msg embed, object {
	float: right;
}

Screenshots:

ie6
ff2

Wie kan mij helpen?

Bvd, Riccardo.

peter vazed · 5 mei 2007

Je float
maar ik zie geen clear.

Gooi in google:
clear:both

riccardot · 5 mei 2007

clear: both in de embed object gooien?

iig, als ik clear: both in de embed (flash object) gooi, dan verandert er niets.

peter vazed · 5 mei 2007

Clear na enige divs

<div class="clear" ></div>
en in de style de waarde voor de clear:
.clear{
clear:right;
}

Anders extra div maken voor de positie van de datum

riccardot · 5 mei 2007

Ik heb nu de video in een aparte div gezet (clear) en in de style van die div dus clear: right gezet. Blijft overlappen..

peter vazed · 6 mei 2007

Je html code had ik niet, maar kijk hier eens:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
	<head>
		<title>
			(Type a title for your page here)
		</title>
		<meta name="GENERATOR" content="Arachnophilia 4.0">
		<meta name="FORMATTER" content="Arachnophilia 4.0">
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<META name="description" content=" ">
		<META name="keywords" content="  ">
		<meta name="Author" content="Peter Vazed">
		<META name="robots" content="index, follow">
		<META name="revisit" content="7 days">
		
<style type="text/css">

   body {
	background: url(images/back.png) center top repeat-y;
	margin: 0;

	}

div.main {
	padding: 30px 50px;
}

#container {
	margin: 0px auto; 
	width: 930px;
	background: #FFFFFF;
border:solid 2px #ff0000;
}

#header {
	background-image: url(images/head.png);
	height: 150px;
border:solid 2px #ff0000;
}

#menu {
	padding: 0 30px;
	text-align: center;
}

ul{
	margin: 0;
	padding: 0;
}

#content {
	margin-top: 40px;
border:solid 2px #ff0000;
}

#title {
	height: 60px;
	background-image: url(images/contentback.png);
	text-align: left;
	margin-bottom: 20px;
border:solid 2px #ff0000;

}

h1 {
	font-family: "trebuchet ms";
	font-size: 18pt;
	color: black;
	font-weight: normal;
	margin: 0px;
	padding: 0 20px;
	padding-top: 10px;
	text-align: left;
}

h2 {
	padding: 15px 20px;
	font-family: "trebuchet ms";
	font-size: 18pt;
	color: black;
	font-weight: normal;
	margin: 0px;
}

p {
	text-align: left;
	font-family: "trebuchet ms";
	font-size: 10pt;
	color: black;
	padding: 0 20px;
	padding-top: 10px;
}

#item {
	background-color: #F8F8F8;
	border: 1px solid #C0C0C0;
	padding: 10px 10px;
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 20px;
	font-family: "trebuchet ms";
	font-size: 10pt;
	color: black;
border:solid 2px #ff0000;
}

#itemtitle {
	font-family: "trebuchet ms";
	font-size: 10pt;
	color: black;
	font-weight: bold;
border:solid 2px #ff0000;
}

#msgdate {
	text-align: right;
	font-family: "trebuchet ms" , "comic sans ms";
	font-size: 10px;
	color: black;
	padding: 10px 20px;
border:solid 2px #00ff00;
float: right;
}

#msg {
	background-image: url(images/itemback.png);
	margin-bottom: 15px;
	height: auto;
border:solid 2px #ff0000;
float: left;
width:300px;
}

#embed, object {
	float: right;
border:solid 2px #00ffff;
width:500px ;
}   
.clearr{
clear:right;
}
.clearb{
clear:both;
}
</style>
	</head>
	
	<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
		
		
		<div id="container">
			 
			<div id="header">
				header 
				<!-- header -->
			</div>
			 
			<div id="title">
				<h1>
					titel
				</h1>
				 
				<!-- title -->
			</div>
			
			
			<div id="msg" >
				Hier staat een berichtje  Hier staat een berichtje Hier staat een berichtje 
				<b>
					Hier staat een berichtje Hier staat een berichtje Hier staat een berichtje Hier
					staat een berichtje Hier staat een berichtje 
				</b>
			</div>
			<div class="clearr">
			</div>
			<div id="embed">
				<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
					codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
					ID=berg WIDTH=490 HEIGHT=300>
					<PARAM NAME=movie VALUE="berg.swf">
					<PARAM NAME=quality VALUE=high>
					<PARAM NAME=bgcolor VALUE=#000000>
					<EMBED src="berg.swf" quality=high bgcolor=#000000
					WIDTH=590 HEIGHT=380 TYPE="application/x-shockwave-flash"
					PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
					</EMBED>
				</OBJECT>
				 
				<div class="clearr">
				</div>
				<div id="msgdate">
					 datum
				</div>
				<div class="clearb">
				</div>
			</div>
	 
			 
			<!-- container -->
		</div>
		
		
	</body>
	
</html>

riccardot · 6 mei 2007

Ik heb jouw aangepaste css gebruikt, en mijn code om berichten te genereren is de volgende:

PHP:

				if($data['type'] == 'own') {
					//MOVIE_WIDTH&HEIGHT zijn constanten!
					$video  = '<p id="player' .$i. '"><a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank"><b>Download de flashplayer</a> om deze video te kunnen bekijken!</b></p>';
					$video .= '<script type="text/javascript">';
					$video .= 'var s1 = new SWFObject("flvplayer.swf","single","300","200","7");';
					$video .= 's1.addParam("allowfullscreen","true");';
					$video .= 's1.addVariable("file","' .$data['video']. '");';
					$video .= 's1.addVariable("image","preview.jpg");';
					$video .= 's1.write("player' .$i. '");';
					$video .= '</script>';
					$comment = $data['message2'];
					echo '<h1>' . $data['title2']. '</h1>';
					echo '<div id="msg">';	
					echo $comment . ' <a href="index.php?page=showmessage&id=' .$data['id2']. '&type=youtube">..naar het bericht met reacties</a>';
					echo '</div>';
					echo '<div class="clearr">';
            		echo '</div>';
            		echo '<div id="embed">';
            		echo $video;
            		echo '<div class="clearr">';
                	echo '</div>';
                	echo '<div id="msgdate">'; 
					echo 'Posted on ' .$data['date2'];
					echo '</div>';
					echo '<div class="clearb">';
                	echo '</div>';
            		echo '</div>';
					
				} elseif($data['type'] == 'youtube') {
					$video  = '<object width="300" height="200">'; 
					$video .= '<param name="movie" value="http://www.youtube.com/v/' .$data['video']. '"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/' .$data['video']. '" type="application/x-shockwave-flash" wmode="transparent" width="300" height="200"></embed></object>';
					$comment = $data['message2'];
					echo '<h1>' . $data['title2']. '</h1>';
					echo '<div id="msg">';	
					echo $comment . ' <a href="index.php?page=showmessage&id=' .$data['id2']. '&type=youtube">..naar het bericht met reacties</a>';
					echo '</div>';
					echo '<div class="clearr">';
            		echo '</div>';
            		echo '<div id="embed">';
            		echo $video;
            		echo '<div class="clearr">';
                	echo '</div>';
                	echo '<div id="msgdate">'; 
					echo 'Posted on ' .$data['date2'];
					echo '</div>';
					echo '<div class="clearb">';
                	echo '</div>';
            		echo '</div>';

				}

dat stukje javascript is van een flv player en genereert gewoon een embed object.

De flashobjecten staan goed maar met de berichten gaat het nog fout:
Screenshot (firefox2):

peter vazed · 6 mei 2007

Dus movie en datum is nu goed.
Tekst (voor tweede movie) zo te zien niet.

Dan zul je dus de "blokken"
tekst - movie datum

moeten aanpassen, zodat je krijgt:
tekst0 - movie0 + datum0
tekst1 - movie1 + datum1
tekst2 - movie2 + datum2

Bij de eerste serie code na
echo '<div class="clearb">';
echo '</div>';
echo '</div>';

nog een div class="clearb"
toevoegen?

riccardot · 6 mei 2007

Is al beter, maar nog niet geweldig:

peter vazed · 6 mei 2007

Zet er eens borders om, had ik ook gedaan,
dan kun je zien of er ergens iets te breed is.

Met position relative zou je ook wel iets kunnen proberen.
Het is altijd uitvogelen om het in IE en FF op elkaar te laten lijken.

//edit
overigens heb je:
echo '<div id="embed">';
echo $video;
echo '<div class="clearr">';
echo '</div>';
echo '<div id="msgdate">';
echo 'Posted on ' .$data['date2'];
echo '</div>';

hetgeen maar één keer op een pagina mag voorkomen
ook in het tweede deel van het script zitten.
Verander dit naar class.

riccardot · 6 mei 2007

Borders erom, zie bijlage.
(id's zijn nu ook klassen waar nodig)

peter vazed · 6 mei 2007

info:
http://www.positioniseverything.net/easyclearing.html

meer:
http://www.google.nl/search?q=clear...&rls=org.mozilla:nl:official&client=firefox-a

//edit
nog een float item:
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

CSS Overlapping divs firefox

riccardot

Gebruiker

peter vazed

Meubilair

riccardot

Gebruiker

peter vazed

Meubilair

riccardot

Gebruiker

peter vazed

Meubilair

riccardot

Gebruiker

Bijlagen

peter vazed

Meubilair

riccardot

Gebruiker

Bijlagen

peter vazed

Meubilair

riccardot

Gebruiker

Bijlagen

peter vazed

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy