site breaks in IE6, IE7

Question

suavedesign 0 Junior Poster in Training

12 Years Ago

Hi
My site works perfeclty ok in Firefox and IE8. If you take a look at it in IE6 and 7, you can see that it doesn't work well there at all.
The link to my site is www.newstylesignsusa.com
In IE7, the pullout menu is not visible. Under the second tab of the main menu, there is supposed to be a sub-menu. But you don't see it there at all.
In IE6, besides for te menu problem, you cannot see any text or graphics on some of the pages.
The strange thing is, until now it worked fine in all browsers. This is a new problem, but I don't recall making any changes that may have caused this!!

If anyone can shed some light on this issue, I'd appreciate it IMMENSLY!!

Thanks.

usability web-design

Edited 12 Years Ago by suavedesign because: n/a

3 Contributors
3 Replies
112 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by The Dude

All 3 Replies

simplypixie 123 Posting Pro in Training

12 Years Ago

Can you post your css

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.

suavedesign 0 Junior Poster in Training · Answer 1 · 2011-11-24T01:26:07+00:00

here's the css:
global.css:

body{
	margin:0 auto;
	padding:0em;
	background: url(images/bg_gradient_bar.jpg) repeat-x top left #99cccc;
	font-size:16px;
	min-width: 1000px;
}


.clear{
	clear:both;
}

html{
	font-size:16px;
}

/*===============
simple selectors
====================*/

p{
	font-family:Arial, Helvetica, sans-serif;
	color:white;
	float:right;
	margin-top:-0.625em;
	margin-right:0.75em;
	padding:0em;
	font-size:/*large;*/1.125em;
}

img{
	margin-top:-1.875em;
}

ul{
	margin-top:0em;
	list-style-type:none;
	background: url(images/nav_bar.gif) repeat-x top left;
	font-size:1.135em;
	height:/*55px;*/2.838em;
}

ul li{
	padding-top:0em;
	padding-bottom:0em;
	padding-left:3.268em;/*52px;*/
	padding-right:3.308em;/*53px;*/
	float:left;
	position:relative;
	text-align:center;
	border-right:/*0.125em*/2px solid orange;
	line-height:2.73em;;
}

ul a{
	padding:20px 0em; 
	line height:2.813em;
	margin:0em;
	text-decoration:none;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	color:#003366;
}

ul a:hover{
	color:#ff6600;
}

ul li ul{
	display:none;
	font-size:1em;
	padding:0em;
	margin:0em;
	z-index:100;
	position:absolute;
}

ul li ul li{
	border:none;
	font-size:0.779em;
	width:6.695em; 
	margin-bottom:-0.625em;
	position:relative;
	z-index:100;
	background: url(images/nav_bar.gif) repeat-x top left;
}

ul li:hover ul{
	display:block;
	position:absolute;
	top:2.8em; 
	left:0px;
}

h3{
	color:#003366;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	
}

h4{
	color:#003366;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:0.938em;
	font-weight:normal;
}

span{
	background: url(images/nav_bar.gif) repeat-x top left;
	margin-left:0.375em;
	color:#003366;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	padding:15px /*20.75em*/12em 5.625em 21.25em;
	border-top:0.75em solid #66cccc;
	display:block;
}

/*===================
specific selectors
=====================*/

#mainWrapper{
	width:/*52%;/*for ie8 leave in em ff not sure*/62.5em;
	margin-left: auto;
	margin-right:auto;
	zoom:1;
	max-width:100%;
	position:relative;
}

#bgWrapper{
	background: url(images/skyline.gif) repeat-x bottom center;
	position:fixed;
	bottom:0em;
	padding-top:-12.5em;
	height:/*7.3em;*/13%;
	width:100%;
	z-index:2;
}

#allContent{
	margin-top:4.688em;
	margin-right:0.0em;
	margin-left:0.0em;
	padding-right:-0.9em;
	/*padding-left:0.5em;*/
}

#nav{
	margin-top:/*2em;*/5%;
}

li.contact{
	border-right:none;
}

