posted
At this moment I'm about to burst with frustration. Here I am almost done with my website (made with notepad..and IE) and then I go to check it out on Firefox and it looks like cr**. All the lines are mushed up together (I suspect it's the CSS) and I'm wondering if I need to do positioning for every single line.... I sure hope not.
http://groundcoversllc.com Any help would be wonderful... And yes I've tried to verify it with W3. Still trying to figure out half of what it's talking about.
ps.. is there a way to do an alternative font family? Maybe I'm just thinking of the alt for the images.
posted
Okay, first thing to do is get it validating. Your document is not XHTML at all, including capitalized tag and attribute names, lacking quotation marks around attribute values, et cetera. These things are, however, valid HTML4, so I'd suggest changing to that DOCTYPE if you want a quick fix.
Note: angular brackets changed to ] and [ below, as needed.
Changing to the 4.01 Transitional DOCTYPE, there are many fewer errors. How to fix some: in both HTML and XHTML, meta is a single tag; in xhtml it looks like [meta/], and in html it looks like [meta]. There is no closing tag.
In HTML, get rid of the / at the end of single tags. If you move everything to XHTML, keep these.
When you start an attribute value with a #, you need quotation marks around it (in HTML; in XHTML you always need them, and its good practice to include them in HTML).
embed is not actually a legal tag, you want object.
images must have alt attributes.
There's no such element src, and you don't need to close it after img tags.
That should take care of almost all of your errors if you switch to 4.01 Transitional for the DOCTYPE. Remember, as you fix errors, just try to do the first one, then when that's fixed look at the next one.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
To be truly compatible, img tags should have a title attribute. In firefox and other standards-compliant browsers, alt will only appear if the img is broken.
Generally speaking, if you want to keep your page forward-compatible, every tag (and all their attributes) should be ALL lowercase, all values of attributes shouls be enclosed in double quotes, and every tag needs a corresponding end tag, or self-closing.
Also, due to the way different browsers default margins and paddings, create a section in your CSS to zero out padding and margin values for base tags (body, div, span, p, the list tags, table). Otherwise you'll find weird off-sets between elements rendered in different browsers.
posted
Good points, Bok. After we've got everything to validate, those are good places to refine, simplify, and clarify a design.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
I just uninstalled Firefox because while I liked it at first, too many webpages either wouldn't completely load or didn't look right.
Your webpage doesn't look good in NS 7.2 either, uw. The lines are mushed together like you said and overlap the picture of the truck. It looked a lot better awhile ago when you has us look at it.
Could somebody please link some beginner's webdesign/html/xtml tutorials for me? I get a free webpage with my ISP but I haven't put anything up yet.
While doing these, experiment in creating web pages, both as snippets in w3school's interactive examples, and larger ones of your own.
Always keep in mind that content and presentation should be separated -- use the html elements as their names suggest, but avoid the stylistic tags (like the tags for bold and italics, b and i). p tags are for paragraphs. table tags are only for tabular data. Et cetera.
Make all your tags lowercase, and enclose all attribute values in quotation marks. This will save headaches later on, and is perfectly valid in HTML and XHTML. Uppercase tags and unquoted attribute values are, however, not valid XHTML.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
Also, I think uninstalling Firefox may have been a bit of an overreaction. Why uninstall useful software when it doesn't hurt to keep it around?
posted
Actually, the W3 is a different group, the w3schools is just a website specializing in stuff related to the web.
http://w3.org . They're the ones who create most web standards. What uw was referring to, specifically, was their validator, here: http://validator.w3.org/
Don't rely on it, but it can be a versatile learning tool -- write your own HTML, then run it through tidy and see how it should look tidied up.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
I uninstalled Firefox because I stopped using it and I need the disk space, I have a tiny HD. I did a little spring cleaning beacause I plan to download a lot of freeware this weekend.
Posts: 327 | Registered: Oct 2003
| IP: Logged |
They're completely unnecessary, and bigger than they need to be.
You can achieve the same thing by using a repeating truck image as the background of a DIV, and setting the links to highlight on rollover using CSS.
This would eliminate the need for a plugin -- which would be good for me, for example, since I deliberately turn off displays of Flash by default.
Posts: 37449 | Registered: May 1999
| IP: Logged |
posted
Thank you fugu for telling me about HTML4 and XHTML. You mentioned that I have capitalized tags... I only have capitalized words for the information not tags... Also I can't find a HTML4 validator at all in the w3 website...
Thank you so much for your help guys.
Posts: 1417 | Registered: Aug 1999
| IP: Logged |
posted
..wait a minute.. I totally forgot that I had capitalized tags for the flash buttons....
Thats what I get for just copying a pasting from Flash..
Yes I know.. I know!!! Flash is bad!!! I know! I will figure out how to do it with CSS later. Right now I have a bigger problem to take care of... Posts: 1417 | Registered: Aug 1999
| IP: Logged |
posted
uw: the general HTML validator can handle any HTML variant -- it either autodetects it, or you can set an override (after you've validated your document, there's a dropdown where you can choose a doctype and then revalidate).
I considered that rivka, but as many of the acronyms in use on the web aren't TLAs, I went with acronyms in general.
I know this may sound a little... "CSS beginner" of me.. but could you give me an example of the creating "a section in your CSS to zero out padding and margin values for base tags"
I would very much appreciate that. Thank you Posts: 1417 | Registered: Aug 1999
| IP: Logged |
Etc, etc... For all basic elements in an (X)HTML page. This is one area where I've found firefox to have more annoying defaults than IE. I see no reason not to have these set to zero to begin with.
After you zero out the basics, you then label your divs/spans/lists/etc with class/id names, and set the padding/margins (depending on your need) in these. The only disadvantage is that you can't use vanilla tags by default.
posted
You should do that for the HTML element if you're using XHTML, too.
In normal HTML, the only markup that matters to rendering is the body and what it contains. In XHTML, its only by default that other stuff isn't rendered -- theoretically, you could display the title tag by adding the appropriate CSS, for instance.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
Oh, another thing, uw, don't inline your CSS in the HTML file. The whole purpose behind CSS is to separate content (the info in the HTML page) from the presentation (how the page is displayed in browsers, cell phones, page readers for the blind, etc). Create a separate CSS file, and stick you CSS in it, and then use the [ link ] tag to import it into your CSS. This makes it easier when all your pages want to use the same basic formatting, you don't need to copy-and-paste as much.
posted
Actually, there are W3 specific definitions of what alt should be used for (in XHTML) and title. I don't know of any way to get an alt to show up in firfox onless the source tag is broken. I wish I could find the reference I read...
posted
alt's an attribute, not an element. You can't style attributes, they merely organize some metadata relevant to an element. You can only style elements
And n XHTML, even the title element can theoretically be styled.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
Ah, that's our confusion. I was talking about the title attribute, not element. Nearly all elements can have titles, only img's can have alt, and alt is defined as to be used in the event the image doesn't load properly.
posted
Yeah, tag (as in "title tag", above), means the thing which represents the element.
I mentioned it to expand upon why one might need to zero out the margin and padding on the html element itself -- because a browser might add margin or padding to the html element.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
OK (sorry that I'm graveling for help again)
So I changed my CSS into External CSS, validated the CSS to be clean except for the warnings of putting alternate font families (in which I will do later) Validated the XHTML except for some of the Flash, I'm not sure what would make it freak out, and I even set the basics to 0.. but I wasn't sure what you meant by setting the class/id.
Do you mean something like this?
div {margin:0; padding:0; class:name}
Anyway I did all that and it still looks awful in Firefox . What I wonder is... does Firefox support the following?
posted
The following are all valid css well supported in all browsers:
foo.bar {
}
.bar {
}
foo {
}
foo#glom {
}
#glom {
}
In these, foo is a tag name, bar is a class name, and glom is an id. There are many more possible combinations involving descendant selectors and such, but these are the basics. For your purposes, the big difference between classes and ids is that ids must be unique, while you can have multiple elements with the same class.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
To elaborate a bit on fugu's post, classes/ids essentially allow different instances of the same tag (anchor, div, paragraph, etc) to use different formatting.
So for setting up CSS for bolding and non-bolding paragraphs (just as an example):
code:
IN CSS FILE:
For default, non-bold paragraphs: p { font-weight: normal }
For bold paragraphs: p.bold { font-weight: bold }
IN HTML FILE: ... <p>Normal paragraph</p> <p class="bold">Bold paragraph (in display, not content)<p>
Any CSS tag can have multiple classes, you just type the tag type, a ".", and then the name you want to call that CSS class. If you see the "#", that's the symbol for an id definition, which, as fugu noted, can only appear once (it's useful for split one-off structures, like a div for a header, one for a left nav-column, and one for the main page area).
A more advanced technique is to define a class/id without a tag type (so instead of "p.bold", just ".bold"). This allows you to use the "bold" class in any tag type (p, span, div...).
I still haven't figured out why the first page of my website is messed up in Firefox. (text overlapping, pictures in the upper left hand corner where it isn't in IE)
I've tried so many things and it still is being retarded.
If anyone is willing to look over the code and tell me what I should fix, tell me and I will email it to you. I would be very much appreciated. VERY VERY VERY APPRECIATED !<see what it's doing to me? Posts: 1417 | Registered: Aug 1999
| IP: Logged |
posted
Your page still has some fairly severe errors. Fix the following at minimum.
The object tag opener should not end in " />". Change that to just ">".
Flash may not like it, but try removing the bgcolor from the img tag on line 23 and using CSS instead.
For now, just delete the "<p />" tag and replace it with a couple "<br />" tags, as that's all you're using it for anyways. Properly, though, p tags are for wrapping paragraphs -- for instance:
posted
I have validated the first page. And it's all validated.. except for the Navigation bar. I think I know how to do it with CSS. It will require me to make each truck (mostly just the text and the truck smaller, etc) and then figuring out what CSS position all of them need, to look the way it does now. Posts: 1417 | Registered: Aug 1999
| IP: Logged |
Printer-friendly view of this topic
![[Dont Know]](graemlins/dontknow.gif)
![[Smile]](smile.gif)
![[Roll Eyes]](rolleyes.gif)
![[Razz]](tongue.gif)
![[Wall Bash]](graemlins/wallbash.gif)
![[Embarrassed]](redface.gif)
![[Big Grin]](biggrin.gif)
![[Eek!]](eek.gif)
. What I wonder is... does Firefox support the following?
