Ok, so yesterday I made this css:
* { font-size: 11.7px; } marquee { width: 430px; color: FFF; direction: left; behavior: scroll; speed: 2; margin-left: 6.6em; font-size: 10.5px; } A:toptext { font-size: 11.7px; } A:topbar { font-size: 11.7px; } .topbar { background-image: url(menu%20bg.png); background-repead: no-repeat; margin-left:10.8em; color: FFF; width: 643px; height: 14px; text-align: left; font-size: 11.7px; } .toptext { margin-left:0.6em; font-size: 11.7px; } A { color: FFF; text-decoration: none; } .sideMenu{ color: FFF; align:center; float:left; margin-left: 10.8em; } .content{ float:left; margin-left: 0.5em; } il { border: 1px solid #000; background-color:026AC2; margin: 4.5px; margin-left: 9.3px; padding: 1.7px; display: block; float: center; text-align: center; font-size: 11.7px; } il:hover { background-color:087FE4; } .menuHead { border: none; color: FFF; background-color: transparent; margin: 4.5px; margin-left: 9.3; padding: 1.7px; display: block; } .main{ background-color: transparent; padding: 3.2px; padding-top: 1px; margin: 5px; padding-bottom: 22px; padding-right: 9.6px; text-align: center; background-image: url(menubg2.png); background-repeat: no-repeat; }
And now when I run it in IE, it looks terrible.
Here is it in FF:

And here is IE 7(the same thing happens in ie 6 too):
As you can see, the menu's margin is messed up and everything is smaller :\. Also the colors on the side menu are messed up :\.
If you need the url for reference here it is: http://zlools.789mb.com
I know this is a common problem, but I have NO IDEA how to fix it. .
NOTE: I know this isn't the layout isn't a masterpiece.
IE is in quirks mode, get a
IE is in quirks mode, get a valid doctype
and validate your code
Deuce wrote:IE is in quirks
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:
element "IL" undefined.
I defined it though >_<.
Is this a result of not defining my doctype?
what is an <il> tag? I've
what is an <il> tag? I've never heard of it.
Maybe you are looking for a <li> tag?
Deuce wrote:what is an <il>
what is an <il> tag? I've never heard of it.
Maybe you are looking for a <li> tag?
:bigoops:
Ahhhhhhahah
Yea, good call.
sonicsshadow wrote:Deuce
Deuce wrote: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
just went to your site and i still don't see the doctype.
Oh sorry, I was doing all
: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 .
Deuce wrote:you need to
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
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.
Deuce wrote:We take this
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.
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
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.
- Homepage
- Videos
- Youtube
- Projects
- Other
Welcome!
This is a test paragraph that has been copied and pasted several times.
This is a test paragraph that has been copied and pasted several times.
This is a test paragraph that has been copied and pasted several times.
This is a test paragraph that has been copied and pasted several times.
Let us know when you've got that uploaded
Ok, I'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
You shouldn't need any more divs
Can you post a link to the testing page?
thepineapplehead wrote:You
You shouldn't need any more divs
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.
Ouch! My beautiful code!
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
thepineapplehead
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
:scared:
Ok, I changed it to the code you've posted .
Edit:
Errr...why did it double post :\
thepineapplehead
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
:scared:
Ok, I changed it to the code you've posted .
A couple of reasons... 1.
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...
Old code?
Would it be possible for you to upload the old one?
You could just upload it to a new folder called "old"
thepineapplehead wrote:Would
Would it be possible for you to upload the old one?
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
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
thepineapplehead wrote:No,
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
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
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.
sonicsshadow
text-indent: -9999em; - What exactly does that do? Why exactly did you use it?
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.
margin: 0 auto; - What does the auto do?
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.
clear: left; - What does that do exactly?
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
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?
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.
Code
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
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?
Have you got it online?
Yea but I think I figured it
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
Well, a doctype wouldn't hurt
thepineapplehead wrote:Well,
Well, a doctype wouldn't hurt
Err yea, but I meant the css.
Seems okay to me but the
Seems okay to me but the HTML is malformed.
I'd use:
ZloolS Homepage.

Error: Under Construction.
This page is currently under construction. You can view the test page here, however it's very unfinished.
Feel free to check back here, there will soon be many changes.
thepineapplehead wrote:Seems
Seems okay to me but the HTML is malformed.
I'd use:
ZloolS Homepage.

Error: Under Construction.
This page is currently under construction. You can view the test page here, however it's very unfinished.
Feel free to check back here, there will soon be many changes.
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
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 bits are broke, and which version of IE?
IE 7. And umm, the side menu
IE 7.
And umm, the side menu and the body (#content) isn't aligned properly.