hello friends ,
i am Jaison, iam designing a webpage where ie and firefox render differently.
the link is www.thewoodhouse.net/jaison
to correct this rendering problem. do i need to write two css one for ie and other for firefox or any other suggestions…
please help me
Jaison Justus
Link edited and works now - Spike
Hi,
The link in your post is not working! So couldn’t see the Problem but
you can use different files for diff browsers. You can use JavaScript to detect the and serve the appropriate information.
I still wish i could see the link to get the problem.
Yes, the link’s no good. You can also use Conditional Comments just for IE, but first it’s better to check that there’s not a way to serve up good code for all browsers.
We need the link to help any further.
hai friends,
thanks for the reply and just try the link below:
the correct link is
www.thewoodhouse.net/jaison
before i spelled jaison in correctly as jasion
Link updated - Jaison had a typo
hello please help me
i am stuck in a web design project… plz!!!
Hi
I will stick to my previous plan. Use Javascript to determine the Browser and then serve the code as required.
But i must give u congrats on the looks of your site!!!
ITS AWESOME!!!
Way to go, Jason!!!
Moved you over to the CSS forum Jaison.
Browser sniffing with JS is out of date. CSS is the way to go. Each version of IE has its problems that can be fixed with CSS conditional comments.
I don’t have IE open right now. Jaison, which version of IE are you seeing the problem in? You should always specify, as we are talking about 3 browsers here.
No need for that - just do it right once 
The main problem is that you don’t have a doctype and therefore all versions of IE (including ie8) are thrown back into last century and render more like ie5 using the broken box model.
Add this doctype:
[B]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">[/B]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/index.css" type="text/css" media="screen" />
You will then need to tweak the nav a bit as follows.: ( changes are marked in bold)
#nav_holder {
[B] width:640px;
/*margin-top:148px;*/
margin-top:-8px;[/B]
float:right;
}
#nav_left {
width:50px;
height:52px;
background-image:url(http://www.thewoodhouse.net/jaison/images/cornerleft.png);
float:left;
}
#nav {
width:540px;
height:50px;
background-color:black;
padding:1px 0px 1px 0px;
margin:auto;
}
[B]* html #nav{float:left}[/B]
#nav ul {
text-align:center;
[B] margin:15px 0 0;
padding:0;[/B]
}
#nav li {
display:inline;
margin:0px 7px 0px 7px;
[B] color:#fff;[/B]
}
#nav a {
font:13px "Lucida Grande";
color:white;
text-decoration:none;
[B] padding:0 7px 0 0;[/B]
}
#nav_right {
width:50px;
height:52px;
background-image:url(http://www.thewoodhouse.net/jaison/images/cornerright.png);
float:right;
}
Then change the html as it is not very semantic and use this:
<div id="header">
<div id="header_container">
<div id="branding"> <img src="http://www.thewoodhouse.net/jaison/images/logo.png" alt="branding" /> </div>
<div id="nav_holder">
<div id="nav_left"></div>
<div id="nav_right"></div>
<div id="nav">
<ul>
[B] <li><a href="#">Home</a> | </li>
<li><a href="#">News</a> | </li>
<li><a href="#">Downloads</a> | </li>
<li><a href="#">Login</a> | </li>
<li><a href="#">Contact Us</a> | </li>[/B]
</ul>
</div>
</div>
</div>
</div>
Get rid of the image border on linked images:
a img {border:none}
Add display:inline to floats that have margins and are first, last or only in sequence on the same horizontal plane.
That should get ie6 - 8 fixed except that ie6 will need the pngfixes for your transparent images.
Here is the whole page in case I missed something:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/index.css" type="text/css" media="screen" />
<style type="text/css">
p {
margin:0;
padding:0;
}
body {
background-image:url(http://www.thewoodhouse.net/jaison/images/background.jpg);
background-repeat:repeat-x;
background-color:black;
}
#header {
width:100%;
margin:30px auto;
height:200px;
background-image:url(http://www.thewoodhouse.net/jaison/images/stripe.png);
background-repeat:repeat-x;
}
#header_container {
width:980px;
padding:0px 10px 0px 10px;
height:auto;
overflow:hidden;
margin:auto;
}
#Branding {
width:300px;
height:150px;
float:left;
margin-top:25px;
}
#nav_holder {
width:640px;
/*margin-top:148px;*/
margin-top:-8px;
float:right;
}
#nav_left {
width:50px;
height:52px;
background-image:url(http://www.thewoodhouse.net/jaison/images/cornerleft.png);
float:left;
}
#nav {
width:540px;
height:50px;
background-color:black;
padding:1px 0px 1px 0px;
margin:auto;
}
* html #nav {
float:left
}
#nav ul {
text-align:center;
margin:15px 0 0;
padding:0;
}
#nav li {
display:inline;
margin:0px 7px 0px 7px;
color:#fff;
}
#nav a {
font:13px "Lucida Grande";
color:white;
text-decoration:none;
padding:0 7px 0 0;
}
#nav_right {
width:50px;
height:52px;
background-image:url(http://www.thewoodhouse.net/jaison/images/cornerright.png);
float:right;
}
#top {
width:1020px;
background-image:url(http://www.thewoodhouse.net/jaison/images/topround.png);
background-repeat:no-repeat;
margin:10px auto;
padding-top:20px;
}
#content {
width:1000px;
height:auto;
padding:10px 10px 10px 10px;
background-image:url(http://www.thewoodhouse.net/jaison/images/stripe.png);
background-repeat:repeat-x;
overflow:hidden;
}
#albumart_holder {
width:650px;
height:auto;
float:left;
margin-right:10px;
}
#text_holder {
width:330px;
height:auto;
margin-right:10px;
float:right;
}
#text_holder p {
font:13px "Lucida Grande";
color:white;
line-height:20px;
text-align:left;
}
#text_holder h1 {
display:block;
text-align:left;
font:20px "Lucida Grande";
margin-top:10px;
margin-bottom:10px;
color:white;
}
#more_info {
width:400px;
height:150px;
position:absolute;
overflow:hidden;
padding:7px 7px 7px 7px;
background-color:white;
}
#more_info_img_container {
width:149px;
height:129px;
float:left;
background-image:url(http://www.thewoodhouse.net/jaison/images/cdcover.png);
}
#more_info_img_container img {
margin-left:24px;
}
#album_holder {
width:1000px;
height:auto;
padding-right:10px;
margin-top:20px;
float:left;
}
.album_card {
width:320px;
height:200px;
background-image:url(http://www.thewoodhouse.net/jaison/images/albumcard.png);
margin:0px 0px 10px 10px;
float:left;
display:inline;
}
.albumart {
width:125px;
height:126px;
margin:36px 0px 0px 27px;
float:left;
}
.details {
width:100px;
margin:30px 0px 0px 20px;
float:left;
}
.rating {
width:120px;
height:32px;
margin:0px 0px 0px 20px;
float:left;
}
.rating img {
float:left;
display:inline;
}
.download {
width:120px;
height:32px;
float:left;
margin-left:20px;
}
.style1 {
font:11px "Lucida Grande";
color:white;
display:block;
}
.style2 {
font:13px "Lucida Grande";
color:white;
display:block;
margin-bottom:5px;
}
#quicklink_container {
width:1000px;
overflow:hidden;
float:left;
}
.quicklinks {
width:300px;
margin:0px 0px 10px 10px;
padding:10px 10px 10px 10px;
float:left;
display:inline
}
.quicklinks h1 {
font:14px bold "Lucida Grande";
color:white;
text-align:left;
}
.quicklinks p {
font:11px "Lucida Grande";
color:gray;
text-align:justify;
margin-top:10px;
}
.quicklink img {
margin:10px 0px 10px 0px;
}
#bottombar {
float:left;
height:100px;
width:800px;
margin-left:100px;
background-image:url(http://www.thewoodhouse.net/jaison/images/bottombar.png);
background-repeat:no-repeat;
background-position:0px 32px;
overflow:hidden;
}
.sitelinks {
width:200px;
height:84px;
margin:0px 5px 0px 30px;
display:inline;
float:left;
}
.desc {
width:550px;
float:right;
margin-right:10px;
margin-top:11px;
display:inline;
}
.desc p {
font:33px "Lucida Grande";
color:silver;
}
#bottom {
width:1020px;
background-image:url(http://www.thewoodhouse.net/jaison/images/bottomround.png);
background-repeat:no-repeat;
margin:auto;
padding-top:20px;
}
/* footer */
#footer {
width:100%;
margin:30px 0px 0px 0px;
height:200px;
background-image:url(http://www.thewoodhouse.net/jaison/images/stripe.png);
background-repeat:repeat-x;
}
#footer_container {
width:980px;
padding:0px 10px 0px 10px;
height:auto;
overflow:hidden;
margin:auto;
}
#contactus {
float:left;
width:500px;
margin-top:10px;
height:180px;
}
#logo {
float:left;
width:200px;
height:150px;
margin:15px 0px 0px 10px;
display:inline;
}
#contactdetails {
width:280px;
height:150px;
margin:15px 10px 0px 0px;
float:right;
display:inline;
}
#contactdetails h1 {
font:20px "Lucida Grande";
color:white;
margin-top:-7px;
}
#contactdetails h2 {
font:10px "Lucida Grande";
color:white;
}
#contactdetails p {
list-style:none;
font:11px "Lucida Grande";
color:white;
margin-top:4px;
}
#madeonamac {
width:280px;
height:150px;
float:right;
margin:15px 10px 0px 0px;
display:inline;
}
a img {
border:none
}
</style>
</head>
<body>
<div id="header">
<div id="header_container">
<div id="branding"> <img src="http://www.thewoodhouse.net/jaison/images/logo.png" alt="branding" /> </div>
<div id="nav_holder">
<div id="nav_left"></div>
<div id="nav_right"></div>
<div id="nav">
<ul>
<li><a href="#">Home</a> | </li>
<li><a href="#">News</a> | </li>
<li><a href="#">Downloads</a> | </li>
<li><a href="#">Login</a> | </li>
<li><a href="#">Contact Us</a> | </li>
</ul>
</div>
</div>
</div>
</div>
<div id="top">
<div id="content">
<div id="albumart_holder"> <img src="http://www.thewoodhouse.net/jaison/images/albumart.jpg" alt = "albumart" /> </div>
<div id="text_holder">
<h1> About Us </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in metus sed
nulla ullamcorper consequat. Cras ligula. Vivamus eu nunc. Ut dictum dui ut
tortor. Fusce placerat mi a sem. Etiam risus. Phasellus laoreet neque id
metus condimentum euismod. Vestibulum vel dolor. Sed sit amet arcu. Nulla
fringilla consequat erat. Vivamus sollicitudin turpis eget ligula. Duis
rutrum nunc vel sem.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis in metus sed nulla ullamcorper consequat. Cras ligula. Vivamus eu nunc.
Ut dictum dui ut tortor. Fusce placerat mi a sem. Etiam risus. Phasellus
laoreet neque id metus condimentum euismod. Vestibulum vel dolor.
Sed sit amet arcu. Nulla fringilla consequat erat. Vivamus sollicitudin
turpis eget ligula. Duis rutrum nunc vel sem.
<p>
</div>
<div id="album_holder">
<div class="album_card">
<div class="albumart"> <img src="http://www.thewoodhouse.net/jaison/images/alb1.png" alt="lost" /> </div>
<div class="details">
<p class="style1">Artist:</p>
<p class="style2">Evanescence</p>
<p class="style1">Album:</p>
<p class="style2">Fallen</p>
</div>
<div class="rating"> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/off.png" alt="off"/> </div>
<div class = "download"> <img src="http://www.thewoodhouse.net/jaison/images/download.png" alt="down"/> </div>
</div>
<div class="album_card">
<div class="albumart"> <img src="http://www.thewoodhouse.net/jaison/images/alb2.png" alt="sound garden" /> </div>
<div class="details">
<p class="style1">Artist:</p>
<p class="style2">Sound Garden</p>
<p class="style1">Album:</p>
<p class="style2">A Side</p>
</div>
<div class="rating"> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/off.png" alt="off"/> </div>
<div class = "download"> <img src="http://www.thewoodhouse.net/jaison/images/download.png" alt="down"/> </div>
</div>
<div class="album_card">
<div class="albumart"> <img src="http://www.thewoodhouse.net/jaison/images/alb3.png" alt="evenascence" /> </div>
<div class="details">
<p class="style1">Artist:</p>
<p class="style2">U2</p>
<p class="style1">Album:</p>
<p class="style2">The Best of U2</p>
</div>
<div class="rating"> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/off.png" alt="off"/> </div>
<div class = "download"> <img src="http://www.thewoodhouse.net/jaison/images/download.png" alt="down"/> </div>
</div>
<div class="album_card">
<div class="albumart"> <img src="http://www.thewoodhouse.net/jaison/images/alb4.png" alt="evenascence" /> </div>
<div class="details">
<p class="style1">Artist:</p>
<p class="style2">Red Hot Chilli Peppers</p>
<p class="style1">Album:</p>
<p class="style2">Essential</p>
</div>
<div class="rating"> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/off.png" alt="off"/> </div>
<div class = "download"> <img src="http://www.thewoodhouse.net/jaison/images/download.png" alt="down"/> </div>
</div>
<div class="album_card">
<div class="albumart"> <img src="http://www.thewoodhouse.net/jaison/images/alb5.png" alt="evenascence" /> </div>
<div class="details">
<p class="style1">Artist:</p>
<p class="style2">Pink FLoyd</p>
<p class="style1">Album:</p>
<p class="style2">The Wall</p>
</div>
<div class="rating"> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/off.png" alt="off"/> </div>
<div class = "download"> <img src="http://www.thewoodhouse.net/jaison/images/download.png" alt="down"/> </div>
</div>
<div class="album_card">
<div class="albumart"> <img src="http://www.thewoodhouse.net/jaison/images/alb6.png" alt="evenascence" /> </div>
<div class="details">
<p class="style1">Artist:</p>
<p class="style2">The Doors</p>
<p class="style1">Album:</p>
<p class="style2">Morrison Hotel</p>
</div>
<div class="rating"> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/on.png" alt="on"/> <img src="http://www.thewoodhouse.net/jaison/images/off.png" alt="off"/> </div>
<div class = "download"> <img src="http://www.thewoodhouse.net/jaison/images/download.png" alt="down"/> </div>
</div>
</div>
<div id="quicklink_container">
<div class="quicklinks">
<h1>Gadgets</h1>
<a href="#"><img src="http://www.thewoodhouse.net/jaison/images/gadgets.png" alt="gadgets"/></a>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in metus sed
nulla ullamcorper consequat. Cras ligula. Vivamus eu nunc. Ut dictum dui ut
tortor. Fusce placerat mi a sem. Etiam risus. Phasellus laoreet neque id
metus condimentum euismod. Vestibulum vel dolor. </p>
</div>
<div class="quicklinks">
<h1>Events</h1>
<a href="#"><img src="http://www.thewoodhouse.net/jaison/images/events.png" alt="events"/></a>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in metus sed
nulla ullamcorper consequat. Cras ligula. Vivamus eu nunc. Ut dictum dui ut
tortor. Fusce placerat mi a sem. Etiam risus. Phasellus laoreet neque id
metus condimentum euismod. Vestibulum vel dolor. </p>
</div>
<div class="quicklinks">
<h1>Internet Radio</h1>
<a href="#"><img src="http://www.thewoodhouse.net/jaison/images/radio.png" alt="radio"/></a>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in metus sed
nulla ullamcorper consequat. Cras ligula. Vivamus eu nunc. Ut dictum dui ut
tortor. Fusce placerat mi a sem. Etiam risus. Phasellus laoreet neque id
metus condimentum euismod. Vestibulum vel dolor. </p>
</div>
</div>
<div id="bottombar">
<div class="sitelinks"> <img src="http://www.thewoodhouse.net/jaison/images/lastfm.png" alt="itunes"/> </div>
<div class="desc">
<p> Enjoy Unlimited Internet Radio!!! </p>
</div>
</div>
</div>
<div id="bottom"> </div>
</div>
<div id="footer">
<div id="footer_container">
<div id="contactus">
<div id="logo"> <img src="http://www.thewoodhouse.net/jaison/images/devinc.png" alt="developer inc logo"/> </div>
<div id="contactdetails">
<h2> powered by,</h2>
<h1>Developer Inc</h1>
<p>Trivandrum - 605018</p>
<p>Kerala | India</p>
<p></p>
<p>Contact Us:</p>
<p>Phone No. 9995118984</p>
<p>Email. jaisonjustus@hotmail.com</p>
</div>
</div>
<div id="madeonamac"> <img src="http://www.thewoodhouse.net/jaison/images/madeonamac.png" alt="made on a mac" /> </div>
</div>
</div>
<script language = "javascript" src="http://www.thewoodhouse.net/jaison/script/jquery.js" type = "text/javascript"></script>
<!-- <script language = "javascript" src = "script/index.js" type = "text/javascript"></script> -->
</body>
</html>
Hope that helps
hello friends,
thank you very much all, thank you.Thanks for the tip…
jaison