1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

CSS layout - cross compatibility

Discussion in 'Web Design & Development' started by Neighbor, Oct 3, 2008.

Thread Status:
Not open for further replies.
  1. Neighbor

    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;
    }
     

    Attached Files:

  2. amanxman

    amanxman

    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
     
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 733,556 other people just like you!

Loading...
Similar Threads - layout cross compatibility
  1. mosassas
    Replies:
    2
    Views:
    578
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/755785

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice