[Résolu][CSS/XHTML] Disparition de borders inexpl.

Horus · le 24 novembre 2005

Bonjour les ptits nenfants, j'ai un pitit problème auquel j'aimerais apporter une pitite solution, et donc je voudrais savoir si vous avez déjà renconter un "bug" (je ne suis pas sûr que s'en soit un, c'est peut-être moi qui suis nul! :cartonrouge: ) concernant l'affichage de borders sous firefox.

Je m'explique:

--> Prenons du xhtml strict + css (je m'y essaye)

--> Rajoutons un concept de type complex spiral (complexspiral distorted): background image en noir et blanc dans le body et background image (même photo) en couleur dans les divs

--> le tout en "border-attachment: fixed;"

--> on saupoudre d'un petit "border: solid 1px;" autour des divs

--> on mélange le tout, à la cuillère, pas au shaker

--> on obtient un truc plutôt mignon, mais avec un problème de border:

les border droit (et bas le plus souvent) disparaissent (en fait se réduisent de 1px) quand ils touchent le haut ou le bas de la fenêtre de firefox!

- Pas de problème pour les borders haut et gauche

- Plus de problème si je désactive le border-attachment: fixed; !

Et là tout de suite j'avoue que je n'ai pas d'idées du pourquoi du comment de qu'est-ce qui passe...?

Une intuition O_o?

Baldurien · le 24 novembre 2005

heu quand tu fais du xhtml il faut bien prendre garde à envoyer les bons entêtes (http://www.hixie.ch/advocacy/xhtml)

ensuite une petite page exemple non?

Horus · le 25 novembre 2005

Holà restons calmes...

Pour l'instant je ne fais rien de très compliqué, juste une page en local avec son css pour la mise en page.

Voilà pour l'instant ma page (à peine réduite ^^ et loin d'être finie, le menu reste à mettre en page etc...):

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<!--		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />-->
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="first_look.css" type="text/css" />
	<title>The Open Graphics Project</title>
</head>
<body>
<!-- Head -->
	<h1><a href="#">The Open Graphics Project</a></h1>
<!-- /Head -->
<!-- Menu -->
	<div id="menu">
		<ul>
			<li>
				The Open Graphics Project
				<ul>
					<li>
						<a href="#">What are we?</a>
					</li>
					<li>
						<a href="#">History</a>
					</li>
					<li>
						<a href="#">What's up now?</a>
					</li>
				</ul>
			</li>
			<li>
				Online Store
				<ul>
					<li>
						<a href="#">The OGP store philosophy</a>
					</li>
					<li>
						<a href="#">Products</a>
					</li>
					<li>
						<a href="#">Your cart</a>
					</li>
				</ul>
			</li>
			<li>
				Tools
				<ul>
					<li>
						<a href="#">Documentation</a>
					</li>
					<li>
						<a href="#">Drivers</a>
					</li>
					<li>
						<a href="#">Miscelleanous Material</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
<!-- /Menu -->
<!-- Body -->
	<div id="content">
		<div class="news">
			<h2>The new web site opens</h2>
			<p>
				Lorem ipsum dolor sit amet, [...] Cras a tortor cursus massa nonummy posuere.
			</p>
			<p>
				Nulla risus dolor, [...] Fusce augue.
			</p>
		</div>
		<div class="news">
			<h2>A article related in Kernel Trap and Slashdot</h2>
			<p>
				Lorem ipsum dolor sit amet, [...] Morbi pretium.
			</p>
			<p>
				Integer accumsan volutpat leo. [...] Etiam non nibh a nibh mollis vestibulum.
			</p>
			<p>
				Sed dignissim venenatis lectus. [...] Donec tortor.
			</p>
		</div>
		<div class="news">
			<h2>The Core Design begins</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. [...] Fusce interdum nulla eget odio.
			</p>
			<p>
				Maecenas ultricies nisl ac mauris. [...] Aliquam non libero.
			</p>
		</div>
		<div class="news">
			<h2>The Open Graphics Project is founded</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. [...] Integer in elit.
			</p>
			<p>
				Nunc luctus. Etiam at odio ac mi gravida ultricies. [...] Vestibulum eu urna.
			</p>
			<p>
				Ut porta nunc nec turpis. [...] Mauris feugiat laoreet augue.
			</p>
			<p>
				Vestibulum eget massa vitae lectus dapibus bibendum. [...] Nullam pretium sapien sit amet velit.
			</p>
		</div>
	</div>
<!-- /Body -->
</body>
</html>

et mon css, tout aussi basique pour l'instant:

/* Test of css for the page style */

body
{
/*	background-image: url(images/openphotonet_133_3309_BW.jpg);*/
background-image: url(images/opl_IMG_2541_BW.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: fixed;
}

div.news
{
/*	background-image: url(images/openphotonet_133_3309.jpg);*/
background-image: url(images/opl_IMG_2541.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: fixed;

margin: 2cm 2cm 2cm 2cm;

border-style: solid;
border-width: 1px;

padding-left: 0.5cm;
padding-right: 0.5cm;
}

Les deux images utilisées sont en fait l'original en couleur et une version noir et blanc (c'était pour l'anecdote).

Et comme je disais plus haut, mon seul problème pour l'instant est ce border droit (et bas souvent) qui disparait. Le problème ne se pose plus quand j'enlève background-attachment: fixed;

A noter que mon petit htm passe sans encombre le validator w3c pour de l'xhtml 1.0 strict et que le validator du css de détecte aucune erreur.

Bref je sais pas trop...

heu quand tu fais du xhtml il faut bien prendre garde à envoyer les bons entêtes (http://www.hixie.ch/advocacy/xhtml)

ensuite une petite page exemple non?

Tiens je suis en train de lire le lien que tu m'as donné et c'est plutôt interessant -lecture en cours-

Baldurien · le 25 novembre 2005

Ca sert à rien de donner le code :) c'est une page d'exemple que je veux (ou qu'on veut)

Horus · le 25 novembre 2005

Sachant comme je l'ai dit que la page n'était pas online, voici deux screenshots pour illuster mon problème, j'espère que ça vous donnera une idée du schmilblick...

Capture de mon écran avec les borders intacts, le cadre du texte n'atteint le bord de la fenêtre:

Capture de mon écran avec les borders droit et bas disparus, dès lors que le cadre dépasse de la fenêtre:

donc sinon, pas de démo online dispo... voilou.

Baldurien · le 25 novembre 2005

Je ne peux pas t'aider sans truc online :) comprend qu'avec quelque chose d'online on peut déjà tenter de debugger avec le DomInspector voir ce qui cloche mais tu peux même faire la démarche toi même.

Pour ton problème, je pourrais soupçonner un bug bien retort de la bête :

http://www.system-tek.com/nwinter/nwn2/admin.users.php

Cliques sur Rechercher

Vois les bordures

Coche la case

Cliques sur Rechercher

Plus de bordures

Maintenant, je n'ai pas d'explications réelles pour mon bug, donc je ne sais que dire du tien. Je peux aussi voir venir un éventuel ratage lié aux cm que tu utilises. (essaye d'autres unités qui conviendront à tes besoins, px surtout)

& au final : url('xxx') , pas url(xxx).

Captain Hadock · le 25 novembre 2005

Si tu ne peux pas upload car tu n'a pas d'endroit pour ça, fais moi signe, je peux héberger la page temporairement...

Horus · le 29 novembre 2005

Je venais glorieusement apporter la nouvelle: "J'ai atomisé ce satané cafard!", quand tout d'un coup j'aperçois que Baldurien m'avais donné la solution deux jours plus tôt!

Pourquoi n'ai je pas vu cette ligne parlant des cm à mettre en px plutôt?

Pourquoi ai-je loupé cette phrase salvatrice?

Pourquoi le ciel est-il bleu?

Pourquoi?

Pourquoi :bouletdujour: ?

Bref, effectivement, après un brin de recherche supplémentaire, j'ai cru comprendre que le moteur Gecko avait un bug connu d'approximation, visible sur les borders (bug parait-il résolu dans la prochaine version...). Et voilà, fiat lux, mon bug a été résolu.

Conclusion, ne mettez pas de cm quand vous n'en avez pas besoin. (Paye ta conclusion à l'arrache :inpactitude2: )

Mesdames,

Messieurs,

Merci :craint: .

Et merci aussi à Captain Hadock pour sa proposition mais finalement, je n'en aurai pas besoin.

Baldurien · le 30 novembre 2005

Oui, mais dans mon cas : c'est des pixels :)

Et, pire : ça bugge en 1.0.7 et en 1.5 RC3

Connexion

[Résolu][CSS/XHTML] Disparition de borders inexpl.

Messages recommandés

Horus

Lien vers le commentaire

Partager sur d’autres sites

Baldurien

Lien vers le commentaire

Partager sur d’autres sites

Horus

Lien vers le commentaire

Partager sur d’autres sites

Baldurien

Lien vers le commentaire

Partager sur d’autres sites

Horus

Lien vers le commentaire

Partager sur d’autres sites

Baldurien

Lien vers le commentaire

Partager sur d’autres sites

Captain Hadock

Lien vers le commentaire

Partager sur d’autres sites

Horus

Lien vers le commentaire

Partager sur d’autres sites

Baldurien

Lien vers le commentaire

Partager sur d’autres sites

Archivé

Naviguer

Activité