Jump to content

Another tipoc about incorrect display on different browsers other than IE

hystory

By hystory
in HTML/XHTML

Recommended Posts

hystory Newbie

hystory

Posted
Posted

First of all i'm sorry about posting other topic about this anoying bug.I'm absolutly new to web programming so i need some help, cause i'm in a hurry.I'm using tables... i know...old school!, but it was the first techique that i stick up with.So i'm having this spacing between elements display problem.Why?(still managing to get this this online, and i dont know how to post images :x)help me pls

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

IE may be displaying your document as you wish, but that is probably because you have have learned to adjust for mistakes in IE's rendering engine. The solution will require using standards-compliant HTML with a few different adjustments to accommodate IE. This is the only frame of mind that leads to consistent results.You can paste the text of your document in the same box you type messages in. It will look best if you paste it between code tags, like these:[code]paste your code here[/code]It will look like this:

paste your code here

Link to comment
Share on other sites
hystory Newbie

hystory

Posted
  • Author
Posted
IE may be displaying your document as you wish, but that is probably because you have have learned to adjust for mistakes in IE's rendering engine. The solution will require using standards-compliant HTML with a few different adjustments to accommodate IE. This is the only frame of mind that leads to consistent results.You can paste the text of your document in the same box you type messages in. It will look best if you paste it between code tags, like these:[code]paste your code here[/code]It will look like this:
paste your code here

 <!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>index.html</title><script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="css.css"/></head><body><table width="700" border="0" align="center" cellpadding="0" cellspacing="0">  <!-- LOGOSPACE -->    <tr>	<td height="100" colspan="4"><img src="IMAGES/LOGOS/LOGO.png" alt="LOGO" width="700" height="80" /> </td>  </tr><!-- LOGOSPACE END -->   <!-- SLIDESHOW SPACE -->    <tr>	<td colspan="4"><p><script type="text/javascript">AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','700','height','280','src','SLIDESHOW FINALISSIMO HOME','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','SLIDESHOW FINALISSIMO HOME' ); //end AC code	  </script>		<noscript>		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="700" height="280">		  <param name="movie" value="SLIDESHOW FINALISSIMO HOME.swf" />		  <param name="quality" value="high" />		  <embed src="SLIDESHOW FINALISSIMO HOME.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="700" height="280"></embed>		</object>		</noscript>	  </p>	</td>  <!-- SLIDESHOW SPACE END --><!-- HEADER SPACE --></tr>  <tr>	<td height="60" colspan="4"><p class="style1"><a href="index.html">Home</a> <span class="style2">|</span> <a href="programs.html">Programs</a> <span class="style2">|</span> <a href="admissions.html">Admissions</a> <span class="style2">|</span> <a href="family.html">Family</a> <span class="style2">|</span> <a href="travelling.html">Travel</a> <span class="style2">|</span> <a href="index.html">Contacts</a> </p></td>  </tr><!-- HEADER SPACE END -->  <!-- HEADER2 SPACE -->     <tr>	<td height="0" colspan="2"> </td>  </tr><!-- TEXT SPACE -->  <tr>	<td width="600" height="0">	<br/>	<img src="IMAGES/HEADERS/YOU_CAN.png" alt="you_can" />	<p class="style3">Odessa Recovery Group is an internationally recognised, private, affordable drug and alcohol rehabilitation centre, are EATA members (European Association for the Treatment of Addiction) and have proven results monitored by EMCDDA (European Monitoring Centre for Drugs and Drug Addiction). This ensures that our clients receive the highest quality treatment and care enabling them to recover with safety and confidence.<br/><br/>Our unique abstinence based program applies a variety of key therapies providing structure suited to individuals particular requirements using a whole person approach to treatment and ongoing recovery. Individually tailored rehabilitation ensures a seamless solution from "asking for help" and treatment of the illness, to structured living and a return to society.<br/><br/>Many of our clients come from across Europe the US and beyond. Our facilities are ideally situated to provide a feeling of calm discreet security on Portugal's Silver Coast, just 21/4 hours from local UK airports. The fantastic climate gives a soothing sense of well being, allowing the necessary healing changes for recovery to take place.<br/><br/>Our quality recovery centres can offer a proven treatment program to suit each clients specific needs and are superbly located in secluded forest locations close to the tranquil Obidos lagoon, unspoilt beaches and world class golf courses and combine to create an environment ideally suited for developing new life interests essential for sustained recovery.<br/>We are here to help people who's lives are controlled by alcohol and drugs - including prescription medication and other compulsive behaviours. We help make the changes necessary for lasting recovery to be possible. In addition to our drug and alcohol rehabilitation programs, we offer Intervention Referrals, Sober Living in luxury modernist residences, Family Programs (including accommodation and activities) Revival Retreats and Teen Programs.<br/><br/>We firmly believe that with our unique, holistic abstinence based program change of improved lifestyle that recovery is possible probably life saving and totally affordable.Please call us now for immediate admissions or further information on our successful programs. We will provide airport pickups (to and from all airports) and can provide "Sober Escorting" on request.<br/><br/>Please call 24 hours for urgent admissions and treatment of the highest caliber.</p></td>	<td width="100"> </td>	<!-- TEXT SPACE END --></tr>	<tr>	<td height="65" colspan="2"><img src="IMAGES/LOGOS/LOGOS.png" alt="logos" width="600" height="40" /></td></tr></table></body></html>

