Forum Moderators: not2easy
I'm designing a web site (XHTML 1.0 / CSS 2). It works fine in IE5 to IE6, in Firefox, Opera and Konqueror.
And not *that* fine in -guess what- IE7... (BTW : I use IE7 on Linux with ies4linux)
I use background images. When the image is bigger thant the element it styles, it is not cropped. It appears crunched in IE7. No explanation about it. Some other times, the image will appear only partially...
Has anyone experienced this? I post a sample code for those who are interested in testing. You will uncomment some lines to get the two cases.
Regards,
Marino Ceccotti
-------- SAMPLE CODE -----------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr">
<head>
<title>example.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* Two CSS3 lines to tweak the correct box model. */
*
{
box-sizing: content-box;
-moz-box-sizing: content-box;
}
/* This is done to wipe out any default settings for any browser. */
* {margin:0;padding:0;border:none;}
li {margin-left:1em;}
html {height:100%;width:100%;}
body {color:#000000;background-color:#ffffff;text-align:center;font-family:Arial, sans-serif;}
#wrapper {clear:both;width:72.72em;margin:auto;text-align:left;background-color:#ffffff;}
#wrapper {font-size:0.7em;}
div[id=wrapper] {font-size:11px;}
#wrapper #main
{
margin:0 0 0 0;
padding:0 0 0 0;
width:72.72em;
clear:both;
vertical-align:top;
background-color:Transparent;
position:absolute;
z-index:2;
}
#wrapper #main #leftColumn
{padding:0 0 0 1em;margin:0;width:17.181em;float:left;clear:both;background-color:#ffffff;
background-color:#cccccc;
background-image:url(http://www.example.com/mime/gif/dottedLinePattern.gif);
background-repeat:repeat-y;
background-position:50% 0%;
}
#wrapper #main #leftColumn #destination
{
width:18.181em;
display:block;
border-bottom:1px solid #373C3F;
height:auto;
margin: 0 0 0 -1em;
padding:6em 0 0 0;
background-color:Transparent;
/* ------------------------------------------------------------------------ */
/* First case : Image cruched in IE7 */
background-image:url(http://www.example.com/mime/gif/backgroundHeader07.gif);
background-repeat:repeat;
background-position:50% 100%;
/* ------------------------------------------------------------------------ */
/* Second case : Image appears partially in IE7 */
/*
background-image:url(http://www.example.com/mime/gif/joinUsPictogram.gif);
background-repeat:repeat;
background-position:100% 33%;
*/
}
#wrapper #main #leftColumn #destination a {color:#ffffff;}
#wrapper #main #leftColumn #destination div
{
border-bottom:1px solid #373C3F;
background-color:Blue;
}
#wrapper #main #leftColumn #destination div span
{
color:#ffffff;
padding: 0 47px 0.71em 1em;
display:block;
background-color:Transparent;
}
#wrapper #main #leftColumn #destination div span strong
{
font-weight:bolder;
text-transform:uppercase;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
<div id="leftColumn" class="indexLeftColumn">
<div id="destination">
<div>
<span>
<a href="#">
<strong>Lorem Ipsum</strong>
<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</a>
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
[edited by: DrDoc at 6:01 pm (utc) on June 20, 2007]
[edit reason] Examplified URLs [/edit]