#info{
	background:white;
	border-top:0.75em solid #003366;
	margin-top:-2.35em;
	padding-bottom:1.25em;
	position:relative;
}

#flash{
	margin-top:/*0.625em;*/10px;
	margin-right:/*136px;/*8.5em;*/50%;
	margin-bottom:50px;
	margin-left:/*190px;/*11.9em;*/20%;
	z-index:0;
	top:0em;
	left:/*0.625em;*/100px;
	param-name:wmode;
	value:transparent;
}

#bottomContent{
	border-top:0.375em solid #003366;
	background:white;
	margin-top:-2.625em;
	margin-right:0.875em;
	margin-left:0.875em;
}

#about{
	float:left;
	width:/*28.125em;*/48%;
	border-right:0.188em solid #003366;
	padding-right:0.563em;
	padding-bottom:1.6em;
	margin-top:0.688em;
	margin-left:0.313em;
}

#from{
	float:right;
	width:/*28.125em;*/48%;
	margin-top:2.05em;
}

.aboutPara{
	color:#003366;
	text-align:justify;
	font-size:1.063em;
	margin-top:0.013em;
}

.fromPara{
	color:#003366;
	font-weight:bold;
	text-align:justify;
	padding-bottom:0.625em;
}

.one{
	background: url(images/star_icon.gif) no-repeat bottom left;
	padding-top:0.65em;
	padding-bottom:0.438em;
	padding-left:3.188em;
}

.two{
	background: url(images/check_icon.gif) no-repeat bottom left;
	padding-top:0.65em;
	padding-bottom:0.438em;
	padding-left:3.188em;
}

.three{
	background: url(images/arrow_icon.gif) no-repeat bottom left;
	padding-top:0.65em;
	padding-bottom:0.438em;
	padding-left:3.188em;
}

.four{
	background: url(images/globe_icon.gif) no-repeat bottom left;
	padding-top:0.65em;/*0.25*/
	padding-bottom:0.438em;
	padding-left:3.188em;/*2.188*/
}

#footer{
	margin-right:-0.95em;
	margin-left:-0.4em;
	padding-right:0.9em;
}

inside_pages.css:

.clear{
	clear:both;
}

/*==============
Sign Types
===============*/
/*--------------
simple selectors
----------------*/

dt{
	font-family:Arial, Helvetica, sans-serif;
	margin-bottom:-0.75em;/*12px;*/
	margin-left:1.125em;/*18px;*/
	background: url(images/option_bg.gif) no-repeat center left;
	padding-top:0.375em;/*6px;*/
	padding-bottom:0.375em;/*6px;*/
	padding-left:3.438em;/*55px;*/
	font-weight:bold;
}

a{
	text-decoration:none;
	color:white;
}

a:hover{
	color:navy;
}

/*-------------
Specific Selectors
-----------------*/

.header{
	color:#003366;
	font-family: Arial, Helvetica, sans-serif;
	font-size:1.125em;
	background: url(images/swirl.gif) no-repeat center left;
	padding-top:0.625em;
	padding-bottom:1.875em;
	padding-left:2.5em;
	margin-top:1.25em;
}

.welcomePara{
	color:#003366;
	float:none;
	margin-left:4.375em;
	padding:0em;
	font-size:0.938em;
}

#options{
	float:left;
	width:37.5em;/*600px;*/
	padding-left:2.8125em;/*45px;*/
	padding-right:0.3125em;/*5px;*/
	margin-bottom:0.625em;/*10px;*/
	zoom:1;
}

#sidebars{
	float:right;
	width:18.75em;
	margin-left:-1.575em;/*-25px;*/
	margin-right:2.125em;/*34px;*/
}

.intImg{
	float:left;
	border:0.188em solid #ccccff;
	margin-top:0.563em;/*9px;*/;
	margin-left:-1.25em;/*-20px;*/
	padding:0.375em;/*6px;*/
}

.exterior{
	float:left;
	margin-top:-3.125em;/*50px;*/
	padding-top:1.25em;/*20px;*/
	padding-right:3em;/*48px;*/ 
	padding-bottom:1.4375em;/*23px; */
	zoom:1;
}

