Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Validating your site: 34 HTML Errors;
- Thread starter Dal123
- Start date
- Sort by reaction score
Any particular reason why you are using XHTML?
HTML is a more practical markup language for the web.
HTML is a more practical markup language for the web.
And XHTML is for what? Spaceships? eXtensible Hypertext Markup Language. It simply makes things more organized, and most of the guys who code web sites these days are using an XHTML DOCTYPE
Ok. You need to imagine that the computer is stupid, that it can only go on exact logical instructions and can't 'fill in the gaps'. The things in the triangle brackets are called tags. They are usually abbreviations so <li> translates to 'list item'; you told the computer you have created a list with <list> and are defining each entry on it with each <li>. Once you've typed an entry on the list, e.g., 'roofing projects', you tell the computer to close that entry with </li>. Once you've finished the list you close it with </list> and the computer moves on.
So from the top, the comptuter sees 'oh, I've got to draw a list here. oh, here's the first list item. oh, he's closed it now. oh, there's a second one. oh, he's closed the list entirely. onto the next job.
What you've done in your code doesn't follow this logic. You've opened and closed list items, and then stuck a link in the middle, then carried on opening and closing list items. What you intended and need to do is put the link within those <li> tags because that link is your list item.
If you read this post slowly and look back at your code, you shouldn't need me to post what the correct code looks like. I'd recommend indenting your code (as some others have posted for you); it makes spotting errors like these so very much easier.
AppleMatt
Samwich thank you, Applematt excellent advice, I understand the logic behind it now, thank you very much. Makes sense to me now.
I really appreciate you taking the time to explain this to me as I now understand this problem, I'm very greatfull.
Like NotAvailable has stated, everyone is using xhtml strict, it is the future and more full-proof and will display in more browsers correctly; if written properly) which is what I'm struggling with.
I'm getting a lot of errors with inserting my lightbox2. What is the correct way to do this:
I really appreciate you taking the time to explain this to me as I now understand this problem, I'm very greatfull
.Like NotAvailable has stated, everyone is using xhtml strict, it is the future and more full-proof and will display in more browsers correctly; if written properly
) which is what I'm struggling with.I'm getting a lot of errors with inserting my lightbox2. What is the correct way to do this:
HTML:
<div class="thumbnail">
<a href="images_site/Caltite Basement Welwyn Garden City/1-Waterproof Basement.jpg" rel="lightbox[concrete_basement]" title="Concrete Slab and Kickers cast, 'Caltite' Concrete used throughout; retardant sprayed on kickers to ensure excellent 'dry-joints'"><img src="images_site/images_thumbs/Caltite Basement Welwyn Garden City/1-Waterproof Basement_thumbs_thumbs_thumbs_thumbs.jpg"</a>
</div>
<div class="thumbnail">
<a href="images_site/Caltite Basement Welwyn Garden City/2-Waterproof Basement.jpg" rel="lightbox[concrete_basement]" title="Concrete Slab and Kickers cast, 'Caltite' Concrete used throughout; retardant sprayed on kickers to ensure excellent 'dry-joints'"><img src="images_site/images_thumbs/Caltite Basement Welwyn Garden City/2-Waterproof Basement_thumbs_thumbs_thumbs_thumbs.jpg"</a>
</div>
<div class="thumbnail">
<a href="images_site/Caltite Basement Welwyn Garden City/3-Waterproof Basement.jpg" rel="lightbox[concrete_basement]" title="External Shutters erected."><img src="images_site/images_thumbs/Caltite Basement Welwyn Garden City/3-Waterproof Basement_thumbs_thumbs_thumbs_thumbs.jpg" border="0"</a>
</div>
<div class="thumbnail">
<a href="images_site/Caltite Basement Welwyn Garden City/4-Waterproof Basement.jpg" rel="lightbox[concrete_basement]" title="External Shutters erected."><img src="images_site/images_thumbs/Caltite Basement Welwyn Garden City/4-Waterproof Basement_thumbs_thumbs_thumbs.jpg" border="0"></a>
</div>I don't know if the <a> tags require TITLE and REL in order for Lightbox to work, so I won't comment on that.
As for the <img> tag, the right syntax is this.
And why are you repeating that DIV? It's enough to only include the <a><img /></a> between one DIV. The results will be the same.
As for the <img> tag, the right syntax is this.
Code:
<img src="link_to_image" alt="alternative_text_to_be_displayed_if_the_image_fails_to_load" />And why are you repeating that DIV? It's enough to only include the <a><img /></a> between one DIV. The results will be the same.
Actually, the biggest problem I'm noticing is that you didn't close some of your tags. Make sure that every tag has a < and >, and that you don't even think about starting another tag until you ended the one before it. I noticed that in the first bit of code, and the same problem was there in the last post you made.
jW
jW
Cheers NotAvaliable:
That's great with the div,
Title gives 'caption' text in the lightbox (a description of the photograph) 'rel' defines the group of the photographs (that way text comes up saying 'photo 3 of 6'.
Thanks for input buddy much appreciated .
That's great with the div,
Title gives 'caption' text in the lightbox (a description of the photograph) 'rel' defines the group of the photographs (that way text comes up saying 'photo 3 of 6'.
Thanks for input buddy
much appreciated .Just tried not repeating the div, it does not work, I need to repeat it because my page is not semantically correct . If I do not repeat the div then the images are placed outside of my 'page_content' container.
Mal can you point out which bit you're talking about please buddy. Remember this is lightbox 2, first time doing this and I'm severe novice as you can tell.
Thanks for input.
Oh yeah, NotAvailable that is only the correct syntax for entering a basic image; this is not a basic image, this is lightbox2.
. If I do not repeat the div then the images are placed outside of my 'page_content' container.Mal can you point out which bit you're talking about please buddy. Remember this is lightbox 2, first time doing this and I'm severe novice as you can tell.
Thanks for input.
Oh yeah, NotAvailable that is only the correct syntax for entering a basic image; this is not a basic image, this is lightbox2.
That line has two problems:
1) The "<a>" tag needs to go inside the "<li>" tag and
2) the "<a>" tag isn't closed properly there is no ">" after the quotation mark).
When you write code make sure everything follows the right order, and make sure you exit the same way you came in. So to fix this, open with the <li> then the <a>, when closing, close the <a> first then the <li>.
Your new code:
HTML:
<li><a href="gallery.htm">previous jobs</a></li>There isn't a correct syntax for lightbox2, lightbox2 has no syntax, it's AJAX-based, as far as I'm concerned. And as far as I can see, only the <a> tag has something to do with lightbox. You've got to enter the image just as I've shown you. As for the border, I really don't think it's required by lightbox, so if it isn't, and need to specify a border, you can always do it using CSS.
I think we clarified this problem in the last century, but I see a couple of people still have knowledge to share...
Actually, you did:
Lightbox2 (LB2) is an JavaScript image library that extends the popular open source Prototype framework and the Scriptaculous effects library both of which have functions that extend the DOM and reference actual markup. The rel attribute for LB2 is required and used to identify that specific anchor tag for grouping purposes as Dal123 astutely noted, used much like a selector in CSS. The title attribute for LB2 is optional, used to display captions in LB2 image display. Both attributes are valid HTML markup.
However, the OP here is using XHTML 1.0 strict DTD, and the actual specification for the anchor tag allows for rel and title, but rel must be CDATA consisting of a "space-separated list of link types; forward link types." This means LB2 uses rel loosely beyond its original intended behavior. The OP needs to know that validation is never guaranteed when a script like Lightbox2 exploits attributes to permit custom behaviors, especially via plugins which often are user contributed and do not follow strict standards.
In this situation, the rel attribute should validate fine because an underscore was used in the CDATA for it, no spaces, single string. But it's worth mentioning that choosing XHTML 1.0 strict also means one has to be vigilant to ensure proper validation when using any third party frameworks that use the DOM or generate markup.
FYI
-jim
I have tried to over-ride it in css as to yet no luck; this is because dreamweaver mx 2004 ver 7.0 by default when using an image as a link it places a blue border around it by default. It needs to be over-ridden by an inline style. I have tried css but it doesn't work.
Are you sure you understand how lightbox2 works? Two images are needed! Unless you want to link it by some boring text. There is no point in putting the same sized image on the page, only to have it load in lightbox2. You need two images, one the source of the link, the other is a thumnail (obviously small sized) when clicked on this displays the big image. Therefore I think they are both needed in the <a> tag, I could of course be incorrect here and most likely am
.Jim, are you saying that it's near impossible to write valid xhtml strict with Lightbox2. I checked out that link (thank-you
) Could you show me an example of how to write my lightbox2 correct?Thanks for all input people
.Are you sure you understand English, and some (X)HTML? The only difference I pointed out is the need of the ALT attribute, as well as... closing the tag. Every heard of CLOSING tags? Please take the time and read the entire posts carefully...
The first code snippet is taken from the official web site, so, I'd say, the right implementation. Notice the IMG tag. The second one is your code. Notice the difference...
The first code snippet is taken from the official web site, so, I'd say, the right implementation. Notice the IMG tag. The second one is your code. Notice the difference...
Code:
<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
Code:
<a href="images_site/Caltite Basement Welwyn Garden City/1-Waterproof Basement.jpg" rel="lightbox[concrete_basement]" title="Concrete Slab and Kickers cast, 'Caltite' Concrete used throughout; retardant sprayed on kickers to ensure excellent 'dry-joints'"><img src="images_site/images_thumbs/Caltite Basement Welwyn Garden City/1-Waterproof Basement_thumbs_thumbs_thumbs_thumbs.jpg"</a>Results were not the same! The Div needed to be repeated to continue the correct float!
Stating the blatantly obvious! Yet you think you have just contributed something extremely valuable
.There is need for correct syntax as Jim pointed out!
You really shouldn't be so rude and condescending when you really have made yourself look as silly like this!
You have embarassed yourself! And not just once
You are comparing a basic format; to a more detailed format. The only difference is the closing tag and the group I have placed it in [concrete_basement] which is correctly placed inside"" as the Lightbox site recommends. Title is for placing caption text inside the frames which you clearly do not understand.
You have no idea what you're talking about. It's no basic or detailed format. You want it to be valid, I gave you the valid XHTML syntax. But I can see who I'm wasting my time with if you think closing a tag is something detailed and optional. If you don't trust me, try using the XHTML Validation Service...
You have no idea of how HTML, CSS and JavaScript/AJAX work, yet you go around talking about details.
I don't know what your CSS was, but I'm sure the problem was there...
Yes, it was valuable being given the fact that you know no HTML.
There is no need for correct syntax, just the inclusion of the required attributes.
Instead of trying to disagree with my behavior and searching back posts you don't understand at all, I invite you to press the IGNORE button, and stop reading my posts, if I'm not up to your "Isn't love a beautiful thing?" standards...
Jim, are you saying that it's near impossible to write valid xhtml strict with Lightbox2. I checked out that link (thank-you
Thanks for all input people
Nope, what I said was be vigilant, meaning you might, generally.
I think as a good learning experience what you need to do now is a simple two step approach:
1) Create the entire XHTML page and CSS without the LB2 stuff - and make sure it validates properly before proceeding to step 2.
2) Install LB2 and adjust your code according to the LB2 docs and re-validate. If any errors then, please post them here and we'll help you through it. Or include the link or final relevant code.
This is so you can learn the syntax of XHTML 1.0 strict before complicating things with third party libraries. As to step #1 other users here have posted code fixes which you definitely need to address. I'm not going to comment on every detail raised in the last few threads as I've got better things to do and so do you.
-jim
Thanks Jim,
I have checked everything and validated my html I have 0 errors thanks to all you great people.
I have four errors in my main css and I'm checking them out.
One question; in dreamweaver mx 2004 ver 7.0 when the image is used as a link the default blue border: is there a way to over-ride this in an external css sheet. I have tried, yet with no success. So I've been over-riding it with an inline style (obviously a little tedious).
I have checked everything and validated my html I have 0 errors
thanks to all you great people.I have four errors in my main css and I'm checking them out.
One question; in dreamweaver mx 2004 ver 7.0 when the image is used as a link the default blue border: is there a way to over-ride this in an external css sheet. I have tried, yet with no success. So I've been over-riding it with an inline style (obviously a little tedious).
Thanks Jim,
One question; in dreamweaver mx 2004 ver 7.0 when the image is used as a link the default blue border: is there a way to over-ride this in an external css sheet. I have tried, yet with no success. So I've been over-riding it with an inline style (obviously a little tedious).
Inline styling (using the style attribute for most any HTML tag) can often result in sloppy code in my experience. Plus with XHTML strict it's a W3C "best practice" to separate content from style even though the specs allows it. Some people also take inline styling to mean a style tag with styles in the head portion. For both use an external stylesheet instead if possible. But if you do add istyle tag and styles into the head area be sure to wrap the styles with CDATA tags for validation purposes, my .02.
If you already have an id or class assigned to one or more images on that page, simply add "border: none;" (0 works also) for the proper selector(s) in your styles.
Or, to affect all of 'em, put near the top of your stylesheet:
Code:
a img {border:none; vertical-align:top}In XHTML strict you don't have the "border" attribute in the img tag, so you need to make the change via CSS.
-jim
Down to my last error.
Down to my last error (well so far anyway).
All my xhtml is clean and css apart from one.
Just to help understand I have:
index.htm
gallery.htm
gallery1.htm
layout.css
gallery.css
lightbox.css
What is happening is my index.htm is linked to layout.css which has @charset "utf-8"; at the top and validates with no errors.
The problem is I gallery1.htm has an error moaning about.
Down to my last error (well so far anyway
).All my xhtml is clean and css apart from one.
Just to help understand I have:
index.htm
gallery.htm
gallery1.htm
layout.css
gallery.css
lightbox.css
What is happening is my index.htm is linked to layout.css which has @charset "utf-8"; at the top and validates with no errors.
The problem is I gallery1.htm has an error moaning about
Which I don't understand as the other style sheets have exactly this written in the same way yet they are fine
.
Encoding is typically handled by the meta tag in the HTML, i.e.
Which you did. I also looked as your .css files and don't see any comment lines above the @charset rule (which must be at the very top of the stylesheet as per CSS specs, which you did), but wonder why you bothered considering the meta tag in the HTML. If you created the .css files in Unicode (UTF-8) there really is no need to add the @charset rule at all.
In DW (for example) this means Preferences -> New Document (set DTD to XHTML strict 1.0 and default encoding to Unicode 5.0 UTF-8) - do the same for Fonts category also in Preferences pane.
I validated your files via DW8 on my Mac via File -> Check Page ->Validate Markup and got no errors, so either the validator you're using (if not in DW) might be quirky or you copy/pasted the source in direct mode where UTF-8 is assumed so ignore any warnings or errors regarding encoding, as the W3C validator page notes.
In DW this means Preferences -> Validator (check XHTML 1.0 strict) and enable all options for it
Here is general information I found on the charset rule in stylesheets for those wondering:
-jim1
HTML:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">Which you did. I also looked as your .css files and don't see any comment lines above the @charset rule (which must be at the very top of the stylesheet as per CSS specs, which you did), but wonder why you bothered considering the meta tag in the HTML. If you created the .css files in Unicode (UTF-8) there really is no need to add the @charset rule at all.
In DW (for example) this means Preferences -> New Document (set DTD to XHTML strict 1.0 and default encoding to Unicode 5.0 UTF-8) - do the same for Fonts category also in Preferences pane.
I validated your files via DW8 on my Mac via File -> Check Page ->Validate Markup and got no errors, so either the validator you're using (if not in DW) might be quirky or you copy/pasted the source in direct mode where UTF-8 is assumed so ignore any warnings or errors regarding encoding, as the W3C validator page notes.
In DW this means Preferences -> Validator (check XHTML 1.0 strict) and enable all options for it
Here is general information I found on the charset rule in stylesheets for those wondering:
-jim1
Thanks Jim,
I have been validating by using the developer toolbar in firefox.
Somebody on the forum here helped me with the @charset "utf-8", I'm greatful as I have learnt a little about it; but I thought that was the reason it helped me place my thumbnails better/ neater in the lightbox frame, clearly this is not what changed the layout, it was changes in my css.
Thanks again for all the help. Been great and I'm looking forward to the day I can help others.
I have been validating by using the developer toolbar in firefox.
Somebody on the forum here helped me with the @charset "utf-8", I'm greatful as I have learnt a little about it; but I thought that was the reason it helped me place my thumbnails better/ neater in the lightbox frame, clearly this is not what changed the layout, it was changes in my css.
Thanks again for all the help. Been great and I'm looking forward to the day I can help others
.