Advertisement

05.16.2008 at 10:03AM PDT, ID: 23409032
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
9.3

Why doesn't the pictures show in IE7 when they are perfect in Firefox?

Zones: Cascading Style Sheets (CSS), Internet Explorer Web Browser, Firefox Web Browser
Tags: XHTML CSS, Firefox, IE7
Hello Experts,

Having a bit of a problem with IE7. I'm not sure if it is the same problem with IE6/8, but probably.
Firefox works fine...

Heres whats up:
1) No pictures are showing when I run my webpage in IE7.
2) My menu (has pictures) is not showing correct. Heres how it looks (when it's not correct):

Start
          About
                         Contact
                                                ...etc

I run the webpage from C:\Inetpub\wwwroot since I'm using asp for some functions.

How do I solve this?

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:

--------
  CSS
--------
div.header {
  position: absolute;
  top: 17px;
  left: 1px;
  width: 823px;
  height: 143px;
  background: white url(images/header.png/) no-repeat;
}
 
div.menu {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 800px;
  height: 40px; 
  font-size: 16px;
  font-family: "Modern Nr. 20"; 
  background-image: url(images/menu.png/);
}
 
div.menu ul{
  float:center;
  padding-left: 50px;
  margin: 0;
  list-style-type:none;
}
 
div.menu ul li{
  background-image: url(images/menu_button.png/);
}
 
div.menu ul li a{
  float: left;
  text-decoration: none;
  color: #f7ea61;
  padding: 0.6em 0.6em;
}
 
div.menu ul li a:hover{
  text-decoration: none;
  background-image: url(images/menu_button_hoover.png/); 
}
 
div.menu ul li.active a, div#menu ul li.subactive a{
  text-decoration: none;
  color: white;
}
 
 
--------
 HTML
--------
<div class="header">         
</div>
 
<div class="menu">	
  <ul>
    <li class="main active"><a class="menu" href="/">Start</a></li>
    <li class="first"><a class="menu" href="about.html">About</a></li>
    <li class="link"><a class="menu" href="contact.html">C...</a></li>
.
.
.        
  </ul>	
</div>
Start your free trial to view this solution
Question Stats
Zone: Software
Question Asked By: PerryDaynac
Solution Provided By: strobbe
Participating Experts: 2
Solution Grade: A
Views: 38
Translate:
Loading Advertisement...
05.16.2008 at 10:07AM PDT, ID: 21584467
mattcarver:

All comments and solutions are available to Premium Service Members only.

Start your 7-day free trial and see for yourself why Experts Exchange is the easiest and most proven technology resource in the world. Get Started

Already a member? Login to view this solution.

 
05.16.2008 at 01:23PM PDT, ID: 21586143
strobbe:

All comments and solutions are available to Premium Service Members only.

Start your 7-day free trial and see for yourself why Experts Exchange is the easiest and most proven technology resource in the world. Get Started

Already a member? Login to view this solution.

 
 
Loading Advertisement...
Microsoft
  • Internet Protocols
  • Applications
  • Development
  • OS
  • Hardware
  • Windows Security
Apple
  • Operating Systems
  • Hardware
  • Programming
  • Networking
  • Software
Internet
  • Search Engines
  • File Sharing
  • WebTrends / Stats
  • Spy / Ad Blockers
  • Web Browsers
  • New Net Users
  • Web Development
  • Chat / IM
  • Anti Spam
  • Web Servers
  • Anti-Virus
  • Email Clients
Gamers
  • Tips
  • Online / MMORPG
  • Puzzle
  • Emulators
  • Action / Adventure
  • Role Playing
  • Consoles
  • Game Programming
  • Strategy
  • Sports
  • Misc
  • Computer Games
Digital Living
  • Hardware
  • Automotive
  • New Net Users
  • New Users
  • Software
  • Digital Music
  • Gaming World
  • Home Security
  • Apple
  • Networking Hardware
Virus & Spyware
  • Vulnerabilities
  • IDS
  • Encryption
  • Anti-Virus
  • Operating Systems Security
  • Software Firewalls
  • WebApplications
  • Cell Phones
  • Operating Systems
  • Internet
  • Hardware Firewalls
Hardware
  • Displays / Monitors
  • Handhelds / PDAs
  • Components
  • Peripherals
  • Laptops/Notebooks
  • Servers
  • Misc
  • Apple
  • Embedded Hardware
  • Networking Hardware
  • Storage
  • Desktops
  • New Users
Software
  • System Utilities
  • Industry Specific
  • Network Management
  • Photos / Graphics
  • Page Layout
  • VMware
  • Misc
  • Web Development
  • OS
  • CYGWIN
  • Voice Recognition
  • Virtualization
  • Message Queue
  • Quality Assurance
  • Security
  • Firewalls
  • MultiMedia Applications
  • Development
  • Database
  • Office / Productivity
  • Business Management
  • OS/2 Apps
  • Server Software
  • Internet / Email
ITPro
  • OS
  • Storage
  • Encryption
  • Operating Systems Security
  • Apple Hardware
  • Laptops & Notebooks
  • Servers
  • Networking Hardware
  • Peripherals
  • Devices
  • Displays / Monitors
  • WebTrends / Stats
  • Search Engines
  • Firewalls
  • Web Computing
  • WebApplications
  • IDS
  • Vulnerabilities
  • Email Clients
  • File Sharing
  • Spy / Ad Blockers
  • Web Browsers
  • Web Servers
  • Networking
  • Anti-Virus
  • Consulting
  • Chat / IM
  • Anti Spam
Developer
  • Web Servers
  • Web Browsers
  • Game Programming
  • Dev Tools
  • Industry Specific
  • Office / Productivity
  • Database
  • CYGWIN
  • Web Development
  • Search Engines
  • File Sharing
  • WebTrends / Stats
  • Programming
  • Content Management
  • Application Servers
  • Protocols
