IE 7 rendering only on client's two computers!

Question

greenglow 0 Newbie Poster

15 Years Ago

Hi,

I'm at a loss to resolve a tough rendering problem. The only one seeing it (that I'm aware of) is the client, on two computers with IE7.0.5730.13).

I've run the URL through Litmus App rendering tests and some other rendering programs and can’t find the cause. On one computer the navigation text under the header doesn't appear at all and the left side moves to the left. On the other (screenshot attached) the top horizontal navigation text doesn't show completely, appearing pushed down below its normal center position. The left sidebar is also missing some items.

I have not been able to reproduce the problem on any other computer.

If anyone can help me narrow this down-CSS? Java Script? IE settings? I'd b extremely grateful.
Thanks!

web-design

2 Contributors
4 Replies
127 Views
1 Week Discussion Span
Latest Post 15 Years Ago Latest Post by greenglow

All 4 Replies

MidiMagic 579 Nearly a Senior Poster

15 Years Ago

Questions:

How did you size and position the elements?

Are the screen resolutions different on the suspect computers, compared to the computers the page works on?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

greenglow 0 Newbie Poster · Answer 1 · 2009-02-28T10:44:33+00:00

greenglow 0 Newbie Poster

15 Years Ago

Thanks very much for getting back to me. I'm not sure exactly what you mean about the elements-we used relative positions and div's.. I've attached the CSS and the header.php file if this will help with the path you're thinking about.

I don't know the monitor resolutions of the offending computers but will try to find out.
Please let me know if this is helpful.

MeiLei_CSS.txt (5.79 KB)

/*
Theme Name: Mei Lei.
Description: Theme for Mei Lei Collections.
Version: 1.0
Author: Alias Solutions
Author URI: http://alias-solutions.com
*/

@charset "utf-8";
/* CSS Document */

/* clear browser formatting */

html, body {
	font-size: 1em;
	margin: 0;
	padding: 0;
	line-height: 1;
}

* {
	font-size: 1em;
	margin: 0;
	padding: 0;
	outline: 0;
}

img { border: none; }
ul, ol, li { list-style: none; }
:focus { outline: none; }
table, td, form, fieldset {
	border: none;
	border-collapse:
	collapse; border-spacing: 0;
}

/* [ REUSABLE CLASSES ] */
.hide { display: none; }
.right { float: right; }
.left { float: left; }
.current { cursor: default; }
.clear {
	clear: both;
	height: 0;
	margin: 0;
	padding: 0;
	line-height: 0;
	font-size: 1px;
	overflow: hidden;
}
.center {
	margin: 0 auto;
	text-align: center;
}

.alignleft {
	float: left;
	padding-right: 25px;
	padding-bottom: 10px;
}

.alignright {
	float: right;
	padding-left: 25px;
	padding-bottom: 10px;
}


/* Formatting for Mei Lei */

body {
	background-image: url(images/MeiLei_BG_Pattern.jpg);
}

#container {
	width: 940px;
	margin: 0 auto;
}

#wrapper {
	width: 940px;
	background-image: url(images/MeiLei_Main_Drop_Shadow.png);
	background-repeat: repeat-y;
	float: left;
}

#content {
	margin: 0 auto;
	width: 900px;
	background-color: #FFFFFF;
}

/* Header Formatting */

#header {
	width: 900px;
	height: 167px;
	margin: 0 auto;
	background-image: url(images/MeiLei_Site_Header.jpg);
	position: relative;
}

#home_link {
	position: absolute;
	left: 31px;
	top: 19px;
}

/* Main Navigation */

#main_nav {
	width: 900px;
	background-color: #000000;
	height: 49px;
}

#main_nav img { 
	border: none; 
}

#main_nav li { 
	display: inline; 
	list-style: none; 
}

#main_nav li a { 
	float: left; 
	display: block; 
}

#main_nav li a img {
 	border: none; 
	vertical-align: bottom; /* for IE6 */
}
#main_nav li a:hover { 
	visibility: visible; /* for IE6 */ 
}
#main_nav li a:hover img { 
	visibility: visible; /* for IE6 */ 
}
#main_nav li a:hover img/**/ { 
	visibility: hidden; /* hide from IE5.0/win */
}

/* id's for rollover images */

#home { background:url(images/MeiLei_MainNav_Home_Red.jpg) no-repeat left bottom; }
#decor { background:url(images/MeiLei_MainNav_HomeDecor_Red.jpg) no-repeat left bottom; }
#paintings { background:url(images/MeiLei_MainNav_Paintings_Red.jpg) no-repeat left bottom; }
#jewelry { background:url(images/MeiLei_MainNav_Jewelry_Red.jpg) no-repeat left bottom; }
#about { background:url(images/MeiLei_MainNav_About_Red.jpg) no-repeat left bottom; }
#faq { background:url(images/MeiLei_MainNav_FAQ_Red.jpg) no-repeat left bottom; }
#contact { background:url(images/MeiLei_MainNav_Contact_Red.jpg) no-repeat left bottom; }

