It properly works in mozilla not in ie plz help me2see in I.E6 r 7

Question

chowdarysmk 0 Newbie Poster

15 Years Ago

This is css code

*{
	padding:0px; margin:0px;font-size:100%
 }

 html{
	font-size:100%;
	height:100%;
 }

body {
	background:#8b909c url('../images/page-bg.gif') repeat-x;
	height:100%;
	font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

a{
	text-decoration:none;
	color:#00a8cc;
	
}
a:hover{
	text-decoration:underline;	
	color:#00a8cc;
}
p{
	font: 0.9em/1.2em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;	
}
h1{
	font: 1.5em/1.5em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;	
}
h2{
	font: 1.3em/1.5em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
h3{
	font: 1.1em/1.5em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
h1,h2{
	color:#00a8cc;	
}
h2,h3,h4{
	margin-left:10px;
}
ul{
	padding:0;margin:0;
}
ol{
	margin:10px 30px;
}
.keymessage{
	font: 1.1em/1.2em "Lucida Sans Unicode","Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	padding:80px 200px 20px 200px;
	
}
.keymessage:first-letter{
	font-size: 2.4em;
}
#watermark{
	/*background:url('../images/keystone-watermark3.png');*/
}
#page{
	/*height:2000px;*/
	
}
#wrapper{
	margin:0 auto;
	width:949px;
		
}
#header{
	
}
#logo{
	overflow:visible;
	position:relative;
	top:-3px;
	left:-154px;
	width:100px;
	height:200px;
	z-index:-2;
}

#tr-menu{
	float:right;
	padding:6px 10px 4px 4px;
}

.style_ip{
	list-style-type:none;
	
}
.style_ip li{
	display:inline-block;
	background:url('../images/button-sprite01.png') no-repeat;
	width:120px;
	text-align:center;
	height:28px;	
}

.style_ip li a{
	display:block;
	padding:6px 4px 0 0;
	text-transform:capitalize;
	font:0.7em/1.5 "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color:#63573f;
}
.style_ip li a:hover{
	text-decoration:none;	
	color:#00a8cc;
}
.style_txt{
	position:relative;
	list-style-type:none;
	float:right;
	top:45px;
}
.style_txt li{
	display:inline-block;	
	text-align:center;	
}
.style_txt li a{
	display:block;	
	text-transform:lowercase;
	font:0.9em/0.9 "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;	
	color:#666666;
	padding: 2px 10px 2px 2px;
}
.style_txt li a:hover{
	text-decoration:none;	
	color:#00a8cc;
}
.style_txt .last{
	border-right:0px;
}
#menu{
	position:relative;
	top:40px;
	float:right;
	background:url('../images/menu-bg.png') no-repeat;
	width:783px;
	height:66px;
	margin-right:6px;
	
}
.style_menu{
	list-style-type:none;
	padding:10px 10px 0 20px;
}
.style_menu li{
	display:inline-block;	
	text-align:center;
	height:28px;
	padding:2px 0 0 13px;
	height:26px;	
}

.style_menu li span a{
	display:block;
	padding:4px 0 0 0;
	text-transform:uppercase;
	font:0.9em/1.5 "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color:#ffffff;	
	margin-right:13px;
}
.style_menu li:hover{
	background:url('../images/button-sprite02.png') 0px 3px no-repeat;
}
.style_menu li:hover span a{
	background:url('../images/button-sprite02.png') 0px -23px repeat-x;
	text-decoration:none;	
	color:#63573f;
}
.style_menu li:hover span{	
	background:url('../images/button-sprite02.png') right -47px no-repeat;	
	display:block;
}
.current{
	background:url('../images/button-sprite02.png') 0px -77px no-repeat;
}
.current span a{	
	background:url('../images/button-sprite02.png') 0px -103px repeat-x;
	text-decoration:none;	
	color:#63573f;
}
.current span{	
	background:url('../images/button-sprite02.png') right -127px no-repeat;	
	display:block;
}

