Link to home
Start Free TrialLog in
Avatar of mindtattoos
mindtattoos

asked on

IE 7 is Collapsing My Top Margin - Client Mad - Help required.

Hi
I have a site... http://www.chaplins.co.uk and all is fine in FireFox but I have just been alerted to the fact that in some versions of IE7 the top margin is collapsing and throwing out my menu by 25px... anyone got a fast solution as i have a very tense client at the moment.

I have pasted the entire CSS below incase i have caused a confilct anywhere.

thanks

/*/// Reset Style Sheet ///*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
/*fieldset, form, label, legend,*/
table, caption, tbody, tfoot, thead, tr, th, td {
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
	vertical-align: baseline;
	padding: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
body{
	font-family: Arial, Helvetica, sans-serif;
	background-color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #FFFFFF;
	margin-bottom: 55px;
	behavior:url(../assets/js/csshover3.htc);
}
 
img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
/*/// standard tags ///*/
 
h1 {
	font-size: 115%;
	padding-bottom: 13px;
	font-weight: normal;
}
h2 {
	font-size: 1.5em;
	font-weight: normal;
}
h3 {
	font-size: 1.3em;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
#aboutus {
	width: 400px;
	line-height: 110%;
	float: left;
}
#sevendays {
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
	clear: both;
}
#aboutus p{
	padding-bottom: 10px;
}
#aboutus ul {
	margin-left: 35px;
	margin-top: 10px;
	margin-bottom: 10px;
}
#aboutus li {
	padding-top: 10px;
	padding-bottom: 10px;
}
#aboutus img {
	padding-top: 5px;
	padding-bottom: 5px;
	}
.comments {
	width: 200px;
	float: right;
	clear: right;
	padding: 10px;
	margin-bottom: 20px;
}
#aboutus h1 {
	font-size: 120%;
	font-weight: normal;
}
 
.dates {
	font-size: 105%;
	font-weight: bold;
	color: #999999;
}
/*/// general link styles ///*/
a:link {
	color:  #ff6633;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #666666;
}
a:hover {
	text-decoration: underline;
	color: #999999;
}
a:active {
	text-decoration: none;
	color: #999999;
}
#trailer a:link {
	color:  #666666;
	text-decoration: none;
}
#trailer a:visited {
	text-decoration: none;
	color: #666666;
}
#trailer a:hover {
	text-decoration: underline;
	color: #999999;
}
#trailer a:active {
	text-decoration: none;
	color: #999999;
}
/*/// header menu ///*/
#head {
	top: 30px;
	position: absolute;
	z-index: 10;
	width: 780px;
}
#spam {
	width: 303px;
	text-align: right;
	margin-top: 10px;
	padding-top: 5px;
}
/* menus updated */
#menu {
	font-family: Arial, Helvetica, sans-serif;
	position:relative;
	font-size:11px;
	z-index:100;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0px;
	float: left;
	text-transform: uppercase;
}
#menu ul {
	padding:0; 
	list-style-type: none;
	margin:0px 0 0 0; 
}
#menu ul li {
	float:left;
	position:relative;
	margin:0;
	padding-left: 2px;
}
#menu ul li a, #menu ul li a:visited {
	display:inline-block;;
	text-decoration:none;
	color:#333;
	height:2.5em;
	color:#FFF;
	padding-left: 9px;
	line-height:2.5em;
	padding-right: 9px;
}
/** html #menu ul li a, #menu ul li a:visited {
width:72px;
w\idth:71px;
}*/
#menu ul li ul {
	display: none;
}
table {
	margin:-1px; 
	border-collapse:collapse;
	font-size:1em;
}
 
/* specific to non IE browsers */
#menu ul li:hover a,
#menu ul li a:hover {
	color:#666666;
	background:#000000;
}
 
/*added*/
#menu ul li a.here, #menu a .active  {
	color:#FFA500; 
	background:#FFF;
	border-top: 1px solid #676767;
}
.here {
	color:#ACCA57; 
	background:#EBEBEB;
	border-top: 1px solid #333;
}
 
#menu ul li:hover ul,
#menu ul li a:hover ul {
	display:block;
	position:absolute;
	top:2em;
	left:0;
	width:150px;
	margin-top: 5px;
}
* html #menu ul li a:hover ul {
	margin-top:0;
	marg\in-top:1px;
}
 
#menu ul li:hover ul li ul,
#menu ul li a:hover ul li a ul {
	visibility:hidden; 
	position:absolute; 
	height:0; 
	width:0;
}
 
#menu ul li:hover ul li a,
#menu ul li a:hover ul li a {
	display:block;
	color:#FFFFFF;
	height:auto;
	line-height:1.2em;
	padding:5px 10px;
	width:129px;
	background-color: #000000;
}
* html #menu ul li a:hover ul li a {
	width:150px;
	w\idth:129px;
}
 
#menu ul li:hover ul li a.drop,
#menu ul li a:hover ul li a.drop {
	background-color: #F5F5F5;
	background-image: url(drop.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
}
 
#menu ul li:hover ul li a:hover,
#menu ul li a:hover ul li a:hover {
	background:#333; 
	color:#FFFFFF;
}
 
#menu ul li:hover ul li:hover ul,
#menu ul li a:hover ul li a:hover ul {
	visibility:visible; 
	position:absolute; 
	left:148px; 
top:0;
width:150px;
}
 
#menu ul li:hover ul li:hover ul.left,
#menu ul li a:hover ul li a:hover ul.left {
left:-150px;
}
 
/*/// main containers ///*/
#contentcontainer {
	width: 780px;
	margin-right: auto;
	margin-left: auto;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #FFFFFF;
	border-left-color: #FFFFFF;
	margin-top: 0px;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	height: 480px;
	background-image: url(../images/bgrnd.jpg);
	background-repeat: no-repeat;
	color: #000000;
}
#contentcontainer p {
	margin-bottom: 10px;
}
#contentstandard p {
	margin-bottom: 10px;
}
#contentblack p {
	margin-bottom: 10px;
	color: #000000;
}
#contentcontainerframe {
	width: 780px;
	margin-right: auto;
	margin-left: auto;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #FFFFFF;
	border-left-color: #FFFFFF;
	margin-top: 0px;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	height: 480px;
	overflow-x: hidden;
}
#footercontainer {
	width: 780px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-top: 10px;
	text-align: right;
	clear: none;
	border: 1px solid #FFFFFF;
	overflow: auto;
}
#trailer {
	font-size: 0.7em;
	color: #333333;
	width: 774px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 4px;
	text-align: right;
	padding-bottom: 4px;
}
/*/// End Main Containers ///*/
#headcontainer {
	width: 780px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 10px;
	padding-left: 10px;
	margin-bottom: 0px;
	height: 35px;
	border: 1px solid #FFFFFF;
	margin-top: 25px;
}
#footlogo {
	float: right;
	width: 200px;
}
#footstrap {
	float: left;
	width: 500px;
	text-align: left;
	padding-top: 3px;
	clear: none;
}
#footstrap a:link {
	color:  #FFFFFF;
	text-decoration: none;
}
#footstrap a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
#footstrap a:hover {
	text-decoration: underline;
	color: #FFFFFF;
}
#footstrap a:active {
	text-decoration: none;
	color: #ffffff;
}
 
/*/// template content variables ///*/
 
#contentframe {
      overflow-y: auto;
      height: 470px;
      /*width: 770px;  not necessary  */
      padding: 10px;
       margin-right: -10px;
}
#contenfixed {
	height: 475px;
	width: 770px;
	padding-right: 10px;
	padding-top: 10px;
	padding-left: 5px;
}
#contentstandard {
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}
#contentcontainerfree {
	width: 780px;
	margin-right: auto;
	margin-left: auto;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #FFFFFF;
	border-left-color: #FFFFFF;
	margin-top: 0px;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
#contenthome {
	width: 800px;
	min-height: 475px;
	margin-right: auto;
	margin-left: auto;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #FFFFFF;
	border-left-color: #FFFFFF;
	margin-top: 0px;
	padding: 0px;
}
/*/// end template content variables ///*/
 
/*** START CSS FORMS ***/
img{border: 0;}
form.mindform{width: 34.58em;}
 
form.mindform label{
	cursor: pointer; 		/* CHANGES CURSOR TO HAND ICON, MAKES USERS AWARE OF LABEL */
	width: 12em;			/* LABEL WIDTH: SET THIS TO THE LARGEST LABEL SIZE */
	text-align: right;
	display: block;
	clear: left;
	margin-right: 10px;
}
form.mindform fieldset fieldset, textarea, input, select{
	margin-left: 12em;		/* SET THIS TO THE "LABEL WIDTH" FROM ABOVE */
}
 
form.mindform textarea, input, select{
	margin-top: -1em;	/* PULLS THE INPUT CONTROLS ON TO THE SAME LINE AS THE LABEL */
	float:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
}
form.mindform fieldset{
	padding-bottom: 0.83em;	/* ADDS PADDING TO FIELDSET TO STOPS OPERA DISPLAYING INCORRECTLY */
	clear: left;
	border: 1px solid #FFFFFF;
}
form.mindform fieldset fieldset input{
	margin: 0;
	height: 1.25em;
	display: block;
	float: none;
	}
	
form.mindform fieldset fieldset label{
	margin: -1.17em 0 0 2em;
	width: 0;
	display: inline;
	float: left;
	}
	
#radiolft {
	float: left;
	width: 40%;
	margin-bottom: 10px;
	margin-top: 10px;
}
#radiorgt {
	float: right;
	width: 40%;
	margin-right: 62px;
	margin-bottom: 10px;
	margin-top: 10px;
}
.buttonFieldset{
	padding: 0.17em;
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	border: none;
 
}
#submitbutton {
	padding: 5px;
}
#submitbutton input {
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.submitbutton2 {
	padding: 5px;
}
.submitbutton2 input {
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.inputInline{
margin: -1em 0 0 0;
}
#spacer {
	clear: both;
}
legend {
	color: #ff6633;
}
/*** END CSS FORMS ***/
/*/// page specific controls ///*/
 