Link to comment
Share on other sites
hystory Newbie

hystory

Posted
  • Author
Posted

there it is :)

 @charset "utf-8";/* CSS Document *//* BACKGROUND */body {	background-color: #FFFFFF;	background-image: url(IMAGES/FUNDO.png);	}/* BACKGROUND END *//* HEADER */.style1 a {	text-decoration: none; 	font-family: Georgia, "Times New Roman", Times, serif; 	font-size: 11px; 	color: #666666; 	word-spacing: 8px;	}	.style1-a a {	text-decoration: none; 	font-family: Georgia, "Times New Roman", Times, serif; 	font-size: 10px; 	color: #666666; 	word-spacing: 8px;	}	/* SLASHES */.style2 {	color: #FFFFFF;	font-size: 9px;	}	.style2-a {	color: #FFFFFF	font-size: 7px;	}	/* SLASHES END *//* HEADER END *//* TEXT */.style3 {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 12px;	line-height: 125%;	color: #000000;	}	.style3-a {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;	line-height: 125%;	color: #006666;	font-weight: 900;	line-height: 140%;	}	.style4 {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 9px;	color: #000000;	line-height: 100%;	}	.style5 {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 12px; 	color: #336666;	font-weight: bold;

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Now please explain the spacing issue. Without the actual images, it may be hard for me to tell. What would be good is if you could post a screenshot of the correct way and a shot of the incorrect way.

Link to comment
Share on other sites
hystory Newbie

hystory

Posted
  • Author
Posted
Now please explain the spacing issue. Without the actual images, it may be hard for me to tell. What would be good is if you could post a screenshot of the correct way and a shot of the incorrect way.
hoe can i post images? :x it's requesting me the url for the image...
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
hoe can i post images? :x it's requesting me the url for the image...
just put in the link to the image, i.e. www.somedomain.com/myimage.jpg
Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted

You can upload them to imageshack.com (I think that's the right URL) and then link to them.As for your spacing issue, try adding a CSS reset to the top of your CSS to see if it makes any changes.

* {   margin: 0px;   padding: 0px;}

Since different browsers apply different default values, this will make sure that all browsers render your elements the same, as far as the CSS box model is concerned.Another thing that could be causing issues is the default display mode of elements. I've had issues in the past with <form>'s adding unwanted line breaks in IE. A form is by default a block element, and for me the fix was to change it to display: inline. Try playing with the display of your troublesome elements to see if you can get them to behave.Also, I noticed you are using a transitional DTD. Consider switching to a strict DTD, as that is the only way to make sure that different browsers render your page as similarly as possible.

Link to comment
Share on other sites
hystory Newbie

hystory

Posted
  • Author
Posted
You can upload them to imageshack.com (I think that's the right URL) and then link to them.As for your spacing issue, try adding a CSS reset to the top of your CSS to see if it makes any changes.
* {   margin: 0px;   padding: 0px;}

Since different browsers apply different default values, this will make sure that all browsers render your elements the same, as far as the CSS box model is concerned.Another thing that could be causing issues is the default display mode of elements. I've had issues in the past with <form>'s adding unwanted line breaks in IE. A form is by default a block element, and for me the fix was to change it to display: inline. Try playing with the display of your troublesome elements to see if you can get them to behave.Also, I noticed you are using a transitional DTD. Consider switching to a strict DTD, as that is the only way to make sure that different browsers render your page as similarly as possible.

this helps with the spacing problem, but is positioning the table to the left.... i want it on the center.is that a way to use this values, and then place the whole table to the middle?thanks!
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

unfortunately, you probably have it the other way around, as far as rendering goes. First, take jkloths advice and switch to a Strict DTD. Then learn the hard truth; that I.E. is mot likely misleading you. In the wonderful world of web development we all live, it is considered best practice to code to a standards compliant browser like FF, then tackle the issues in IE. What you've done is code to IE, and then you're seeing "the mistakes" in other browser, but those browsers are considered better renders and adopters of standards, which are the rules we go by. However, using jkloth's other suggestion of the CSS reset may also take the inconsistencies out.My suggestions:1) go to a strict DTD2) validate your page3) (optional) use the CSS reset selector(for the future...)3) develop in FF (or similar standards compliant browser)4) test in IE and make the tweaks

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted

What scientist says is very good advice. IE is generally the culprit when it comes to rendering issues. It may be a good idea for you in the future to use the CSS reset and a strict DTD straight from the start. And consider learning how to use divs, spans, margin, padding, and float for layout instead of tables.However, for the here and now, I think you can add margin: 0px auto to your table (not any of the td's or tr's but directly to the table) to center it.

Link to comment
Share on other sites
hystory Newbie

hystory

Posted
  • Author
Posted

ok thanks mates!but there's something i'm not getting here (forgive my dumbness):i'm using dreamweaver for the programming, and on the design "tab" of it, everything seems ok like I want, and rendering on IE it appears ok, BUT, like you are saying, it's most likely to be rendering wrong. So... dreamweaver itself is rendering wrong too?...@ jkloth: how can I add margin: 0px auto like you are saying? I got the point that divs are the best way to layout the page, I did already the whole page using tables so i'll not got back.other thing... how can i change to strict DTD?once again thanks a lot for your patience!

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
i'm using dreamweaver for the programming, and on the design "tab" of it, everything seems ok like I want, and rendering on IE it appears ok, BUT, like you are saying, it's most likely to be rendering wrong. So... dreamweaver itself is rendering wrong too?...
Usually yes. It's not a good idea to rely on the design view of WYSIWYG editors like Dreamweaver.
@ jkloth: how can I add margin: 0px auto like you are saying? I got the point that divs are the best way to layout the page, I did already the whole page using tables so i'll not got back.
Give your table an id: <table id='layout'>Then in your CSS add the following declaration:
table#layout {   margin: 0px auto;}

other thing... how can i change to strict DTD?once again thanks a lot for your patience!
Just change the DTD at the top of your document to this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
ok thanks mates!but there's something i'm not getting here (forgive my dumbness):i'm using dreamweaver for the programming, and on the design "tab" of it, everything seems ok like I want, and rendering on IE it appears ok, BUT, like you are saying, it's most likely to be rendering wrong. So... dreamweaver itself is rendering wrong too?...@ jkloth: how can I add margin: 0px auto like you are saying? I got the point that divs are the best way to layout the page, I did already the whole page using tables so i'll not got back.other thing... how can i change to strict DTD?once again thanks a lot for your patience!
Not to dampen your spirits even more, but Dreamweaver is probably even worse of a gauge for rendering. tbh, I would only use it for code editing, and still always trust a browser (preferably FF or something similar) first. To switch DTD, you just need to adjust the beginning of any HTML page, lke for instance the example I have in my signature. You add margin to any CSS declaration like you would anything else: 
.myClass or #myID{  margin: 0px auto;}

note that in the use of centering, this will only center block level elements.

Link to comment
Share on other sites
hystory Newbie

hystory

Posted
  • Author
Posted

i guess you just saved my a**! thanks a LOT for your kindness and patience.btw, what do you recommend to build webpages with pro fidelity?i know a friend of mine uses a mac, and he programs in coda... but i'm on a windows vista 64bits os...once again thanks!

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
i guess you just saved my a**! thanks a LOT for your kindness and patience.btw, what do you recommend to build webpages with pro fidelity?i know a friend of mine uses a mac, and he programs in coda... but i'm on a windows vista 64bits os...once again thanks!
I use CodeGenie myself. ConTEXT is a very good editor too. But there are lots of free editors out there, and in fact there is a topic about editors here:http://w3schools.invisionzone.com/index.php?showtopic=760It's really up to you to choose which one works for you. Download a few, try them out and keep the ones you like.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...