www.webdeveloper.com
Results 1 to 2 of 2

Thread: Div problem on IE

  1. #1
    Join Date
    Aug 2008
    Posts
    1

    Div problem on IE

    i have the css validated and it's fine on all other browsers but looks like crap on IE. help please? it needs to work on IE 5+ (don't mind img transparencies and stuff for now)

    for reference: http://caction.somee.com

    css:
    Code:
    *
    {
    padding: 0em;
    margin: 0em;
    }
    
    body
    {
    background: #CCCBB8;
    padding: 0px 0px 35px 0px;
    }
    
    body,input
    {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 12px;
    color: #666666;
    }
    
    p
    {
    line-height: 1.5em;
    margin-bottom: 1.0em;
    text-align: justify;
    }
    
    a
    {
    color: #FF0077;
    text-decoration: none;
    }
    
    a:hover
    {
    text-decoration: underline;
    color: #262626;
    }
    
    
    h3 span
    {
    font-weight: normal;
    }
    
    h3,h4
    {
    display: inline;
    font-weight: bold;
    }
    
    h3
    {
    font-size: 1.7em;
    padding-right: 34px;
    color: #8EB936;
    }
    
    h4
    {
    font-size: 1.2em;
    padding-right: 28px;
    text-transform: uppercase;
    }
    
    input.text
    {
    margin-right: 0.5em;
    vertical-align: middle;
    border: 1px solid #262626;
    padding: 0.15em;
    width: 10.0em;
    }
    
    input.submit
    {
    background: #FFCF01;
    border: solid 1px #FFCF01;
    font-weight: bold;
    padding: 0.25em;
    font-size: 0.8em;
    color: #262626;
    vertical-align: middle;
    }
    
    .contentarea
    {
    padding-top: 1.3em;
    }
    
    img.top
    {
    border: 0px;
    }
    
    img.left
    {
    position: relative;
    float: left;
    margin: 0em 1.8em 1.4em 0em;
    border: 1px solid #262626;
    }
    
    img.right
    {
    position: relative;
    float: right;
    margin: 0em 0em 1.8em 1.8em;
    border: 1px solid #262626;
    }
    
    .post .details
    {
    position: relative;
    font-size: 0.8em;
    color: #787878;
    }
    
    ul.linklist
    {
    list-style: none;
    }
    
    ul.linklist li
    {
    line-height: 1.5em;
    }
    
    #outer
    {
    z-index: 2;
    position: relative;
    width: 760px;
    border-left: solid 7px #fff;
    border-right: solid 7px #fff;
    border-bottom: solid 7px #fff;
    background-color: #f3f3f3;
    margin: 0 auto;
    }
    
    #header
    {
    position: relative;
    width: 100%;
    height: 9.0em;
    background: #262626 url('headerbg.png') repeat-x;
    margin-bottom: 2px;
    }
    
    #headercontent
    {
    position: absolute;
    bottom: 0em;
    padding: 0em 2.0em 1.3em 2.0em;
    }
    
    #headerpic
    {
    position: relative;
    height: 300px;
    background: #fff url('headerbg.jpg') no-repeat top left;
    margin-bottom: 0px;
    }
    
    #menu
    {
    position: relative;
    background: #BCCD2F url('menubg.png') repeat-x top left;
    height: 40px;
    padding: 0px 10px 0px 10px;
    border-bottom: solid 10px #CCCBB8;
    margin-bottom: 0px;
    }
    
    #menu ul
    {
    position: absolute;
    top: 1.1em;
    }
    
    #menu ul li
    {
    position: relative;
    display: inline;
    }
    
    #menu ul li a
    {
    padding: 0.5em 1.0em 0.9em 1.0em;
    color: #fff;
    text-decoration: none;
    }
    
    #menu ul li a:hover
    {
    text-decoration: underline;
    }
    
    #menu ul li a.active
    {
    background: #7F8400 url('menuhighlight.png') repeat-x top left;
    }
    
    #content
    {
    padding: 0em 2.0em 0em 2.0em;
    }
    
    #primarycontainer
    {
    float: left;
    margin-right: -18.0em;
    width: 100%;
    }
    
    #primarycontent
    {
    margin: 1.5em 15.5em 0em 0em;
    }
    
    #secondarycontent
    {
    margin-top: 2em;
    margin-bottom: 2em;
    padding:.5em;
    float: right;
    width: 12.5em;
    background: #ffffff;
    border-top: solid 10px #CCCBB8;
    border-bottom: solid 10px #CCCBB8;
    }
    
    #secondarycontent ul li a
    {
    padding: 0.5em 1.0em 0.9em 1.0em;
    color: #ff0077;
    text-decoration: none;
    text-transform: uppercase;
    }
    
    #secondarycontent ul li a:hover
    {
    text-decoration: underline;
    color: #262626;
    }
    
    #footer
    {
    position: relative;
    height: 2.0em;
    clear: both;
    padding-top: 2.0em;
    background: #262626;
    font-size: 0.8em;
    }
    
    #footer .right
    {
    position: absolute;
    right: 2.0em;
    bottom: 1.2em;
    }
    html:
    Code:
    <html>
    <head>
    <title>Caction International</title>
    <link rel="stylesheet" type="text/css" href="default.css" />
    </head>
    <body>
    <div id="outer">
    <div id="header">
    <div id="headercontent">
    <a href="index.html"><img src="logo.png" border="0"></a>
    </div>
    </div>
    
    <div id="headerpic"></div>
    
    	
    <div id="menu">
    	<ul>
    	<li><a href="#" class="active">Home</a></li>
    	<li><a href="#">About</a></li>
    	<li><a href="#">Take Action</a></li>
    	<li><a href="#">Facts</a></li>
    	<li><a href="#">Donate</a></li>
    	<li><a href="#">Media</a></li>
    	<li><a href="#">Contact Us</a></li>
    	</ul>
    </div>
    <div id="content">
    <div id="primarycontainer">
    	<div id="primarycontent">
    	<h3>Welcome to Caction International</h3>
    	<div class="contentarea">
    	<p align="justify">Here at Caction International, our purpose is to provide a sustainable method of obtaining clean water in lesser developed countries (LDCs), specifically Ethiopia. We believe that in order for LDCs to compete in the global information economy, it is necessary that the basic human needs— water, shelter, food, and education—are met and exceeded.  Without clean drinking water, these nations will not be able to reach their full level of productivity.  As such, an increased level of diversity that can only come from fair competition between different nations will not be able to benefit our lives.  It is therefore vital that access to clean water is possible in every nation; we take pride in helping this become a reality. </p>	
    	</div>
    	</div>
    </div>
    
    <div id="secondarycontent">		
    	<h4><a href="#">About</a></h4>
    	<ul class="linklist">
    	<li><a href="#">Our Mission</a></li>
    	<li><a href="#">Contact Us</a></li>
    	</ul><br>
    	<h4><a href="#">Take Action</a></h4>
    	<ul class="linklist">
    	<li><a href="#">Volunteer</a></li>
    	<li><a href="#">Events and Activities</a></li>
    	</ul><br>
    	<h4><a href="#">Facts</a></h4>
    	<ul class="linklist">
    	<li><a href="#">Ethiopia</a></li>
    	<li><a href="#">Water</a></li>
    	</ul><br>
    	<h4><a href="#">Donate</a></h4>
    	<br><br>
    	<h4><a href="#">Media</a></h4>
    	<ul class="linklist">
    	<li><a href="#">News</a></li>
    	<li><a href="#">Downloads</a></li>
    	</ul><br>
    </div>
    </div>
    
    <div id="footer">
    <div class="right">Caction International 2008 </div>
    </div>	
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    You have no doctype on the page, so all versions of IE will be in "quirks" mode, with no hope of remotely adhering to ANY standards. A doctype should be the FIRST thing written on the page, and then the page written to comply with the standards of whatever html version you have chosen. By the look of it, html 4.01 strict should be appropriate.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles