Gaps in website when viewed with firefox, help please!

[Computerdrs]

Hi, I have recently made a website with dreamweaver for my company, and when I view it in Firefox, it shows gaps. It also showed gaps in Internet Explorer, but I fixed that. I've searched these forums as well as google to find an answer, and every solution has been cut short. Nothing has worked so far.
Any help would be greatly appreciated.

Link:

http://www.pcdrs.org

Computerdrs@aol.com

 

[traingamer]

You need a full and valid doctype - without it IE is in quirks mode and will rarely match a compliant browser. See thread248-1407541 among many other threads.



Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[Computerdrs]

Umm, I looked over the other thread. It all seems very helpful, but I have no clue how to change a Doctype, and what would be considered a full and valid doctype?

 

[traingamer]

Sorry - not a very helpful link. Try W3c's Recommended list of DTDs - I'd try HTML transitional for a start.


Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[johnwm]

When you have a complete and valid doctype, try getting the site to validate. See

http://validator.w3.org/check?verbose=1&uri=http://www.pcdrs.org/

It will be a lot easier to fix the occasional IE oddities if the page validates first.

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[Computerdrs]

Ok, I tried pretty much everything, HTML seems to have the least errors, at 7... now how do I fix these?

 

[Computerdrs]

Correction, both XHTML Transitional and HTML Transitional have 7 errors.. Which should I use, how do I fix the errors, and why?

 

[johnwm]

The link I gave you is quite specific about the errors and how to fix them. If you are not sure of which attributes are in use then try:

http://www.w3schools.com/html/default.asp

http://www.htmlcodetutorial.com/

http://www.w3.org/TR/REC-html40/

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[Computerdrs]

Look at the link you gave me. I started with 7 errors, I fixed 6 of them, but the 7th I can't figure out.. It says
Line 95, Column 28: there is no attribute "HEIGHT".

<table width="776" height="501" border="0" align="center" cellpadding="0" cell

Recommended solution? I don't see how there is no HEIGHT attribute, how are u supposed to know how tall you want it? lol
Thanks in advance, I know I'm a pain, i'm rather new, but everything other than this seems to be going well

 

[Computerdrs]

I think I fixed it, I simply took out the Height="501" and now it looks like this
<table width="776" border="0" align="center" cellpadding="0" cell

And so it passes validation now, HOWEVER.... the breaks(gaps) in the page are still there.. all this work for nothing. Suggestions?

 

[johnwm]

Looking at the source code gives a clue - its a bit of a maze of tables. Download the Developer toolbar for FF then outline table cells, and use the Display Element Information tool. You can then see which elements are wrongly specified and fix them.

It would probably be a lot easier to start again using divs and do it properly, rather than trying to bodge up all those table cells. That way you can also avoid the use of image slicing (which is probably the root of your problems)

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[Computerdrs]

I thought I did use divs... I haven't created one table yet, but apparently it did it automatically. what is FF? appreciate your help, I just don't know if I'm good enough to recreate the whole webpage, since i thought i was using divs the whole time anyway..

 

[johnwm]

FF = Firefox, the most popular (fairly) standards compliant browser around. Most windows web developers will use it as their design browser of choice. See

http://www.mozilla.com/firefox/

for free download

Tables are specified for the layout of tabular data (think spreadsheet stuff. Did you actually view the source code of your site? Adding 2 divs inside a table cell don't make it a tableless layout. Google for 'tableless layout' and you will find loads of stuff to get you started. Even Dreamweaver have been recommending tableless layout for several years. See

http://www.adobe.com/devnet/dreamweaver/articles/tableless_layout_dw8.html

for an example.

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[Computerdrs]

I can't remake the whole website, when I tried to recreate it i was inserting the spliced images and it just didnt work out.. SO HOW DO I GET RID OF THESE DAMN GAPS? I have the developer mod, and i checked and validated the doc type, the css, the html, all with no errors. PLEASE HELP

 

[johnwm]

If you really can't change to a proper layout, and need to stick with table layout, then just use the tools we have discussed.

On the FF developer toolbar try Outline|Tables|table cells. Then select Information|Display Element Information. You can then see all the spurious table cells that you have put in, and by using the information panel you can identify where they are in the code and the changes you need to make. Under the Miscellaneous tab you can select Edit HTML and see the effects of the changes immediately.

If you can't understand what the code you have written does then go back and check the w3schools reference I gave you earlier.

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[LPent]

I am guessing you mean the black gaps above the text area and the picture of the funny computer?
As far as I can tell it is because you are mixing a table layout with a css layout, and they bite. Nesting so many elements inside each other it is difficult to pinpoint the exact cause without dissecting the site.
I agree with johnwm...try to redesign the site using NO tables at all. It will probably cost you less time then trying to find the cause of the gaps.

I don't know how pressed you are for time, at the moment I am finishing off a project, but next week I have plenty of time to help you in-depth if you want.

 

[LPent]

Also, read this, maybe it helps:

http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps