cross browser compatibility issue..please help me out of this..thanks

**numberwhun** · Oct 21 '08, 11:16 PM

Can you show us the code you have and explain what is going wrong?

Regards,

Jeff

**David Laakso** · Oct 21 '08, 11:40 PM

A couple of reference sites for coping with known issues in various versions of Internet Explorer.
on having layout
position is everything

Using float structured layouts that are known to work cross-browser (even in the IE browsers), is always a safe bet. Here are some:
465 berrea street-- 2 col tutorial
ala-- negative margin layouts
layout gala -- 40 layouts

Generally speaking absolute positioning, if needed at all, is best left to positioning small elements within float based layouts. The use of relative positioning depends on the need (s) at hand. In addition to its many other uses, it is employed in conjunction with absolute positioning to acheive stacking order context; and, is sometimes used as a "magic bullet" hack for issues related to IE browsers.

Answers to the use of any and all positioning schemes, including absolute and relative, are best sought in the CSS 2.1 Specifications .

**gabosom** · Oct 22 '08, 12:57 AM

I just want to note, it's not bad practice to come up with CSS hacks for IE. It is definitely NOT recommended to do so, but if by ANY reason you have no choice but hacks, well, you can do it.

For your particular issue, can you show us the code?

**drhowarddrfine** · Oct 22 '08, 02:15 AM

Just further evidence of the incompetence that is the IE browser. You may be doing nothing wrong at all.

**101986** · Oct 22 '08, 08:53 PM

thanks a lot for ur suggestions i'll definatily work on it.

stay in touch i'll shortly send my html and css codes.

**101986** · Nov 5 '08, 09:41 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>

<title>demo</title>
<link rel="stylesheet " type="text/css" href="ss1.css">
</head>

<body>

<div id="maincontain er">
<div id="container1" >
<img src="image1.jpg " class="i1" />
<ul class="link1">
<li><a href="#">Access ibility</a></li>
<li><a href="#">Site Map</a></li>
<li class="last"><a href="#">Blog</a></li>
</ul>

<div id="container2" >
<ul class="link2">
<li><a href="#">Home</a></li>
<li><a href="#">Design </a></li>
<li><a href="#">Print</a></li>
<li><a href="#">Exhibi tion</a></li>
<li><a href="#">Web Design</a></li>
<li class="last1">< a href="#">Contac t Us</a></li>
</ul>
</div>
</div>
<img src="image2.jpg " class="i2" />
<img src="image7.jpg " class="i3" />

<div id="container3" >
<ul class="link3">. ............... ............... ............... ......
<li><a href="#">Home</a></li>............ ............... ............... ..........
<li><a href="#">Design </a></li>............ ............... ............... ..........
<li><a href="#">Print</a></li>............ ............... ............... ..........
</ul>

<p class="para1">N eed Formation  ?</p><p class="para2">W ell why not contact to <br>discuss your plans<br> and receive a free <br>consultatio n!<br><br>You can do this either by giving<br>us a call on (01926) <br>775098, or by filling in<br>the <span class="mletter" >quick contact us</span> form.

<img src="image3.jpg " class="i4" />
<img src="image4.jpg " class="i5" />

</div>

<div id="container4" >
<p class="para1">|  Leamingto n Spa Warwickshire :</p>
<p class="para2">T he result fo time and commitment, when the whole package comes together!<br>
Without it your image may as well be in the dark!</p>
<p class="para3">W hether it corporate branding or website design, when your media solutions is in<br>

place your comanies develpoment gains structure and pattern.</p>
<p class="para4">C overing <span class="para5">L eamington Spa, Warwickshire</span> and the Midlands with high quality,<br>
affordable bespoke Web Design, Graphic Design and Print!</p>
<p class="para6">W hat do we do?</p>
<p class="para7">W eb Design</p>

<p class="para8">G raphic Design</p>
<p class="para9">E xhibition</p>
<ul type="none" class="link4">
<li><a href="#">Leamin ton Spa</a></li>
<li><a href="#">Afford able</a></li>
<li><a href="#">Packag es</a></li>
</ul>
<ul type="none" class="link5">

<li><a href="#">Qualit y</a></li>
<li><a href="#">Warwic kshire</a></li>
<li><a href="#">Develo pment</a></li>

</ul>

<ul type="none" class="link6">
<li><a href="#">Projec tion</a></li>
<li><a href="#">Achiev ment</a></li>
<li><a href="#">covent ry</a></li>

</ul>
<div id="im1">
<img src="image5.jpg " />
</div>
<div id="im2">
<img src="image5.jpg " />
</div>
<div id="im3">
<img src="image5.jpg " />
</div>
<div id="im4">
<img src="image6.jpg " class="i6" />
</div>
<p class="para10"> Media requesting a website that would allow them to sell unique<br>
memorial cards through their website, eith time and commitment we built them a high<br>
quality<span class="para11"> XHTML</span> and <span class="para12"> CSS </span>valid website which ticked all their<br>

requirements.</p>
</div>

<div id="container5" >
<div id="container6" >
</div>
<p class="para13"> 8 Cashmore Avenue, <span class="para14"> Leamington Spa,Warwickshir e,</span> CV31 3EU | Phone:01926&nbs p;775098</p></div>

</div>

</body>
</html>

**101986** · Nov 5 '08, 09:42 AM

#maincontainer {
width: 800px;
height: 1070px;
margin: 0px ;
background-color:white;bor der:1px solid black;
margin: auto;

}
#container1 {
width: 800px;
height: 180px;
background-color:#99cc33;
margin: auto;

}
#container1 .i1 {
margin:20px 0 0 30px;}
#container1 .link1 {
text-align:right;
margin:-85px 0 0 0;
}
#container1 .link1 li {