.extImg{
	float:left;
	border:3px solid #ccccff;
	margin-top:-0.3125em;/*5px;*/
	margin-right:10.95em;/*175px;*/
	margin-left:-10.125em;/*-162px;*/
	padding:0.375em;/*6px;*/
}

.ada{
	float:left;
	margin-top:-9.4em;/*ie -3.125*/
	margin-left:23em;/*1e o.75*/
	padding:1.25em 4.25em 1.438em 3.75em;
}

.adaImg{
	float:left;
	border:3px solid #ccccff;
	margin-top:-6.7em;/*ie-0.375*/
	margin-left:20.6em;/*ie -10.063*/
	padding:0.125em 2.625em;
}

.wayfinding{
	margin-top:7.5em;
	padding:1.25em 1.563em 1.438em 2.188em;
}

.wayImg{
	float:left;
	border:3px solid #ccccff;
	margin-top:-0.5em;
	margin-left:-1.25em;
	padding-top:-0.125em; 
	padding-right:0.375em; 
	padding-bottom:0.125em; 
	padding-left:0.375em;
}

.arch{
	float:left;
	margin-top:-5.313em;
	padding:2.625em 2em 2.625em 1.875em;
	line-height:0.938em;
}

.archImg{
	float:left;
	border:3px solid #ccccff;
	margin-top:-1.438em;
	margin-left:-9.875em;
	padding:0.5em 0.375em; 
}

.eng{
	float:left;
	margin-top:-5.5em;
	margin-left:1.063em;
	padding:2.625em 2.5em 2.625em 1.875em;
	line-height:1.125em;
}

.engImg{
	float:left;
	border:3px solid #ccccff;
	margin-top:-1.5em;
	margin-bottom:0.625em;
	margin-left:-9.875em;
	padding-top:0em; 
	padding-right:0.75em; 
	padding-bottom:-0.313em; 
	padding-left:0em;
}

.metal{
	margin-top:7.6em;
	padding:1.563em 0em 1.438em 0.125em;
	font-size:0.895em;
	line-height:0.938em;
}

.metalImg{
	float:left;
	border:3px solid #ccccff;
	margin-top:-0.25em;
	margin-left:-1.45em;
	padding:13px 1.125em;
}

.films{
	float:left;
	margin-top:-4.188em;
	padding-top:1.25em; 
	padding-right:3.75em; 
	padding-bottom:1.438em;
}

.filmsImg{
	float:left;
	border:3px solid #ccccff;
	margin-top:-1.563em;
	margin-left:1.25em;
	padding:0.813em 0.375em;
}

.plaques{
	float:left;
	margin-top:-4.188em;
	padding-top:1.25em; 
	padding-right:3.75em; 
	padding-bottom:1.438em;
}

.plaquesImg{
	float:left;
	border:3px solid #ccccff;
	margin-top:-1.563em;
	margin-left:1.25em;
	padding:0.5em 0.938em 0.25em 1.188em;
}

.sidePara{
	color:white;
	background:url(images/side_bar_bg.jpg) repeat-x top left;
	border:0.313em solid #3399CC;
	width:15.625em;
	padding:1.563em 1.25em;
	margin-left:-0.25em;
	text-align:justify;
	margin-top:0.938em;
}

.contactst{
	text-decoration:underline;
}

/*===================
Interior
====================*/

#images{
	float:left;
	width:44.375em;
}

.interiorImg{
	padding-top:2.5em;
	padding-left:0.375em;
}

.sideInt{
	color:white;
	background:url(images/side_bar_bg.jpg) repeat-x top left #333366;
	border:0.313em solid #3399CC;
	width:16.375em;
	padding:1.313em 0.313em;
	text-align:justify;
	margin-top:-10.525em;
	margin-right:-1.438em;
	margin-bottom:18.75em;
	float:right;
}

.roll{
	color:#003366;
	font-size:0.875em;
	float:left;
	margin-left:12.625em;
}

.intSpan{
	background-image:none;
	border:none;
	position:absolute;
	visibility:hidden;
	text-decoration:none;
	margin:0em;
	height:3.125em;
	width:3.125em;
	
}

.intSpan img{
	color:transparent;
}

.intThumb:hover span{
	visibility:visible;
	top:27.35em;
	left:-18.05em;
	z-index:1;

}

.intThumb:hover{
	color:transparent;
}

.intThumb{
	color:transparent;
}

.bigImg{
	position:absolute;
	top:27.75em;
	left:2.8em;
	border:0.625em double #3399cc;
	/*margin:0 auto;*/
	margin-bottom:3.75em;
	z-index:0;
}

/*==================
Exterior
====================*/
.rollEx{
	margin-left:18.875em;
	color:#003366;
	font-size:0.875em;
	float:left;
}
.neonHeader{
	color:#003366;
	font-family: Arial, Helvetica, sans-serif;
	font-size:0.875em;
	background:url(images/mini_swirl.gif) no-repeat center left;
	padding-top:0.625em;
	padding-bottom:0.938em;/*0.938*/
	padding-left:1.5em;
	margin-top:1.563em;
	/*margin-bottom:1.5em;*/
	margin-left:4em;/*30*/
	margin-right:0em;
	border:none;
	float:left;
}


.neonPic{
	float:left;	
	margin-top:5.938em;/*5.938*/
	margin-left:-3.563em;
}

.illHeader{
	color:#003366;
	font-family: Arial, Helvetica, sans-serif;
	font-size:0.875em;
	background:url(images/mini_swirl.gif) no-repeat center left;
	padding-top:0.625em;
	padding-bottom:0.938em;
	padding-left:1.5em;
	margin-top:1.313em;
	margin-left:2.875em;
	border:none;
	float:left;
}


.illPic{
	float:left;
	margin-top:6em;
	margin-left:-7.5em;
}

.freeHeader{
	color:#003366;
	font-family: Arial, Helvetica, sans-serif;
	font-size:0.875em;
	background:url(images/mini_swirl.gif) no-repeat center left;
	padding-top:11px;
	padding-bottom:1em;
	padding-left:1.5em;
	margin-top:1em;
	margin-left:9em;
	border:none;
	float:left;
}


.freePic{
	float:left;
	margin-top:-9.813em;
	margin-left:31.813em;
	/*border:1px solid red;*/
}

.store{
	color:#003366;
	font-family: Arial, Helvetica, sans-serif;
	background: url(images/mini_swirl.gif) no-repeat center left;
	font-size:0.875em;
	font-weight:bold;
	margin-top:0.625em;
	margin-left:25em;
	padding-top:0.625em;
	padding-bottom:1.5em;
	padding-left:1.5em;

}


#exteriorImages{
	float:left;
	margin-top:2.188em;
	margin-right:-5px;
	margin-bottom:20px;
	padding-left:15px;
	width:61.375em;
	/*border:1px solid red;*/
}

.exteriorImg{
	padding-right:0.25em;
}

.exteriorKids{
	padding-right:0.25em;
}

.exteriorDaff{
	margin-left:-13px;
	margin-right:-15px;
	/*border:1px solid red;*/
}

.exteriorAdd{
	padding-right:0.85em;
}

.soniaImg{
	margin-top:2px;
	padding-right:0.25em;
}

.AddImg{
	margin-top:2px;
	padding-right:0.25em;
}

.sassImg{
	padding-right:0.25em;
}

/*=================
ADA
==================*/

#adaImage{
	margin-top:1.875em;
	margin-left:11.5em;
	width:37.5em;
	position:relative;
	z-index:0;
}

.adaSigns{
	padding-top:1.25em;
	margin-top:1.25em;
	position:relative;
}

/*.sideAda{
	color:white;
	background:url(images/side_bar_bg.jpg) repeat-x top left #333366;
	border:5px solid #3399CC;
	width:14.375em;
	padding:1.313em 0.313em;
	text-align:justify;
	margin-top:-24.125em;
	margin-right:2.5em;
	float:right;
}*/

.complyPara{
	color:#003366;
	margin-top:0.375em;
	margin-right:31.25em;
	font-size:16px;
}

