Problem with the css code in IE 6 & 7

**nisha** · Jul 9, 2008 05:39

hi,

I have developed a code of caption images and text below it taking the refference from paul's site but i forget the url to it. so when i used the code
it looked as i required in firefox but in IE all the image and the caption where seen placed one below the other instead of been placed three images in a row and then next three will follow the above one.

so please have a look at my code and suggest me where i am done any thing wrong.

here is the htnl code for the

Code HTML4Strict:

<head>
<!--[if IE ]>
<style type="text/css">
#colorwrap ul li{display:inline;zoom:1.0;width:160px}/* zoom isn't really needed here as the display:inline-block sets haslayout anyway*/
#colorwrap ul li p{width:auto}
 
</style>
 
<![endif]-->
 
 
</head>
<div class="img">
						   <div class="thumbnail"><img src="pro_images/mozzart-under-mount.jpg" alt="Carysil" width="93" height="71">
						   <p>Under Mount</p></div>
						   <div class="thumbnail"><img src="pro_images/mozzart-top-mount.jpg" alt="Carysil" width="93" height="71">
						   <p>Top Mount</p>
						   </div>
						   <div class="thumbnail"><img src="pro_images/mozzart-flash-mount.jpg" alt="Carysil" width="91" height="70">
						   <p>Flush Mount</p>
						   </div>
						   </div>
						     <div class="tab_head">Accessories</div>
						   <div class="img">
						   <div class="thumbnail"><img src="pro_images/mozzart-wooden-choping-bord.jpg" alt="Carysil" width="91" height="70">
						   <p>Wooden Chopping<br>Board </p>
						   </div>
						   <div class="thumbnail"><img src="pro_images/mozzart-stainless-steel-crockrey-basket.jpg" alt="Carysil" width="91" height="70">
						   <p>Stainless Steal Crockery Basket</p>
						   </div>
						   <div class="thumbnail" style="margin-top:10px;"><img src="pro_images/mozzartstainless-steel-colander.jpg" alt="Carysil" width="91" height="70">
						   <p>Stainless Steal<br>Colander</p>
						   </div>
						   </div>

here is the css code :

Code CSS:

#colorwrap{
	width:100%;
	text-align:center;
	margin:auto;
	float: left;
}
#colorwrap ul {
	list-style:none;
	margin-left: 5px;
}
#colorwrap ul li {
	color:#456974;
	display:inline-block;/* mozilla only */
	display:inline-block;/* browsers that support display:inline-block like safari &amp; opera*/
	vertical-align:top;
	text-align:left;
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 5px;
	float: left;
}
#colorwrap ul li p{
	width:1px;
	display:table;
}/* make the text shrink wrap whatever size the image above makes the width */
 
#colorwrap ul li img{
	margin:5px;
}
h1{text-align:center}
#colorwrap .line {
	display:inline-block;/* mozilla only */
	display:inline-block;/* browsers that support display:inline-block like safari &amp; opera*/
	vertical-align:top;
	text-align:left;
	background-image:url(../images/img_tab_line_bg.gif);
	background-repeat: repeat-x;
	background-position: left center;
	width: 90%;
	clear: both;
	float: left;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 10px;
}
#colorwrap .tab_pro_head
{
	width: 95%;
	background-image: url(../images/img_pro_bullet_head.gif);
	background-position: 8px 10px;
	text-align: left;
	vertical-align: middle;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #000000;
	background-repeat: no-repeat;
	height: 20px;
	text-indent: 25px;
	float: left;
	margin-left: 8px;
}
#colorwrap .tab_colour_head {
	width: 230px;
	background-image: url(../images/img_pro_bullet_color.gif);
	background-position: 8px 10px;
	text-align: left;
	vertical-align: bottom;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: #456974;
	background-repeat: no-repeat;
	height: 20px;
	background-color: #E8F2F5;
	border: 1px solid #C1CDD0;
	text-indent: 25px;
	padding-top: 5px;
	padding-bottom: 5px;
	float: left;
}
#colorwrap .tab_text
{
	width: 95%;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #2D3436;
	height: 20px;
	float: left;
	margin-left: 8px;
	margin-top: 5px;
	margin-bottom: 10px;
	letter-spacing: 1px;
}
.img {
	float: left;
	margin-top: 15px;
	margin-bottom: 5px;
	width: 210px;
}

