Troubles with IE

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
onnet5
Forum Newbie
Posts: 2
Joined: Wed Dec 16, 2009 10:47 am

Troubles with IE

Post by onnet5 »

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:

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;
}
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.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Troubles with IE

Post by daedalus__ »

http://www.youtube.com/watch?v=kHM-gj8kjh4

it doesn't look the same in opera and firefox which is usually a bad sign.

no

Code: Select all

 
<?xml version="1.0" encoding="iso-8859-1"?>
<link rel="stylesheet" type="text/css" href="form.css"/>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
no

Code: Select all

 
*{ margin:0; padding:0; }
 
no

Code: Select all

 
#content-wrapper
{
    width: 100%;
    padding-left: 25%;
}
 
#content
{
    height: 100%;
    width: 50%;
}
 
i could go on.

use margins.

what are you trying to accomplish? a layout with a toolbar, a huge header, and centered content?

okay take your content div, set it's width. then set its margins to auto and it will center itself. neat.

also the comments make the css hard to read. css is simple, straight foward (for the most part) and you won't need comments for long. having them there is just more stuff you don't have to remember.
onnet5
Forum Newbie
Posts: 2
Joined: Wed Dec 16, 2009 10:47 am

Re: Troubles with IE

Post by onnet5 »

Thanks for the reply, like I said the comments are only there because this is for coursework, and it's all gotta be explained to examiners/teachers.

I'll try what you've suggested.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Troubles with IE

Post by daedalus__ »

your teachers dont understand css? :roll:
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Troubles with IE

Post by kaszu »

I guess he needs to prove to teachers he knows CSS
aravona
Forum Contributor
Posts: 347
Joined: Sat Jun 13, 2009 3:59 pm
Location: England

Re: Troubles with IE

Post by aravona »

daedalus__ wrote:your teachers dont understand css? :roll:
It is a VERY common thing for students to have to fully comment their work in all programming languages. It is to prove to the teacher that you wrote the code, or at least understand it 100% if you worked in a group etc. Its a measure to help prevent plagiarism amongst students. All English universities do this, as far as I know all US ones too. Its exactly the same as referencing in English degrees.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Troubles with IE

Post by daedalus__ »

(it was a joke guys)
aravona
Forum Contributor
Posts: 347
Joined: Sat Jun 13, 2009 3:59 pm
Location: England

Re: Troubles with IE

Post by aravona »

I just viewed the site again in IE and it looks a lot better now, I guess whatever fix he used worked. I'd quite like to know it since I have to use IE and FF to create websites ^_^
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Troubles with IE

Post by daedalus__ »

Code: Select all

 
#content-wrapper{
        margin: auto;
        text-align: center;
}
 
#content{
    width: 700px;
    margin: auto;
}
 
Post Reply