Jump to content

Ie, Standards And A Lot Of Frustration

darossa

By darossa
in HTML/XHTML

Recommended Posts

darossa Newbie

darossa

Posted
Posted

Hi! Too glad I found this site, it's so complete! The CSS tutorials helped me a lot. Thanks for it's authors!I already have the basic notions of html, so I made my very simple site , purely in html and a css stylesheet, just to gather some class notes:http://www.darossa.frih.net/notas.htmlBut the frustrating part is that I, being a wise man, don't use Internet Explorer, but Firefox and sometimes other (good)browsers such as Safari and Chrome. ALL of them display my page correctly but IE, perhaps because of the logical reason for it doesn't follow the standards.I wrote the site using NVU/Kompozer, taking advantage of the WYSIWYG function and, when necessary, editing the code manually. The site, in Internet Explorer, which is the browser 95% of my class mates use, has it's visible tables totally aligned to the left, undesireably. It ends up seeming that the layout, although simple, was created by an 8 year old.Then, the curious part: I checked my page @ Dreamweaver, by taking the code from Kompozer and pasting there. PRESTO! It showed up exactly like in IE, and turns out that Dreamweaver and Adobe in general don't respect the standards either, which I didn't know until now.Questions:0- Thanks for reading until here, although I *think* this has already been asked before, however a search about the Internet Explorer vs. the webstandars would return a lot of results;1- How to have it correctly displayed in Internet Explorer?2- Should I continue using Dreamweaver?Thanks in advance!

Link to comment
Share on other sites
Jerry62704 Member

Jerry62704

