Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Display issue in Firefox and Netscape Navigator

Status
Not open for further replies.

jwhite68

IS-IT--Management
Jun 14, 2007
77
BG
The following code segment displays perfectly in Internet Explorer:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>test</TITLE>

<!--[if IE]>
<![endif]-->
<!--[if lt IE 7]>
<![endif]-->
</HEAD>
<BODY>
<center>
<table border="0" cellspacing="0" cellpadding="0" width="874px;>
  <tr><td>
		<br />
		<div class="offtitle" style="text-align:center !important">
			<span class="title2">
				Apartment (Off-plan) - This is the new prop with pdf			</span>
		</div>
	</td></tr>
	<tr>
    <td>
			<div class="offer0">
				<img src="developments/image.jpg" alt="This is the new prop with pdf" width="400" class="bigimg" />
				<div class="spacer">&nbsp;</div>
				<div class="allbuttons">
				<a href=new-property-18-add-5.html><img src="elements/save.gif" class="button" style="margin-top:15px" alt="" /></a><br /><a href="edit.php?id=18&amp;mode=newp&redir=off"><img src="elements/editoffer.gif" alt="" class="button" /></a><br /><a href=print-new-property-18.html><img src="elements/printoffer.gif" class="button" alt="" /></a>
							<br /><a href="development_plans/brochure18.pdf" target="_blank"><img src="elements/view_brochure.gif" class="button" alt="View commercial plan" /></a><br /><br /><a href="[URL unfurl="true"]http://www.abc.com/test/sendtofriend.php?objid=18&mode=newp"><img[/URL] src="[URL unfurl="true"]http://www.abc.com/test/elements/sendtoafriend.gif"[/URL] class="button" alt="" /></a><br /><a href="[URL unfurl="true"]http://www.abc.com/test/sendmail.php?objid=18&mode=newp&to=5"><img[/URL] src="elements/sendmessage.gif" class="button" alt="" /></a><br /><a href="javascript:popUp('[URL unfurl="true"]http://www.abc.com/test/seller.php?id=5&redir=sell')"><img[/URL] src="elements/agdetails.gif" class="button" alt="" /></a><br /><br/><img src="comlogos/logo5.gif" width="125" class="button" /><br /><br /><strong class="m15a">Arrabu</strong>					<br /><br />
					<strong class="m15a">SALES PRICE RANGE FROM: &euro;100000 TO &euro;200000</strong><br />					<strong class="m15a">PROPERTY IS FOR SALE</strong><br />				
					<strong class="m15a">REF. ID: BM-NEWP-00000018</strong>
									</div>
			</div>
		</td>
	</tr>
</table>
</center>
</BODY>
</HTML>

The t874 css code is in a file main.css with these settings:
Code:
table.t874{
	width: 874px;
	/*margin: 0px 63px 0px 63px !important;*/
}
table.t874 td{
	border: 0px;
	padding: 0px;
	line-height: 16px;
	font-size: 11px !important;
}
table.t874r{
	border-color:#000000;
	border-collapse:collapse;
	/*margin: 0px 63px 0px 63px !important;*/
}
table.t874r td{
	border-width:thin;
	border-style:groove;
	padding: 0px;
	line-height: 16px;
	font-size: 11px !important;
}
table.t874r th {
	border-width: 1px;
	padding: 1px;
	border-style: inset;
	border-color: black;
	background-color: #006633;
}

And the 'allbuttons' class simply sets the width in the div to 350px.

The problem is the div section with class=allbuttons.
Under IE, this section displays to the right hand side of the main image. So there are a series of buttons and text below them, to the right hand side of the image.

When displayed in Firefox/Netscape it displays this div section below the image, instead of to the right.
Does anyone have any advice?
 
Validate your code!

The first error I get is that there is no charset being defined. Once I fixed that, it started showing the actual errors.

Stuff like:
Code:
<table border="0" cellspacing="0" cellpadding="0" width="874[s]px;[/s][!]"[/!]>

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Sorry, that was my mistake.
It should say class="t874" there, and not width="874px.
I was playing with the html and didnt change it back before posting.
 