display:inline;
font-size:14px;
font-weight:bold;
border-right:1px solid white;
padding:0 12px 0 5px;
}
#container1 .link1 .last {
border-right:none;}
#container1 .link1 a {
color:white;
text-decoration:none ;
}
#container1 .link1 a:hover {
color:black;
}
#container2 {
width:800px;
height:50px;
margin:100px 0 0 0;
background:#333 333;
}
#container2 .link2 {
text-align:right;
padding:16px 0 0 0;
}

#container2 .link2 li {

display:inline;
font-size:13px;
font-weight:bold;
border-right:1px solid white;
padding:16px 25px 16px 25px;
background:#333 333;

}

#container2 .link2 .last1 {
border-right:none;}
#container2 .link2 a {
color:white;
text-decoration:none ;
}
#container2 .link2 a:hover {
color:#99cc99;
}
.i2 {
width:700px;
height:100px;
float:left;
background:url( images/image2.jpg) no-repeat top left;
margin:25px 0 0 45px; }

.i3 {
width:250px;
height:50px;
float:left;
background:url( images/image7.jpg) no-repeat top left;
margin:20px 0 0 11px; }

#container3 {
width:250px;
height:550px;
margin:130px 0 0 10px;}

#container3 .link3 li {

font-size:15px;
font-weight:bold;
padding:0 0 2px 10px;
margin:-2px 0 -8px -15px;

}

#container3 .link3 a {
color:green;
text-decoration:none ;
}
#container3 .link3 a:hover {
color:#99cc99;
}

#container3 .para1 {
margin:20px 0 0 10px;
font-size:22px;
color:green;

}
#container3 .para2 {
margin:20px 0 0 10px;
font-size:15px;
color:black;

}
#container3 .mletter {color:green;}

.i4 {
width:60px;
height:50px;
float:left;
background:url( images/image3.jpg) no-repeat top left;
margin:-140px 0 0 150px; }

.i5 {
width:120px;
height:100px;
float:left;
background:url( images/image4.jpg) no-repeat top left;
margin:15px 0 0 55px; }

#container4 {
width:520px;
height:650px;
float:right;
margin:-540px 13px 0 0;
}

.para1 {
margin:0 0 0 0;
font-size:28px;
color:green;}
.para2 {
margin:8px 0 0 0;
font-size:16px;}
.para3 {
margin:10px 0 0 0;
font-size:16px;}
.para4 {
margin:15px 0 0 0;
font-size:16px;}
.para5 {color:green;}
.para6 {
margin:30px 0 0 0;
font-size:24px;
color:green;}
.para7 {
margin:20px 0 0 0;
font-size:18px;}
.para8 {
margin:-20px 0 0 160px;
font-size:18px;}

.para9 {
margin:-20px 0 0 360px;
font-size:18px;}
.link4 {
margin:15px 0 0 -10px;}

.link4 a {text-decoration:none ;
color:black;}

.link5 {
margin:-60px 0 0 150px;}

.link5 a {
text-decoration:none ;
color:black;}
.link6 {
margin:-60px 0 0 350px;}
.link6 a {
text-decoration:none ;
color:black;}

#im1 {
margin:-60px 0 0 1px;}
#im2 {
margin:-74px 0 0 160px;}
#im3 {
margin:-69px 0 0 360px;}
#im4 .i6 {
width:515px;
height:120px;
margin:30px 0 0 0;
background:url( images/image6.jpg) no-repeat top left;}
.para10 {
margin:30px 0 0 0;
font-size:16px;
}
.para11,.para12 {color:green;}

#container5 .para13 {
font-size:15px;
color:gray;
text-align:center;
margin:12px 0 0 0;}
.para14 {color:green;}

#container5 {
width:800px;
height:60px;
margin:150px 0 0 0;
background:#333 333;
}
#container6 {
width:800px;
height:25px;
margin:-1px 0 0 0;
background:#99c c33;
}

**David Laakso** · Nov 5 '08, 11:10 AM

1/ Include the width and height of all images in the markup.

2/ Run the markup through Tidy Online . Tidy will replace your doctype with a doctype that Internet Explorer can understand; and Tidy will correct many of the numerous other markup errors.

3/ Manually correct the remaining markup errors Tidy has not fixed.

4/ Validate the markup and CSS with the w3c Validation Service.

5/ Put the valid page, images, and valid CSS on a public server and provide only a clickable link to it in your post. Anyone on earth can then view the markup and open the CSS file. No need to cut and paste 9 yards of markup and CSS to the forum-- which essentially is impossible to help you with without images in place.

6/ State your Operating System, browsers, browser versions, and the issues you you have in each of them in your post.

**drhowarddrfine** · Nov 5 '08, 12:54 PM

xhtml version 1.1 is only to be served as application/xml+xhtml but I'm sure you are not. Change your doctype to 1.0

**David Laakso** · Nov 5 '08, 07:26 PM

xhtml version 1.1 is only to be served as application/xml+xhtml but I'm sure you are not. Change your doctype to 1.0

Or use what Tidy assigns-- transitional. Or leave what you got: 1.1 (and someone on this end will straighten it out). Either way, validate the markup and the css. And provide the images-- otherwise, I regret to say, a fix for whatever it is that is the issue you are having is unlikely (at least from me). Without the images the page is a meaning less ball of confusion-- no images, no layout structure...

cross browser compatibility issue..please help me out of this..thanks

cross browser compatibility issue..please help me out of this..thanks

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment