	[x] Posted via EE Mobile
	Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.

Question

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

9.3

IE 7 Pulling Page Left Despite Auto Margins To Centre Page

Asked by mindtattoos in Cascading Style Sheets (CSS)

Tags: CSS, IE Hacks, Auto Margins

Hi
I have a live client site at http://www.chaplins.co.uk/shop.

In IE the site is pulled left despite the auto margins on a container DIV. I have looked through the CSS but can't find any conflict (however I have been working on this so long I may have gone code-blind).

The site is created in Joomla using virtuemart if that makes any difference.
A style sheet that is exactly the same works on the main site without this problem so I am not sure why it's doing this.

Any ideas?

Get your answer NOW

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:
417:
418:
419:
420:
421:
422:
423:
424:
425:
426:
427:
428:
429:
430:
431:
432:
433:
434:
435:
436:
437:
438:
439:
440:
441:
442:
443:
444:
445:
446:
447:
448:
449:
450:
451:
452:
453:
454:
455:
456:
457:
458:
459:
460:
461:
462:
463:
464:
465:
466:
467:
468:
469:
470:
471:
472:
473:
474:
475:
476:
477:
478:
479:
480:
481:
482:
483:
484:
485:
486:
487:
488:
489:
490:
491:
492:
493:
494:
495:
496:
497:
498:
499:
500:
501:
502:
503:
504:
505:
506:
507:
508:
509:
510:
511:
512:
513:
514:
515:
516:
517:
518:
519:
520:
521:
522:
523:
524:
525:
526:
527:
528:
529:
530:
531:
532:
533:
534:
535:
536:
537:
538:
539:
540:
541:
542:
543:
544:
545:
546:
547:
548:
549:
550:
551:
552:
553:
554:
555:
556:
557:
558:
559:
560:
561:
562:
563:
564:
565:
566:
567:
568:
569:
570:
571:
572:
573:
574:
575:
576:
577:
578:
579:
580:
581:
582:
583:
584:
585:
586:
587:
588:
589:
590:
591:
592:
593:
594:
595:
596:
597:
598:
599:
600:
601:
602:
603:
604:
605:
606:
607:
608:
609:
610:
611:
612:
613:
614:
615:
616:
617:
618:
619:
620:
621:
622:
623:
624:
625:
626:
627:
628:
629:
630:
631:
632:
633:
634:
635:
636:
637:
638:
639:
640:
641:
642:
643:
644:
645:
646:
647:
648:
649:
650:
651:
652:
653:
654:
655:
656:
657:
658:
659:
660:
661:
662:
663:
664:
665:
666:
667:
668:
669:
670:
671:
672:
673:
674:
675:
676:
677:
678:
679:
680:
681:
682:
683:
684:
685:
686:
687:
688:
689:
690:
691:
692:
693:
694:
695:
696:
697:
698:
699:
700:
701:
702:
703:
704:
705:
706:
707:
708:
709:
710:
711:
712:
713:
714:
715:
716:
717:
718:
719:
720:
721:
722:
723:
724:
725:
726:
727:
728:
729:
730:
731:
732:
733:
734:
735:
736:
737:
738:
739:
740:
741:
742:
743:
744:
745:
746:
747:
748:
749:
750:
751:
752:
753:
754:
755:
756:
757:
758:
759:
760:
761:
762:
763:
764:
765:
766:
767:
768:
769:
770:
771:
772:
773:
774:
775:

           
           
             /*/// 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 {
	behavior:url(../assets/js/csshover3.htc);
	font-family: Arial, Helvetica, sans-serif;
	background-color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #FFFFFF;
	margin-bottom: 55px;
}
 
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;
}
#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;
}
 
/*/// 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;
}
/*/// End Main Containers ///*/
#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:  #fff;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #fff;
}
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;
}
#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;
}
#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;
}

           
         

	Title
1	CSS Code - drop down menu question
2	Change the tabs using CSS of the atta…
3	How do I change width of website page
4	How do I execute a script depending o…

IE 7 Pulling Page Left Despite Auto Margins To Centre Page

Asked by mindtattoos in Cascading Style Sheets (CSS)

Tags: CSS, IE Hacks, Auto Margins

About this solution