This is the actual code:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>test</TITLE>
<link href="main.css" rel="stylesheet" type="text/css">
<link href="ddmenu.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<![endif]-->
<!--[if lt IE 7]>
<![endif]-->
</HEAD>
<BODY>
<center>
<table border="0" cellspacing="0" cellpadding="0" class="t874">
  <tr><td>
		<br />
		<div class="offtitle" style="text-align:center !important">
			<span class="title2">
				Apartment (Off-plan) - This is the new prop with pdf			</span>
		</div>
	</td></tr>
	<tr>
    <td>
			<div class="offer0">
				<img src="developments/image.jpg" alt="This is the new prop with pdf" width="400" class="bigimg" />
				<div class="spacer">&nbsp;</div>
				<div class="allbuttons">
				<a href=new-property-18-add-5.html><img src="elements/save.gif" class="button" style="margin-top:15px" alt="" /></a><br /><a href="edit.php?id=18&amp;mode=newp&redir=off"><img src="elements/editoffer.gif" alt="" class="button" /></a><br /><a href=print-new-property-18.html><img src="elements/printoffer.gif" class="button" alt="" /></a>
							<br /><a href="development_plans/brochure18.pdf" target="_blank"><img src="elements/view_brochure.gif" class="button" alt="View commercial plan" /></a><br /><br /><a href="[URL unfurl="true"]http://www.abc.com/test/sendtofriend.php?objid=18&mode=newp"><img[/URL] src="[URL unfurl="true"]http://www.abc.com/test/elements/sendtoafriend.gif"[/URL] class="button" alt="" /></a><br /><a href="[URL unfurl="true"]http://www.abc.com/test/sendmail.php?objid=18&mode=newp&to=5"><img[/URL] src="elements/sendmessage.gif" class="button" alt="" /></a><br /><a href="javascript:popUp('[URL unfurl="true"]http://www.abc.com/test/seller.php?id=5&redir=sell')"><img[/URL] src="elements/agdetails.gif" class="button" alt="" /></a><br /><br/><img src="comlogos/logo5.gif" width="125" class="button" /><br /><br /><strong class="m15a">Arrabu</strong>					<br /><br />
					<strong class="m15a">SALES PRICE RANGE FROM: &euro;100000 TO &euro;200000</strong><br />					<strong class="m15a">PROPERTY IS FOR SALE</strong><br />				
					<strong class="m15a">REF. ID: BM-NEWP-00000018</strong>
									</div>
			</div>
		</td>
	</tr>
</table>
</center>
</BODY>
</HTML>

Any ideas anyone? Its driving me nuts!
 
Any ideas anyone?
Yes... as previously stated... validate your code. No point going any further until you've taken this step.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
There are only 5 warnings, and nothing that would cause this problem, from the validation point of view.
 
What happens if you remove the 'spacer' div immediately before the 'allbuttons' div?

Note: you cannot assume you are comparing apples with apples across IE & Firefox unless you do have a complete DOCTYPE - they will display differently. I strongly suggest you fix this.

Dan


Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
There are plenty of cases where people have convinced themselves that "it can't possibly be a problem" (the recent case of "state of the art" US fighter jets "powering down" as they crossed the international date line is a perfect example).

You obviously haven't had the experiences that I have had attempting to debug other people's problems - only to find out that it's their non-validating code that is causing the problem in the first place (and if that were fixed, the problem goes away). Rather than wasting time debugging such problems, I insist the code passes validation initially.

If this makes me seem unhelpful, so be it.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
I changed the DOCTYPE to :

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

I'm no expert on this, so if someone has a better idea.

Removing the spacer div made no difference.
 