.adaSpan{
	background-image:none;
	border:none;
	position:absolute;
	visibility:hidden;
	text-decoration:none;
	margin:0em;
	height:3.125em;
	width:3.125em;
}

.adaSpan img{
	height:25em;
	width:25em;
	color:transparent;
}

.adaThumb:hover span{
	visibility:visible;
	top: 0;
	left:-50.625em;
}
.adaThumb:hover{
	color:transparent;
}

.adaThumb{
	color:transparent;
}
/*============
Wayfinding
============*/

#wayImages{
	margin-top:-0.938em;
	margin-right:1.063em;
	margin-left:1.875em;
}

.wayIm{
	padding-top:2.5em;
	padding-right:0.25em;
}

/*=================
Architectural
==================*/

#archIm{
	margin-top:1.875em;
	margin-right:17.5em;
	margin-left:1.25em;
}

.architecIm{
	padding-top:2.5em;
	padding-right:0.25em;
}

.sideArch{
	color:white;
	background:url(images/side_bar_bg.jpg) repeat-x top left #333366;
	border:5px solid #3399CC;
	width:230px;
	padding:1.25em 0.313em;
	text-align:justify;
	margin-top:-46em;
	margin-right:1.125em;
	float:right;
}

/*===============
Engraving
=================*/

#engIm{;
	margin-top:1.875em;
	margin-left:1.125em;
}

.engravIm{
	padding-top:2.5em;
}

/*=================
Metal
=====================*/

#metalIm{
	margin-top:1.563em;
	margin-left:2.188em
}

.metIm{
	padding-top:2.5em;
}

/*===================
Films
=====================*/

#filmsIm{
	margin-top:0.625em;
	margin-left:1.75em;
}

.filmIm{
	padding-top:2.5em;
	padding-right:0.313em;
}

.filmAwn{
margin-top:5px;
margin-left:250px;
}
/*======
Plaques
========*/

#plaquesIm{
	margin-left:0.625em;
}

.plaqueIm{
	padding-top:3.125em;
}

/*=========
Customers
===========*/

.customerDl{
	float:left;
}

.customers{
	color:#003366;
	font-family: Arial, Helvetica, sans-serif;
	float:none;
	font-size:1em;
	text-align:center;
	font-weight:bold;
}

.customerDt{
	background:none;
	margin-top:0.75em;
	padding-bottom:0.625em;
	padding-left:0em;
}

.customerDd{
	color:#66cccc;
	font-family: Arial, Helvetica, sans-serif;
	margin-top:0.25em;
	margin-left:0.375em;
	font-weight:bold;
	text-align:center;
	
}
/*==================
Materials
====================*/
.under{
	color:#003366;
	float:none;
	background: url(images/cone.gif) no-repeat center center;
	font-size:3.125em;
	margin-left:2.37em;
	font-weight:bold;
	padding-top:2.625em; 
	padding-right:2.75em;
	padding-bottom:1.875em;
	padding-left:3.25em;/*6.875em 8.75em 6.875em 11.875em*/
}

.apo{
	color:#003366;
	float:none;
	margin-left:1.875em;
	font-size:1.875em;
	text-align:center;
}

/*==============
Installation
================*/

.installPara{
	float:none;
	color:#003366;
	margin-top:0.313em;
	margin-left:0.938em;
	margin-right:0.938em;
	padding-bottom:1em;
	font-size:1.063em;
	text-align:justify;
	border-bottom:0.5em solid #003366;
}

.installParaTwo{
	float:none;
	color:#003366;
	margin-top:0.313em;
	margin-left:0.938em;
	margin-right:0.938em;
	padding-bottom:1em;
	font-size:1.063em;
	text-align:justify;
}

.boxPara{
	float:left;
	width:17.75em;/*18.75*/
	background:#003366;
	color:#0099ff;
	font-size:1.063em;/*1.063*/
	margin-top:0.375em;
	margin-left:0.938em;
	padding:0.438em;
	text-align:justify;
	border:4px solid #0099ff;
}

.installIm{
	float:left;
	padding-top:1.25em;
	padding-bottom:0.75em;
}

