We help IT Professionals succeed at work.

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

mindtattoos
mindtattoos asked
on
Medium Priority
724 Views
Last Modified: 2012-05-06
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

Comment
Watch Question

Commented:
no problems in 7.0.6001.18000

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
LZ1
Top Expert 2011
Commented:
Likewise using Vista.  can you post a screenshot?

Author

Commented:
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.

Author

Commented:
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.
Top Expert 2009
Commented:
Not sure this helps, but note that the site is very slow on IE7 (didn't test other IE's). On FF3 it is reasonably fast. I tested on a dual 2.5Ghz/4GB workstation with Windows Vista. If it is slow on such a machine, it is likely slower on notebooks or regular pc's, which may result in redering mistakes (of the kind of first showing the wrong margin, after a short while or after a refresh, showing the right margin).
Top Expert 2009

Commented:
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.
It's actually made in Modx CMS.
Portions of the site can be slow as my client 'rents' a catalogue which i have had to crowbar inside our main (fake) frame. So the speed is down to the catalogue site/server sadly and out of my hands.

The rest of the site is on a dedicated server and is a clean code wise as i can get it for now.

To be honest I specialise in SEO and can see many problems with this sites design but the client has insisted it looks like this (for now).

I just hope with time and analytics evidence i can persuade him down a more sensible SEO route.

Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.