/* Main Content Area */

#main_content_area {
	width: 900px;
	margin: 0 auto;
	float: left;
	background-image: url(images/MeiLei_Site_Main_Content_Area_Bkg.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-color: #FFFFFF;
	margin-bottom: 25px;
}

#main {
	width: 644px;
	float: right;
	padding-top: 25px;
	background-color: #FFFFFF;
}

#main p {
	padding: 8px 25px 8px 0px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	text-align: justify;
	font-size: 12px;
	line-height: 150%;
}

#main h2 {
	size: 16px;
	font-weight: bold;
	padding-bottom: 8px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #ba8036;
}
	

#subhead {
	padding-top: 20px;
	padding-bottom: 10px;
}

.divider {
	clear: both;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 25px;
	padding-top: 15px;
}

.excerpt img {
	padding-right: 15px;
}

/* Sidebar Formatting */

#sidebar {
	width: 256px;
	float: left;
	padding-top: 25px;
	background-color: #FFFFFF;
}

#sub_nav_top {
	width: 227px;
	height: 82px;
	background-image: url(images/MeiLei_SideNav_Scroll_Top.jpg);
	background-repeat: no-repeat;
}
	
#sub_nav {
	width: 201px;
	background-image: url(images/MeiLei_SideNav_Scroll_MidRepeat.jpg);
	background-repeat: repeat-y;
}
	

#sub_nav ul {
	width: 181px;
	padding-left: 10px;
	padding-right: 10px;
}

#sub_nav li {
}

#sub_nav a {
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #FFFFFF;
	display: block;
	background-image: url(images/MeiLei_Site_SideNav_Leaf_Design.png);
	background-repeat: no-repeat;
	background-position: bottom;
	padding-top: 10px;
	padding-bottom: 25px;
	text-align: center;
	line-height: 150%;
	font-weight: bold;
	text-decoration: none;
	letter-spacing: 2px;
}

#no_img a {
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #FFFFFF;
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	line-height: 150%;
	font-weight: bold;
	text-decoration: none;
	letter-spacing: 2px;
	background-image: none;
}
	

#sub_nav a:hover {
	color: #ba8036;
}

#sub_nav_bottom {
	width: 227px;
	height: 82px;
	background-image: url(images/MeiLei_SideNav_Scroll_Bottom.jpg);
	background-repeat: no-repeat;
}

/* Formatting for Footer */

#footer {
	width: 900px;
	height: 87px;
	clear: both;
	background-image: url(images/MeiLei_Site_Footer.jpg);
	background-repeat: no-repeat;
}

#footer p {
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	letter-spacing: 3px;
	color: #FFFFFF;
	text-align: center;
	padding-top: 50px;
}

.copyright {
	color: #b98136;
}

#alias {
	clear: both;
	margin: 0 auto;
	padding-top: 15px;
	padding-bottom: 15px;
}

#alias a {
	color: #000000;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	text-decoration: none;
	display: block;
	text-align: center;
}

MeiLei_header.txt (5.73 KB)

/*
Theme Name: Mei Lei.
Description: Theme for Mei Lei Collections.
Version: 1.0

*/

@charset "utf-8";
/* CSS Document */

/* clear browser formatting */

html, body {
	font-size: 1em;
	margin: 0;
	padding: 0;
	line-height: 1;
}

* {
	font-size: 1em;
	margin: 0;
	padding: 0;
	outline: 0;
}

img { border: none; }
ul, ol, li { list-style: none; }
:focus { outline: none; }
table, td, form, fieldset {
	border: none;
	border-collapse:
	collapse; border-spacing: 0;
}

/* [ REUSABLE CLASSES ] */
.hide { display: none; }
.right { float: right; }
.left { float: left; }
.current { cursor: default; }
.clear {
	clear: both;
	height: 0;
	margin: 0;
	padding: 0;
	line-height: 0;
	font-size: 1px;
	overflow: hidden;
}
.center {
	margin: 0 auto;
	text-align: center;
}

.alignleft {
	float: left;
	padding-right: 25px;
	padding-bottom: 10px;
}

.alignright {
	float: right;
	padding-left: 25px;
	padding-bottom: 10px;
}


/* Formatting for Mei Lei */

body {
	background-image: url(images/MeiLei_BG_Pattern.jpg);
}

#container {
	width: 940px;
	margin: 0 auto;
}

#wrapper {
	width: 940px;
	background-image: url(images/MeiLei_Main_Drop_Shadow.png);
	background-repeat: repeat-y;
	float: left;
}

#content {
	margin: 0 auto;
	width: 900px;
	background-color: #FFFFFF;
}

/* Header Formatting */

#header {
	width: 900px;
	height: 167px;
	margin: 0 auto;
	background-image: url(images/MeiLei_Site_Header.jpg);
	position: relative;
}

#home_link {
	position: absolute;
	left: 31px;
	top: 19px;
}

/* Main Navigation */

#main_nav {
	width: 900px;
	background-color: #000000;
	height: 49px;
}

