IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Petit problème de portabilité sous IE [CSS 2]


Sujet :

CSS

  1. #1
    Membre régulier
    Homme Profil pro
    Développeur
    Inscrit en
    juin 2007
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Vaucluse (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juin 2007
    Messages : 39
    Points : 70
    Points
    70
    Par défaut Petit problème de portabilité sous IE
    Bonjour, je suis actuellement en train d'intégrer une charte graphique au nouveau site corporate de l'entreprise, le choix pour porter la structure du site est Drupal 7.x, hors je me voit confronté à un petit souci dans la forme de mon menu sous internet explorer ( testé sous 9 ), les li du menu déborde vers le bas.

    Tout fonctionne très bien sous Chrome, Firefox, Opéra, Safari.

    Les sources :

    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
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    <div id="site-wrapper">
    	<div id="page">
     
    		<!-- menu-wrapper -->
    		<div id="menu-wrapper">
     
    				<!-- sidebar_first -->
    				<?php if( $page['sidebar_first'] ) : ?>
    					<div id="sidebar-first" class="column sidebar">
    						<div class="section">
     
    							<!-- logo -->
    							<?php if( $logo ) : ?>
    								<a href="<?php print $front_page ; ?>" title="<?php print t('Home') ; ?>" rel="home" id="logo">
    									<img src="<?php print $logo ; ?>" alt="<?php print t('Home') ; ?>" />
    								</a>
    							<?php endif ; ?>
    							<!-- /logo -->
     
    							<!-- main_menu -->
    							<?php if( $main_menu ) : ?>
    								<div id="main-menu">
    									<?php print theme( 'links__system_main_menu', array(
    											'links' 		=> $main_menu,
    											'attributes'	=> array(
    												'id' 	=> 'main-menu-links',
    												'class' => array( 'links', 'clearfix' ),
    											),
    											'heading' 		=> array(
    												'text' 	=> t('Main menu'),
    												'level' => 'h2',
    											),
    										)) ; 
    									?>
    								</div>
    							<?php endif ; ?>
    							<!-- /main_menu -->
    							<?php print render( $page['sidebar_first'] ) ; ?>
     
    						</div>
    					</div>
    				<?php endif ; ?>
    				<!-- /sidebar_first -->
    		</div>
    		<!-- /menu-wrapper -->
     
    		<!-- main-wrapper -->
    		<div id="main-wrapper">
    			<div id="main">
     
    				<!-- content -->
    				<div id="content" class="column">
    					<div class="section">
     
    						<a id="main-content"></a>
    						<?php print render( $title_prefix ) ; ?>
    						<?php if( $title ) : ?>
    							<h1 class="title" id="page-title">
    								<?php print $title ; ?>
    							</h1>
    						<?php endif ; ?>
    						<?php print render( $title_suffix) ; ?>
    						<?php if( $tabs ) : ?>
    							<div class="tabs">
    								<?php print render( $tabs ) ; ?>
    							</div>
    						<?php endif ; ?>
    						<?php print render( $page['help'] ) ; ?>
    						<?php if( $action_links ) : ?>
    							<ul class="action-links">
    								<?php print render( $action_links ) ; ?>
    							</ul>
    						<?php endif ; ?>
    						<?php print render( $page['content'] ) ; ?>
    						<?php print $feed_icons ; ?>
    					</div>
    				</div>
    				<!-- /content -->
     
    				<!-- footer-wrapper -->
    				<div id="footer">
    					<div class="section">
    						<?php if( $page['footer'] ) : ?>
    							<div id="footer" class="clearfix">
    								<?php print render( $page['footer'] ) ; ?>
    							</div>
    						<?php endif ; ?>
    					</div>
    				</div>
    				<!-- /footer-wrapper -->
     
    			</div>
    		</div>
    		<!-- /main-wrapper -->
     
     
    	</div>
    </div>
    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
    22
    23
    24
    25
    26
    27
    28
    /* CSS Document */
     
    /* General */
    html, body {  margin: 0; padding: 0; height: 100%; }
    #site-wrapper { height: 100%; }
    #page { height: 100%; }
     
    /* Sidebar-first ou Barre gauche { #menu-wrapper } */
    #menu-wrapper { height: 100%; float: left; background-color: #1A1A1A; border-right: 3px solid #F49B01; }
    #block-system-main-menu ul { padding: 0; margin: 0; }
    #block-system-main-menu li.leaf { background-color: #000000; margin: 0; padding: 0; margin-bottom: 1px; padding-bottom: -19px; }
    #block-system-main-menu li.leaf a { 
    	text-decoration: none;
    	color: #FFFFFF; 
    	font-size: 13px;
    	font-family: Tahoma, Geneva, sans-serif ; 
    	display: block; 
    	padding: 7px;
    	padding-left: 20px;
    	margin: 0;
    }
    #block-system-main-menu li.leaf a:hover { color: #000000; background-color: #F49B01; }
    #block-system-main-menu ul li.leaf { list-style-type: none ; list-style: none; list-style-image: none; }
     
    /* main-wrapper */
    #main-wrapper { height: 100%; float: left; }
    #content { height: 80%; }
    #footer { height: 20%; }
    Le menu est généré sous la forme suivante :
    <ul><li><a /></li><li><a /></li> .... </ul>

  2. #2
    Rédacteur

    Homme Profil pro
    Responsable de projet
    Inscrit en
    mai 2009
    Messages
    634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de projet
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : mai 2009
    Messages : 634
    Points : 3 511
    Points
    3 511
    Par défaut
    Salut,

    peux tu mettre le code HTML généré ?

  3. #3
    Membre régulier
    Homme Profil pro
    Développeur
    Inscrit en
    juin 2007
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Vaucluse (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juin 2007
    Messages : 39
    Points : 70
    Points
    70
    Par défaut
    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
    22
    23
    24
    25
    <div id="menu-wrapper">
      <!-- sidebar_first -->
        <div id="sidebar-first" class="column sidebar">
          <div class="section">
            <!-- logo -->
              <a href="/Drupal/" title="Accueil" rel="home" id="logo">
                <img src="http://localhost/Drupal/themes/owanis/logo.png" alt="Accueil" />
              </a>
            <!-- /logo -->
              <div class="region region-sidebar-first">
                <div id="block-system-main-menu" class="block block-system">
    	          <div class="content" >
                    <ul class="menu">
                      <li class="first leaf"><a href="/Drupal/" title="Lien vers la page entreprise du site" class="active">Entreprise</a></li>
                      <li class="leaf"><a href="/Drupal/" title="Lien vers la pages des solutions de Owanis" class="active">Solutions</a></li>
                      <li class="leaf"><a href="/Drupal/" title="Lien vers la page des références" class="active">Références</a></li>
                      <li class="leaf"><a href="/Drupal/" title="Lien la page support" class="active">Support</a></li>
                      <li class="last leaf"><a href="/Drupal/" title="Lien vers la page avec le formulaire de contact" class="active">Contact</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 488
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 488
    Points : 38 925
    Points
    38 925
    Par défaut
    essaies déjà en mettant un DOCTYPE Strict par exemple
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Petit problème de div sous Chrome
    Par mikesquake dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 23/07/2010, 11h37
  2. petit problème d'instalation d'orge sous vc++ 2005
    Par vmfa-2 sven dans le forum Ogre
    Réponses: 5
    Dernier message: 21/06/2008, 18h16
  3. Petit problème sous Firefox onkeydown
    Par frechy dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 27/09/2006, 10h25
  4. Problème de portabilité sous Linux
    Par eG.dam dans le forum Linux
    Réponses: 4
    Dernier message: 23/06/2006, 23h06

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo