Jump to content

Different Css File For Different Browser= Conflict

cursed

By cursed
in CSS

Recommended Posts

cursed Newbie

cursed

Posted
Posted

Hi, I am a noob in CSS. Recently i just coded and designed a site. I have made different CSS for IE6(style.ie.css) and a general CSS file(style.css).Problem is when I use the css file made for IE6 using this code:

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="style.ie.css" /><![endif]-->

It becomes like this in IE6:http://i31.tinypic.com/2n07sea.jpgIt suppose to look like this:http://i29.tinypic.com/28atd28.jpgBut firefox shows the site perfectly.Weird thing is when I make the style.ie.css general CSS, IE6 shows the site perfectly. But when I use the "end if" tag it messes up.Here is the different CSS codes and the HTML code:General CSS:

@charset "utf-8";/* CSS Document */body {font-size: 11;font-family: helvetica, sans-serif white;background: url(images/main-bg.jpg) repeat-x #6f6f6f;margin: 0 auto;}a {font-family: Arial, Helvetica, sans-serif;font-size:12px;font-weight:none;color:#FFFFFF;text-decoration: none;line-height: 110%;}div#page-wrap {width: 800px;margin: 0 auto;}ul#nav {width: 688px;height: 145px;margin: 0 auto;background: url(images/header.jpg) no-repeat top center;list-style: none;}ul#nav li a {display:block;width: 100px;height: 15px;float: right;margin-top: 130px;font-family: Arial, Helvetica, sans-serif;font-size:11px;font-weight:bold;color:white;text-decoration: none;}div#layer {  display:table;  background: url(images/back-bg3.png) repeat-y center top;>  width: 710px;  height: 558px;  margin: 0px auto; }div#content {  width: 688px;   margin: 0px auto;     }#main_inner {width: 468px;padding: 15px 0 10px 15px;float: left;}#main_inner2 {display:block;width: 468px;padding: 15px 0 10px 15px;float: left;}div#side1 {position: relative;float: right;width: 150px;margin: 10px 10px 0px 0px;text-align:right;}div#side2 {position: relative;float: right;width: 150px;margin: -50px 10px 0px 0px;}#rotator{		overflow: hidden;	position: relative;	width: 475px;	height: 233px;	padding: 10px 0 0px 15px;	float: left;}#rotator img{	border: 2;	border-color: #666666;	width: 468px;	height: 229px;	}

CSS for IE6:

@charset "utf-8";/* CSS Document */body {font-size: 11;font-family: helvetica, sans-serif white;background: url(images/main-bg.jpg) repeat-x #6f6f6f;margin: 0 auto;}a {font-family: Arial, Helvetica, sans-serif;font-size:12px;font-weight:none;color:#FFFFFF;text-decoration: none;line-height: 110%;}div#page-wrap {width: 800px;margin: 0 auto;}ul#nav {width: 688px;height: 145px;margin: 0 auto;background: url(images/header.jpg) no-repeat top center;list-style: none;}ul#nav li a {display:block;padding: 130px 0px 0px 0px;width: 100px;height: 15px;float: right;font-family: Arial, Helvetica, sans-serif;font-size:11px;font-weight:bold;color:white;text-decoration: none;}a.gallery{margin-top:-18px;}a.events{margin-top:-36px;}a.objective{margin-top:-53px;}a.home{margin-top:-72px;}div#layer {  display:block;  background: url(images/back-bg.ie.jpg) repeat-y center top;>  width: 688px;  height: 556px;  margin: -2px auto; }div#content {  width: 688px;   margin: 0px auto;     }#main_inner {width: 468px;padding: 15px 0 10px 15px;float: left;}#main_inner2 {display:block;width: 468px;padding: 15px 0 10px 15px;float: left;}div#side1 {position: relative;float: right;width: 150px;margin: 10px 10px 0px 0px;text-align:right;}div#side2 {position: relative;float: right;width: 150px;margin: -50px 10px 0px 0px;}#rotator{		overflow: hidden;	position: relative;	width: 475px;	height: 233px;	padding: 10px 0 0px 15px;	float: left;}#rotator img{	border: 2;	border-color: #666666;	width: 468px;	height: 229px;	}

THE HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Entrepreneurship Development Forum</title><link rel="stylesheet" type= "text/css" href= "style.css" /><!--[if IE 6]><link rel="stylesheet" type="text/css" href="style.ie.css" /><![endif]--><script type="text/javascript" src="xfade2.js"></script><script defer type="text/javascript" src="pngfix.js"></script></head><body><ul id="nav"><li><a href "#">Contact</a></li><li><a class="gallery" href "#">Gallery</a></li><li><a class="events" href "#">Events</a></li><li><a class="objective" href "#">Objective</a></li><li><a class="home" href "#">Home</a></li></ul></div><div id="layer">  <div id="content">		<div id="rotator">	<img src="images/slideshow.jpg" alt="banner" width="468" height="229" border="2">	<img src="images/slideshow1.jpg" alt="banner" width="468" height="229" border="2">	<img src="images/slideshow.jpg" alt="banner" width="468" height="229" border="2">	</div>		<div id="side1">	<img src="images/announcement.png" alt="announcement" width="147" height="18"><p><a>EDF Help students recognize their own immense entrepreneurial potential and the entrepreneurial potential of others in their.</a></p>	 </div>	<div id="main_inner2">	<img src="images/whatisedf.png" alt="announcement" width="149" height="21">	<p><a>EDF Help students recognize their own immense entrepreneurial potential and the entrepreneurial potential of others in their environment. To create a network of EDF students, BU faculty and staff, and local business and community leaders in order to foster mutually beneficial relationships among the students, the university, local business, and the community.</a></p><p><a>complying with the modern day corporate ambiance, team work is emphasized in EDF prior to every thing so that the members can feel the bond in the long term when they will enter into the real   corporate  activities .</a></p>	</div>	<div id="side2"><img src="images/upcomming-event.png" alt="announcement" width="148" height="18"><img src="images/azad.jpg" alt="banner" width="147" height="274">	 </div></div></body></html>

PLEASE HELP ME GET THROUGH THIS PROBLEM! :)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...