[css] intégration pour IE7

**flu-1** · 23/03/2010, 10h35

Bonjour les amis,

je fais appelle à votre avis car je ne trouve pas de solution... après 2 jours de test et de recherche.

J'ai débarqué il y a 2 semaines sur un projet dont le css à été fait sur base d'un template trouvé sur le net (à mon avis) et adapté à la truelle (& basé sur un "framework" CSS).

Avant mon passage, le css passait correctement sur tout les navigateurs (y compris IE7).

Ils m'ont demandé de faire un paquet de "quick-win's" au niveau esthétique (donc css & html). Et l'affichage passe correctement sur tout les navigateurs récents sauf IE7 & IE6

J'ai essayé le fameux plugin JS "IE7.js" d'un des maitres JS. Il m'a solutionné quelques problèmes mais d'autres persistent... comme par exemple ici:

C'est le header et une partie du contenu html de la page vient se mettre dans cette partie (si je descend le scroll secondaire, je vois les block sensés être plus pas dans la page).

Voici l'affichage normal de cette partie...

Je ne suis pas un expert en intégration. (Je développe en php d'habitude).

Merci d'avance pour vos avis/conseils ou votre aide

**flu-1** · 23/03/2010, 11h57

Le HTML

Code html :

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
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
    <meta name="Author" content="" />
    <meta name="Description" content="" />
    <meta name="Keywords" content="" />   
    <link href="/css/style.css" rel="stylesheet" type="text/css">
	<link href="/css/1-default.css" rel="stylesheet" type="text/css"> 
 
 
	<link href="/css/new-style.css" rel="stylesheet" type="text/css"> 
 
	<!--[if lte IE 6]><link rel="stylesheet" href="/css/screen.css.php?lang=&amp;type=ie6" type="text/css" media="all" /><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" href="/css/screen.css.php?lang=&amp;type=ie7" type="text/css" media="all" /><![endif]-->
	<!--[if lt IE 7]><script type="text/javascript" src=""></script><![endif]-->
	<!--[if lt IE 7]><script type="text/javascript" src="/fix-ie/IE8.js"></script><![endif]-->	
	<!--[if lt IE 7]><script type="text/javascript" src="/fix-ie/ie7-squish.js"></script><![endif]-->
 
 
 
 
 
    <script type="text/javascript" src="/js/main.js.php?lang="></script>
 
</head>
 
<body >
 
<div id="header" class="clearfix">
 
<div class="container_12 ">
 
<div class="header-in">
  <div id="logo-spot">
        <h1 class="logo"> <a href="/" title=""> <img src="/fichiers/img/LogoFDL.png" alt="fiches de lecture : résumés et commentaires composés pour le bac de français"> </a> </h1>
      </div>
</div>
<div id="nav">
 
 
		<ul class="page-menu">
 
	 	<li ><a href="/">ACCUEIL</a></li>
 
 
 
		<li class="current_page_item "><a href="/livres/" title="Voir tous les livres">LIVRES</a></li>
 
 
 
		<li ><a href="/auteurs/" title="Voir tous les auteurs">AUTEURS</a></li>
 
 
	<li ><a href="/bac-de-francais/" title="Préparez le bac de français">BAC FRANCAIS</a></li>
</ul>
 
				<div id="rech">
				<form class="searchBox" action="/chercher/">
 
                <input id="livesearch" type="text" name="q" size="25" value="Chercher un livre, un auteur,.." onclick="if(this.value=='Chercher un livre, un auteur,..')this.value=''" onblur="if(this.value=='')this.value='Chercher un livre, un auteur,..'"> 
				<input type="image" class="search_button" src="/images/loupe4.png" width="29px">
 
				</form>
                </div>
 
 
 
 
</div>
</div>
<div id="banner" class="clearfix container_12" >

Le CSS

Code css :

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
 #header { padding:15px 10px 28px 0px; }
.header-in { position:relative; float:left; width: 280px; z-index:9999;  }
/*	--------------------------------------------------
 Structure
 -------------------------------------------------- */
 
#header { padding:15px 10px 28px 0px; }
.header-in { position:relative; float:left; width: 280px; z-index:9999;  } 
 
#banner { padding:45px 10px 20px 10px; position:relative; min-height:410px;    }
* html #banner { height:390px; }
*+html #banner { min-height:390px; }
 
#wrapper { padding:20px 10px; height:100%; overflow:hidden; }
#content { float:left; }
#content-in { float:left; }
 
#sidebar { float:right; min-height:600px; _height:600px; }
 
#content-blog { float:left; }
#sidebar-blog { width:270px; float:right;   padding-left:20px;  min-height:600px; _height:600px;   }
 
#page_head {  font-size:28px; padding:15px 10px; margin-bottom:1px;  }
#page_head h1 { margin:0; padding:0 20px 0 10px;  }
a.post-edit-link{ color:#666 }
a.post-edit-link:hover{ color:#000 }
#footer { padding:13px 10px 15px 10px; height:100%; overflow:hidden; }
 
 
/*	--------------------------------------------------
Header
-------------------------------------------------- */
h1.logo { position: relative; display: block; font-size:18px; padding:15px 0 0 10px; margin:0 0 0 0; float:left; z-index:999; }
.logo span { width: 100%; height: 100%; position:absolute; bottom:0; left:0;    }
.logo span, .logo span a { width:160px; height:28px;  }
.logo span a { display:block; cursor:pointer; }
.logo a:hover { text-decoration:none; }
.logo img {width:320px;position:absolute;top:5px;left:2px;}
 
#header #logo-spot{ display: block; font-size:18px; padding:0; margin:-15px 0 0 0; float:left; position:absolute; top:0; left:0; z-index:9999;  }
  #header .blog-title a{ color:#eee; font:bold 33px Verdana; padding:0; margin:0 ; text-decoration:none;}
    #header .blog-title a:hover{ text-decoration:none; color:#fff }
#header .blog-description{ color:#ccc }
 
/*---------TOP NAVIGATION for PAGES---------  */
#nav ul { float:right; margin:0px; padding:8px 0px 0px 10px; height:30px; position:relative; z-index:999; }
#nav li { float:left; list-style-type:none; margin:5px 17px 0px 17px; padding:0px; overflow:hidden; line-height:15px;   }
#nav ul li:hover a, #nav ul li.hover a, #nav ul li.current_page_item a { text-decoration:none; }
#nav ul li.current_page_item a:hover { text-decoration:none; }
#nav ul li a { font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; text-decoration:none; display:block;  padding:0px 0px 3px 0px; margin:0px; text-transform:uppercase;  }
#nav ul li a:hover { text-decoration:none; }
 
 
#header { background:#f5f5f5 url(img/Sslice.jpg) repeat-x top; height:35px; border-bottom:1px solid #b4c8d9; }
 
 
/*	--------------------------------------------------
Header
-------------------------------------------------- */
 
#nav ul li a { color:#5e7977;  }
#nav ul li a:hover { color:#5e7977; border-bottom:2px solid #5e7977;  }
 
#nav ul li.current_page_item a  { color: #3c4a4a;   border-bottom:2px solid #fff;  }
 
#rech {display:block;}
#livesearch {margin:0px -4px 0px 0px;}
.search_button {margin:0px;vertical-align:top;position:relative;left:0px; border-top:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;}

[css] intégration pour IE7

CSS

Vue hybride

Discussions similaires

Partager

Partager