#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    1
    Rep Power
    0

    IE incompatibility... somewhere


    So I'm fresh into css for the first time, and it's been going great so far.

    Until now, of course, when I find that my page is working absolutely fine with firefox, chrome, safari, and opera. But IE is being a piece of shiezer.

    For some reason, my main body box isn't showing up, and I don't know why. It simply won't show.
    Any help at all appreciated, even if lathered with colourful criticisms and insults questioning all the why's.

    How it should look: i.imgur.com/ApJjfvV.png (sorry, no links for new users)
    How it does: i.imgur.com/n0EbuJg.png

    Here is my css page (luckily small, as I made a new sheet for the main body)

    Code:
    @charset "utf-8";
    
    #body {
    	position:absolute;
    	padding:0;
    	width: 1100px;
    	height:auto;
    	top: 109px;
    	background:#79AE6C;
    	margin:0 auto;
    	border: 1px solid #000;
    	min-height: calc(100% - 139px);
    }
    
    #container2 {
            min-height: calc(100% - 139px0
    	height:auto;
    	width: 1100px;
    	margin-right: auto;
    	margin-left: auto;
    	padding:0;
    }
    	
    	
    
    
    #navigationshadow {
    	top:0px;
    	width:100%;
    	background:#2C4628;
    	height:1px;
    }
    
    #navigationshadow2 {
    	top:1px;
    	width:100%;
    	background:#375F36;
    	height:1px;
    }
    	
    		
    #lefttrim {
    	top:2px;
    	width:2px;
    	height:100%;
    	float:left;
    	background:#588E48;
    	position:absolute;
    	
    }
    	
    #righttrim {
    	top:2px;
    	width:2px;
    	height:100%;
    	right: 0px;
    	background:#588E48;
    	position:absolute;
    }	
    
    
    
    
    #body #contest {
    	position:absolute;
    	background-color: #447641;
    	height: 300px;
    	width: 300px;
    	top: 10px;
    	right:10px;
    	-moz-border-radius: 15px;
        border-radius: 15px;
    }
    
    #contestheader {
    	top:0px;
    	width:100%;
    	height:25px;
    	background:#68AE66;
    	position:absolute;
    	-moz-border-top-left-radius: 15px;
    	-moz-border-top-right-radius: 15px;
        border-top-left-radius: 15px;
    	border-top-right-radius: 15px;
    }
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    710
    Rep Power
    441
    You've done the things most people do with their first site -- position everything absolutely and define every height and width.

    To be a successful web designer, you have to work with the flexibility of the medium. The web is meant to shrink to fit a phone, and stretch to fill a giant tv. By positioning things absolutely, you've put everything on their own layer, floating independently. They can't push something below them if they get too tall. With this approach, you'll have to write an entirely different stylesheet for every screen size you want to support.

    So what you do instead is allow things to push, pull, contract and expand naturally as much as possible. Instead of saying "make this 1000px wide", say "make it no bigger than 1000px wide", that way it can shrink if need be. Instead of saying "position this absolutely 100px from the right side of the screen", say "float this to the right and give it a right margin of 100px". That way it can slide above other content depending on the screen.

    I realize this doesn't exactly fix your IE issue, but it should give you an idea of where you'll want to head going forward. If you post a link to the page, we can help you more.

IMN logo majestic logo threadwatch logo seochat tools logo