Discussion :

[BnA]

Salut à tous!

Voici mon problème:

J'ai des menus (a droite et à gauche) qui se présentent sous la forme de modules. J'ai un cadre "News", un autre "Navigation", etc...

Ces cadres ont une bordure "1px solid #af0024", et j'ai ajouté un élément graphique afin d'avoir seulement le coin inférieur droit arrondi.

Voici mes codes:

HTML/PHP

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="subcontent-unit-border-left clear-block block block-<?php print $block->module ?>">
    <?php if ($block->subject): ?>	
    <h1><?php print $block->subject ?></h1>
    <?php endif;?> 
    <p class="content"><?php print $block->content ?></p>
	<div class="round-border-bottomright"></div>	 
</div>

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
.subcontent-unit-border-left {layout4_setup.css (line 651)
background:transparent none repeat scroll 0%;
border:1px solid #AF0024;
margin:0pt 0pt 2em;
width:160px;
}
 
.clear-block {defaults.css (line 50)
display:block;
}
 
.round-border-bottomright{layout4_setup.css (line 710)
background:transparent url(../img/bg_corner_bottomright.gif) no-repeat scroll 0%;
height:10px;
margin-left:151px;
margin-top:-1px;
position:absolute;
width:10px;
z-index:1;
}

Sous Firefox, as usual, no problem, tout est OK.

Mais sous IE, mon coin arrondi se retrouve quelques pixels (7 ou 8 je dirais) plus bas que mon cadre...

Je crois savoir qu'IE interprète assez mal certains margin ou padding (à moins que j'ai pris le problème à l'envers, mais soit).

Donc si quelqu'un a une solution à mon problème, j'en suis évidemment preneur.

++

[BnA]

Alors voilà, j'ai réduit en partie le problème...

Pour ceux que ça intéresserait...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.subcontent-unit-border-left {
background:transparent none repeat scroll 0%;
border:1px solid #AF0024;
margin:0pt 0pt 2em;
width:160px;
position:relative
}

.round-border-bottomright{
background:transparent url(../img/bg_corner_bottomright.gif) no-repeat scroll 0%;
height:10px;
position:absolute;
bottom:-1px;
right:-1px;
width:10px;
z-index:1;
}

Ca règle PRESQUE le problème: sous IE, il reste un décalage de 2px entre l'angle arrondi et le "point de jonction" avec la bordure du bas (à droite ça marche)...

Any idea??

[BnA]

Well, ben voilà, problème résolu!!

(Autohelp again)...

Donc, pour ceux qui auraient le même cas de figure que moi:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
.round-border-bottomright{
	width:10px; 
	height:10px; 
	position:absolute; 
	z-index:100; 
	background:url(../img/bg_corner_bottomright.gif) no-repeat; 
	bottom:-1px !important /*Non-IE6*/;
	bottom:-3px;
	right:-1px;
	margin:0;

Les navigateurs différents d'IE6 auront pour bottom: -1px, tandis qu'IE6 aura -3px comme bottom.