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

[Psycha]

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 :

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 :

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>

[ornitho13]

Salut,

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

[Psycha]

Code :

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>

[NoSmoking]

essaies déjà en mettant un DOCTYPE Strict par exemple

Code html :

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