Posted
Posted
Hi! Too glad I found this site, it's so complete! The CSS tutorials helped me a lot. Thanks for it's authors!Questions:0- Thanks for reading until here, although I *think* this has already been asked before, however a search about the Internet Explorer vs. the webstandars would return a lot of results;1- How to have it correctly displayed in Internet Explorer?2- Should I continue using Dreamweaver?Thanks in advance!
Fix the three errors. Your DOCTYPE looks like it is missing stuff. 90% of your css is inline. Move it to the header css area.Vis-a-vis IE. If you are in IE, reduce the font size. Use either conditional statements or the Tan Hack. Dump the nested tables as it slows things down and makes it harder to maintain. Maintenance is the biggest part of any computer project - build for it.You have:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
I use:
!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" >
I've taken your code and reformatted the top half of it so you can judge if you would rather work with formatted code (pretty print) or what you originally had:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type"><title>Notas de Aula - 05/03/09 às 12:16</title><style type="text/css"><!--.style1 {font-family: Georgia, "Times New Roman", Times, serif}a:link {color: rgb(153, 51, 0);}a:visited {color: rgb(153, 51, 0);}a:active {color: rgb(153, 51, 0);}a:hover {color: rgb(221, 110, 0);}a.one:link {color: rgb(221, 183, 34);}a.one:visited {color: rgb(221, 183, 34);}a.one:hover {color: rgb(221, 110, 0);}a.five:link {color: rgb(221, 183, 34); text-decoration: none}a.five:visited {color: rgb(221, 183, 34); text-decoration: none}a.five:hover {color: rgb(221, 110, 0); text-decoration: underline}--></style></head><body style="background-image: url(imagens/blog_fundo.jpg); font-family: Georgia,'Times New Roman',Times,serif;"><table style="text-align: left; margin-left: auto; margin-right: auto; height: 50px; width: 985px;" border="1" bordercolor="#910400" cellpadding="0" cellspacing="0">	<tbody>	<tr>		<td style="border: 2pt solid black;" text-align="" left="">			<table style="text-align: left; margin-left: auto; margin-right: auto; width: 985px; height: 33px;" border="1" cellpadding="0" cellspacing="0">				<tbody>				<tr>					<td style="color: rgb(221, 183, 34); background-color: rgb(91, 46, 0); width: 200px; text-align: center; font-family: Verdana;">						<a class="five" href="mailto:darossa@gmail.com"><font size="-1">Contato</font></a></td>					<td style="text-align: center; color: rgb(221, 183, 34); background-color: rgb(91, 46, 0); width: 198px; font-family: Verdana;">						<a href="http://www.darossa.frih.net/ajuda.html">						<span style="color: rgb(221, 183, 34);"></span></a>						<font>						<a class="five" href="http://www.darossa.frih.net/ajuda.html">						<font size="-1">Ajuda</font></a></font>					</td>					<td style="text-align: center; background-color: rgb(91, 46, 0); width: 198px; color: rgb(221, 183, 34); font-family: Verdana;">						<a class="five" href="http://www.darossa.frih.net/log.html"><font size="-1">Log</font></a>					</td>					<td style="text-align: center; color: rgb(221, 183, 34); background-color: rgb(91, 46, 0); width: 198px; font-family: Verdana;">						<a class="five" href="http://www.darossa.frih.net/notas1.html"><font size="-1">Primeiro semestre</font></a>					</td>					<td style="text-align: center; color: rgb(221, 183, 34); background-color: rgb(91, 46, 0); width: 198px; font-family: Verdana;">						<a class="five" href="http://www.darossa.frih.net/notas2.html"><font size="-1">Segundo semestre</font></a>					</td>				</tr>				</tbody>			</table>			<br> 			<h1 class="style1" style="font-weight: normal; color: rgb(91, 46, 0);" align="center">				Notas de aula</h1>			<h2 style="color: rgb(91, 46, 0); font-weight: normal; font-family: Georgia;" align="center">				Página atualizada pela última vez na quinta-feira, 5 de março de 2009 às 12:16.</h2>			<table style="margin-left: auto; margin-right: auto; width: 630px; text-align: center;" border="1" cellpadding="3" cellspacing="2">				<tbody>				<tr>					<td style="border: 2pt solid black;">						<span style="color: rgb(91, 46, 0);">							<span style="text-decoration: underline;">								<a href="http://www.darossa.frih.net/dir/filosofia_04-03-09.html">									Última nota adicionada</a></span>								: Filosofia de 04/03.<br>								<a href="http://www.darossa.frih.net/dir/direito_civil2_geral.html">									Informações									gerais de Direito Civil</a> 								atualizadas 20/02/09 às 00:09.<br>								<span style="font-style: italic;">									Plano de ensino									de Teoria Geral do Processo e Direito Penal em breve.</span>							</span>					</td>				</tr>				</tbody>			</table>			<br>			<table style="text-align: center; margin-left: auto; margin-right: auto; width: 960px; height: 142px;" border="1" bordercolor="#000000" cellpadding="2" cellspacing="0">				<tbody>				<tr>					<td style="background-color: rgb(91, 46, 0); text-align: center;">						<span style="font-weight: bold; color: rgb(221, 183, 34);">#</span>					</td>					<td style="font-weight: bold; color: rgb(153, 51, 0); background-color: rgb(91, 46, 0); width: 200px; text-align: center;">						<a class="one" href="http://www.darossa.frih.net/dir/filosofia_geral.html">Filosofia</a>					</td>					<td style="font-weight: bold; color: rgb(255, 255, 255); background-color: rgb(91, 46, 0); width: 200px; text-align: center;">						<a class="one" href="http://www.darossa.frih.net/dir/direito_const2_geral.html">Direito							Constitucional</a>					</td>					<td style="font-weight: bold; color: rgb(153, 51, 0); background-color: rgb(91, 46, 0); width: 200px; text-align: center;">						<a class="one" href="http://www.darossa.frih.net/dir/direito_civil2_geral.html">							Direito Civil</a>					</td>					<td style="font-weight: bold; color: rgb(255, 255, 255); background-color: rgb(91, 46, 0); width: 200px; text-align: center;">						<a class="one" href="http://www.darossa.frih.net/dir/direito_penal2_geral.html">							Direito Penal</a>					</td>					<td style="font-weight: bold; color: rgb(255, 255, 255); background-color: rgb(91, 46, 0); width: 200px; text-align: center;">						<a class="one" href="http://www.darossa.frih.net/dir/tgp_geral.html">							Teoria Geral do Processo</a>					</td>				</tr>				<tr>					<td></td>					<td style="color: rgb(189, 189, 189);">						<a href="http://www.darossa.frih.net/dir/filosofia_04-03-09.html">							quarta, 4 de março</a>					</td>					<td style="color: rgb(189, 189, 189);">						sexta, 6 de março					</td>					<td style="color: rgb(189, 189, 189);">						terça, 10 de março					</td>					<td style="color: rgb(189, 189, 189);">						<a href="http://www.darossa.frih.net/dir/direito_penal2_04-03-09.html">							<span style="color: black;">quarta, 4 de março</span></a>					</td>					<td style="color: rgb(189, 189, 189);">						sexta, 6 de março					</td>				</tr>				<tr>					<td></td>					<td style="color: rgb(189, 189, 189);">						<a href="http://www.darossa.frih.net/dir/filosofia_03-03-09.html">terça,  3 de março</a>					</td>					<td style="color: rgb(189, 189, 189);">						quinta, 5 de março					</td>					<td style="color: rgb(189, 189, 189);">						quinta, 5 de março					</td>					<td style="color: rgb(189, 189, 189);">						<a href="http://www.darossa.frih.net/dir/direito_penal2_02-03-09.html">							segunda, 2 de março</a>					</td>					<td style="color: rgb(189, 189, 189);">						<a href="http://www.darossa.frih.net/dir/tgp_02-03-09.html">							segunda, 2 de março</a>					</td>				</tr>				<tr>					<td>4</td>					<td style="text-align: center; color: rgb(189, 189, 189);">						<a href="http://www.darossa.frih.net/dir/filosofia_18-02-09.html">							quarta, 18 de fevereiro</a>					</td>					<td style="text-align: center; color: rgb(189, 189, 189);">						sexta, 27 de fevereiro					</td>					<td style="text-align: center; color: rgb(189, 189, 189);">						terça, 24 de fevereiro					</td><td style="text-align: center; color: rgb(153, 51, 0);"><a href="http://www.darossa.frih.net/dir/direito_penal2_18-02-09.html">quarta,18 de fevereiro</a></td><td style="text-align: center; color: rgb(189, 189, 189);"><a href="http://www.darossa.frih.net/dir/tgp_20-02-09.html">sexta,20 de fevereiro</a></td></tr><tr><td>3</td><td style="text-align: center; color: rgb(189, 189, 189);"><a href="http://www.darossa.frih.net/dir/filosofia_17-02-09.html">terça,17 de fevereiro</a></td><td style="text-align: center; color: rgb(189, 189, 189);">quinta,26 de fevereiro</td><td style="text-align: center; color: rgb(189, 189, 189);">quinta,19 de fevereiro</td><td style="text-align: center; color: rgb(189, 189, 189);"><a href="http://www.darossa.frih.net/dir/direito_penal2_16-02-09.html">segunda,16 de fevereiro</a></td><td style="text-align: center; color: rgb(189, 189, 189);"><a href="http://www.darossa.frih.net/dir/tgp_16-02-09.html">segunda,16 de fevereiro</a></td></tr><tr><td>2</td><td style="text-align: center; color: rgb(153, 51, 0);"><a href="http://www.darossa.frih.net/dir/filosofia_11-02-09.html">quarta,11 de fevereiro</a></td><td style="text-align: center; color: rgb(189, 189, 189);"><a href="http://www.darossa.frih.net/dir/direito_const2_20-02-09.html">sexta,20 de fevereiro</a><br></td><td style="text-align: center; color: rgb(189, 189, 189);"><a href="http://www.darossa.frih.net/dir/direito_civil2_17-02-09.html">terça,17 de fevereiro</a></td><td style="text-align: center; color: rgb(189, 189, 189);"><a href="http://www.darossa.frih.net/dir/direito_penal2_11-02-09.html">quarta,11 de fevereiro</a></td><td style="text-align: center; color: black;"><a href="http://www.darossa.frih.net/dir/tgp_13-02-09.html">sexta,13 de fevereiro</a></td></tr><tr><td>1</td><td style="text-align: center;"><a href="http://www.darossa.frih.net/dir/filosofia_10-02-09.html">terça,10 de fevereiro</a></td><td style="text-align: center; color: rgb(189, 189, 189);"><a href="http://www.darossa.frih.net/dir/direito_const2_19-02-09.html">quinta,19 de fevereiro</a></td><td style="text-align: center;"><a href="http://www.darossa.frih.net/dir/direito_civil2_12-02-09.html">quinta,12 defevereiro</a></td><td style="text-align: center;"><a href="http://www.darossa.frih.net/dir/direito_penal2_09-02-09.html">segunda,9 de fevereiro</a></td><td style="text-align: center;"><a href="http://www.darossa.frih.net/dir/tgp_09-02-09.html">segunda,9 de fevereiro</a></td></tr></tbody></table><table style="width: 307px; height: 20px; margin-top: 12px; margin-left: 9px;"><tbody><tr><td><!-- Atomz HTML for Search --><form method="get" action="http://search.atomz.com/search/"><input name="sp_a" value="sp100417ca" type="hidden"><input size="25" name="sp_q"> <input value="Pesquisar" type="submit"><input name="sp_p" value="all" type="hidden"><input name="sp_f" value="UTF-8" type="hidden"></form></td></tr></tbody></table><a href="http://www.darossa.frih.net/notas.html"><img src="/favicon.ico" alt="Notas" style="border: 0px solid; width: 18px; height: 18px; float: right;" hspace="5" vspace="5"></a></td></tr></tbody></table></body></html>

