XHTML doctype problem on netscape

Forum Moderators: open

Message Too Old, No Replies

XHTML doctype problem on netscape

AggieEmmanuel

5:46 pm on May 27, 2003 (gmt 0)

I have a problem and I am hoping someone here can help me solve it. I just learned of XHTML and so I decided to create an intranet site using xhtml transitional. I know since its intranet that it doesn't matter but I am trying to learn and I want everything to work. My website is fine on IE 6 but on netscape 6.2 or 7 my template has a little gap in it that messes up the design. Every time i remove the doctype the page displays well on netscape but when the doctype is there it messes up and it doesn't matter what doctype i put. I am not too familar with the terms so i will give a quick example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

the above doctype is what i used and all my pages are valid but my template is not displaying properly on netscape but its fine on IE.

Any suggestions will be greatly appreciated

korkus2000

7:36 pm on May 27, 2003 (gmt 0)

Welcome to WebmasterWorld AggieEmmanuel,

I have noticed this also. I never found a fix. Netscape 6 and above seems to render differently if you use a doc type. I chalked it up to just an implementation bug in netscape. If someone knows a fix or the cause I would like to here it.

pageoneresults

7:46 pm on May 27, 2003 (gmt 0)

Just for the heck of it, try adding this to your body rule if you are using external style sheets...

body{
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
}

I've also found the same problem when using HTML 4.01 Transitional. The above code fixed the problems.

AggieEmmanuel

10:01 pm on May 27, 2003 (gmt 0)

Pageoneresults

I tried your suggestion and it didn't fix it...all it did was make the template align left but the template still has a gap in it...

My main concern is if I remove the doctype then the page wouldn't validate... Is there a way around that?

grahamstewart

10:20 pm on May 27, 2003 (gmt 0)

Is the gap a space character?

These often sneak into documents in unexpected places and cause small gaps. Standards compliant mode is more likely to render them than 'quirks' mode.

e.g.


<img src="pic.gif">
<img src="pic2.gif">

actually creates pic.gif, followed by a space, followed by pic2.gif.

To avoid this you must avoid using whitespace where it is not intended to appear. e.g.


<img src="pic.gif"><img src="pic2.gif">

would render the two pics next to each other with no space.

universalis

12:44 pm on May 28, 2003 (gmt 0)

I have noticed this also. I never found a fix. Netscape 6 and above seems to render differently if you use a doc type. I chalked it up to just an implementation bug in netscape. If someone knows a fix or the cause I would like to here it.

It is not a bug - Mozilla / Netscape 6+ does

DOCTYPE

sniffing to adapt its rendering mode to whether the page is "tag soup" or standards-compliant HTML/XHTML. Try these links:

[mozilla.org...]
[mozilla.org...]
[mozilla.org...]

The problem described in the original query will certainly be due to the change in rendering mode when you add a valid

DOCTYPE

AggieEmmanuel

5:54 pm on May 28, 2003 (gmt 0)

Here is one of the pages I created...just copied from the doctype to the template table...this is for an intranet site so i can't really put a working link on. If u see my error please let me know it will be appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>assignments</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Title" content="University of Houston Libraries" />
<meta name="Description" content="assignments" />
<meta name="Keywords" content=" houston, libraries, library, university, information services, library instructions,information literacy" />
<meta name="Author" content="University of Houston Libraries" />

</head>
<body bgcolor="#FFFFFF" text="#000000" >
<table width="643" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="left" height="80">
<p><img src="http://lib-04.lib.uh.edu/lib/INFOSERV/libinstruc/images/layoutdesign_01.jpg" width="641" height="80" border="0" usemap="#layout_design"alt="template"/></p>
</td>
</tr>
<tr>
<td valign="top" align="left">
<table width="643" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top" width="136"><img src="http://lib-04.lib.uh.edu/lib/INFOSERV/libinstruc/images/website-template_02.jpg" width="112" height="641" border="0" usemap="#template" alt="template" /></td>
<td align="left" valign="top" width="507">
<table width="508" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" height="18"> </td>
</tr>
<tr>
<td valign="top" height="1083">

g1smd

6:17 pm on May 28, 2003 (gmt 0)

Instead of:

<td>
some stuff
</td>

you should do:

<td>some stuff</td>

rjohara

6:19 pm on May 28, 2003 (gmt 0)

It's hard to know where the exact problem might lie (and WebmasterWorld doesn't allow people to post URLs of test pages in general), but it does look as though there are quite a few stray spaces and missing spaces scattered through the code. The first IMG element needs a space before the tag close '/>' - there's an extra space at the end of the BODY tag, etc. I'd go through and clean all that up by hand and then see if the problem persists. I doubt it's a problem with the DOCTYPE declaration per se, but rather with the way the DOCTYPE declaration causes the browser to read the page (very strictly).

pageoneresults

8:59 pm on May 28, 2003 (gmt 0)

<td valign="top" align="left" height="80">
<p><img src="http://lib-04.lib.uh.edu/lib/INFOSERV/libinstruc/images/layoutdesign_01.jpg" width="641" height="80" border="0" usemap="#layout_design"alt="template"/></p>
</td>

Try dropping the <p> tag in that first <td>. You don't need it.

g1smd brings up a good point too, hanging </td> or </p> tags will cause spacing issues.

AggieEmmanuel

9:26 pm on May 28, 2003 (gmt 0)

g1smd

thanks for your pointer it reduced the size of the space. Now the gap is little but I don't know what's causing that...

pageoneresults
thanks for your pointer as well I have taken out the extra <p></p> tag...

Is my use of the <tr> and <table> tag correct or do I need to change something there? please let me know of errors you spot...I have learned more here in two days than I learned taking college classes...

thank you all for taking the time to help me out

AggieEmmanuel

9:44 pm on May 28, 2003 (gmt 0)

a quick question
what does the <object> tag do?

for example I made some changes and was validating my page and it gave me this error:

Line 45, column 6: document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
<p><b>LENGTH:</b>one hour</p>

I noticed when I put the <object> tag in place of the <p> tag it is correct but according to my book the <object> tag is for inserting images or alternative text for browsers that don't support your code... can someone please clarify that for me..

keyplyr

2:34 am on May 29, 2003 (gmt 0)

Is my use of the <tr> and <table> tag correct or do I need to change something there?

try adding width attributes to all your <td> tags

pageoneresults

2:44 am on May 29, 2003 (gmt 0)

Hmmm, keyplyr just brought something else to my attention.

<table [b]width="643"[/b] border="0" cellpadding="0" cellspacing="0"> 
<tr> 
<td valign="top" align="left" height="80"><img src="http://lib-04.lib.uh.edu/lib/INFOSERV/libinstruc/images/layoutdesign_01.jpg" [b]width="641"[/b] height="80" border="0" usemap="#layout_design"alt="template"/></td>

Your table is set to a width of 643. Your image in that first <td> is 641. It is aligned left so there is a 2px gap at the right of the image. Is this what you are referring to?

AggieEmmanuel

5:31 pm on May 29, 2003 (gmt 0)

no the 2px gap on the right is not my problem...in fact the 2px error didn't affect my template, the gap is now like a 1px gap between the joining point of the 2 images. Its like the second image is not touching the first by a little gap. I corrected the width but it didn't fix the problem

bluecorr

5:42 pm on May 29, 2003 (gmt 0)

Try adding a img { display: block; } to your external style sheet or apply it to the images that cause the problem. It worked for me several times (until I began using the float property for certain images...).

AggieEmmanuel

6:13 pm on May 29, 2003 (gmt 0)

And we found a winner!

Thanks bluecorr
your solution solved the problem...

Thank you all for your help...I have learned so much in such a small amount of time

AggieEmmanuel

6:17 pm on May 29, 2003 (gmt 0)

bluecorr
can u please explain to me what the code means and a little of why it works so I can know the nature of the problem...

thanks

bluecorr

6:45 pm on May 29, 2003 (gmt 0)

Frankly, I don't know. I just tried it once by chance and saw it fixed the problem. Here's what I found as a definition for the block property:

"The element will be displayed as a block-level element, with a line break before and after the element"

I see there's another topic on this in CSS [webmasterworld.com...]

AggieEmmanuel

10:17 pm on May 29, 2003 (gmt 0)

thanks for the link

g1smd

12:31 am on May 30, 2003 (gmt 0)

Line 45, column 6: document type does not allow element "p" here;

Post the three lines or so around this line. You probably have something nested incorrectly; usually a block-level element inside an inline element.