As you will see, the Iframe on the Firefox page is cut off. Do you think it has anything to do with the drop down menu above it?
Thanks for your assistance.
Joe.
KDLA
02-12-2008, 11:42 PM
First, you need to insert a DOCTYPE so that all browsers will read your code in a consistent fashion. Then, work on fixing these errors: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.chista.net%2FMasterItems.php%3FCat2%3D48%26Cat3%3D175
You've got a whole lot of non-standard HTML in there that only confuses the issues.
I believe the problem is coming from this: width=100% height=100%
in the IFRAME's coding. 100% height really doesn't work unless you've established a specific height in the parent container.
Animas3D
02-13-2008, 10:46 AM
Thanks for your help, KLDA.
That's a lot of errors there (96!). Doesn't do great things for my ego... Thank you for running it through the checker.
I will put the DOCTYPE in there. I read the notes the analysis. Is there any particular DOCTYPE I should put in?
How about this one?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
I will also try to modify the iframe code as per your suggestion. I'll let you know what happens.
Profuse thanks.
KDLA
02-13-2008, 10:59 AM
If you're using a FRAMESET, you need to use one for that purpose on the main pages containing the frameset. You can use STRICT or TRANSITIONAL for the interior pages. Take a look here: http://www.w3.org/QA/2002/04/valid-dtd-list.html for a comprehensive list.
Don't worry - we've got to start somewhere. I was in the same situation (graphic designer) about 10 years ago. Once you learn about code, though, it makes troubleshooting so much easier, making your turnaround for clients much faster. :p
Animas3D
02-13-2008, 11:42 AM
Thanks again, this is proving to be most illuminating. You have obviously done your homework!
About the DOCTYPE, and after glancing at the reading material you mentioned, I guess the big question is whether to go with HTML or XHTML. This is probably a question that has been asked a million times, so please excuse my poor fund of knowledge in this area.
My feeling is that since the site uses a dropdown menu which relies heavily on some tricky javascript code (which I generated from DHTML menu builder from Coffeecup software) and also uses (at my own beginning level) PHP and MySQL, I would assume that I should use the XHTML flavor of the DOCTYPE declaration. Am I wrong in this assumption?
Regarding the FRAMESET. The page does use an Iframe, but not the older kind of frames. So I will take your advice about using the frameset version.
So would I be right if I used XHTML 1.0 - Strict, Frameset?
Thank you,
Joe.
KDLA
02-13-2008, 12:00 PM
(OK -- you don't need to use FRAMESET if you're just using an IFRAME.)
Animas3D
02-13-2008, 12:15 PM
Thank you. So then:
XHTML 1.0 - transitional would be good (rather than HTML)?
By the way, as per something I saw on the WC3 site, I also included this at the very top:
<?xml version="1.0" encoding="utf-8"?>
But it generated a syntax error from PHP. (Did PHP think it was PHP code perhaps?). So I guess I'll take that part out, unless you think it is necessary.
Joe.
Animas3D
02-13-2008, 12:38 PM
I tried to change the Iframe's width and height from percentages to fixed pixel values and it seemed to fix the problem at first.
However, upon closer inspection, other serious problems cropped up. In particular, they are:
- The drop down menu on the top of the page has disappeared.
- The listing in the box to the left of the page has gone haywire with names and pictures screwing up the alignment.
Here is an example with the width and height set to exact pixel values (and a border drawn around the iframe).
Any thoughts on why this is happening when you get a chance and at your convenience.
J.
KDLA
02-13-2008, 01:31 PM
This is all occurring because you've added a DOCTYPE. Before, the browser was rendering your page in "quirks mode (http://en.wikipedia.org/wiki/Quirks_mode)," rather than standards mode. In 'quirks mode," the browser "assumes" some spacing settings, not necessarily reading your coding as is.
Now that you're in standards mode, you'll have to change some of the coding. (I know, it seems like a huge deal, but this way you'll have cross-browser compatibility.)
Let me look at your coding and get back to you about the specific issues you cited.
Animas3D
02-13-2008, 01:57 PM
Thanks for helping me out.
Let me know if you need any other files that may be useful to you.
The layout was done with tables. I was thinking to redo it one day using CSS and divs (as well as Ajax). But I have a lot to learn before I can do that. In the meantime, I would like to just fix this issue until I get the chance to learn CSS based layout techniques.
I look forward to receiving your comments whenever you get a chance.
Joe.
KDLA
02-13-2008, 01:59 PM
Left nav: the text & images are stacking because their widths do not equal that of the container, in this case the parent <td> cell. Change to this:
To be semantically correct, I changed it to an unordered list, rather than paragraphs, because it is, essentially, a list. This isn't the best way to code this (really, you could apply the images as background to the links and have enough padding applied to display the full image), but it works and is quick.
As to the other problem, I think part of the problem lies in that you've got all sorts of widths and heights applied to table cells, and they don't really work together. You've got some nested cells that are specified to be taller than the parent cell. For example:
Also, I'm not sure what all those grid settings are doing -- they could be absolutely positioning items over the menu. Then, too, the javascript itself is coming up with absolute positioning, too.
If you want a really easy alternative to this JS created menu, you might take a look at this one:
http://www.cssplay.co.uk/menus/final_drop.html
It is a much easier way to code the menu, rather than relying on all the javascript.
Animas3D
02-13-2008, 09:48 PM
Thank you very much KDLA.
First off, I tried the code for the list you sent and it did seem to clear up the weird stacking problem that appeared in the left cell after entering the DOCTYPE.
However, because putting in the DOCTYPE made the menu disappear and there doesn't seem to be an easy fix for that on the horizon (although I did read with interest the site that you referred about all-CSS drop down menus), I took out the DOCTYPE and set the width and height of the iframe to fixed pixel values as you also suggested.
That fixed the initial problem with the iframe getting cut off.
Thus, I am inclined to leave it like this for now (No DOCTYPE and fixed pixel dimensions for the iframe). The reason being that, as you have witnessed for yourself, there are other issues that need to be addressed and I have been thinking to one day soon trying to redo the whole site by using css/div based layout techniques rather than tables as well as recreating the menu system.
At least for now, however, the iframe is visible in FireFox.
By the way, all those tables and their dimensions were generated with Adobe GoLive which seems to be in process of being phased out.
This all leads me to the following important questions, which I hope you will answer as generously as you have answered all the other questions I have asked so far:
Question: By taking out the DOCTYPE, I suppose it is now in "Quirks Mode" (something that I am just becoming aware of now). Although I do intend to one day soon recode the site to be more standards compliant, is there any major disadvantage to leaving it in Quirks Mode for a while?
Question: I used to use GoLive as a development environment. However I do not wish to use it any longer. What website creation system/Editor do you use? What do you think about Dreamweaver?
Question: To try out PHP scripts I would write them in a simple text editor and copy them via ftp to my web host provider. Then I would open up the php page in my browser and see if the script worked. If it didn't, I would go back to the original source file, try to find the bugs and repeat the whole process over again. There has got to be a better way. How do you, or how would you suggest developing in PHP? Do you install Apache, MySQL and PHP on your development system? What do you use to edit the PHP? I have heard that Zend makes something. Is that the standard? What about Visual Studio? Is there an integrated system to develop PHP/MySQL?
Question: From what I understand CSS/Div layouts may be a better way to go for page layout than tables. Can you suggest any good online resources or books which cover this topic well?
I look forward to reading your comments whenever you get a chance. Thanks for all your help so far.
Joe.
Animas3D
02-13-2008, 09:48 PM
..
KDLA
02-14-2008, 09:26 AM
Question: By taking out the DOCTYPE, I suppose it is now in "Quirks Mode" (something that I am just becoming aware of now). Although I do intend to one day soon recode the site to be more standards compliant, is there any major disadvantage to leaving it in Quirks Mode for a while?
No, I would guess not. There are tons of pages on the web missing DOCTYPES, also. If you don't mind inconsistent appearance among browsers, a missing DOCTYPE isn't a big deal. You can live without it for a while.
Question: I used to use GoLive as a development environment. However I do not wish to use it any longer. What website creation system/Editor do you use? What do you think about Dreamweaver?
For work, I use Dreamweaver and Visual Studio; both of these using "code view" only. At home, I use Notepad++, which is a code-view only editor. Using code-view editors forced me to learn code and stop relying on either the editor or my eye to figure out how to do things.
Question: How do you, or how would you suggest developing in PHP? Do you install Apache, MySQL and PHP on your development system? What do you use to edit the PHP? I have heard that Zend makes something. Is that the standard? What about Visual Studio? Is there an integrated system to develop PHP/MySQL?
I work in the government sector and we have pretty strict guidelines as to environments and editors. All of my server environments are Windows/IIS and Sequel Server, which is why I use Visual Studio (well, that, and have to use Visual Studio here, it's a mandated standard). I've worked with PHP before, but it has been in the same capacity you've mentioned: edit, upload, test. I can't provide much info. on this because our gov. standards do not allow use of PHP.
Question: From what I understand CSS/Div layouts may be a better way to go for page layout than tables. Can you suggest any good online resources or books which cover this topic well?
I used to recommend books, but for me, experimentation is the only way I was able to learn. A good place for the basics is www.w3schools.com. I also have the "CSS Pocket Reference" book by Eric Meyer; I keep this next to me to double-check syntax and inheritance issues. There are tons of good sites for advice: CSS Zen Garden, CSS Play, and Max Design. Also, it's good just to see what others are doing by referring to sites such as Web Creme, Design Shack, and CSS Remix. The best thing you can do is download an RSS feed reader, and subscribe to many of the technology/web design sites. That'll expose you to many of the current techniques, issues, and styles that are used.
KDLA
Animas3D
02-15-2008, 09:10 AM
If you don't mind inconsistent appearance among browsers, a missing DOCTYPE isn't a big deal. You can live without it for a while.
Thanks, I will leave it for now until I get a chance to overhaul the whole site.
For work, I use Dreamweaver and Visual Studio; both of these using "code view" only. At home, I use Notepad++, which is a code-view only editor. Using code-view editors forced me to learn code and stop relying on either the editor or my eye to figure out how to do things.
Now I can see why. All those errors in the code were most likely introduced by a mixture of GoLive and my lack of checking them manally. Having a working knowledge and understanding how code works is no doubt a key skill that I need to work on.
All of my server environments are Windows/IIS and Sequel Server, which is why I use Visual Studio... gov. standards do not allow use of PHP.
This brings a few questions to mind that I hope you can answer. Recently, I had an idea for an animation program I wanted to write, so I downloaded Visual Basic 2005. After working on it for a considerable amount of time, I decided to take a brief hiatus from developing for a while (but do intend getting back into it shortly). The reason I paused was because WPF appeared and along with it XAML which was a whole new thing which kind of confused me. In addition, I began to question whether Visual Basic was the language I should focus on since I saw so many people using C#. As you can see, I was not using it for web development, but rather Windows development. However, I would like to better understand how it is used for web developent. Therefore the following questions arose:
- What is Visual Studio used for in web development? Does it allow for the creation of entire websites (including design, html, css, etc)?
- What development language do you use? Visual Basic, C# or another? I assume that language takes the place of PHP to access Databases in Sequel Server (rather than PHP/MySQL). Do you write the code in Visual Studio and then integrate it all in Dreamweaver? Or can you do the whole thing in Visual Studio? I would like to know how each component fits into the whole picture. Is Visual Basic the language of choice among people developing web applications in Visual Studio?
- What do you actually "do" in Visual Studio?
There are tons of good sites for advice: CSS Zen Garden, CSS Play, and Max Design. Also, it's good just to see what others are doing by referring to sites such as Web Creme, Design Shack, and CSS Remix. The best thing you can do is download an RSS feed reader, and subscribe to many of the technology/web design sites. That'll expose you to many of the current techniques, issues, and styles that are used.
Thank you for the sites. I look forward to visiting all of them. Is there any RSS feed reader that you recommend?
This has been a most educational exchange. If you are ever in New York City, I hope you allow me to take you out to lunch!
Joe.
KDLA
02-15-2008, 09:25 AM
- What is Visual Studio used for in web development? Does it allow for the creation of entire websites (including design, html, css, etc)?
Our developers use it to develop ASP and/or ASP.NET applications.
Yes, it allows for creation of entire websites, but as I mentioned before, I use the code-view only. The program, when relying on design-view, produces HORRIBLE code. I can't complain, though; it's this code that keeps me employed.
- What development language do you use? Visual Basic, C# or another? I assume that language takes the place of PHP to access Databases in Sequel Server (rather than PHP/MySQL). Do you write the code in Visual Studio and then integrate it all in Dreamweaver? Or can you do the whole thing in Visual Studio? I would like to know how each component fits into the whole picture. Is Visual Basic the language of choice among people developing web applications in Visual Studio?
We use .NET with Sequel Server. Our developers write the code in .NET using Visual Studio, then hand it to me. I use either Visual Studio or Dreamweaver to edit it, depending on what needs work.
Visual Basic is sort of the building block for many of the other coding languages. It's never a bad thing to learn. I don't know it, myself; my "needed" specialty areas are HTML, CSS, ASP, and javascript. Until one of our developers quits or kicks the bucket, I probably won't spend much time learning to write it.
- What do you actually "do" in Visual Studio?
I don't "do" that much. Our developers code applications, then hand them to me. I, in turn, design the application by going through the .NET code and applying the appropriate tags, semantic coding, navigation, styles, etc. and then do the testing for accessibility and/or usability. I'm sort of like the guy in a parade that follows the elephants with a broom.
Good Luck -
KDLA
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.