Link to comment
Share on other sites
darossa Newbie

darossa

Posted
  • Author
Posted

Thanks Jerry!!ok, here we go:0- Thanks for ALL your tips! But they show me I indeed have a lot to learn yet :)1- some of those errors were not visible under Kompozer, so I opened the html with notepad++. There I could see those invalid attributes, and erased them.2- I forgot to mention that a little image I have at every bottom right corners won't show up on IE. They're actually my site's favicon.ico. The releated code is:

<a href="http://www.darossa.frih.net/notas.html"><img src="/favicon.ico" alt="Notas" style="border: 0px solid; width: 18px; height: 18px; float: right;" hspace="5" vspace="5"></a>

What's wrong that IE doesn't like?3- About my inline CSS: that's because I learnt CSS very short ago, with the help of this site and htmldog.com, and most of it had been created automatically by Kompozer (NVU) when I applied some attributes "WYSIWYGly"4- When I changed the DOCTYPE to precisely the yours, it came to the opposite way: it appears nwo to be ok at IE, but on Firefox has lost the alignment. The favicon @ the bottom right is now being replaced by its alternate text. To test this, I created a copy of my page's html file and the favicon.ico file and put these two inside a test folder to try both browsers. IE has the placeholder to the icon image but with no image or alternate text display, while on Firefox the image is being replaced by the alternate text. What to do next?:)

Link to comment
Share on other sites
jlhaslip Devoted Member

jlhaslip

Posted
Posted

I appreciate that you are new to the HTML world, and using a wysiwyg editor appears to make things easy, but using one of those is like learning to drive at Lemans or the Indianapolis Raceway. Not a good experience.I would encourage you to forget about using the Nvu or Dreamweaver stuff until you understand some more html and css. Start with a page design that is smaller in scope and build up to what you really want. Start small and add features as you learn to handle them. For one thing, I don't think an ico format image should display on a page. ico is a specific image format designed for using in the Title tab of a Browser, not on an HTML page. use gif/jpg/png for images on a page.But that is just my opinion.

Link to comment
Share on other sites
darossa Newbie

darossa

Posted
  • Author
Posted
I appreciate that you are new to the HTML world, and using a wysiwyg editor appears to make things easy, but using one of those is like learning to drive at Lemans or the Indianapolis Raceway. Not a good experience.
trust me, I understand exactly what you're saying. But the problem is that I'm not good with layouts yet and doing all by code would stretch the time window necessary to accomplish those things, since I have a schedule to deliver the class notes, otherwise they would become useless.So I'm gonna follow your advice and do the following: I'll stick, for now, with the WYSIWYG, and, slowly and patiently, I'll learn about CSS layouts and will start a page from scratch.I changed the image for a .jpg instead of .ico in that place and then it worked in IE! Thanks for the noticing. But, for the time available, the fact remains... I need it to display correctly under Internet Explorer.. and I'd like, too, to know why Dreamweaver behaved that way.Thanks!
Link to comment
Share on other sites
jlhaslip Devoted Member