Storage
  • Removable Backup Media
  • Storage Technology
  • Servers
  • Grid
  • Remote Access
  • Backup / Restore
  • Misc
  • Hard Drives
OS
  • Miscellaneous
  • Security
  • Development
  • Linux
  • VMware
  • MainFrame OS
  • Unix
  • Apple
  • OS / 2
  • AS / 400
  • BeOS
  • Microsoft
  • VMS / OpenVMS
Database
  • Oracle
  • Miscellaneous
  • MySQL
  • Software
  • Sybase
  • Contact Management
  • PostgreSQL
  • Data Manipulation
  • Clarion
  • InterSystems Cache
  • Siebel
  • MUMPS
  • OLAP
  • SQLBase
  • SAS
  • GIS & GPS
  • 4GL
  • Berkeley DB
  • DB2
  • Informix
  • Interbase / Firebird
  • FoxPro
  • Reporting
  • LDAP
  • Filemaker Pro
  • MS SQL Server
  • dBase
  • MS Access
Security
  • Misc
  • Web Browsers
  • Software Firewalls
  • Operating Systems Security
  • File Sharing
  • Spy / Ad Blockers
  • Vulnerabilities
  • WebApplications
  • IDS
  • Anti-Virus
  • Encryption
  • Anti Spam
  • Email Clients
  • VPN
  • Chat / IM
Programming
  • Editors IDEs
  • Installation
  • Handhelds / PDAs
  • Multimedia Programming
  • System / Kernel
  • Automation
  • Algorithms
  • Game
  • Signal Processing
  • Project Management
  • Open Source
  • Database
  • Misc
  • Languages
  • Processor Platforms
  • Theory
Web Development
  • Scripting
  • Blogs
  • Web Servers
  • Software
  • Search Engines
  • Web Graphics
  • Web Services
  • Images
  • Internet Marketing
  • Images and Photos
  • Components
  • Document Imaging
  • Web Languages/Standards
  • Illustration
  • WebApplications
  • Fonts
  • WebTrends / Stats
  • Authoring
  • Digital Camera Software
  • Miscellaneous
Networking
  • Protocols
  • Apple Networking
  • Network Management
  • Message Queue
  • Application Servers
  • Content Management
  • File Servers
  • Email Servers
  • Misc
  • Java Editors & IDEs
  • Wireless
  • Networking Hardware
  • Backup / Restore
  • System Utilities
  • ISPs & Hosting
  • Web Servers
  • Storage Technology
  • Removable Backup Media
  • Servers
  • Web Computing
  • Broadband
  • Grid
  • OS / 2
  • Novell Netware
  • Unix Networking
  • Windows Networking
  • Security
  • Telecommunications
  • Operating Systems
  • Linux Networking
Other
  • Lounge
  • Business Travel
  • Community Support
  • New Net Users
  • Philosophy / Religion
  • Math / Science
  • Miscellaneous
  • URLs
  • Expert Lounge
  • Politics
  • Puzzles / Riddles
  • Automotive
Community Support
  • Suggestions
  • New to EE
  • New Topics
  • CleanUp
  • Announcements
  • General
  • Feedback
  • Input
  • EE Bugs
 
05.16.2008 at 10:07AM PDT, ID: 21584467
mattcarver:
Can you attach your png images?  If you don't want to attach them, can you give us the image dimensions so we can make some simple ones to test your code on our end?

Thanks.
 
05.16.2008 at 01:23PM PDT, ID: 21586143
strobbe:
Two separate issues at work here.

1. Regarding the background images: In your CSS, you have slashes after the image name. Can't see a reason for these, and they're confusing IE. (Honestly, I'm kind of surprised it's not the other way around. IE's usually the lenient one.)

2. Regarding the stair-step look: Also in your CSS, you're floating the links within the menu list items rather than the list items themselves. At least in IE, each list item is being displayed at full width, which doesn't leave room for the next list item. So it gets bumped down to the next line.

Solution: remove the slashes after each background image name and move the "float: left" rule from your anchor rules to your list item rules. Revised code is attached. It's been tested in Firefox 2, IE7, and IE6.
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:
76:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style>
div.header {
  position: absolute;
  top: 17px;
  left: 1px;
  width: 823px;
  height: 143px;
  background: white url(images/header.png) no-repeat;
}
 
div.menu {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 800px;
  height: 40px; 
  font-size: 16px;
  font-family: "Modern Nr. 20"; 
  background-image: url(images/menu.png);
}
 
div.menu ul{
  float:center;
  padding-left: 50px;
  margin: 0;
  list-style-type:none;
}
 
div.menu ul li{
  float: left;
  margin: 0;
  background-image: url(images/menu_button.png);
  border: 1px solid black;
}
 
div.menu ul li a{
  text-decoration: none;
  color: #f7ea61;
  padding: 0.6em 0.6em;
}
 
div.menu ul li a:hover{
  text-decoration: none;
  background-image: url(images/menu_button_hoover.png); 
}
 
div.menu ul li.active a, div#menu ul li.subactive a{
  text-decoration: none;
  color: white;
}
 
 
  </style>
  </head>
  <body>
<div class="header">         
</div>
 
<div class="menu">      
  <ul>
    <li class="main active"><a class="menu" href="/">Start</a></li>
    <li class="first"><a class="menu" href="about.html">About</a></li>
    <li class="link"><a class="menu" href="contact.html">C...</a></li>
.
.
.        
  </ul>
</div>
  </body>
</html>
Open in New Window
Accepted Solution
 
 
20080236-EE-VQP-29 / EE_QW_2_20070628