since i am not able to post any url now so i am not giving any url in here.

help appreciated.

**Paul O'B** · Jul 9, 2008 08:37

HI,

I'd really need to see a working example because the code is quite complicated to start digging around without being able to see the result. It seems to be looking the same to me in firefox and Ie in that you have two columns of captions and images.

You won't get three images in a row as your wrapper is only 210px wide and the images are 93px wide.

It looks like the code was from one of my exmples here:

http://www.pmob.co.uk/search-this/stcaption1.htm
http://www.pmob.co.uk/search-this/stcaption2.htm
http://www.pmob.co.uk/search-this/stcaption3.htm
http://www.pmob.co.uk/search-this/stcaption4.htm

**nisha** · Jul 9, 2008 11:57

hi paul,

glad to see you back on the forum. yes u guessed it right i have used the code from your example and it is similar to stcaption4. unfortunately i am not allowed to give you the url link to my live site. so i am providing the code of my whole page over here :

here is the css code :

Code CSS:

* html .clearfix { height: 1%; }
a img {
  border: 0;
}
* {margin:0;padding:0;}
a:link {
	text-decoration: none;
 
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
html {
	height: 100%;
	background: url(../images/bg.jpg);
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: url(../images/top_bg.jpg) repeat-x left top;
}
#wrapper {
	margin: 0 auto;
	border: 2px solid;
	width: 80%;
	min-height: 150%;
}
* html #wrapper {
	height: 150%;
}
/*body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 120%;
	margin: 0px;
	padding:0px;
	background: url(../images/bg.jpg), url(../images/top_bg.jpg);
    background-position: top, top;
    background-repeat: repeat, repeat-x;
 
	background:url(../images/bg.jpg) repeat top; , url(../images/top_bg.jpg) repeat top;
 
}*/
 
#page_width {
	margin: 0 auto;
	padding: 0px;
	width: 778px;
}
#header {
	width: 778px;
	margin-bottom: 3px;
	margin-right: 4px;
	margin-left: 5px;
	padding-top: 25px;
}
#logo {
	background-image: url(../images/img_kitchen_technik.jpg);
	background-repeat: no-repeat;
	background-position: 97% 30px;
	height: 60px;
}
#nav_container {
	padding-top: 30px;
	padding-left: 9px;
	height: 41px;
	width: 757px;
	padding-right: 3px;
	overflow: hidden;
	float: left;
}
#banner {
	width: 770px;
	margin-right: 10px;
	margin-bottom: 25px;
	margin-left: 8px;
	margin-top: 0px;
}
#main_content {
	float: left;
	width: 769px;
	margin-right: 3px;
	margin-left: 6px;
	overflow: hidden;
}
.usp {
	width:263px;
	float: left;
	margin-right: 15px;
}
#usp_top {
	background-image: url(../images/img_usp_head_bg.jpg);
	background-repeat: no-repeat;
	height: 54px;
	width: 263px;
}
#usp_main {
	background-image: url(../images/img_usp_main_bg.jpg);
	height: 225px;
	width: 263px;
	overflow:hidden;
}
 
.usp_head {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #585858;
	background-image: url(../images/img_usp_head_icon.jpg);
	background-position: left bottom;
	vertical-align: bottom;
	height: 38px;
	width: 250px;
	background-repeat: no-repeat;
	margin-right: 12px;
	margin-left: 2px;
	margin-bottom: auto;
	text-indent: 50px;
	font-style: italic;
	line-height: 15px;
	display: block;
	padding-top: 15px;
	font-weight: 600;
}
 
#usp_bottom {
	background-image: url(../images/img_usp_bottom.jpg);
	background-repeat: no-repeat;
	height: 15px;
	width: 263px;
	background-position: top;
}
 
#usp_list {
	width: 250px;
	padding-right: 15px;
	height: 100%;
	padding-left: 15px;
}
.welcome_text {
	width:490px;
	float: left;
}
.heading {
	font-family: "Trebuchet MS";
	font-size: 18px;
	color: #19B6D8;
}
.normaltext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #465154;
	line-height: 15px;
	text-align: justify;
}
.normaltext span{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #465154;
	line-height: 15px;
	text-align: justify;
}
.normaltext span a{
	color: #465154;
}
.normaltext span a:hover{
	color: #000000;
}
.text_container {
	float: left;
	width: 280px;
	margin-right: 15px;
	margin-top: 30px;
}
.hygine_container {
	float: left;
	width: 195px;
	margin-top: 30px;
	text-align: center;
}
#bottom_content {
	float: left;
	width: 769px;
	margin-right: 3px;
	margin-left: 6px;
	margin-top: 15px;
}
.choice {
	width:208px;
	float: left;
	overflow: hidden;
	clear: both;
}
.quality {
	float: left;
	margin-right: 32px;
	margin-left: 35px;
	width: 276px;
}
.testimonial {
 
 
	width:209px;
	float: left;
}
.heading_choice {
	width:208px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: italic;
	font-weight: 600;
	color: #FFFFFF;
	text-align: center;
	height: 38px;
	background-image: url(../images/img_heading_bg_choose.jpg);
	background-repeat: no-repeat;
	vertical-align: middle;
	padding-top: 10px;
	padding-bottom: 5px;
	float: left;
	overflow: hidden;
}
.choice_img {
	width:208px;
	float: left;
	overflow: hidden;
}
.heading_quality {
 
	width:276px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: italic;
	font-weight: 600;
	color: #FFFFFF;
	text-align: center;
	height: 38px;
	background-image: url(../images/img_quality_head_bg.jpg);
	background-repeat: no-repeat;
	vertical-align: middle;
	padding-top: 10px;
	padding-bottom: 2px;
}
/*.quality_img {
 
	width:80px;
	float: left;
	text-align: center;
}*/
.quality_image_container{
	width:100%;
}
.quality_image_container img{
	float:left;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
}
p{
	padding:0px;
	margin-top: 20;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
.dontwrap p{
	margin-left:120px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: italic;
	line-height: 20px;
	color: #585858;
	vertical-align: middle;
	padding-top: 20px;
}
.more {
	width:80px;
	float: right;
	text-align: center;
	margin-right: 5px;
	margin-left: 5px;
	margin-top: 10px;
}
.heading_testimonial {
	width:209px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: italic;
	font-weight: 600;
	color: #FFFFFF;
	text-align: left;
	height: 38px;
	background-image: url(../images/img_heading_bg_testimonial.jpg);
	background-repeat: no-repeat;
	vertical-align: middle;
	padding-top: 10px;
	padding-bottom: 5px;
	text-indent: 20px;
}
#footer {
	background-image: url(../images/footer_bg.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 70px;
	width: 770px;
	margin-top: 20px;
}
#footer_text{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #919191;
	text-align: left;
	clear: both;
	padding-top: 12px;
	line-height: 20px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 5px;
	width: 600px;
}
#footer_text a:hover{
	color: #494949;
}
#footer_text .active{
	color: #494949;
}
 
#footer p {
	clear: both;
	float: left;
	display: block;
	width: 330px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #919191;
	margin-top: 0px;
	margin-right: 40;
	margin-bottom: 0;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 0;
	margin-left: 0px;
	padding-left: 18px;
}
 
#footer span {
	width: 190px;
	/*font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #4E7ABB;
 
	text-align: center;*/
	margin-top: 0px;
	margin-bottom: 0;
	padding-top: 10px;
	padding-bottom: 0;
	margin-left: 75px;
	clear: none;
	margin-right: 30px;
	float: left;
}
#footer span.copyright {
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #919191;
}
#footer span.copyright a
{
	color: #919191;
}
#footer span.copyright a:hover{
	color: #494949;
}
#left_coloumn {
	width: 209px;
	margin-right: 18px;
	overflow: hidden;
	float: left;
}
#right_coloumn {
	float: left;
	width: 538px;
	overflow: hidden;
}
#tab_contanier {
	width: 538px;
}
#tab_contents {
	width: 538px;
	background-image: url(../images/tab_bg_center.jpg);
	background-position: left top;
	text-align: center;
	vertical-align: top;
	background-repeat: repeat;
	float: left;
}
#subnav {
	float: left;
	height: 247px;
	width: 209px;
	padding-bottom: 20px;
	overflow: hidden;
}
#tab_top {
	width: 538px;
	background-image: url(../images/tab_bg_top.jpg);
	height: 38px;
	background-repeat: no-repeat;
	background-position: left top;
}
#tab_bottom {
	width: 538px;
	background-image: url(../images/tab_bg_bottom.jpg);
	height: 5px;
	background-repeat: no-repeat;
	background-position: left top;
	float: left;
}
.tab_main_content {
	width: 495px;
	text-align: center;
	vertical-align: top;
	margin-right: 20px;
	margin-left: 20px;
	float: left;
	margin-top: 20px;
}
.tab_main_left {
 
	width: 210px;
	background-image: url(../images/tab_bg_center.jpg);
	background-position: center top;
	text-align: center;
	vertical-align: top;
	margin-right: 30px;
	float: left;
	margin-top: 5px;
}
.tab_main_right {
 
 
	width: 245px;
	background-image: url(../images/tab_bg_center.jpg);
	background-position: center top;
	text-align: center;
	vertical-align: top;
	float: right;
	margin-top: 5px;
}
.tab_colour_head {
	width: 230px;
	background-image: url(../images/img_pro_bullet_color.gif);
	background-position: 8px 10px;
	text-align: left;
	vertical-align: bottom;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: #456974;
	background-repeat: no-repeat;
	height: 20px;
	background-color: #E8F2F5;
	border: 1px solid #C1CDD0;
	text-indent: 25px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.tab_pro_head {
	width: 230px;
	background-image: url(../images/img_pro_bullet_head.gif);
	background-position: 8px 10px;
	text-align: left;
	vertical-align: bottom;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #000000;
	background-repeat: no-repeat;
	height: 20px;
	text-indent: 25px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.pro_img_change {
	width: 200px;
	text-align: left;
	vertical-align: middle;
	height: 105px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-position: left center;
}
#colorwrap{
	width:100%;
	text-align:center;
	margin:auto;
	float: left;
}
#colorwrap ul {
	list-style:none;
	margin-left: 5px;
}
#colorwrap ul li {
	color:#456974;
	display:inline-block;/* mozilla only */
	display:inline-block;/* browsers that support display:inline-block like safari &amp; opera*/
	vertical-align:top;
	text-align:left;
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 5px;
	float: left;
}
#colorwrap ul li p{
	width:1px;
	display:table;
}/* make the text shrink wrap whatever size the image above makes the width */
 
