37 replies [Last post]
sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

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. Sad.

NOTE: I know this isn't the layout isn't a masterpiece.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 3 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

IE is in quirks mode, get a

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

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

Deuce wrote:IE is in quirks

Deuce wrote:
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:
Quote:
element "IL" undefined.

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

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 3 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

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?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

Deuce wrote:what is an <il>

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.

sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

sonicsshadow wrote:Deuce

sonicsshadow wrote:
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?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 3 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

just went to your site and i

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

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

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 Smile.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 3 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

you need to learn to

you need to learn to validate more often Wink

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

Deuce wrote:you need to

Deuce wrote:
you need to learn to validate more often Wink

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.. Sad.
I fixed the CSS, but now it still doesn't look correct in IE...

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 3 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

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.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

Deuce wrote:We take this

Deuce wrote:
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?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

ZloolS
  • 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 Wink

Verschwindende wrote:
  • CSS doesn't make pies

sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

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:

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

You shouldn't need any more

You shouldn't need any more divs Wink

Can you post a link to the testing page?

Verschwindende wrote:
  • CSS doesn't make pies

sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

thepineapplehead wrote:You

thepineapplehead wrote:
You shouldn't need any more divs Wink

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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 Wink

Verschwindende wrote:
  • CSS doesn't make pies

sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

thepineapplehead

thepineapplehead wrote:
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 Wink
:scared:
Ok, I changed it to the code you've posted Wink.

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

sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

thepineapplehead

thepineapplehead wrote:
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 Wink
:scared:
Ok, I changed it to the code you've posted Wink.

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 4 days ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

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 Smile
PS: happens to me a lot of times...

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Old code?

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

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

Verschwindende wrote:
  • CSS doesn't make pies

sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

thepineapplehead wrote:Would

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

You could just upload it to a new folder called "old" Wink
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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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 Wink

Verschwindende wrote:
  • CSS doesn't make pies

sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

thepineapplehead wrote:No,

thepineapplehead wrote:
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 Wink

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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;
}

Verschwindende wrote:
  • CSS doesn't make pies

sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

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.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 3 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

sonicsshadow

sonicsshadow wrote:

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.

sonicsshadow wrote:

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.

sonicsshadow wrote:

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

sonicsshadow wrote:

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.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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 Wink

Verschwindende wrote:
  • CSS doesn't make pies

sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

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?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Have you got it online?

Have you got it online?

Verschwindende wrote:
  • CSS doesn't make pies

sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

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?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Well, a doctype wouldn't

Well, a doctype wouldn't hurt Wink

Verschwindende wrote:
  • CSS doesn't make pies

sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

thepineapplehead wrote:Well,

thepineapplehead wrote:
Well, a doctype wouldn't hurt Wink

Err yea, but I meant the css.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

http://www.youtube.com/zlools

Verschwindende wrote:
  • CSS doesn't make pies

sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

thepineapplehead wrote:Seems

thepineapplehead wrote:
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.

http://www.youtube.com/zlools

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 Wink.

sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Which bits are broke, and

Which bits are broke, and which version of IE?

Verschwindende wrote:
  • CSS doesn't make pies

sonicsshadow
Offline
Regular
Last seen: 12 years 40 weeks ago
Joined: 2007-10-12
Posts: 20
Points: 0

IE 7. And umm, the side menu

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