IE messing up several elements

IE is in quirks mode, get a valid doctype
and validate your code

Wow thanks, that site helped.
However, why do I keep getting errors like:

I defined it though >_<.
Is this a result of not defining my doctype?

what is an <il> tag? I've never heard of it.
Maybe you are looking for a <li> tag?

:bigoops:
Ahhhhhhahah
Yea, good call.

Well I added this:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
<>'s removed*
like w3 said, however all it did was basically undo my css and made it almost non existant.
However, without that code in there, I'm still having a problem with:
.side:hover {
background-color:087FE4;
}
It doesn't apply in IE, it doesn't have any effect. Anyone know why that is?

just went to your site and i still don't see the doctype.

:ohdear:
Oh sorry, I was doing all of this on localhost. Usually when I ask for help on some forums, people don't both to actually look at the site.
There I reuploaded it .

you need to learn to validate more often

Err, not to sound like a complete leecher, but honestly I have no idea.
How exactly do I determine the doctype?

Well while reading that other page after typing that, I think I figured it out.
In order for this to work, I have to make it work with some sort of doctype.
As long as it's syntax is ok, I can use that doctype.
Correct me if I'm wrong, I'm just assuming.

So if I fix all of the errors, will my css start working again :S?

EDIT:
Hmm...
It's valid, however, it still doesn't show the css.. .
I fixed the CSS, but now it still doesn't look correct in IE...

We take this step by step.
First, we start with valid HTML.
Now you need valid CSS

Once we get these issues solved we can work on making sure it works/acts/functions/looks the way you want it to.

We have to get the basics done before we can get to the fun stuff.

Once we get these issues solved we can work on making sure it works/acts/functions/looks the way you want it to.

We have to get the basics done before we can get to the fun stuff.
Heh yea, that makes sense. I'm surprised there weren't more errors in the css.

Ok, now that's valid.
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fzlools.789mb.com%2F#errors

So what next :S?

If I may, I'd like to suggest you restructure your HTML, it's a lot more complex than it needs to be.

Make a copy of that page, something like "test.html" and use this code instead:

~ZloolS~ Homepage.

Menu:

Homepage

Videos

Youtube

Projects

Other

Let us know when you've got that uploaded

Ok, I've got that uploaded.
I've started to mess around with the css and stuff.
Please let me know if I've done anything that would make it go overboard.
I've added a few extra divs because I had to get it to format correctly.
:thumbsup:

You shouldn't need any more divs

Can you post a link to the testing page?

Can you post a link to the testing page?
I set it as the index.
http://zlools.789mb.com
the old one is:
http://zlools.789mb.com/messy.php
but that one won't work because I deleted all of the files that were included because it made the filemanager hard to navigate.

Ooooooooh no no no no no

go back to what I gave you in my original post and upload that code. You've added too many divs, too many classes, too many inline images, all of which are completely unnecessary and merely serve to clutter up the HTML.

Go back to my code, once it's uploaded I will explain how to use CSS to make it look like it should. You don't need to touch the HTML at all

go back to what I gave you in my original post and upload that code. You've added too many divs, too many classes, too many inline images, all of which are completely unnecessary and merely serve to clutter up the HTML.

Go back to my code, once it's uploaded I will explain how to use CSS to make it look like it should. You don't need to touch the HTML at all
:scared:
Ok, I changed it to the code you've posted .

Edit:
Errr...why did it double post :\

go back to what I gave you in my original post and upload that code. You've added too many divs, too many classes, too many inline images, all of which are completely unnecessary and merely serve to clutter up the HTML.

Go back to my code, once it's uploaded I will explain how to use CSS to make it look like it should. You don't need to touch the HTML at all
:scared:
Ok, I changed it to the code you've posted .

A couple of reasons...

1. You clicked on the post button twice. OR
2. You submitted, stopped the page by pressing the browser stop button and again reposted. It's ok, the mod's will look after that...

mihir
PS: happens to me a lot of times...

Would it be possible for you to upload the old one?

You could just upload it to a new folder called "old"

You could just upload it to a new folder called "old"
Which old one?
The VERY first one was:
zlools.789mb.com/messy.php
But it doesn't work, I can of course upload the old files to make it work, if that's what you mean.

The one after that was:
zlools.789mb.com/index2.html

No, the very first one, if you could upload the files to make it work so we've got a live version of how you want it to look

Ok .
http://zlools.789mb.com/messyindex.php

Okeydoke, use this CSS for your new page, see how it looks:

* {font-size: 12px;}

body {
background-color: #0163B6;
text-align: center;
}