#colorwrap ul li img{
	margin:5px;
}
h1{text-align:center}
#colorwrap .line {
	display:inline-block;/* mozilla only */
	display:inline-block;/* browsers that support display:inline-block like safari &amp; opera*/
	vertical-align:top;
	text-align:left;
	background-image:url(../images/img_tab_line_bg.gif);
	background-repeat: repeat-x;
	background-position: left center;
	width: 90%;
	clear: both;
	float: left;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 10px;
}
#colorwrap .tab_pro_head
{
	width: 95%;
	background-image: url(../images/img_pro_bullet_head.gif);
	background-position: 8px 10px;
	text-align: left;
	vertical-align: middle;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #000000;
	background-repeat: no-repeat;
	height: 20px;
	text-indent: 25px;
	float: left;
	margin-left: 8px;
}
#colorwrap .tab_colour_head {
	width: 230px;
	background-image: url(../images/img_pro_bullet_color.gif);
	background-position: 8px 10px;
	text-align: left;
	vertical-align: bottom;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: #456974;
	background-repeat: no-repeat;
	height: 20px;
	background-color: #E8F2F5;
	border: 1px solid #C1CDD0;
	text-indent: 25px;
	padding-top: 5px;
	padding-bottom: 5px;
	float: left;
}
#colorwrap .tab_text
{
	width: 95%;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #2D3436;
	height: 20px;
	float: left;
	margin-left: 8px;
	margin-top: 5px;
	margin-bottom: 10px;
	letter-spacing: 1px;
}
.img {
	float: left;
	margin-top: 15px;
	margin-bottom: 5px;
	width: 210px;
}
.tab_head {
	width: 210px;
	background-image: url(../images/img_pro_bullet_head.gif);
	text-align: left;
	vertical-align: middle;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 15px;
	color: #000000;
	background-repeat: no-repeat;
	text-indent: 22px;
	padding-top: 8px;
	padding-bottom: 8px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #456974;
	float: left;
	background-position: 5px 12px;
}
.thumbnail {
	float: left;
	width: 80px;
	margin-right: 12px;
	margin-left: 8px;
}
.thumbnail p{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #2D3436;
	text-align: left;
	height: 20px;
	margin-top: 5px;
	margin-bottom: 5px;
	width: 90%;
}
#inside_text_container 
{
	float: left;
	width: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}
.heading_inside {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	line-height: 15px;
	font-weight: bold;
}
.heading_bullet {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	line-height: 25px;
	font-weight: bold;
	background-image: url(../images/img_head_bullet.jpg);
	background-repeat: no-repeat;
	background-position: 2px 9px;
	vertical-align: middle;
	float: left;
	height: 25px;
	padding-left: 18px;
	text-align: left;
	width: 100%;
	overflow: hidden;
	margin-top: 5px;
}
.positons_container {
	float: left;
	width: 100%;
	overflow: hidden;
	margin-top: 10px;
}
.subheading_bullet {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #DD5F4B;
	line-height: 20px;
	font-weight: bold;
	background-image: url(../images/img_head_bullet1.jpg);
	background-repeat: no-repeat;
	background-position: 2px 9px;
	vertical-align: middle;
	float: left;
	height: 20px;
	text-align: left;
	width: 100%;
	overflow: hidden;
	padding-left: 18px;
}
.positions_text {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #465154;
	line-height: 15px;
	text-align: justify;
	padding-left: 18px;
	float: left;
	width: 96%;
	overflow: hidden;
}
.post {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #465154;
	line-height: 15px;
	text-align: justify;
	padding-left: 18px;
	float: left;
	width: 96%;
	overflow: hidden;
	margin-top: 10px;
	margin-bottom: 10px;
}
 
.protext_bullet {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #2D3436;
	line-height: 20px;
	background-image: url(../images/img_head_bullet1.jpg);
	background-repeat: no-repeat;
	background-position: 2px 9px;
	vertical-align: middle;
	float: left;
	height: 20px;
	text-align: left;
	width: 100%;
	overflow: hidden;
	padding-left: 18px;
}
#nav {
	padding: 0;
	margin: 0;
	list-style: none;
	width: 769px;
	height: 41px;
}
#nav a {
	display: block;
	width: 8em;
	background-image: url(../images/top_menu.jpg);
	text-indent: -999px;
	height: 41px;
	outline: none;
}
#nav li {
	float: left;
 
}
#nav li ul {
	position: absolute;
	width: 8em;
	left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}