jlhaslip

Posted
Posted

I can't explain it. I have never used Dreamweaver. It might have something to do with the Engine under its hood. It may be using either the IE or the FF rendering engine, so the other browser would complain.I started using Composer once upon a time, back when it was a part of the Mozilla package, but I found that the learning curve for Composer was as demanding as the learning curve for html/css, so I figured I was better off learning the basics and forgetting the wysiwyg editor. Less to learn, overall. I am glad I stopped. Wysiwyg code is buggy, as you have noticed and you need a complete understanding of html/css to de-bug it. Why waste your time doing that when writing the code from scratch might take longer initially, but the debug is simpler, I find. Pretty sure most of the regular posters would agree.

Link to comment
Share on other sites
  • 2 weeks later...
darossa Newbie

darossa

Posted
  • Author
Posted

But the problem is that this site has to be quickly built up and quickly fit my needs when something shows up, and, when it bugs, I go straight to the code and try debugging it manually. On the other hand, I don`t understand how people make layouts on a text editor, even if it`s the simplest one.At last,. why do professionals use Dreamweaver and other WYSIWYG applications such as WYSIWYG web builder?

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted
At last,. why do professionals use Dreamweaver and other WYSIWYG applications such as WYSIWYG web builder?
Dreamweaver is great (if you have a powerful computer, it's too resource-intensive for my 1GB machine :)), the code view is very concise and it has very intelligent syntax highlighting. Also, it is a highly developed IDE with integrated versioning and tracking tools, as well as project management options. of course using the design view isn't such a good idea, as you seem to have found out...I hope no "professional" would use a "web builder" in the commonly understood sense though.
On the other hand, I don`t understand how people make layouts on a text editor, even if it`s the simplest one.
Practice :)
Link to comment
Share on other sites
No Name At All Newbie

No Name At All

Posted
Posted

This is a just a little list thing that can make your site better (maybe easier to use). Refering to your home page

  • Make not just text on your links the link, but the whole entire box. You can do this with <div> or <td>, if your boxes are images make the image a link.

Refering to your "Primeiro semestre" section

  • In the top box the box with in that box (I don't know what it says so I might not know if it is appropriate) but it'd look uniform in it were centered.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted
of course using the design view isn't such a good idea, as you seem to have found out...
:) Tell that to the average DW user, and they'd think you were trying to sell them a TV with no picture. But you're absolutely right.Adobe could pick up some pocket change if they sold a version without the view option. It takes a big company to make a really good code editor. I still use GoLive from CS1. A lot of DOM methods and newer CSS don't show up in code-completion, but other than than that it does what I need. Sometimes I go months without even remembering it has a view option. The last time was for someone here. I wanted to build a table quickly, and it was easier to drag one into the pane. Other than that . . .
Link to comment
Share on other sites
  • 4 months later...
darossa Newbie

darossa

Posted
  • Author
Posted
Refering to your home page * Make not just text on your links the link, but the whole entire box. You can do this with <div> or <td>, if your boxes are images make the image a link.
That's what I've been trying! I even started another topic to ask that before I saw your post. It's in here:http://w3schools.invisionzone.com/index.php?showtopic=26659No, the boxes are not images, but I'd like the cells to become links, not only the texts within them.
Refering to your "Primeiro semestre" section * In the top box the box with in that box (I don't know what it says so I might not know if it is appropriate) but it'd look uniform in it were centered.
Not sure if I understood you. "Primeiro semestre" means "First semester", and that's the section where I put the class content of the 1st semester of my law school.
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...