#content{
	position:relative;
	top:-62px;
}
.middle{
	padding:20px 30px 20px 30px;
	border:0px solid #f00;
}
.middle p{
	margin-bottom:10px;
}
.split{
	
}
.white-window{
	background:url('../images/white-block-top.png') no-repeat;
	padding-top:19px;
}
.white-window .middle{	
	background:url('../images/white-block-middle.png') repeat-y;
}
.white-window .bottom{	
	background:url('../images/white-block-bottom.png') no-repeat;
	height:10px;
}
.grey-window{
	background:url('../images/grey-block-top.png') no-repeat;
	padding-top:19px;
}
.grey-window .middle{	
	background:url('../images/grey-block-middle.png') repeat-y;
}
.grey-window .bottom{	
	background:url('../images/grey-block-bottom.png') no-repeat;
	height:10px;
}
.black-window{
	background:url('../images/blk-block-top.png') no-repeat;
	padding-top:19px;
}
.black-window .middle{	
	background:url('../images/blk-block-middle.png') repeat-y;
}
.black-window .bottom{	
	background:url('../images/blk-block-bottom.png') no-repeat;
	height:10px;
}
.gb-window{
	background:url('../images/grey-black-block-top.png') no-repeat;
	padding-top:19px;
}
.gb-window .middle{	
	background:url('../images/grey-black-block-middle.png') repeat-y;
}
.gb-window .bottom{	
	background:url('../images/grey-black-block-bottom.png') no-repeat;
	height:10px;
}
#footer{	
	margin:10px 0 5px 0;
	font:0.7em/0.9 "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
}
#footer a{
	display:inline-block;	
	text-transform:capitalize;	
	text-decoration:none;
	color:#5c5c5c;
	padding: 2px 10px 5px 2px;
}
#footer a:hover{
	color:#000000;
}
.style_ftr{
	list-style-type:none;		
	margin:0 auto;
	width:430px;
	border:0px solid #f00;
}
.style_ftr li{
	display:block;
	float:left;	
	text-align:center;	
}

.style_ftr li a{
	
}
.style_ftr li a:hover{
	text-decoration:none;	
	color:#ffffff;
}
.style_ftr .last{
	border-right:0px;
}
.style_pfc{
	list-style-type:none;		
	margin:0 auto;
	width:200px;
	border:0px solid #f00;
	padding:20px;
		
}
.style_pfc li{
	display:block;
	float:left;	
	text-align:center;	
}

.style_pfc li a{
	display:block;	
	text-transform:capitalize;	
	color:#e5e5e5;
	padding: 2px 10px 2px 2px;
}
.style_pfc li a:hover{
	text-decoration:none;	
	color:#ffffff;
}
.style_pfc .last{
	border-right:0px;
}

.about-us-banner{
	background: url('../images/about-us-banner.png') 1px -5px no-repeat;
	height:276px;
	
}
.home-banner{
	background: url('../images/home-banner-m.png') 0px -1px no-repeat;
	height:279px;
	
}
h1.bul-header{
	background: url('../images/bullet-sprite-large.png') 0px 0px no-repeat;
	padding:0 0 0 40px;
	margin-bottom:8px;
	color:#00a8cc;	
}
h2.bul-header{
	background: url('../images/bullet-sprite-normal.png') 0px 0px no-repeat;
	padding:0 0 0 40px;
	margin-bottom:8px;
	color:#00a8cc;	
}
.img-right-block{
	position:relative;
	right:0px;	
	top:-31px;
	margin:0 20px 10px 30px;
}
.left-block{
	width:560px;
}
.middle.split .left-block{
	width:563px;
}
.right-block{
	width:300px;
	float:right;
	margin-top:0px;
}
.clear{
	clear:both;
	height:0px;
	content:"";
}
.middle.split .right-block{
	width:300px;
	float:right;
	margin-top:0px;
}
.dark-bg{
	color:#ffffff;
}
.small-fonts p{
	font-size:0.7em;
}
.read-more{
	display:block;
	float:right;
	background:url('../images/button-sprite01.png') 4px -80px no-repeat;
	font-size:0.7em;
	height:28px;
	width:100px;
	text-align:center;
	padding-top:5px;
}
.read-more:hover{
	text-decoration:none;
}
.large-bul{	
	list-style-image: url('../images/bullet-blue-large.png');
	list-style-position:inside;
	margin:-32px 0 0 -20px;
	height:242px;
	font:1.4em/1.5 "Trajan Pro","Times New Roman", Times, serif;
	text-transform:capitalize;
}
.large-bul li{
	background:url('../images/list-bg-other.png')-11px 0px no-repeat;	
	padding:10px 10px 10px 10px;
	height:47px;
	
}
.large-bul .first{
	background:url('../images/list-bg-first.png')-11px -9px no-repeat;
	padding-top:11px;
}

.nrml-bul{
	list-style-image: url('../images/bullet-blue-normal.png');
	list-style-position:inside;
	margin:5px 40px 20px 40px;
	border:1px solid #ccc;
	padding:12px;
	background: url('../images/list-bg-large.png') repeat-x;
}