h1 {
width: 643px;
height: 94px;
background: url(http://zlools.789mb.com/top.png) no-repeat;
text-indent: -9999em;
margin: 0 auto;
}

h2 {
margin: 0;
font-size: 14px;
text-align: center;
color:#FFF;
background-color: #0084F4;
border-bottom: 1px solid #000;
}

#topmast ul {
background: url(menubg.png) no-repeat;
color: #FFF;
width: 643px;
height: 14px;
text-align: left;
font-size: 11.7px;
margin: 0 auto;
padding: 0;
}

#topmast li { padding: 0; margin: 0; list-style: none; margin-left: 0.6em;}

#topmast li a {float: left;}

dl#menu {
clear: left;
float: left;
background: url(menubg2.png) no-repeat;
width: 82px;
height: 210px;
padding: 0;
margin: 0;
}

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

dt {
color: #FFF;
margin: 5px;
}

dl a {
border: 1px solid #000;
background-color:#026AC2;
margin: 4.5px;
padding: 1.7px;
display: block;
text-align: center;
font-size: 11.7px;
}

dl a:hover {background-color:#087FE4;}

#content{
float:left;
width: 540px;
background-color: #2499FD;
border: 1px solid #000;
}

Ok, here is the file with all of that:
http://zlools.789mb.com/indextest.html

There are some outstanding minor manors like the menu isn't indented, the content area isn't spaced over like it should be, but I don't think that was in the file I showed you, so that's my fault, not yours.

So anyways, I have a few questions.
I understand how the code works, but I don't understand some of the elements.
Could you possibly explain them to me:
text-indent: -9999em; - What exactly does that do? Why exactly did you use it?
margin: 0 auto; - What does the auto do?
clear: left; - What does that do exactly?

Also, I never really understood what #'s did, and why you would use them over a . . I know you use them for like templates, but what do they do? Are they like constants that are never changed?

Thanks for all of your help by the way. It really means a lot.

h1 is a block element, the negative text-indent pushes the text from that block over to the left 9999em. This makes it so screen readers still see the text from the h1, but you see the background image that is placed on the block.

This allows a block element with a fixed width to have a 0 margin on the top and the bottom and it sets an auto margin on the left and right, which makes it center.

You have to clear your floats if you don't want something to sit next to it.
You can do clear: left which clears float: left
clear: right, clears float: right
or clear: both which clears either float: left or float: right

a # represents an ID in your html and a . represents a class in your html

You can use an ID only once per html page, but you can use a class multiple times.3

then in your css you would have

#home { background-color: #000; } .link { text-decoration: none; }

Hope that helps.

Add these bits:

body {
background-color: #0163B6;
text-align: center;
width: 650px;
margin: auto;
}

dl#menu {
clear: left;
float: left;
background: url(/images/menubg2.png) no-repeat;
width: 82px;
height: 210px;
padding: 0;
margin: 0;
margin-left: 1em;
}

that gets it closer.

Next to do is for you to have a go styling the top menu bar to look like your original design

I've run into a problem:

P {float: left;}
Body { 	background-color: #0163B6;}
A { color:#000000;}
#content {
	background-color: #FFFF99;
	border: 2px dashed #000;
	padding: 0px;
	margin: 0px;
	float: left;
	clear:left;
	color: #000000;
}
H2 {
  float:left;
  clear:left;
  margin: 0px;
  padding: 0px;
}

ZloolS Homepage.



<div id="content">
<p><img src="!.gif" alt=""><h2>Error: Under Construction.</h2></p>
<p>This page is currently under construction. You can view the 
test page <a href="/indextest.html" rel="nofollow">here</a>, however it's very unfinished.<br> Feel free
to check back here, there will soon be many changes.<br>
<a href="http://www.youtube.com/zlools" rel="nofollow">http://www.youtube.com/zlools</a></p>
</div>

I'm trying to make it show the image and the "Error: Under Construction" on the same line, but it keeps putting it below it. What's the deal?

Have you got it online?

Yea but I think I figured it out:
http://zlools.789mb.com/

Is that an ok way to do it or an I doing it wrong still?

Well, a doctype wouldn't hurt

Err yea, but I meant the css.

Seems okay to me but the HTML is malformed.

I'd use:

ZloolS Homepage.

I'd use:

ZloolS Homepage.

Hahaha man thanks. I'm so inconsistent. Ok, now I'll start working on what you said above and try to fix the top menu .

Well here is another problem.
I wanted to make it look better, so I added a few changes:
http://zlools.789mb.com/indextest.html
(hahha I spelled "basically" wrong :bigoops: )
but now it looks terrible in IE.
Everything looks ok, but there are extra line breaks and stuff, what's up with that?

I don't want you to fix it for me, I just want a push in the right direction, I just don't understand why it does that.

Which bits are broke, and which version of IE?

IE 7.
And umm, the side menu and the body (#content) isn't aligned properly.