472,995 Members | 1,780 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,995 software developers and data experts.

IE7 rendering problem for image UL list navigation

Hi everyone,

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.


Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7.     <meta http-equiv="Content-Style-Type" content="text/css" />
  8.     <title>Solera</title>
  9.     <link rel="stylesheet" href="./styles/solera-sliced.css?v=1.1" type="text/css" media="screen" />
  10.     <link rel="shortcut icon" href="./images/solera.ico" type="image/x-icon" />
  11. </head>
  13. <body>
  15.     <div id="content">
  17.         <h1 id="landing-logo">Solera<span /></h1>
  19.         <ul id="landing-navlist">
  20.             <li class="about-us">About Us<span /></li>
  21.             <li class="products">Products<span /></li>
  22.         </ul>
  24.         <p id="copyright">&copy; Copyright 2008 Solera. All rights reserved.</p>
  26.     </div>
  28. </body>
  29. </html>
Expand|Select|Wrap|Line Numbers
  1. html { background-color: #000; }
  3. * {
  4.     margin:0pt;
  5.     padding:0pt;
  6. }
  8. /*
  9. a { color: #036; text-decoration: none;}
  10. a:hover { color: #09c; }
  11. */
  12. h1,h2,h3,h4, #content h1 a, #content h2 a, #content h3 a { font-weight: normal; color: #fff;}
  15. body {font: 15px Georgia, "Times New Roman", Times, serif; margin: 0; padding: 0; text-align: center; color: #fff; }
  16. /*
  17. h1, h2, h3 { margin: 0; padding: 0; }
  19. p { line-height: 22px; } */
  21. #landing-logo {
  22.     margin:0; padding-top:30px;
  23.     position:relative;
  24.     width:865px; height:145px;
  25.     overflow:hidden;
  26. }
  28. #landing-logo span {
  29.     display:block;
  30.     position:absolute; left:0; top:0; z-index:1;
  31.     width:865px; height:145px;
  32.     margin:0; padding-top:30px;
  33.     background:url("../images/solera-logo.png") center no-repeat;
  34. }
  37. ul#landing-navlist {
  38.     list-style:none;
  39.     display:block;
  40.     position:relative;
  41.     overflow:hidden;
  42.     }
  44. ul#landing-navlist li {
  45.     display:inline;
  46.     min-width:173px; min-height:378px;  
  47.     }
  49. ul#landing-navlist li.about-us {
  50.     float:left;
  51.     background:#000 none repeat scroll 0%;
  52.     position:relative;
  53.     overflow:hidden;
  54.     min-width:173px; min-height:378px;
  55.     }
  57. ul#landing-navlist li.about-us span {
  58.     display:block;
  59.     position:absolute; left:0; top:0; z-index:1;
  60.     background:url("../images/about-us.png") center no-repeat scroll 0%;
  61.     min-width:173px; min-height:378px;
  62.     }
  64. ul#landing-navlist li.products {
  65.     float:left;
  66.     background:#000 none repeat scroll 0%;
  67.     position:relative;
  68.     overflow:hidden;
  69.     min-width:173px; min-height:378px;
  70.     }
  72. ul#landing-navlist li.products span {
  73.     display:block;
  74.     position:absolute; left:0; top:0; z-index:1;
  75.     background:url("../images/products.png") center no-repeat scroll 0%;
  76.     min-width:173px; min-height:378px;
  77.     }
  79. p#copyright {
  80.     position:relative;
  81.     text-align:center;
  82.     color:#fff;
  83.     font:9px Verdana, "Trebuchet MS", "Times New Roman", Times, serif;
  84. }
  86. #content { margin: auto; text-align: center; width: 865px; height: 650px}
Feb 10 '08 #1
1 3067
7,435 Expert 4TB
Well, you changed it on us.
Feb 10 '08 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

by: Saku | last post by:
Greetings, I'm having problems with correct rendering of an aligned image and list items. The following test page demonstrates the issue: ----------clip---clap---clip---clap---------- <html>...
by: Derek Fountain | last post by:
I have a horizontal navigation bar, which is a single row table containing the right images. It "stretches" itself across the screen using a penultimate td like this: <td width="100%"...
by: Stephen Wolfman | last post by:
I'm rendering an RS report into an image programmatically before printing (using System.Drawing.Printing) it, but it always renders the image based upon the screen resolution of the server that my...
by: Juan R. | last post by:
Since the idea of encoding mathematics using MathML is being very far from popular due to a number of factors -expensive tools, bad accesibility of generated code, unusual verbosity, lack of...
by: getburl | last post by:
I am currently having an issue where I render 3 1k images to the page in IE when the user clicks a button. Everything works well in FF and Good Browsers et al., but in IE I have to wrap some dummy...
by: paul.denlinger | last post by:
Hi-- Things have gone well for me on this page design, but when I added a background image, it pushed everything down and messed up my page layout. Before I added the navigation background...
by: EmmaEliza | last post by:
I have coded my css so that my text links have a background and border which I want to keep but I cant seem to edit the css so that my image links dont have the same thing.... ...
by: tom59593 | last post by:
Hi there. I have been attempting (for a few days on end, sadly) to get a navigation section of my new site to work. Granted, this is the first time I've ever written CSS...although I had PLENTY of...
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
by: SueHopson | last post by:
Hi All, I'm trying to create a single code (run off a button that calls the Private Sub) for our parts list report that will allow the user to filter by either/both PartVendor and PartType. On...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.