Show the css for:
allbuttons
spacer
offer0
bigimage

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Now validated the code. The revised code is:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL] 
<HTML>
<HEAD>
<TITLE>test</TITLE>
<link href="main.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<![endif]-->
<!--[if lt IE 7]>
<![endif]-->
</HEAD>
<BODY>
<center>
<table border="0" cellspacing="0" cellpadding="0" class="t874">
  <tr><td>
		<br />
		<div class="offtitle" style="text-align:center !important">

			<span class="title2">
				Apartment (Off-plan) - This is the new prop with pdf			</span>
		</div>
	</td></tr>
	<tr>
    <td>
			<div class="offer0">
				<img src="developments/image.jpg" alt="This is the new prop with pdf" width="400" class="bigimg" />

				<div class="allbuttons">
				<a href=new-property-18-add-5.html><img src="elements/save.gif" class="button" style="margin-top:15px" alt="" /></a><br /><a href="edit.php?id=18&amp;mode=newp;redir=off"><img src="elements/editoffer.gif" alt="" class="button" /></a><br /><a href=print-new-property-18.html><img src="elements/printoffer.gif" class="button" alt="" /></a>
							<br /><a href="development_plans/brochure18.pdf" target="_blank"><img src="elements/view_brochure.gif" class="button" alt="View commercial plan" /></a><br /><br /><a href="[URL unfurl="true"]http://www.abc.com/test/sendtofriend.php?objid=18&amp;mode=newp"><img[/URL] src="[URL unfurl="true"]http://www.abc.com/test/elements/sendtoafriend.gif"[/URL] class="button" alt="" /></a><br /><a href="[URL unfurl="true"]http://www.abc.com/test/sendmail.php?objid=18&amp;mode=newp;to=5"><img[/URL] src="elements/sendmessage.gif" class="button" alt="" /></a><br /><a href="javascript:popUp('[URL unfurl="true"]http://www.abc.com/test/seller.php?id=5&amp;redir=sell')"><img[/URL] src="elements/agdetails.gif" class="button" alt="" /></a><br /><br/><img src="comlogos/logo5.gif" width="125" class="button" /><br /><br /><strong class="m15a">Arrabu</strong>					<br /><br />
					<strong class="m15a">SALES PRICE RANGE FROM: &euro;100000 TO &euro;200000</strong><br />					<strong class="m15a">PROPERTY IS FOR SALE</strong><br />				
					<strong class="m15a">REF. ID: BM-NEWP-00000018</strong>

									</div>
			</div>
		</td>
	</tr>
</table>
</center>
</BODY>
</HTML>

Other css:

Allbuttons
Code:
div.allbuttons{
	width: 350px;
}

Spacer
Code:
div.spacer{
	height: 300px;
	width: 70px;
	float: left;
}

Offer0
Code:
div.offer0{
	width: 874px;
	border: 1px solid #DDDDDD;
	margin-top: 10px;
	background: #F0F9ED !important;
	display: table !important;
	padding-bottom: 15px;
}

div.offer0 p{margin:15px;}

div.offtitle{
	width: 874px;
	height: 24px;
	background: url(elements/offertitle.gif) top left no-repeat;
	margin-top: 10px;
}

bigimg
Code:
img.bigimg{
	width: 400px;
	margin: 15px 15px 15px 15px !important;
	border: 1px solid #303030;
	float: left;
}
 
What size are your button images? Are they all the same size? Why aren't you specifying width & height attributes on them? This is all stuff we might need to know to help debug this. A URL to the real page would be far easier, you know.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
All button images are 168*19 pixels. So yes, they are all the same size.

I'm unfortunately not able to provide the URL currently for various security issues.
 
My HTML Validator (TIDY) shows no errors whatsoever. Possibly you are using a different validator?
 
Setting:

Code:
<div style="width=350; float: left; width:350px;">

which replaces the class for allbuttons, actually gets it working great in Netscape and Firefox.

Only problem now, is in IE, the text below the buttons appears to be aligned centre, instead of being left aligned with the buttons.
 
My mistake. Its working in Firefox. Not in Netscape Navigator 9 though. Still shows below image.

Bloody browsers. Why cant they be consistent!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top