28220 sujets

CSS et mise en forme, CSS3

[résolu] Bloc arrondi s'affiche mal sur IE

Bonjour!

Bon, je viens de regarder un toturiel sur alsacreations:

http://tutorials.alsacreations.com/cadre/

Bah oui je suis tombé sur la verison anglaise Smiley langue bref.

J'ai essayé de le reproduire, en y apportant mes petites modifs. Mais évidemment, ca ne marche pas sur IE!

Image sur IE

Sur Firefox ca s'affiche #1. Mais la je sais pas pourquoi ...

HTML


    <div id="container">
      <div class="widthbloc" style="width: 400px;">
        <dl>
          <dt><img class="topright" src="images/topright.gif" alt="" /><img class="title" src="images/login.gif" alt="Connexion" />
          </dt>
          <dd>
            <form name="frm_login" action="<?=$_SERVER['PHP_SELF']?>" method="post">
              <table>
                <tr>
                  <td style="text-align: right;">Nom d'utilisateur:</td>
                  <td><input type="text" name="txt_user" /></td>
                </tr>
                <tr>
                  <td style="text-align: right;">Mot de passe:</td>
                  <td><input type="password" name="txt_pass" /></td>
                </tr>
              </table><br />
              <input type="submit" value="Se connecter" /><br /><br />
              <a href="register.php">S'inscrire</a>
            </form>
          </dd>
          <dd class="bottom"><img class="bottomright" src="images/bottomright.gif" alt="" /></dd>
        </dl>
      </div>
    </div>


CSS


body {
  font-family: Verdana, sans-serif;
  color: #0486b0;
  background-color: white;
  text-align: center;
  margin: 0;
}

body, td {
  font-size: 10pt;
}

table {
  width: 100%;
}

form {
  margin: 0;
  text-align: center;
}

a {
  text-decoration: none;
  font-weight: bold;
}

a:link, a:visited, a:active {
  color: #054a61;
}

a:hover {
  color: #0486b0;
  text-decoration: underline;
}

a img {
  border: 0;
}

#container {
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}

#logout {
  text-align: center;
}

.widthbloc {
  margin-left: auto;
  margin-right: auto;
}

dl, dt, dd {
  margin: 0;
  padding: 0;
}

dl {
  /*width: 75%; */
}

dt {
  height: 50px;
  background: #fff url(../images/top.gif) top left no-repeat;
  line-height: 0;
  text-align: center; /* centered title, bug IE*/
}

dd {
  border: solid #0486b0; /* sizse and color for borders on the right and left */
  border-width: 0 5px;
  padding: 0 10px; /* left and right padding to avoid text appearing over borders */
  background-color: #c4f2fc;
}
.bottom {
  height: 50px;
  background: #fff url(../images/bottom.gif) bottom left no-repeat;
  border: 0 none; /* no lateral border for the lower part */
  padding: 0; /* no text, so no padding */
}

.title {
  display: block; /* title image places in block to avoid errors of spacing */
  margin: auto; /* centered title */
}

.topright, .bottomright { /* position of upper floating corners */
  float: right;
}


Merci de votre aide, d'ici la je continue de chercher!
Modifié par DarkMalow (26 Sep 2005 - 23:07)
Premièrement, je n'ai pas utilisé de tableau pour ca, mais bien une liste de définition comme dans le tutoriel.

Deuxièmement, le tableau sert à aligner le contenu à l'intérieur simplement, et de toute facon ce n,est pas la question ici.

Troisièmement, je crois que si ca continue, je vais mettre tout ca en tableau, c'est 100x plus facile et ca s'affiche #1 dans n'importe quel navigateur. De toute facon, utiliser un tableau dans ce cas ci ne serait probablement pa splus une bidouille que d'utiliser une liste de définitions pour de l'affichage graphique o_O
Modérateur
DarkMalow, est-ce que tu as fais une recherche sur les forums pour le mot "coins" ? Il y a de nombreux sujets à propos des coins arrondis. L'utilisation d'une liste de définition pour les coins arrondis n'est pas forcément ce qu'il y a de mieux. Personnellement, je n'aime pas ce genre de solution. Je trouve que c'est détourner une balise à des fins uniquement de présentation, comme tu l'as fais remarquer. Il y a d'autres solutions qui me semblent moins bidouilles, comme celles en base de Javascript. Tu devrais les trouver en lisant les différents sujets à propos des coins arrondis.
Hum, j'avais fait une recherche et je n,avais rien trouvé o_O

Je vais jeter un coup d'oeil a ca... Mais je trouve ca domage, parce que ca marchait très bien sous firefox / opera. En plus, si on va dans le tutoriel, et qu'on va voir le résultat, ca s'affiche #1 sur IE, pourtant mon code est identique, ou presque, je crois. Et les modifs que j'ai apporté ne sont pas la cause du non-fonctionnement sur IE (j'ai testé).

En tout cas, je vais jeter un coup d'oeil a cette recherche
:o

Je viens de trouver, jamais j'aurais cru que c'était à cause de mon doctype..!

mon éditeur, lorsqu'il crée une nouvelle page HTML, met toujours

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

par défaut. Alors je l'ai remplacé par

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

et ca marche. Jamais j,aurais cru que IE serait + difficile que Firefox pour ce genre de chose!
Sujet clos
Aller à