This is html page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Keystone Logic</title>
		<link rel="stylesheet" media="all" type="text/css" href="styles/screen.css" />
	</head>
	<body>
	<div id="watermark">
		<div id="page">
			<div id="wrapper">
				<div id="header">
					<div id="tr-menu">
						<ul class="style_ip">
							<li><a href="#">blog</a></li>
							<li><a href="#">whitepapers</a></li>
							<li class="last"><a href="#">subscribe</a></li>
						</ul>
						<ul class="style_txt">
							<li><a href="careers.html">careers</li>
							<li class="last"><a href="contact-us.html">contact us</a></li>							
						</ul>						
					</div><!-- end of tr-menu -->
					<div id="menu">
						<ul class="style_menu">
							<li class="current"><span><a href="index.html">Home</a></span></li>
							<li><span><a href="about-us.html">About Us</a></span></li>
							<li><span><a href="industries.html">Industries</a></span></li>
							<li><span><a href="solutions.html">Solutions</a></span></li>
							<li><span><a href="services.html">Services</a></span></li>
							<li><span><a href="customers.html">Customers</a></span></li>
							<li class="last"><span><a href="partners.html">Partners</a></span></li>
						</ul>
					</div><!-- end of menu -->		
					<div id="logo"><img src="images/keystone-logo2.png" alt="Keystone Logic Logo" /></div>
								
				</div><!-- end of header -->				
				<div id="content">
					<div class="home-banner">
						<blockquote class="keymessage">
							In the IT enabled world, information systems are the keystone of any organization. They enable businesses to work together effectively and in essence support the entire organizational structure and growth.
						</blockquote>
					</div>
					
					<div class="gb-window">
						<div class="middle split" style="">
							<div class="right-block dark-bg small-fonts ">
								<h1 class="bul-header">About us</h1>
								<p>
									KeystoneLogic is a global IT organization focused on providing IT solutions to enhance customer loyalty, customer satisfaction, and corporate performance and drive business growth.    
								</p><p>
									Our vision is to continually invest in R&D and develop solutions and tools that are market ready, leverage our strong background in information technology and deliver tangible value to our customers.
								</p><p>
									We take pride in our integrity and our passion to deliver beyond our customers&apos; expectations... 							
								</p>
								<a href="about-us.html" class="read-more" Title="Read more about Keystone Logic">read more..</a>
							</div>
							
							<div class="left-block">
								<ul class="large-bul">
									<li class="first"><span>Proven Leadership</span></li>
									<li><span>Proven Technology &amp; Processes</span></li>
									<li><span>Proven Experience</span></li>
									<li class="last"><span>Proven Commitment</span></li>
								</ul>
							</div>
							
						</div>
						
						<div class="bottom"></div>
											
					</div>
					
					<div id="footer">
						<p>
							<a href="index.html">Home</a>
							<a href="about-us.html">About Us</a>
							<a href="industries.html">Industries</a>
							<a href="solutions.html">Solutions</a>
							<a href="services.html">Services</a>
							<a href="customers.html">Customers</a>
							<a href="partners.html">Partners</a>
						</p>
						<p>							
							<a href="privacy.html">Privacy</a>
							<a href="feedback.html">Feedback</a>																
							<a href="contact-us.html">Contact Us</a>
						</p><br />
						<p>All rights reserved. Copyright &copy; 2009. Keystone Logic.com</p>
					
					</div><!-- end of footer -->
				</div><!-- end of content -->
			</div><!-- end of wrapper -->
		</div><!-- end of page -->
	</div>	
	</body>
</html>

perl web-design

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

images.zip (1604.85 KB)

Edited 15 Years Ago by peter_budo because: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)

3 Contributors
6 Replies
104 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by sylstain

dipak_passion 0 Light Poster

15 Years Ago

Hi!

IE doesn't support display:inline-block, css property. And thats why you are getting this type of distortion. For IE browser use float property, it will solved the issue.

dipak_passion 0 Light Poster

15 Years Ago

Ok, use that stylesheet :

*{
padding:0px; margin:0px;font-size:100%
}

html{
font-size:100%;
height:100%;
}