#address {
	float: left;
	width: 200px;
	clear: left;
}
.forgot {
	margin-left: 5px;
}
 
#map {
	float: right;
	width: 437px;
	clear: right;
}
#contentPadd {
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
}
#framedPadd {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
}
 
/*/// manufacturers pages ///*/
 
#manufact {
	overflow: auto;
	width: 780px;
	padding: 10px;
}
#manuimagelft {
	width: 390px;
	float: left;
}
#manuimagergt {
	width: 390px;
	float: right;
}
#maufactdescri {
	overflow: auto;
	padding: 10px;
}
#manulogo {
	float: right;
	width: 160px;
	padding-top: 10px;
}
#manutext {
	float: left;
	width: 610px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
}
#manfctmain {
	width: 780px;
	overflow: auto;
}
.manucols {
	float: left;
	width: 160px;
	margin-right: 10px;
	padding: 10px;
	border: 1px solid #333333;
}
.manucolslft {
	float: left;
	width: 160px;
	padding-bottom: 0px;
	margin-left: 5px;
}
.manucolsrgt {
	float: left;
	width: 160px;
	padding-left: 5px;
}
.manucolsrgt img {
	padding-bottom: 5px;
}
.manucolslft img {
	padding-bottom: 5px;
}
/*/// product page ///*/
 
#productlist {
	overflow: auto;
	padding-left: 5px;
}
#productlist ul {
	list-style-type: none;
	width: 760px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	list-style-image: none;
}
#productlist li {
	position:relative;
	float: left;
	list-style-image: none;
	list-style-type: none;
	border: 1px solid #FFFFFF;
	width: 174px;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 0px;
}
#productlist h3 {
	font-size: 11px;
	font-weight: normal;
	padding-top: 2px;
}
#productlist img {
	padding: 0px;
}
.prodpadd {
	padding-bottom: 3px;
	padding-left: 5px;
}
#productlist img{
	padding-top: 2px;
}
.quotes {
	font-size: 105%;
	font-style: italic;
	font-weight: bold;
	color: #666666;
}
 
/*/// slider ///*/
#main {
      width: 510px;
      margin: 0 auto;
}
#content-slider {
	width: 780px;
	height: 6px;
	margin: 5px;
	position: relative;
	background-color: #666666;
}
.content-slider-handle {
	width: 8px;
	height: 14px;
	position: absolute;
	top: -4px;
	border: solid 1px black;
	background-color: #FF6600;
}
#content-scroll {
	width: 790px;
	height: 450px;
	margin-top: 10px;
	overflow: hidden;
	border: solid 1px black;
}
#content-holder {
	height: 450px;
	width: 1200px;
}
.content-item {
      width: 290px;
      height: 270px;
      padding: 5px;
      float: left;
}
#clearcontainer {
	overflow: auto;
	height: 250px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
}
#clearancetext {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #333333;
	width: 520px;
	float: right;
	padding-right: 20px;
	padding-left: 10px;
	height: 230px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #FFFFFF;
}
#clearancelinks {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #333333;
	width: 220px;
	float: right;
	padding-left: 10px;
	height: 230px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #FFFFFF;
}
#clearancestrap {
	float: right;
	width: 210px;
	padding-top: 10px;
	padding-bottom: 10px;
	height: 200px;
}
.paddlefttext {
	padding-left: 20px;
}
#clearcontainer a:link {
	color:  #666666;
	text-decoration: none;
}
#clearcontainer a:visited {
	text-decoration: none;
	color: #666666;
}
#clearcontainer a:hover {
	text-decoration: underline;
	color: #999999;
}
#clearcontainer a:active {
	text-decoration: none;
	color: #999999;
}
#formpadd {
	padding-bottom: 20px;
}

Open in new window

SOLUTION
Avatar of paulp75
paulp75
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of mindtattoos
mindtattoos

ASKER

Hmmm... Thanks.
That's the version I am using also... the weird thing is the problem has now rectified itself on my PC too.
But my client says that a few of his customers have also experienced a 'menu overlap' where the margin has been dropped and the container moves up under the menu 'layer'.

It's weird because I have tested it in Chrome, Safari, Mozilla, IE 5 - 6 and now 7 and there was no problem... then suddenly there was and now there isn't again.

How bizaar... I did'nt think i was that bad a coding ;)

Thanks for the info.
I would love to send a screen shot but it's working Ok now... Very confused!
i think I will try my partners PC as it wasn't working on hers either and see if I can get a shot off that.

thnx.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Mmm, have to take that back. On a smaller XP system it works quite fast again... Vista problems? Sorry for hinting in the wrong direction.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial