Table large provoquant une barre de défilement horizontale

Question

J'ai une table à l'intérieur d'un couple de divs imbriqués. Une colonne contient une image dont la largeur rend la largeur totale de la page plus large que l'affichage et la barre de défilement horizontale.

Cette cellule provient d'une popup asp.net ajax (au survol de la souris) et est cachée via javascript, la barre de défilement n'est donc pas nécessaire.

Existe-t-il un moyen via css/xhtml de faire en sorte que la barre de défilement ne s'affiche pas? Je suis sûr que la largeur de la cellule de table cause le problème parce que quand je l'enlève, la barre de défilement est partie. L'élément image est imbriqué dans un div. J'ai essayé le débordement: caché et manipulant les largeurs de cellules de la table - aucun travaillé, au moins sans changer les largeurs des images.

Merci d'avance.

Answer 1

Je aurais dû mentionner le fait que ce problème ne se produit que dans IE7 et non dans FF3. Quoi qu'il en soit, le lien suivant illustre le bug que j'ai rencontré. J'espère que cela aide quelqu'un d'autre qui se heurte à ce problème.

http://snook.ca/archives/html_and_css/position_relative_overflow_ie/

Answer 2

Je ne peux pas dire que je suis sûr pourquoi vous obtiendrez une barre de défilement avec trop-plein: caché, mais voici l'astuce que j'utiliser pour avoir la souris sur popups:

HTML:

<div><a href="#" class="showtooltip">Text you want visible at all times. <div 
id="tooltip">elements you want for mouse tooltip</div></a> 

CSS pour les liens de format:

a:link .showtooltip{ 
//CSS 
} 
a:hover .showtooltip{ 
//CSS 
} 
a:hover .showtooltip{ 
//CSS 
} 
a:active .{ 
//CSS 
} 

Votre CSS sera probablement le même pour tous ceux dont nous avons besoin prochaine étape pour définir le CSS pour l'info-bulle:

a:link .showtooltip div{ 
visibility:hidden; 
} 
a:hover .showtooltip div{ 
visibility:hidden; 
} 
a:hover .showtooltip div{ 
visibility:visible; 
//CSS to properly position and size div 
} 
a:active . div{ 
visibility:hidden; 
} 

Vous pouvez avoir votre écriture ajax à document.getElementById (« tooltip »)