Webmaster Hub > Bug d'affichage d'un border sous IE à cause d'un hack

Version complète: sur le forum Webmaster Hub : Bug d'affichage d'un border sous IE à cause d'un hack

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

massstreamer

mardi 12 septembre 2006 à 12:15

Bonjour à tous.

IE (encore lui) me fait un broblème d'affichage des BORDER d'une boîte DIV à cause d'un HACK CSS.

Comme vous pourrez le voire à cette adresse (à tester dans IE, les autres navigateurs n'ont pas ce problème):
http://massstreamer.free.fr/col_mm_hauteur.html

J'ai une colonne d'images qui est en FLOAT:LEFT dans la boîte DIV principale. Le texte occupe moins de hauteur de page que les photos. Pour que le bas de la boîte principale arrive en bas des photos, j'ai donc posé le HACK si dessous (un grand classique):

partie CSS:

CODE

        .spacer{
            clear:both;
            visibility:hidden;
            font-size:1px;
            margin:0;
            padding:0;
            height:1px;
        }

Partie HTML:

CODE

Le bas de la boîte DIV arrive bien sous la série de photos seulement voilà, la bordure (BORDER) ne s'affiche pas bien sur toute sa hauteur (comme gommée). Cet effacement bizarre s'accentue quand on joue avec le scroll jusqu'à ce qu'il se stabilise sur une hauteur qui correspond au décalage entre le bas du texte contenu et le HACK (ou le bas de la DIV). Le problème disparaît lorsque j'enlève le HACK mais alors, la présentation laisse à désirer.

Si quelqu'un peu me donner la solution à ce problème ou une alternative, ça m'enlèverais une belle épine hors du pied.

Merci d'avance pour vos réponses.

Chark

mardi 12 septembre 2006 à 14:46

Juste un truc qui me chiffone déja dans ton CSS :

.col03{
position:absolute;
top:0;
right:0;
float:right;
background-color:#00CC99;
width:150px;
}

Ca serait pas un peu incompatible ?

Chark

mardi 12 septembre 2006 à 15:01

Je pense que tu résoudra ton probleme ( j'ai pas testé ), en changeant :

CODE

.col02 p{}

par

CODE

.col02 p{ float:left;}

Mais effectivement, le texte ne va pas "s'enrouler" autour des photos
Par contre, pour ton spacer, je ne pense pas que tu ai besoin de mettre tout cela
Moi, j'utilise juste un :

CODE

.spacer{
clear:both;
}

et un simple :

CODE

et cela marche tres bien en général

massstreamer

mardi 12 septembre 2006 à 16:08

Je viens de lire les réponses qui étaient adressées à ma question et je les ai essayée.

CITATION

Juste un truc qui me chiffone déja dans ton CSS :

.col03{
position:absolute;
top:0;
right:0;
float:right;
background-color:#00CC99;
width:150px;
}

Ca serait pas un peu incompatible ?

Désolé, c'est une erreur de distraction ou de précipitation.

Mais sinon, merci de me le faire remarquer Chark.

CITATION

Je pense que tu résoudra ton probleme ( j'ai pas testé ), en changeant :

CODE

.col02 p{}

par
CODE

.col02 p{ float:left;}

Là par contre, j'ai essayé, et le texte sort de la boîte principale (centrale) par la droite.

Sinon, le HACK CSS marche tout aussi bien avec ta méthode. Merci, je note.

Maintenant, concernant la question principale, posée dans ce topic, j'ai toujours ce P..... de problème d'effacement du BORDER sous IE.

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.