fix CSS HTML built webpage to render in IE

titanium_geek · 01-30-2006, 02:45 AM

We all know that IE stands for idiot explorer.

I am the designer and part maintainer of http://www.bolivianscholarship.com and I have been hearing complaints that the menu at the side obscures some of the text. Apparently it is only a windows ie problem, but still, I need to fix it. Help, please? Oh yeah- here is the css file.

Code:

body {
  font-family: arial;
  color: #003366;
}

div.menu {
    background: #0066CC;
    align: left;
    width: 14.0em;
    height: *;
    position: absolute;
    
    top:0;

    padding-left:.5%;
    padding-right:.5-%;
    margin-left:1;
    margin-right:1;
  
  }
div.main {
    margin-left:14.2em;
    margin-right:5.2em;
    padding-left:2em;
    padding-right:1em;
  
}
  
  div.text {
    font-family: arial;
    margin-left:1em;
    padding-left:2em;
    text-align: justify;
    
  }
  div.noms {
    font-size: 80%;
  }
  
  h1 {
    color: #003366;
    font-family: arial;
  }
  h2 {
  }
  h3 {
  }
  h4 {
    font-style: italic;
  }
  
  ul {
    list-style-type: none;
  }
  
  a { 
    text-decoration: none;
  }
  a:link {
    color: #00CCFF;
  }
  a:visited {
    color: #999999;
  }
  a:hover {
    color: #003366;
  }
  
  a:border {
    color: #FFFFFF;
  }

thanks, I really appreciate the help.

ebonhand · 01-30-2006, 04:20 AM

If you insert "left: 0;" into div.menu, you'll find it should display correctly.
ie.

Code:

div.menu {
    background: #0066CC;
    align: left;
    width: 14.0em;
    height: *;
    position: absolute;
    
    top:0;
    left:0;

    padding-left:.5%;
    padding-right:.5-%;
    margin-left:1;
    margin-right:1;  
}

Happy to help,

- Ebonhand

zaert · 01-30-2006, 04:20 AM

quick fix:
class menu
position: relative;
float: left;

airswit · 01-30-2006, 11:15 AM

you may want to try and validate your CSS (things like align: don't exists, you want text-align there)
http://jigsaw.w3.org/css-validator/v...larship.com%2F

that is the results, and should help you out. you should also validate your html:
http://validator.w3.org/check?verbos...larship.com%2F
because that shows a few errors as well. fix these errors, and you will be in better shape in the long run

titanium_geek · 01-30-2006, 05:06 PM

thankyou all, and especially to airswit, thanks for the css checker link.

Excellent.

titanium_geek

graemef · 01-30-2006, 05:33 PM

If you use Firefox then you might want to try installing the fireBug extension. It records the number of errors there are in the HTML page. The errors are broken down into JavaScript, CSS & XML.