#home a {
	width: 106px;
	padding-left: 8px;
	padding-right: 8px;
}
#about-us a {
	width: 103px;
	background-position: -127px 0;
	padding-right: 12px;
	padding-left: 12px;
}
#products a {
	width: 103px;
	background-position: -260px 0;
	padding-right: 12px;
	padding-left: 12px;
}
#kitchen a {
	width: 103px;
	background-position: -389px 0;
	padding-right: 12px;
	padding-left: 12px;
}
#career a {
	width: 103px;
	background-position: -510px 0;
	padding-right: 12px;
	padding-left: 12px;
}
#contact a {
	width: 103px;
	background-position: -640px 0;
	padding-right: 12px;
	padding-left: 12px;
}
#home a:hover {
	background-position: 0 41px;	
}
#about-us a:hover {
	background-position: -127px 41px;
}
#products a:hover {
	background-position: -260px 41px;
}
#kitchen a:hover {
	background-position: -389px 41px;
}
#career a:hover {
	background-position: -510px 41px;
}
#contact a:hover {
	background-position: -640px 41px;
}
#home.active a
{
   background-position: 0 -41px;
}
 
#about-us.active a
{
	background-position: -127px -41px;
 
}
#products.active a
{
	background-position: -260px -41px;
}
#kitchen.active a
{
	background-position: -389px -41px;
}
#career.active a
{
	background-position: -510px -41px;
}
#contact.active a
{
	background-position: -640px -41px;
}
/* top menu ends here*/
ul#listmenu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #525155;
	vertical-align: middle;
	font-weight: bold;
	text-decoration: none;
	overflow: visible;
	visibility: inherit;
	list-style: none;
 
}
ul#listmenu li {
	list-style: none;
	float: left;
	width: 218px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #AC9B62;
	padding-left: 20px;
}
ul#listmenu li.last  {
	border-bottom:none;
}
 
ul#listmenu li.scratch {
	background-image: url(../images/icon_usp_scratch_proof.jpg);
	background-repeat: no-repeat;
	background-position: left center;
}
ul#listmenu li.hygienic {
	background-image: url(../images/icon_usp_hygine.jpg);
	background-repeat: no-repeat;
	background-position: 0 4px;
}
ul#listmenu li.range {
	background-image: url(../images/icon_usp_color_range.jpg);
	background-repeat: no-repeat;
	background-position: 0 5px;
}
ul#listmenu li.quality_certificate {
	background-image: url(../images/icon_usp_hygine.jpg);
	background-repeat: no-repeat;
	background-position: 0 50%;
}
ul#listmenu li.stain_proof {
	background-image: url(../images/icon_usp_hygine.jpg);
	background-repeat: no-repeat;
	background-position: 0 50%;
} 
ul#listmenu li.heat_resistant {
	background-image: url(../images/icon_usp_hygine.jpg);
	background-repeat: no-repeat;
	background-position: 0 50%;
}
ul#listmenu a {
	display: block;
	height: 37px;
	line-height: 35px;
	padding-left: 12px;
	color: #525155;
	background-repeat: no-repeat;
	background-position: 8px 8px;
}
ul#listmenu a:hover {
	color: #000000;
	text-decoration: none;
 
}
ul#listmenu li.last {
    border-bottom:none
}
 
ul#tab_menu
{
	width: 538px;
	font-family: "Trebuchet MS";
	list-style-type: none;
	font-size: 12px;
	line-height: 12px;
	background-position: left top;
	height: 36px;
	margin: 0;
	overflow: hidden;
}
ul#tab_menu li {
    float: left;
}
ul#tab_menu li.tab_menu1 a{
	width: 100px;
	color: #456974;
	background-color: #C5DFE5;
	padding-right: 2px;
	padding-left: 2px;
	height: 36px;
	margin-right: 2px;
 
}   /* new class to give width to each menu item individually */
ul#tab_menu li.tab_menu2 a{
    width: 100px;color: #456974;
	background-color: #C5DFE5; padding-right: 2px;
	padding-left: 2px;
	height: 36px;
	margin-right: 2px;
	margin-left: 2px;
	}