#main_nav img { 
	border: none; 
}

#main_nav li { 
	display: inline; 
	list-style: none; 
}

#main_nav li a { 
	float: left; 
	display: block; 
}

#main_nav li a img {
 	border: none; 
	vertical-align: bottom; /* for IE6 */
}
#main_nav li a:hover { 
	visibility: visible; /* for IE6 */ 
}
#main_nav li a:hover img { 
	visibility: visible; /* for IE6 */ 
}
#main_nav li a:hover img/**/ { 
	visibility: hidden; /* hide from IE5.0/win */
}

/* id's for rollover images */

#home { background:url(images/MeiLei_MainNav_Home_Red.jpg) no-repeat left bottom; }
#decor { background:url(images/MeiLei_MainNav_HomeDecor_Red.jpg) no-repeat left bottom; }
#paintings { background:url(images/MeiLei_MainNav_Paintings_Red.jpg) no-repeat left bottom; }
#jewelry { background:url(images/MeiLei_MainNav_Jewelry_Red.jpg) no-repeat left bottom; }
#about { background:url(images/MeiLei_MainNav_About_Red.jpg) no-repeat left bottom; }
#faq { background:url(images/MeiLei_MainNav_FAQ_Red.jpg) no-repeat left bottom; }
#contact { background:url(images/MeiLei_MainNav_Contact_Red.jpg) no-repeat left bottom; }

/* Main Content Area */

#main_content_area {
	width: 900px;
	margin: 0 auto;
	float: left;
	background-image: url(images/MeiLei_Site_Main_Content_Area_Bkg.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-color: #FFFFFF;
	margin-bottom: 25px;
}

#main {
	width: 644px;
	float: right;
	padding-top: 25px;
	background-color: #FFFFFF;
}

#main p {
	padding: 8px 25px 8px 0px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	text-align: justify;
	font-size: 12px;
	line-height: 150%;
}

#main h2 {
	size: 16px;
	font-weight: bold;
	padding-bottom: 8px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #ba8036;
}
	

#subhead {
	padding-top: 20px;
	padding-bottom: 10px;
}

.divider {
	clear: both;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 25px;
	padding-top: 15px;
}

.excerpt img {
	padding-right: 15px;
}

/* Sidebar Formatting */

#sidebar {
	width: 256px;
	float: left;
	padding-top: 25px;
	background-color: #FFFFFF;
}

#sub_nav_top {
	width: 227px;
	height: 82px;
	background-image: url(images/MeiLei_SideNav_Scroll_Top.jpg);
	background-repeat: no-repeat;
}
	
#sub_nav {
	width: 201px;
	background-image: url(images/MeiLei_SideNav_Scroll_MidRepeat.jpg);
	background-repeat: repeat-y;
}
	

#sub_nav ul {
	width: 181px;
	padding-left: 10px;
	padding-right: 10px;
}

#sub_nav li {
}

#sub_nav a {
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #FFFFFF;
	display: block;
	background-image: url(images/MeiLei_Site_SideNav_Leaf_Design.png);
	background-repeat: no-repeat;
	background-position: bottom;
	padding-top: 10px;
	padding-bottom: 25px;
	text-align: center;
	line-height: 150%;
	font-weight: bold;
	text-decoration: none;
	letter-spacing: 2px;
}

#no_img a {
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #FFFFFF;
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	line-height: 150%;
	font-weight: bold;
	text-decoration: none;
	letter-spacing: 2px;
	background-image: none;
}
	

#sub_nav a:hover {
	color: #ba8036;
}

#sub_nav_bottom {
	width: 227px;
	height: 82px;
	background-image: url(images/MeiLei_SideNav_Scroll_Bottom.jpg);
	background-repeat: no-repeat;
}

/* Formatting for Footer */

#footer {
	width: 900px;
	height: 87px;
	clear: both;
	background-image: url(images/MeiLei_Site_Footer.jpg);
	background-repeat: no-repeat;
}

#footer p {
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	letter-spacing: 3px;
	color: #FFFFFF;
	text-align: center;
	padding-top: 50px;
}

.copyright {
	color: #b98136;
}

#alias {
	clear: both;
	margin: 0 auto;
	padding-top: 15px;
	padding-bottom: 15px;
}

#alias a {
	color: #000000;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	text-decoration: none;
	display: block;
	text-align: center;
}

MidiMagic 579 Nearly a Senior Poster · Answer 2 · 2009-03-02T23:37:38+00:00

I see several problems:

1. Defining sizes in pixels does NOT work with various screen resolutions. It is an absolute form of rendering.

2. Em is not defined when the body tag is executed, so something can't be referenced to an em in the body tag style.

greenglow 0 Newbie Poster · Answer 3 · 2009-03-09T04:52:30+00:00

Hi MidiMagic.
The problem was caused by the EM as you suggested. Thanks so much. Around here you're considered a hero.
Thanks again!
Dan

IE 7 rendering only on client's two computers!

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers