PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
C

<hr /> in IE en FF probleem

Door Citroen Anoniem Graag op 07-01-2007 19:13
583 views
Hallo PHPers,

Het is weer zover, een probleem over de layout in IE en in FF :(

Ik heb het probleem online staan, klikje

Ok, het probleem:
Ik wil graag een zwart lijntje krijgen tussen alinea's, daarvoor gebruik ik de <hr /> tag en de onderstaande codes. Dit werkt perfect in FireFox, maar Internet Explorer werkt weer niet mee.
Wat moet ik veranderen, ben er al 2 uur mee bezig en het lukt echt niet meer.

Owja de code nog:

<!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" />
<title>Untitled Document</title>
<style media="screen" title="basic" type="text/css">
<!--
p, div {
	margin:0px;
	padding:0px;
}

div.content {
	min-width:605px;
	position:relative;
	width:80%;
	margin-left:10%;
	margin-top:15px;
	border:#010A5A 1px dashed;
}

p.navbalk {
	padding:2px 3px 2px 10px;
	color:#B1BECE;
}

div.navbalk {	
	background-color:#6870A4;
	width:100%;
}

hr.header-hr {
	margin:0px;
	padding:0px;
	width:100%;
	height:1px;
	color:#020951;
	border-style:solid;
}
-->
</style>
</head>

<body>
<div class="content">

	<div class="navbalk">
		<p class="navbalk">
			Wat tekst
		</p>
	</div>
	<hr class="header-hr" />
	<div class="navbalk">
		<p class="navbalk">
			Wat tekst
		</p>
	</div>
	
</div>
</body>
</html>


Groetjes

Freek--
B
Bart Helpjes
07-01-2007 19:57
Zet de <hr class="header-hr" /> maar eens boven de </p> tag.
Jan Koehoorn
07-01-2007 20:01
Bekend probleem; een <hr> gedraagt zich in FF keurig als je hem met CSS wilt stylen, maar IE doet weer eens moeilijk. Gelukkig is er een workaround:

hr {
	margin: 0px auto;
	width: 95%;
	color: #746CFF; /* deze is voor Internet Explorer, anders heeft de lijn geen kleurtje */
	background-color: #746CFF;
	border: 0;
	height: 1px;
}
C
Citroen Anoniem Graag
07-01-2007 20:08
Binnen de <p> tag doet hij het inderdaad prima, maar nu wil ik dat hij het tussen twee div-jes doet, en dan werkt ook Jan's oplossing niet

Dit is de code die nu actief is:

<!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" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style media="screen" title="basic" type="text/css">
<!--
body {
	margin:0px;
	padding:0px;
	background:url(../afbeeldingen/bodybackground.jpg)
}

p, div {
	margin:0px;
	padding:0px;
}

img {
	border:0;
}
						/*Content instellingen*/
div.content {
	min-width:605px;
	position:relative;
	width:80%;
	margin-left:10%;
	margin-top:15px;
	border:#010A5A 1px dashed;
}
						/*Header instellingen*/
div.header {
	width:100%;
	background:url(background.jpg);
	background-repeat:repeat-x;
	height:95px;
}

img.header-left {
	float:left;
	z-index:1;
}
img.header-right
{
	float:right;
	z-index:2;
}

hr.header-hr {
    margin: 0px auto;
    width: 100%;
    color: #746CFF; /* deze is voor Internet Explorer, anders heeft de lijn geen kleurtje */
    background-color: #746CFF;
    border:0px;
    height: 1px;
}
						/*Navigatie instellingen*/
div.navbalk {	
	background-color:#6870A4;
	width:100%;
}

p.navbalk {
	padding:2px 3px 2px 10px;
	color:#B1BECE;
}
						/*Menu instellingen*/
div.menu {
	background-color:#6870A4;
	width:100%;
	height:20px;
}

p.menu {
	padding:2px 3px 2px 10px;
	color:#B1BECE;
	font-size:20px;
}
-->
</style>
</head>

<body>
<div class="content">
	<div class="header">
		Tekst
	</div>
	
	<hr class="header-hr" />
	
	<div class="navbalk">
		<p class="navbalk">Home &gt;&gt;</p>
	</div>
</div>
	
</div>
</body>
</html>
Jan Koehoorn
07-01-2007 20:15
Misschien mag dat koppelteken niet in een classnaam.

Maar los daarvan: waarom geef je niet gewoon je headerdiv een border-bottom: 1px solid black? Dan krijg je hetzelfde resultaat.
C
Citroen Anoniem Graag
07-01-2007 20:21
@Jan: Het koppelteken kan, ik weet niet of het volgens de regels mag maar ik heb het net even met een andere classnaam geprobeerd en dat geeft het zelfde resultaat.
Het idee van jouw om de header-div een border-bottom mee te geven is wel slim bedacht.

Zijn er trouwens site's over IE en bv FF, waar alle veel voorkomende problemen en oplossingen van ccs staan, dat helpt mij, en ongetwijfeld vele andere mensen heel erg bovendien zijn er dan heel wat van dit soort posts minder.
Ik heb zelf wel eens naar z'n site gezocht maar nooit gevonden

[edit]
@Remco en @Jan Dankjewel dit is heel erg handig
[/edit]

Reageren

Inloggen om te reageren