body {
background:#8b909c url('../images/page-bg.gif') repeat-x;
height:100%;
font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

a{
text-decoration:none;
color:#00a8cc;

}
a:hover{
text-decoration:underline;	
color:#00a8cc;
}
p{
font: 0.9em/1.2em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;	
}
h1{
font: 1.5em/1.5em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;	
}
h2{
font: 1.3em/1.5em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
h3{
font: 1.1em/1.5em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
h1,h2{
color:#00a8cc;	
}
h2,h3,h4{
margin-left:10px;
}
ul{
padding:0;margin:0;
}
ol{
margin:10px 30px;
}
.keymessage{
font: 1.1em/1.2em "Lucida Sans Unicode","Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
padding:80px 200px 20px 200px;

}
.keymessage:first-letter{
font-size: 2.4em;
}
#watermark{
/*background:url('../images/keystone-watermark3.png');*/
}
#page{
/*height:2000px;*/

}
#wrapper{
margin:0 auto;
width:949px;

}
#header{

}
#logo{
overflow:visible;
position:relative;
top:-3px;
left:-154px;
width:100px;
height:200px;
z-index:-2;
}

#tr-menu{
float:right;
padding:6px 10px 4px 4px;
}

.style_ip{
list-style-type:none;
float:right;

}
.style_ip li{
display:inline-block;
background:url('../images/button-sprite01.png') no-repeat;
width:120px;
text-align:center;
height:28px;
float:left;	
}

.style_ip li a{
display:block;
padding:6px 4px 0 0;
text-transform:capitalize;
font:0.7em/1.5 "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color:#63573f;
}
.style_ip li a:hover{
text-decoration:none;	
color:#00a8cc;
}
.style_txt{
list-style-type:none;
float:right;
top:45px;
clear:both;
}
.style_txt li{
display:inline-block;	
text-align:center;
float:left;	
}
.style_txt li a{
display:block;	
text-transform:lowercase;
font:0.9em/0.9 "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;	
color:#666666;
padding: 2px 10px 2px 2px;
}
.style_txt li a:hover{
text-decoration:none;	
color:#00a8cc;
}
.style_txt .last{
border-right:0px;
}
#menu{
position:relative;
top:40px;
*top:90px;
float:right;
background:url('../images/menu-bg.png') no-repeat;
width:783px;
height:66px;
margin-right:6px;

}
.style_menu{
list-style-type:none;
padding:10px 10px 0 20px;
}
.style_menu li{
display:inline-block;	
text-align:center;
height:28px;
padding:2px 0 0 13px;
height:26px;
float:left;	
}

.style_menu li span a{
display:block;
padding:4px 0 0 0;
text-transform:uppercase;
font:0.9em/1.5 "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;	
margin-right:13px;
}
.style_menu li:hover{
background:url('../images/button-sprite02.png') 0px 3px no-repeat;
}
.style_menu li:hover span a{
background:url('../images/button-sprite02.png') 0px -23px repeat-x;
text-decoration:none;	
color:#63573f;
}
.style_menu li:hover span{	
background:url('../images/button-sprite02.png') right -47px no-repeat;	
display:block;
}
.current{
background:url('../images/button-sprite02.png') 0px -77px no-repeat;
}
.current span a{	
background:url('../images/button-sprite02.png') 0px -103px repeat-x;
text-decoration:none;	
color:#63573f;
}
.current span{	
background:url('../images/button-sprite02.png') right -127px no-repeat;	
display:block;
}

#content{
position:relative;
top:-62px;
}
.middle{
padding:20px 30px 20px 30px;
border:0px solid #f00;
}
.middle p{
margin-bottom:10px;
}
.split{

}
.white-window{
background:url('../images/white-block-top.png') no-repeat;
padding-top:19px;
}
.white-window .middle{	
background:url('../images/white-block-middle.png') repeat-y;
}
.white-window .bottom{	
background:url('../images/white-block-bottom.png') no-repeat;
height:10px;
}
.grey-window{
background:url('../images/grey-block-top.png') no-repeat;
padding-top:19px;
}
.grey-window .middle{	
background:url('../images/grey-block-middle.png') repeat-y;
}
.grey-window .bottom{	
background:url('../images/grey-block-bottom.png') no-repeat;
height:10px;
}
.black-window{
background:url('../images/blk-block-top.png') no-repeat;
padding-top:19px;
}
.black-window .middle{	
background:url('../images/blk-block-middle.png') repeat-y;
}
.black-window .bottom{	
background:url('../images/blk-block-bottom.png') no-repeat;
height:10px;
}
.gb-window{
background:url('../images/grey-black-block-top.png') no-repeat;
padding-top:19px;
}
.gb-window .middle{	
background:url('../images/grey-black-block-middle.png') repeat-y;
}
.gb-window .bottom{	
background:url('../images/grey-black-block-bottom.png') no-repeat;
height:10px;
width:949px;
font-size:0; line-height:0; position:relative; *top:-17px;
}
#footer{	
margin:10px 0 5px 0;
font:0.7em/0.9 "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}
#footer a{
display:inline-block;	
text-transform:capitalize;	
text-decoration:none;
color:#5c5c5c;
padding: 2px 10px 5px 2px;
}
#footer a:hover{
color:#000000;
}
.style_ftr{
list-style-type:none;	
margin:0 auto;
width:430px;
border:0px solid #f00;
}
.style_ftr li{
display:block;
float:left;	
text-align:center;	
}

.style_ftr li a{

}
.style_ftr li a:hover{
text-decoration:none;	
color:#ffffff;
}
.style_ftr .last{
border-right:0px;
}
.style_pfc{
list-style-type:none;	
margin:0 auto;
width:200px;
border:0px solid #f00;
padding:20px;

}
.style_pfc li{
display:block;
float:left;	
text-align:center;	
}

.style_pfc li a{
display:block;	
text-transform:capitalize;	
color:#e5e5e5;
padding: 2px 10px 2px 2px;
}
.style_pfc li a:hover{
text-decoration:none;	
color:#ffffff;
}
.style_pfc .last{
border-right:0px;
}

.about-us-banner{
background: url('../images/about-us-banner.png') 1px -5px no-repeat;
height:276px;

}
.home-banner{
background: url('../images/home-banner-m.png') 0px -1px no-repeat;
height:279px;

}
h1.bul-header{
background: url('../images/bullet-sprite-large.png') 0px 0px no-repeat;
padding:0 0 0 40px;
margin-bottom:8px;
color:#00a8cc;	
}
h2.bul-header{
background: url('../images/bullet-sprite-normal.png') 0px 0px no-repeat;
padding:0 0 0 40px;
margin-bottom:8px;
color:#00a8cc;	
}
.img-right-block{
position:relative;
right:0px;	
top:-31px;
margin:0 20px 10px 30px;
}
.left-block{
width:560px;
}
.middle.split .left-block{
width:563px;
}
.right-block{
width:300px;
float:right;
margin-top:0px;
}
.clear{
clear:both;
height:0px;
content:"";
}
.middle.split .right-block{
width:300px;
float:right;
margin-top:0px;
}
.dark-bg{
color:#ffffff;
}
.small-fonts p{
font-size:0.7em;
}
.read-more{
display:block;
float:right;
background:url('../images/button-sprite01.png') 4px -80px no-repeat;
font-size:0.7em;
height:28px;
width:100px;
text-align:center;
padding-top:5px;
}
.read-more:hover{
text-decoration:none;
}
.large-bul{	
list-style-image: url('../images/bullet-blue-large.png');
list-style-position:inside;
margin:-32px 0 0 -20px;
height:242px;
font:1.4em/1.5 "Trajan Pro","Times New Roman", Times, serif;
text-transform:capitalize;
}
.large-bul li{
background:url('../images/list-bg-other.png')-11px 0px no-repeat;	
padding:10px 10px 10px 10px;
height:47px;

}
.large-bul .first{
background:url('../images/list-bg-first.png')-11px -9px no-repeat;
padding-top:11px;
}

.nrml-bul{
list-style-image: url('../images/bullet-blue-normal.png');
list-style-position:inside;
margin:5px 40px 20px 40px;
border:1px solid #ccc;
padding:12px;
background: url('../images/list-bg-large.png') repeat-x;
}

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.

dipak_passion 0 Light Poster · Answer 1 · 2009-10-21T15:58:10+00:00

Hi!

IE doesn't support display:inline-block, css property. And thats why you are getting this type of distortion. For IE browser use float property, it will solved the issue.

I have tasted the same and its working fine!

chowdarysmk 0 Newbie Poster · Answer 2 · 2009-10-21T16:09:20+00:00

thank you dipak_passion for u r response....but it does n't work ...once plz see &give suggestion(using float also)

chowdarysmk 0 Newbie Poster · Answer 3 · 2009-10-21T17:22:13+00:00

Thank you
dipak_passion's
the code is working........

sylstain 0 Newbie Poster · Answer 4 · 2009-10-22T14:43:47+00:00

I have the same issue on one of wordpress theme I use.
That code is solve the problem

Thanks so much