Bonjour,
J'ai un problème de cadre avec coin arrondis composé par des images qui ne se présente que sous IE6 et antérieurs: des "gaps" apparaissent quoique je fasse (agrandir la taille, la diminuer, enlevr les marges, le padding etc.). Cf l'image jointe. Le rendu marche très bien sous IE7, Firefox, Safari etc.
J'ai eu beau essayer tout un tas de solutions, rien à faire.
Voici le code html:
… et le CSS:
Au passage, vous constaterez aussi un bug de menu qui ne veut décidément pas se centrer sous IE6 et 7. J'en parle dans un autre post
Voici le rendu sous IE6, je ne peux pas publier le site en ligne:
Merci d'avance!
Modifié par Mateo (26 Sep 2007 - 07:43)
J'ai un problème de cadre avec coin arrondis composé par des images qui ne se présente que sous IE6 et antérieurs: des "gaps" apparaissent quoique je fasse (agrandir la taille, la diminuer, enlevr les marges, le padding etc.). Cf l'image jointe. Le rendu marche très bien sous IE7, Firefox, Safari etc.
J'ai eu beau essayer tout un tas de solutions, rien à faire.
Voici le code html:
<!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" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="pragma" content="no-cache" />
<meta name="cache-control" content="no-cache" />
<meta name="expires" content="0" />
<title>
Virtual Cement and Concrete Testing Laboratory 7.0
</title>
<link rel="stylesheet" href="/vcctl/css/default-layout.css" type="text/css"/>
<link rel="stylesheet" href="/vcctl/css/menu.css" type="text/css"/>
</head>
<body>
<div id="header">
<!-- Here comes the header -->
<!-- The image is in the CSS file -->
</div>
<!-- Here comes the tab menu -->
<div id="tab-menu">
<!-- Left corner of the tab menu -->
<div id="tabs-left-corner"></div>
<div id="tabs-right">
<ul>
<li id="home" class="current-left"><div class="current-right"><a onclick="">Home</a></div></li>
<li id="mix" class="after-current"><a onclick="">Mix</a></li>
<li id="measurements"><a onclick="">Measurements</a></li>
<li id="lab-materials"><a onclick="">Lab Materials</a></li>
<li id="my-operations"><a onclick="">My Operations</a></li>
<li id="my-files"><a onclick="">My Files</a></li>
</ul>
</div>
</div>
<div id="main">
<div id="top-border">
<div id="top-left-border"></div>
<div id="top-right-border"></div>
</div>
<!-- Here comes the submenu, hidden by default -->
<div id="subtab-menu" style="display:none">
<div id="subtabs-left-corner"></div>
<div id="subtabs-right">
<ul></ul>
</div>
</div>
<div id="content-left">
<div id="content-right">
<p>Test</p>
</div>
</div>
<div id="bottom-border">
<div id="bottom-left-border"></div>
<div id="bottom-right-border"></div>
</div>
</div>
</body>
</html>
… et le CSS:
* {
margin: 0;
padding: 0;
}
#header {
width: 100%;
height: 150px;
background: url("../images/logo.jpg") no-repeat scroll center;
}
body {
margin: 5px auto 20px;
width: 780px;
}
/* @group Main Content */
#main {
width: 780px;
margin-top: 20px;
}
#content-left {
background: url(../images/main-left-border.gif) repeat-y left;
padding-left: 4px;
}
#content-right {
background: #fff url(../images/main-right.gif) repeat-y right;
}
#content {
text-indent: 1em;
padding-right: 20px;
padding-left: 20px;
padding-top: 12px;
}
/* @group Top Border */
#top-left-border {
background: url(../images/top-left-corner.gif) no-repeat;
float: left;
/* IE bug with float */
display: inline;
width: 13px;
height: 13px;
}
#top-right-border {
background: url(../images/top-right.gif) no-repeat right;
height: 13px;
}
/* @end */
/* @group Bottom border */
#bottom-left-border {
background: url(../images/bottom-left-corner.gif) no-repeat;
float: left;
/* IE bug with float */
display: inline;
width: 13px;
height: 13px;
}
#bottom-right-border {
background: url(../images/bottom-right.gif) no-repeat right;
height: 13px;
}
/* @end */
/* @group IE only */
/* IE has lot of bugs, so we have to do this... */
* html body {
text-align: center;
/* Allow to center the design with IE 5.5 */
}
* html #top-left-border {s
z-index: 100;
margin: 0px;
padding: 0px;
border-width: 0px;
}
* html #top-right-border {
margin: 0;
padding: 0;
border-width: 0;
}
/* @group Main content */
* html #main * {
text-align: justify;
}
/* @end */
/* @end */
Au passage, vous constaterez aussi un bug de menu qui ne veut décidément pas se centrer sous IE6 et 7. J'en parle dans un autre post
Voici le rendu sous IE6, je ne peux pas publier le site en ligne:
Merci d'avance!
Modifié par Mateo (26 Sep 2007 - 07:43)