ul#tab_menu li.tab_menu3 a{
	width: 100px;
	color: #456974;
	background-color: #C5DFE5;
	padding-right: 2px;
	padding-left: 2px;
	height: 36px;
	margin-right: 2px;
	margin-left: 2px;
}
ul#tab_menu li.tab_menu4 a{
	width: 100px;
	color: #456974;
	background-color: #C5DFE5;
	padding-right: 2px;
	padding-left: 2px;
	height: 36px;
	margin-right: 2px;
	margin-left: 2px;
}
ul#tab_menu li.tab_menu5 a{
	width: 90px;
	color: #456974;
	background-color: #C5DFE5;
	padding-right: 2px;
	padding-left: 2px;
	height: 36px;
	margin-left: 2px;
}
ul#tab_menu li.tab_menu6 a{
	width: 100px;
	color: #456974;
	background-color: #C5DFE5;
	padding-right: 2px;
	padding-left: 2px;
	height: 36px;
	margin-right: 2px;
	margin-left: 2px;
}
 
ul#tab_menu a {
	display: block;                  /* item height replaces the bottom 10px padding adding to the height */
	color: #456974;
	text-decoration: none;
	word-spacing: -1px;            /* pulls the words closer together in the long menu titles  */
	text-align: center;           /* no border+11px=11px for the top, no border+1px=1px for the sides :-) */
	padding-top: 8px;
	padding-bottom: 0;
	padding-left: 2px;
	line-height: 15px;
	z-index: -2;
	vertical-align: middle;
	background-position: left center;
	margin-bottom: 5px;
}
ul#tab_menu li a:hover {
	color: #2D3436;
 
}
/* current page links */
li#tab1 a,
li#tab2 a,
li#tab3 a,
li#tab4 a,
li#tab5 a,
li#tab6 a,
li#tab7 a,
li#tab8 a{
	background:url(../images/tab_bg_over_first.jpg) no-repeat;
	color:#2D3436;
	height: 23px;
	width: 100px;
	padding-top: 8px;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0;
	float: left;
}
li#tab1 a:hover{ background:url(../images/tab_bg_over_first.jpg) no-repeat; color:#2D3436;}
li#tab2 a:hover{background:url(../images/tab_bg_over_all.jpg) no-repeat; color:#2D3436;}
li#tab3 a:hover{ background:url(../images/tab_bg_over_all.jpg) no-repeat; color:#2D3436;}
li#tab4 a:hover{ background:url(../images/tab_bg_over_all.jpg) no-repeat; color:#2D3436;}
li#tab5 a:hover{ background:url(../images/tab_bg_over_all.jpg) no-repeat; color:#2D3436;}
li#tab6 a:hover{ background:url(../images/tab_bg_over_all.jpg) no-repeat; color:#2D3436;}
li#tab7 a:hover{ background:url(../images/tab_bg_over_all.jpg) no-repeat; color:#2D3436;}
li#tab8 a:hover{ background:url(../images/tab_bg_over_all.jpg) no-repeat; color:#2D3436;}
 
ul#tab_menu li#tab1 a,
ul#tab_menu li#tab2 a,           /* here the comma was a typo (a dot), making the declaration                                     disregarded by the browser */
ul#tab_menu li#tab3 a,
ul#tab_menu li#tab4 a,
ul#tab_menu li#tab5 a,
ul#tab_menu li#tab6 a,
ul#tab_menu li#tab7 a,
ul#tab_menu li#tab8 a{
	color: #456974;
	background-color: #C5DFE5;
	height: 28px;
	width: 100px;
	padding-top: 8px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}

hope it is better for you to digg out mistakes in my code and till that time i will either try to increase the width of my container or reduce the size of my image. As i am not allowed any links over here i am sending the html code in pm to u.

thanks for helping.

**Paul O'B** · Jul 9, 2008 13:29

Hi,

Here are some fixes.

Code:

.tab_main_content {
    width: 495px;
    text-align: center;
    vertical-align: top;
    margin-right: 20px;
    margin-left: 20px;
    float: left;
    margin-top: 20px;
    display:inline;
}

.tab_main_left {

    width: 210px;
    background-image: url(images/tab_bg_center.jpg);
    background-position: center top;
    text-align: center;
    vertical-align: top;
    margin-right: 30px;
    float: left;
    margin-top: 5px;
}