#bottomInfo{
	margin-left:1em;
}

/*=============
Testimonials
=============*/

.testPara{
	color:#003366;
	text-align:justify;
	float:left;
	background:url(images/open_quotes.gif) no-repeat top left;
	padding-top:2.813em;
	padding-left:3.438em;
}

.sigPara{
	color:#0099ff;
	font-size:1em;
	font-style:italic;
	margin-right:1.875em;
	padding-top:0.625em;
	text-align:right;
}

.quote{
	float:right;
	margin-right:26.125em;
	margin-top:-3.75em;
}

.quoteTwo{
	float:right;
	margin-right:37.625em;
	margin-top:-3.75em;
}

.quoteThree{
	float:right;
	margin-right:20.125em;
	margin-top:-3.75em;
}

.quoteFour{
	float:right;
	margin-right:36.625em;
	margin-top:-3.75em;
}

.quoteFive{
	float:right;
	margin-right:37.625em;
	margin-top:-3.75em;
}


/*=============
History
===============*/

/*-----------
simple selectors
--------------*/
h2{
	color:#0099ff;
	font-family: Arial, Helvetica, sans-serif;
	font-style:italic;
}

/*-----------------
specific selectors
------------------*/

.historyPara{
	color:#003366;
	text-align:justify;
	width:20.875em;
	float:left;
	paddng-left:0.5em;
}

#history{
	float:left;
	padding-top:-0.625em;
	padding-right:3.75em;
	padding-bottom:0.625em;
	padding-left:0.5em;
	margin-bottom:1.875em;
	margin-left:3.125em;
	border-right:6px solid #003366;
}

#today{
	float:right;
	margin-right:3.75em;
	margin-bottom:1.875em;
	padding-bottom:0.625;
}

.historyImg{
	float:left;
	margin-bottom:-0.313px;
	padding-top:0.938em;
}

.todayImg{
	float:left;
	padding-top:1.438em;
}

.historyA{
	color:#003366;
	text-decoration:underline;
}

/*===========
Contact
============*/

#address{
	color:#003366;
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	margin-top:1.875em;
	margin-left:2.188em;
	background:url(images/address_icon.gif) no-repeat top left;
	padding-top:0.938em;
	padding-bottom:1.25em;
	padding-left:3.75em;
	font-weight:bold;
}

.contactPara{
	text-align:justify;
	color:#0099ff;
	float:left;
	margin-bottom:0.938em;
	margin-top:1.25em;
	padding-top:0.125em;
	padding-left:3.438em;
	background:url(images/phone.gif) no-repeat top left;
	font-size:1.25em;
}

#contacts{
	margin-top:2.5em;
	margin-left:2.188em;
	width:18.75em;
}

.email{
	color:#003366;
	float:left;
	font-size:1.25em;
	background:url(images/envelope.jpg) no-repeat bottom left;
	margin-top:1.25em;
	margin-left:0.188em;
	padding-bottom:1.875em;
	padding-left:3.438em;
	font-weight:bold;
}


.eAddresses{
	color:#0099ff;
	float:left;
	font-size:1.25em;
	margin-left:3.625em;
	margin-top:-3.438em;
}

.contactInfo{
	color:#003366;
	float:left;
	font-size:0.875em;
	text-align:center;
	margin-left:4.063em;
}

#gmap{
	float:right;
	margin-top:-23.125em;
	margin-right:0.938em;
}

.nss{
	color:#003366;
	font-size:0.875em;
	margin-right:8.063em;
}

Thank you!

The Dude 944 Nearly a Senior Poster · Answer 2 · 2011-11-24T02:35:35+00:00

I think its got something to do with the CSS your using for IE6 because if i change this line on your site,i can see the text on the first page

I saved it locally on my computer and as you can see by this line,i told the site to load the CSS file for IE7 even though im using IE6.. I could see all the other text then on the index page (1st page) .. (It wasnt formatted right,didnt look right but it showed me something is wrong with "ie_six.css")

I think thats your issue buddy :)

Good luck!

site breaks in IE6, IE7

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers