CSS layout - cross compatibility

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Neighbor

Thread Starter
Joined
Sep 18, 2008
Messages
5
I designed my website with CSS and it seems to appear differently in different browsers (see the two images below - one in firefox and one in IE). Below is my CSS code... Any suggestions?

body {
background-image: url(Background1.gif);
background-repeat: repeat-y;
background-position: center;
background-color: #cccccc;
margin: 0px;
padding:0px;
}

#container {
width: 800px;
margin-right: auto;
margin-left: auto;
background-color: white;
height: auto;
padding:0px;
}

#Banner {
height: 193px;
width: 800px;
padding:0px;
}

#Text {
height: auto;
width: 315px;
float: right;
margin-right: 25px;
margin-top: 40px;
padding:0px;
}

#left {
width: 100px;
height: auto;
margin-top: 40px;
margin-left: 20px;
text-align: left;
padding:0px;
}

#textRight {
height: auto;
width: 170px;
float: right;
margin-right: 20px;
margin-top: 40px;
padding:0px;
}
 

Attachments

Joined
Mar 28, 2006
Messages
690
Hey,

You can define different style sheets to be rendered by IE.

You should be able to fix it with IE specific style sheets... create a style sheet just read by IE (Internet Explorer) which amends the layout of the bits which are 'broken'.

To include a IE only style sheet, put this into the <head></head> of your page:

<link rel="stylesheet" type="text/css" media="all" href="assets/style.css (your location of main style sheet)" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="assets/ie.css (your location of IE style sheet)" /><![endif]-->

NOTE: On the ie.css (IE style sheet) you only need to put the elements which need extra work for IE -- i.e. you don't need to copy everything from the main style sheet... IE will read main style sheet, and then read IE style sheet, and whatever is in IE style sheet will overrule anything in main style sheet...

So an example:
style.css:
#main
{
padding: 10px 20px 10px 20px;
}
#sub
{
padding: 10px;
}

ie.css
#main
{
padding: 10px 0px 10px 0;
}

You'll have Firefox having 10px 20px 10px 20px for #main, and IE will have 10px 0px 10px 0px. And both browsers will have 10px for #sub (even thou ie.css doesn't contain the #sub div it'll read from main style sheet)

I hope that helps - if you need more specific what bits need changing, can you let me know what divs are where on the html (i.e. post html)

Cheers
amx
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Members online

Top