different results in different browsers

  • (2 Pages)
  • +
  • 1
  • 2

23 Replies - 1040 Views - Last Post: 21 April 2013 - 10:35 AM

#1 qim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 17-April 13

different results in different browsers

Posted 20 April 2013 - 07:40 AM

I am new to this, and am surprised that one of my pages looks different in different browser. On my own computer one page looks fine in Firefoz, but an image link that I took off the border perents it in IE. Two submit boxes that are centered in Firefox are slightly misaligned in IE. However if I look at the same page in a small computer with Google Chrome the page is all over the place.

Is this normal, or is it bad code on my part?

I would be grateful for an explanation of how these thinsg work as I am very new to this business.

Thank you

qim

Is This A Good Question/Topic? 0
  • +

Replies To: different results in different browsers

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3327
  • View blog
  • Posts: 11,254
  • Joined: 12-December 12

Re: different results in different browsers

Posted 20 April 2013 - 08:25 AM

Welcome to the world of Web Development!

Ensure that your pages all have valid DOCTYPE declarations. This will prevent, in particular, IE from dropping into quirks mode.

I recommend that you validate your HTML and CSS; there are links in my signature. If there are errors in either of these then the page is less likely to behave well, or consistently.

It is advisable to develop for either Google Chrome or Firefox, frequently test in both of these browsers, then test in IE and others. If you are using more recent HTML and CSS(3) features, then you'll need to check their support in the different browsers (and different versions of these) as well. caniuse is a very useful site.

Of course, you'll need to test in different screen resolutions as well. You could investigate responsive web design in this regard, particularly if you want your site to work on tablets or mobiles.

There are a number of other ways to ensure that a site will work cross-browser. You might want to do a little investigating.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3327
  • View blog
  • Posts: 11,254
  • Joined: 12-December 12

Re: different results in different browsers

Posted 20 April 2013 - 08:33 AM

some tips here
Was This Post Helpful? 0
  • +
  • -

#4 qim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 17-April 13

Re: different results in different browsers

Posted 20 April 2013 - 08:44 AM

Well, that may explain many things because I have deprecated stuff in it, like <center> which I have been working on today, to no avail. can you help there? I have some images accessed directly from an internet url and tried to put <IMG class="displayed" in fron of it but it did not work. I guess I could do something in the css script but it serves various pages and these are all different.

Thank you for your help

qim
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3327
  • View blog
  • Posts: 11,254
  • Joined: 12-December 12

Re: different results in different browsers

Posted 20 April 2013 - 08:56 AM

Yes, don't use the center tag :helpsmilie:/> , use css to centre elements.

I don't know what class="displayed" is supposed to do, other than giving the image a class-name(?).

If you came across the center-tag in a tutorial then I suggest that you find a more up-to-date tutorial. Capitalizing tags (IMG) is also an indication of a very old tutorial.

This post has been edited by Dormilich: 20 April 2013 - 01:59 PM

Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3515
  • View blog
  • Posts: 10,142
  • Joined: 08-June 10

Re: different results in different browsers

Posted 20 April 2013 - 02:03 PM

View Postandrewsw, on 20 April 2013 - 05:56 PM, said:

Capitalizing tags (IMG) is also an indication of a very old tutorial.

it depends. HTML 4 does use capitalised tags as standard (but ignores casing anyway (you see that when using Element.tagName)). XHTML errors out on non-lowercase tags and HTML5 afaik also ignores the case.
Was This Post Helpful? 0
  • +
  • -

#7 qim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 17-April 13

Re: different results in different browsers

Posted 20 April 2013 - 02:07 PM

I've been looking at the errors in the validation and have a few on the same line to do with

<style="white-space:nowrap"></style>

I have no idea what it is, why it is there, and why it opens and closes without apparently doing anything. On the other hand, I tried to delte the line and instead of 7 errors, I got 16!!!

Could you help, please?

Thank you
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3515
  • View blog
  • Posts: 10,142
  • Joined: 08-June 10

Re: different results in different browsers

Posted 20 April 2013 - 02:11 PM

<style> is a separate HTML tag containing CSS code. the style attribute (<tag style="{some CSS here}">) is, well, an attribute assigning CSS to its element. an element of the name <style=> (or similar) simply does not exist.
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3327
  • View blog
  • Posts: 11,254
  • Joined: 12-December 12

Re: different results in different browsers

Posted 20 April 2013 - 02:16 PM

View PostDormilich, on 20 April 2013 - 09:03 PM, said:

View Postandrewsw, on 20 April 2013 - 05:56 PM, said:

Capitalizing tags (IMG) is also an indication of a very old tutorial.

it depends. HTML 4 does use capitalised tags as standard (but ignores casing anyway (you see that when using Element.tagName)). XHTML errors out on non-lowercase tags and HTML5 afaik also ignores the case.

Yes, quite agree, and HTML5 is case-insensitive, but I do see it as a good indicator of an old tutorial, as the common, modern, practice is to use lowercase.

This post has been edited by andrewsw: 20 April 2013 - 02:19 PM

Was This Post Helpful? 0
  • +
  • -

#10 qim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 17-April 13

Re: different results in different browsers

Posted 20 April 2013 - 02:21 PM

View PostDormilich, on 20 April 2013 - 02:11 PM, said:

<style> is a separate HTML tag containing CSS code. the style attribute (<tag style="{some CSS here}">) is, well, an attribute assigning CSS to its element. an element of the name <style=> (or similar) simply does not exist.



I tried taking the line out altogether as it opens and closes and does not seem to do any work, but then I get even moreror: it goes from7 to 16.
Was This Post Helpful? 0
  • +
  • -

#11 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3327
  • View blog
  • Posts: 11,254
  • Joined: 12-December 12

Re: different results in different browsers

Posted 20 April 2013 - 02:22 PM

What are some of these errors and what lines do they refer to?

This post has been edited by Dormilich: 20 April 2013 - 02:25 PM

Was This Post Helpful? 0
  • +
  • -

#12 qim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 17-April 13

Re: different results in different browsers

Posted 20 April 2013 - 02:26 PM

I tried taking the line out altogether as it opens and closes and does not seem to do any work, but then I get even moreror: it goes from7 to 16.
[/quote]
What are some of these errors and what lines do they refer to?
[/quote]


the line that throws 3 errors is <style="white-space:nowrap"></style>


anf the rrors are

Quote

Line 63, Column 31: A slash was not immediately followed by >. <style="white-space:nowrap"</style>


Line 63, Column 36: Element name style="white-space:nowrap"< cannot be represented as XML 1.0. <style="white-space:nowrap"</style>


Line 63, Column 36: Element style="white-space:nowrap"< not allowed as child of element form in this context. (Suppressing further errors from this subtree.)

Was This Post Helpful? 0
  • +
  • -

#13 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3327
  • View blog
  • Posts: 11,254
  • Joined: 12-December 12

Re: different results in different browsers

Posted 20 April 2013 - 02:30 PM

Yes, as Dormilich advised, there is no tag named style; it is, however, an attribute which is used like this:

<div style="white-space:nowrap">Some text</div>

Was This Post Helpful? 0
  • +
  • -

#14 qim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 17-April 13

Re: different results in different browsers

Posted 20 April 2013 - 02:32 PM

Hi thanks

I had some "help" writing this page and don't even have an idea of what this white-space:no wrap is doing there.When you say <div style... does that mean that it has to refer to a div in the css script or can I just change the existing code to what you wrote?


Sorry, but I am totally lost... as usual!


I don't see what it is doing as there is no text to put in. Look:

	<div class="holdBlock">			
			<div class="fieldBlock">
			<label for='password'>Password:</label><br>
			<input type='text' name='password'>
			</div>
			<div class="fieldBlock">
			<label for='repeat-password'>Repeat password:</label><br>
			<input type='text' name='repeat-password'>	
			</div>
		</div>
		<br/><br/><br/>	
 
 <style="white-space:nowrap"> </style>
			<div class="headies">
				<h2>Agency details</h2>
			</div>

		<div class="holdBlock">
			<div class="fieldBlock">
			<label for='agency-name'>Agency name:</label><br/>
			<input type='text' name='agency-name'>
			</div>
			<div class="fieldBlock">
			<label for='iata-number'>IATA number:</label><br/>
			<input type='number' name='iata-number'>	
			</div>


This post has been edited by qim: 20 April 2013 - 02:38 PM

Was This Post Helpful? 0
  • +
  • -

#15 qim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 17-April 13

Re: different results in different browsers

Posted 20 April 2013 - 02:45 PM

This is the full code (I've taken out the 200 countries..) and sometime tonight added a </div> at the end which maybe one too many but has not made a difference to the page.

Any help trying to get rid of these errors would be much appreciated.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FORM</title>


 <link rel="stylesheet" href="register.css">



</head>
<body>
	
	

	<div class="page">
		<div class="header"> 
			<img title="Lisboa" alt="Lisboa" src="images/Lisboa.jpg"/>
			<h1>Registration Page</h1>
		</div>
		<div class="sidebar">
						
<a href="/index.html"><img src="images/logocream.png" title="Home" alt="Home button" width="190"/></a>	
<br/><br/><br/><br/><br/><br/><br/>	
							
	<center><a href="http://tc.tradetracker.net/?c=10500&amp;m=383088&amp;a=143420&amp;r=&amp;u=" target="_blank"><img src="http://ti.tradetracker.net/?c=10500&amp;m=383088&amp;a=143420&amp;r=&amp;t=html" width="120" height="240" border="0" alt="Gresham Hotels" /></a></center>
			

		<!--end .sidebar--></div>
		
		<div class="sidebar2">
		<br/><br/><br/>
			<center><a href="http://tc.tradetracker.net/?c=5693&amp;m=350073&amp;a=143420&amp;r=&amp;u=" target="_blank"><img src="http://ti.tradetracker.net/?c=5693&amp;m=350073&amp;a=143420&amp;r=&amp;t=html" width="160" height="600" border="0" alt="Confortel Hotels" /></a></center>
					<!--end .sidebar2--></div>
		
			
			<div class="maincontent">
		<form method="post" action="./database.php">
		<div class="holdBlock">
			<div class="fieldBlock">
			<label for='username'>Username:</label>
			<input type='text' name='username'>
			</div>
			<div class="fieldBlock">
			<label for='repeat-username'>Repeat username:</label>
			<input type='text' name='repeat-username'>	
			</div>
		</div><br><br><br><br>
		<div class="holdBlock">			
			<div class="fieldBlock">
			<label for='password'>Password:</label><br>
			<input type='text' name='password'>
			</div>
			<div class="fieldBlock">
			<label for='repeat-password'>Repeat password:</label><br>
			<input type='text' name='repeat-password'>	
			</div>
		</div>
		<br/><br/><br/>	
 
 <style="white-space:nowrap"> </style>
			<div class="headies">
				<h2>Agency details</h2>
			</div>

		<div class="holdBlock">
			<div class="fieldBlock">
			<label for='agency-name'>Agency name:</label><br/>
			<input type='text' name='agency-name'>
			</div>
			<div class="fieldBlock">
			<label for='iata-number'>IATA number:</label><br/>
			<input type='number' name='iata-number'>	
			</div>
		</div>
	
		<div class="holdBlock">
			<div class="fieldBlock">
			<label for='city'>City:</label><br/>
			<input type='text' name='city'>
			</div>
			<div class="fieldBlock" >
			
			<label for='Country'>Country</label><br>
			<select name='country'>
				<option value="">Please, choose...</option>
				<option value="Afganistan">Afghanistan</option>
				 <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="American Samoa">American Samoa</option>
    <option value="Andorra">Andorra</option>
       <option value="Yemen">Yemen</option>
    <option value="Zaire">Zaire</option>
    <option value="Zambia">Zambia</option>
    <option value="Zimbabwe">Zimbabwe</option>


			</select>
			</div>
		</div>

			<div style="padding-left:205px;padding-top:130px;" >
			<label>Website:</label><br>
			<input type='text' name='website'/>
			</div>

		<div class="holdBlock">
			<div class="fieldBlock">
			<label for='email'>Email:</label><br/>
			<input type='text' name='email'/>
			</div>
			<div class="fieldBlock">
			<label for='repeat-email'>Repeat email:</label><br/>
			<input type='text' name='repeat-email'/>
			</div>
		</div>
	<br/><br/><br/>	
			<div class="headies">
				<h2>Contact details</h2>
			</div>
		<div class="holdBlock">
			<div class="fieldBlock">
			<label for='person-responsible'>Person responsible:</label><br/>
			<input type='text' name='person-responsible'/>
			</div>
			<div class="fieldBlock">
			<label for='position-in-agency'>Position in agency:</label><br/>
			<input type='text' name='position-in-agency'/>
			</div>
		</div>
		
		<div class="holdBlock">
			<div class="fieldBlock">
			<label for='telephone'>Telephone:</label><br/>
			<input type='number' name='telephone'/>
			</div>
			<div class="fieldBlock">
			<label for='fax'>Fax:</label><br/>
			<input type='number' name='fax'/>
			</div>
		</div>
		

<br/><br/><br/><br/><br/><br/><br/>
		<div class="headies">
			<input type="submit" value="Submit" name="submit"><input type="reset" value="Reset">
		</div>
		<br>
		</form>
	</div>
			

		<footer>
			<ul>
							</ul>
		</footer>
</div>
</div>
</body>
</html>


Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2