1
I'm currently having a rendering problem in IE7 (haven't even tried the lower IEs yet), vs. what I see in FF2. The simplified site can be found at solerasd.com . (There are more image elements that belong in the list but I've only posted 2 since it replicates the problem and minimizes the code to read. In FF, you should see a logo with two images (currently not HREF's) of the same size below it, and a copyright statement below the block with the images. In IE, you'll only see the logo and your cursor will disappear if you mouse over the area with the images.
The empty spans with an image background are there for accessibility reasons. Both the CSS and the HTML validate.
I've attempted numerous different ways of addressing the problem, all of which failed - some moved the positions of the images to odd positions, most do nothing. If the float is removed from the "about-us" LI, the images either overlap by the width of "About Us" text, or in the code below only a sliver of the products image shows. I've even managed to have IE7 throw an exception and crash every time I visited the site with some hacks. :)
The height and width attributes are repeated for each LI because when I attempted to move them to a generic LI in the CSS, the height of the list is reduced to the text in FF.
The code below is different than the site but produces the same results. Any help would be MUCH appreciated.
Thanks!
XHTML:
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta http-equiv="Content-Style-Type" content="text/css" />
- <title>Solera</title>
- <link rel="stylesheet" href="./styles/solera-sliced.css?v=1.1" type="text/css" media="screen" />
- <link rel="shortcut icon" href="./images/solera.ico" type="image/x-icon" />
- </head>
- <body>
- <div id="content">
- <h1 id="landing-logo">Solera<span /></h1>
- <ul id="landing-navlist">
- <li class="about-us">About Us<span /></li>
- <li class="products">Products<span /></li>
- </ul>
- <p id="copyright">© Copyright 2008 Solera. All rights reserved.</p>
- </div>
- </body>
- </html>
Expand|Select|Wrap|Line Numbers
- html { background-color: #000; }
- * {
- margin:0pt;
- padding:0pt;
- }
- /*
- a { color: #036; text-decoration: none;}
- a:hover { color: #09c; }
- */
- h1,h2,h3,h4, #content h1 a, #content h2 a, #content h3 a { font-weight: normal; color: #fff;}
- body {font: 15px Georgia, "Times New Roman", Times, serif; margin: 0; padding: 0; text-align: center; color: #fff; }
- /*
- h1, h2, h3 { margin: 0; padding: 0; }
- p { line-height: 22px; } */
- #landing-logo {
- margin:0; padding-top:30px;
- position:relative;
- width:865px; height:145px;
- overflow:hidden;
- }
- #landing-logo span {
- display:block;
- position:absolute; left:0; top:0; z-index:1;
- width:865px; height:145px;
- margin:0; padding-top:30px;
- background:url("../images/solera-logo.png") center no-repeat;
- }
- ul#landing-navlist {
- list-style:none;
- display:block;
- position:relative;
- overflow:hidden;
- }
- ul#landing-navlist li {
- display:inline;
- min-width:173px; min-height:378px;
- }
- ul#landing-navlist li.about-us {
- float:left;
- background:#000 none repeat scroll 0%;
- position:relative;
- overflow:hidden;
- min-width:173px; min-height:378px;
- }
- ul#landing-navlist li.about-us span {
- display:block;
- position:absolute; left:0; top:0; z-index:1;
- background:url("../images/about-us.png") center no-repeat scroll 0%;
- min-width:173px; min-height:378px;
- }
- ul#landing-navlist li.products {
- float:left;
- background:#000 none repeat scroll 0%;
- position:relative;
- overflow:hidden;
- min-width:173px; min-height:378px;
- }
- ul#landing-navlist li.products span {
- display:block;
- position:absolute; left:0; top:0; z-index:1;
- background:url("../images/products.png") center no-repeat scroll 0%;
- min-width:173px; min-height:378px;
- }
- p#copyright {
- position:relative;
- text-align:center;
- color:#fff;
- font:9px Verdana, "Trebuchet MS", "Times New Roman", Times, serif;
- }
- #content { margin: auto; text-align: center; width: 865px; height: 650px}
