Member Avatar for greenglow

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!

MeiLei.jpg 165.65 KB
  • 2 Contributors
  • 4 Replies
  • 127 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by greenglow
Member Avatar for MidiMagic

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?

Member Avatar for greenglow

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.

/*
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;
}
/*
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;
}
Member Avatar for MidiMagic

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.

Member Avatar for greenglow

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

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.