15 replies [Last post]
lordbelerial
Offline
newbie
Last seen: 13 years 6 weeks ago
Joined: 2009-06-23
Posts: 7
Points: 0

Hi all, I am rather new to CSS, and am trying to create a site utilizing it.

http://www.noguff.net/testsite/test2/index.html

That is what I have so far, and as the title says, it works perfect in chrome, decent in firefox, and is terrible in IE. The menu floats in IE, there are magical borders around the pictures on the right, and the color on it seems off for some reason. In firefox the menu seems stationary, but there is still an odd border around the pictures on the right. And I think in IE, the graphic arrow on the menu is completely the wrong size. So any help at all would be very very appreciated. Thanks

Stein

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 24 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Well, you don't have even a

Well, you don't have even a doctype declaration, so of course all the browsers will display differently since they assume your page was writted for the 1990's and not with standards in mind.

Furthermore your html is replete with errors. CSS works with valid html, and without it anything can happen.

If you want a browser to display according to the standards then you must supply them with code that itself follows the standard.

Since you haven't done that you really shouldn't be surprised that things are a mess. Read our help forum and give your code a proper document type declaration at the top of the page. Then fix the code errors.

That by itself might not fix your particular problem, but it will at least give a basis for a solution. As it is there is really no way to be sure what's wrong.

Analogically, you've built a house with no foundation and are now surprised that the first big wind blew it down! Or you are trying to remove a single slot screw with a Robertson screwdriver.

Standards, to work, have to be applied at both ends.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

lordbelerial
Offline
newbie
Last seen: 13 years 6 weeks ago
Joined: 2009-06-23
Posts: 7
Points: 0

well as I said, I'm fairly

well as I said, I'm fairly new at this, I haven't touched most of this stuff in over a decade. So I am curious, not to point out every error I have, but what are some of the issues that I have in the html? Examples that I don't see so I have a better idea of what I am looking for.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 47 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

your validation

lordbelerial
Offline
newbie
Last seen: 13 years 6 weeks ago
Joined: 2009-06-23
Posts: 7
Points: 0

I was looking at that and

I was looking at that and some of the errors don't make any sense to me. Why is it saying it doesn't allow ? Or height not being a valid atribute and then replacing it with height.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 47 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

alot of times, one error

alot of times, one error will cause others to occur. Fixing on error, could correct others. Start with doctype. fix what you can or understand, then post a new link, or say the old link is updated with corrections so we can see.

lordbelerial
Offline
newbie
Last seen: 13 years 6 weeks ago
Joined: 2009-06-23
Posts: 7
Points: 0

Okay, thanks a lot so far,

Okay, thanks a lot so far, doctype declaration and such definitely did help, and I've cleaned it up as much as I think that I can. If you relook at the link now, and validate it, there are a few things I'm not getting. In regards to the site itself, everything is looking like it's working, except that it is no longer in the center of the page, and the background is cutting off for some reason. And in regards to validation, there are now only 5, but I don't follow. It's saying something about not allowing head, height, background, or valign? But it does seem to now be working at least in all browsers.

http://www.noguff.net/testsite/test2/index.html

updated link

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 47 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

I'm afraid we need to come

I'm afraid we need to come at this layout from a different angle. Looking at the code deeper, I notice you are using a table-based layout.

1. These days, people are not using tables in this manner. Use CSS to layout the design by styling the XHTML tags.

2. Also, it's important to understand the differences between all the kinds of DOCTYPES, most will say to use STRICT for this site.

3. Javascript use in this site, can be done with css. No need to use Javascript for this purpose anymore.

I recommend going out there and learn how to write proper semantic XHTML, then learn how to style it using CSS. I learn with books, most others will say to use help sites like www.htmldog.com

lordbelerial
Offline
newbie
Last seen: 13 years 6 weeks ago
Joined: 2009-06-23
Posts: 7
Points: 0

just fixed the centering

just fixed the centering issue and background issue

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 24 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

lordbelerial wrote:Okay,

lordbelerial wrote:

Okay, thanks a lot so far, doctype declaration and such definitely did help, and I've cleaned it up as much as I think that I can.

First remove this:
<?xml version="1.0" encoding="utf-8"?>

... as IE6 can't handle it and remains in quirks mode. Also the DTD must be on the first line of the file or IE6 can't understand it.

Seccond, use a proper STRICT doctype, not a transitional one.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

lordbelerial
Offline
newbie
Last seen: 13 years 6 weeks ago
Joined: 2009-06-23
Posts: 7
Points: 0

I'm curious, what us the

I'm curious, what us the difference between a strict doctype and the transitional? Because when I make the doctype strict, it messed up, but transitional it does not.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 47 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

why dont you google it? Find

why dont you google it? Find the answers. in a nutshell, STRICT does not allow presentational or deprecated elements, while transitional does.
read this
and this
and this
and this

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 24 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

lordbelerial wrote:I'm

lordbelerial wrote:

I'm curious, what us the difference between a strict doctype and the transitional? Because when I make the doctype strict, it messed up, but transitional it does not.

Well one advantage is that there is less to learn with a strict doctype since you can forget all the old non standard deprecated tags. On the KISS principal alone a strict doctype is superior.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

lordbelerial
Offline
newbie
Last seen: 13 years 6 weeks ago
Joined: 2009-06-23
Posts: 7
Points: 0

I gather it works right now

I gather it works right now because I am still using some deprecated elements, but strict would remove use of all of them, hence it not showing up correctly?

L0LKTHXBYE
L0LKTHXBYE's picture
Offline
Enthusiast
Nederland
Last seen: 12 years 50 weeks ago
Nederland
Timezone: GMT+2
Joined: 2009-06-11
Posts: 98
Points: 0

Hmmm, not exactly. Here's

Hmmm, not exactly. Here's the thing: when you declare a doctype, you're
a. telling browsers that your page was written AFTER the Berlin wall fell and not before : )
b. telling the validator which rules you've chosen to write by

The browsers don't look at anything more than, is there a doctype, and is it complete (that second line in the doctype, with the url, is called a referrer, and while browsers will use its absence as an excuse to go into Quirks Mode, they don't actually bother to read it). Further, nothing more.

So let's say I can haz a site that's HTML4.01 Strict, and then I go ahead and use a tag.

The browsers, ALL of them currently, will honour that font tag. They know what it is, what it does, and what it's for. The validator will looks at the rules you claim to be writing from, and say "Hey, the rulebook you're using says Font is illegal. Error!". The browsers won't say a thing. Your mother used to tell you, "Dont' say 'ain't'." But everyone who spreaks Engrish understrands "Ain't" just fine. We're telling you not to build your page out of tables or use deprecated elements. The browsers understand yer Engrish just fine though.

...although I've heard doesn't work in Google Chrome.

HTML seems so simple, doesn't it? I mean, most of us use like 10 different tags at the most. How hard can it be? But actually there are rules upon rule upon rules... and so breaking any one of them can cause your page to look screwy, and the rest is "valid spaghetti". Meaning, you can satisfy the validator by being grammatically correct, but your Engrish shtill bee wery shtrange. Kinda like you can run bad spelling through a spell-checker and still have stuff misspelled, bee cos yew used valid spellings?

So sometimes you get an error, and not knowing what other people do, you try different tags until the validator shuts up. But that doesn't mean you picked the right tag. So a browser might still give you a bit of hell over it.

L0LKTHXBYE
L0LKTHXBYE's picture
Offline
Enthusiast
Nederland
Last seen: 12 years 50 weeks ago
Nederland
Timezone: GMT+2
Joined: 2009-06-11
Posts: 98
Points: 0

So example one (you still

So example one (you still didn't lose that silly prologue... it's only required for real XHTML or XML pages. You're sending that page as text/html, so it's HTML):

<html>
 
 
 
<title>C2 Technologies, Inc.</title>
 
 
<head>
 
<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css">
 
<style type="text/css">

Here, you've opened the tag, then you have a , and then you open your . The is actually a required child of the . Not a sibling.

required child
other stuff in the head

If you have a head without a title in it, I remember the validator used to say something like, you didn't close your head, you'd look and see your tag and be like, huh-wha? Nowadays it actually explains this though.