.thumbnail {
    float: left;
    width: 80px;
    margin-right: 12px;
    margin-left: 8px;
    display:inline;
    overflow:hidden
}

**nisha** · Jul 9, 2008 22:16

hi Paul,

thanks for helping me and i want ot request you one thing, please remove the url link from your solution above in .tab_main_left {background-image: } element as it is creating some problem to my company and the client if their names and link is displayed over here. As it comes in the search result in Google. so i request you to delete the url link from the above solution. I tried and edited my code as suggested by you, but the problem is still not solved. In IE 6 the color swatches are still coming one below the other and the caption text below it appears besides the color image.

so please suggest me some things else.
specially for IE. Also if you have some references for css code to work the same in IE as in other browsers then please send me the url for it as this happens always in IE.

Thanks once again.

**Paul O'B** · Jul 10, 2008 00:28

Hi Nisha,

I have tested the above fixes and they make the page look (more or less) exactly the same as Firefox so you must have done something wrong somewhere.

You must go through and make sure all that you are saying is physically possible. If the images are too wide to fit across then they will drop down underneath each other.

Watch out for the double margin bug on floats. When you float an element and then add a side margin it would be safer for you to also add display:inline every time if you don't understand when the bug appears. (It only occurs on floats that are adjacent to the the side edge of a parent)

I suggest you write down on paper and add all the margins, padding borders and dimensions up and make sure that first of all everything can actually fit in the space allocated.

I will take another look later if I can remember where the page was.

**nisha** · Jul 10, 2008 00:50

hey thanks for your suggestions and advice i will look in to my code again and set the margins and padding accordingly suggested by u on a paper first.

and

I will take another look later if I can remember where the page was.

do you mean you want the url to my live page.
Also the image size of my color swatches is 47 * 18 so i thing it should fit in the width of 210, three images in a row.

Aslo in IE the title is been appearing besides the color image.

i am also attaching the image how it appears in IE 6 over here.

thanks once again.

**Paul O'B** · Jul 10, 2008 01:16

As I said twice already you must check your dimensions

Code:

<!--[if IE ]>
<style type="text/css">
#colorwrap ul li{display:inline;zoom:1.0;width:150px}/* zoom isn't really needed here as the display:inline-block sets haslayout anyway*/
#colorwrap ul li p{width:auto}

</style>

<![endif]-->

That width:150px is much too wide so remove it completely.

You then need to ad a break to get the text under the icon.

Code:

/></a><br>&nbsp;Alumina</p>

**nisha** · Jul 10, 2008 04:06

hey thanks a lot now it is quite solved and all the color swatches appears as per my design, but still their r some problems in my page as but i will post them later in the evening.

Thanks for helping.

**nisha** · Aug 4, 2008 04:48

hi,

i said the bug was solved but it was solved in IE only. so now when the colour swatches looks as per my layout and the image in the earlier post in IE, but in firefox 2.2 all the colour swatches are merged in the first colour swatch in stead of properly placed.
In rest all the browsers it looks fine but in ff 2.2 it looks too bad.

so will you please look in to the page again and suggest any code change which will fix my problem.

I am sending the page link in the pm to you.

Suggestions and help appreciated.

**Paul O'B** · Aug 4, 2008 06:10

Hi,

You could try something like this.

Code:

#colorwrap ul {
    list-style:none;
    margin-left: 3px;
    text-align:left
}
#colorwrap ul li {
    color:#456974;
    display:-moz-inline-box;/* mozilla only */
    display:inline-block;/* browsers that support display:inline-block like safari &amp; opera*/
    vertical-align:top;
    text-align:left;
    font-size: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 3px;
    /* float:left; remove*/
}

**nisha** · Aug 4, 2008 06:44

hey thanks paul for quick reply,

seems the error has been solved but still i will upload it on the server and inform you finally

thanks a lot.

User Tag List

Thread: Problem with the css code in IE 6 & 7

Thread Tools

Display

Problem with the css code in IE 6 & 7

Bookmarks

Bookmarks

Posting Permissions