ie not playing nicely with my code.

Discussion in 'CSS' started by an63lu5, Jul 9, 2007.

0
  1. #1
    cheers bret
    hi all, i have done a lot of work on the page since my last post, on the computers i view it on, all seems good so far, but they are using safari and firefox on the mac, and firefox on the pc. at this stage IE doesn't really display the page correctly. ie: the footer which is my navigation bar sits behind the picture, instead of below it.

    www.aashaaron.com

    here is the CSS for the main file, which houses all of the content.

    /* page layout and style */
    body {
    background-color: #000;
    color: #29bc00;
    font-family: "Courier New", Courier, mono;
    }
    /*wrap box to enclose whole page*/
    #wrap {
    height: 95%;
    width: 100%;
    margin: 1px;
    padding: 1px;
    }

    /* header box layout */
    #header {
    position: relative;
    top: 2px;
    left: 2px;
    height: auto;
    width: auto;
    margin: 2px;
    padding: 2px;
    }

    /* index page main body box*/
    #indexbody {
    position: relative;
    height: auto;
    top: 5%;
    text-align: center;
    border-top: 1px solid #0f0;
    border-bottom: 1px solid #0f0;
    border-style: solid;
    border-width: 1px;
    width: 99%;
    margin: 2px;
    padding: 2px;
    border-right-style: none;
    border-left-style: none;
    float: right;
    }
    /* navigation box layout*/
    #navigation {
    position: fixed;
    width: auto;
    padding: 2px;
    margin: 2px;
    bottom: 1px;
    left: 1px;
    }
     
    an63lu5, Jul 9, 2007 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    You have not taken into account people who run browsers at reduced sizes. (Reduce your browser window to about 600×800px to see the problem.) It would be better to remove {position: fixed;} and the bottom and left properties. Too, IE6 does not support fixed position.

    cheers,

    gary
     
    kk5st, Jul 10, 2007 IP
  3. haruko764

    haruko764 Peon

    Messages:
    25
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    kk5st is right, you shouldn't use position:fixed; if you care about IE users, but the problem you're experiencing isn't anything to do with your CSS.

    In both IE and Firefox, the images overlap at the same place, but in Firefox, the picture of you overlaps the navigation images and in IE it is vice versa. This difference is simply due to the differences in the ways the 2 browsers handle images, and you could probably work around it, but its really not smart to have images overlapping in general. Edit them down so they don't overlap. Problem solved.
     
    haruko764, Jul 10, 2007 IP