Troubles with IE
Posted: Wed Dec 16, 2009 10:55 am
This is probably the gazillionth post you've had on rendering issues with CSS in IE, but I've looked around numerous websites for workarounds and none seem to work. I'm currently coding some coursework for my A levels and although having the site work in IE is not a must, it just bugs me and I really want to get it working in both FF and IE. The work I have done so far is at http://j.n00d.net and as you can see in IE it renders completely hopelessly. If you view it in FF that is how I intend the site to look. My CSS code is as follows:
The comments in the code are just for my coursework 
If anyone has any advice on how to get this to render properly in IE this would be fantastic, I've tried adjusting the widths to comply with how IE deals with it, and tried using display: inline and none seem to have any effect.
Code: Select all
/* Firstly, I declare that by default, nothing should have any padding or margin unless specified */
*{ margin:0; padding:0; }
/* Setting it so that when links are clicked, hovered over etc they don't produce a
dotted grey line (Just a personal preference) */
a:focus, a:hover, a:active { outline:none }
/* Setting ID links-header, this is the bar that the links
will be sitting on */
#links-header
{
height: 30px;
background-color: #000000;
}
/* The header-login is the quick login section to the top right of the header.
Here I am specifying its font colour, size and the height and position of the
form. */
.header-login
{
color: white;
font-size: 0.7em;
font-weight: bold;
height: 30px;
padding-top: 3px;
padding-right: 15%;
}
/* This specifies that anything written in <p> tags should have an extra 7 pixels of padding
from the top. */
.header-login p
{
padding-top: 7px;
}
/* This wraps the links within the links header */
#links-wrapper
{
padding-left: 25%;
height: 30px;
}
/* Here the details of the links themselves are specified.
display: block turns the link into a block of 60px x 30px
as opposed to it just being the text itself */
.links
{
font-weight: bold;
font-size: 0.6em;
float: left;
text-transform: uppercase;
margin-right: 2px;
display: block;
width: 60px;
height: 30px;
}
/* These details are used for whenever a link is used within the .links div */
.links A
{
text-align: center;
padding-top: 9px;
display: block;
height: 30px;
color: #FFFFFF;
text-decoration: none;
}
/* When the link is hovered over with the mouse, these settings take effect */
.links A:hover
{
height: 21px;
background-color:#86bf0e;
}
/* This header contains the company logo banner */
#header
{
height: 150px;
background-color: #86bf0e;
border-bottom: 1px solid #000000;
}
#logo
{
padding-left: 25%;
padding-top: 50px;
width: 200px;
height: 50px;
}
/* Here the registration form is kept, centred in the screen */
#register-wrapper
{
padding: 7 7 7 7;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 300px;
background-color: #86bf0e;
border: 1px solid #000000;
}
#content-wrapper
{
width: 100%;
padding-left: 25%;
}
#content
{
height: 100%;
width: 50%;
background-color: grey;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}
/* This class is used to float the labels of each input box to the left of the wrapper */
.floatleft
{
float:left;
}
/* Whereas the input fields are floated to the right */
.floatright
{
float:right;
}
/* After using the floats, they must be cleared so they don't effect other sections */
.clearer
{
clear: both;
}If anyone has any advice on how to get this to render properly in IE this would be fantastic, I've tried adjusting the widths to comply with how IE deals with it, and tried using display: inline and none seem to have any effect.