PDA

View Full Version : IE not rendering the same as Firefox (list-based menu, heights are messed up)



shlagish
Mar 13th, 2008, 04:33 AM
Hello,

I'm experiencing problems with the following code (related parts are in red):
HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Shawn F. Inder" />
<title>Shawn - Page d'accueuil</title>
<link rel="stylesheet" type="text/css" media="print" href="print.css">

<link rel="stylesheet" type="text/css" media="screen, projection" href="style.css">

<style type="text/css">
<!--

#aboutMe img { float: left; margin: 15px; width: 200px; }
#news { border: 1px solid #ff9c10; float: right; width: 20em; padding: 15px; margin: 0 15px 15px; background: #ffffff; }
#news h2 { margin: 0; padding: 0; }
#news p { text-indent: 3em; }

.article dt { float: left; width: 8em; clear: both; padding: 5px 0 5px 20px; background: url(images/checked.png) no-repeat; }
.article dd { padding: 5px 0; }


-->
</style>
</head>
<body>


<div id="navigation">
<ul>
<li class="youAreHere" id="home"><a href="#">Acceuil</a></li>
<li id="portfolio"><a href="portfolio.html">Portfolio</a></li>
<li id="skills"><a href="competences.html">Comp&#233;tences</a></li>
<li id="contact"><a href="rejoindre.html">Me rejoindre</a></li>
<div style="clear: both;"></div>
</ul>
</div>


<div id="title">
<h1>Shawn</h1>
<p><span class="highlight">~</span> Concepteur de sites web bas&#233;s sur<br />l'accessibilit&#233;, l'esth&#233;tique et le<br />professionnalisme</p>
</div>

<div id="news">
<h2>Quoi de neuf?</h2>
<p>Je vient d'&#234;tre admis en <a href="http://fr.wikipedia.org/wiki/G&#37;C3%A9nie_logiciel" title="Avoir la d&#233;finition du g&#233;nie logiciel selon wikip&#233;dia">G&#233;nie Logiciel</a> &#224; <a

href="http://www.polymtl.ca/">l'&#201;cole Polytechnique</a> de l'Universit&#233; de Montr&#233;al, o&#249; je commencerai les cours d&#232;s septembre prochain.</p>
</div>

<div id="intro" class="article">
<h2>Bienvenue</h2>
<p>Je suis heureux de vous accueillir sur mon site et je vous invite &#224; aller voir <a href="portfolio.html" title="Consulter mon portfolio">ce que j'ai fait</a> dans le pass&#233;, <a

href="competences.html" title="Voir les langages informatiques que je maitrise">ce que je peux faire</a> maintenant, et comment <a href="rejoindre.html" title="Avoir mes

coordonn&#233;es">me contacter</a> pour me poser des questions, me donner des commentaires ou profiter de mes services. Bon surf!</p>
</div>

<div id="enBref" class="article">
<h2>En Bref</h2>
<p>Mes standards de travail assurent des r&#233;sultats de qualit&#233;.</p>
<dl>
<dt><a href="javascript:void(alert('Cette page est encore sous construction.'));" title="Cette page est encore sous construction, veuillez r&#233;essayer plus tard dans la

semaine">Accessibilit&#233;</a></dt><dd>Pour que votre site puisse &#234;tre vu par n'importe qui.</dd>
<div style="clear: both;"></div>
<dt><a href="javascript:void(alert('Cette page est encore sous construction.'));" title="Cette page est encore sous construction, veuillez r&#233;essayer plus tard dans la

semaine">Esth&#233;tique</a></dt><dd>Pour donner l'envie d'explorer le contenu de votre site plus en d&#233;tails</dd>
<div style="clear: both;"></div>
<dt><a href="javascript:void(alert('Cette page est encore sous construction.'));" title="Cette page est encore sous construction, veuillez r&#233;essayer plus tard dans la

semaine">Professionnalisme</a></dt><dd>Pour cr&#233;er une ambiance professionnelle qui sugg&#232;re la confiance.</dd>
<div style="clear: both;"></div>
<dt><a href="javascript:void(alert('Cette page est encore sous construction.'));" title="Cette page est encore sous construction, veuillez r&#233;essayer plus tard dans la

semaine">S&#233;mantique</a></dt><dd>Pour des r&#233;sultats rapides et fonctionnels qui respectent les standards les plus &#224; jour.</dd>
<div style="clear: both;"></div>
<dt><a href="javascript:void(alert('Cette page est encore sous construction.'));" title="Cette page est encore sous construction, veuillez r&#233;essayer plus tard dans la

semaine">Design/Ergonomie</a></dt>
<dd>Pour assurer la facilit&#233; d'utilisation, tant pour le visiteur que pour la personne qui aura la t&#226;che d'actualiser le site.</dd>
</dl>
</div>

<div id="demarche" class="article">
<h2>Comment</h2>
<p>J'utilise une d&#233;marche &#224; quatre &#233;tapes:</p>
<ol>
<li>Fixer un rendez-vous avec le client pour m'assurer de bien comprendre ses besoins et ses attentes.</li>
<li>Une fois les d&#233;tails et le prix fix&#233;s, pr&#233;voir un autre rendez-vous o&#249; je pr&#233;senterai une premi&#232;re &#233;bauche. Nous en profiterons pour r&#233;gler les d&#233;tails ou petits probl&#232;mes qui

seront survenus, ainsi que s'assurer que les objectifs fix&#233;s au d&#233;part &#233;taient bien les bons. Cette &#233;tape sera r&#233;p&#233;t&#233;e le nombre de fois qu'il est n&#233;cessaire, jusqu'&#224; la

satisfaction du client.</li>
<li>Compl&#233;ter le paiement et la livraison du produit fini.</li>
<li>Bien entendu, si des probl&#232;mes inattendus surviennent par apr&#232;s, j'offrirai un suivi ad&#233;quat.</li>
</ol>
</div>

<div id="aboutMe" class="article">
<h2>Un peu plus sur moi</h2>
<img src="images/canot.jpg" />
<p>Je suis &#233;tudiant en sciences pures et appliqu&#233;es au <acronym>CEGEP</acronym> de Maisonneuve, &#224; Montr&#233;al, mais d&#232;s septembre prochain, j'entre &#224; <a

href="http://www.polymtl.ca/">l'&#201;cole Polytechnique</a> en <a href="http://fr.wikipedia.org/wiki/G%C3%A9nie_logiciel" title="Avoir la d&#233;finition du g&#233;nie logiciel selon

wikip&#233;dia">G&#233;nie Logiciel</a>. C'est entre autre pour me b&#226;tir tranquillement un portfolio reli&#233; &#224; mon domaine d'&#233;tude que j'ai d&#233;cid&#233; de cr&#233;er ce site et de plonger d'avantage

dans la cr&#233;ation de sites web (d'autant plus que j'y prend plaisir et qu'un peu d'argent de surplus n'a jamais fait de mal &#224; personne). De plus, mon exp&#233;rience avec <a

href="http://www.jequebec.org/">Jeunes Entreprises</a>, o&#249; j'ai &#233;t&#233; le pr&#233;sident de l'entreprise Froche-Kle-Kle, m'a donner un certain bagage d'entrepreneur qui rendra plus facile

l'aspect "affaire" de mon projet de conception web.</p>
<p>Mais je ne suis pas qu'une machine &#224; faire des sites web! Mes pr&#233;occupations les plus pr&#233;occupantes de l'instant sont mes projets de voyage en Europe l'&#233;t&#233; prochain. J'aime

beaucoup passer mes &#233;t&#233; &#224; voyager. L'&#233;t&#233; dernier, c'est en canot-camping que j'ai voyager; je vous invite d'ailleurs &#224; regarder <a

href="http://www.francoisimage.com/dumoine/index.html">quelques photos</a> d'une de mes exp&#233;ditions, sur la rivi&#232;re du Moine. Elles sont prises par mon ami <a

href="http://www.francoisimage.com/">Fran&#231;ois</a>, qui &#233;tudie pr&#233;sentement la photographie et qui, selon moi, est d&#233;j&#224; tr&#232;s bon.</p>

</div>

<div id="next" class="article">
<h2>Et maintenant, quoi?</h2>
<p>Vous voulez en savoir un peu plus? Passez donc voir mon <a href="portfolio.html">portfolio</a>.</p>
</div>

<div id="validationLinks">
<ul>
<li>
<a href="javascript:void(alert('Ce lien ne fonctionnera que sur la version en-ligne du portfolio.'));">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
</a>
</li>
</ul>
</div>

</body>
</html>


CSS:


body { padding: 0; margin: 0; font-family: Helvetica, sans-serif; background: #dddddd; }

img { border: 0; }


a { color: #808080; font-family: Comic Sans, Comic Sans MS, cursive; font-size: .8em; font-weight: bold; }
a:hover { color: #ff9c10; text-decoration: none; }

#navigation { float: right; width: 35em; }
#navigation ul { margin: 30px 15px; border: 5px solid #808080; border-width: 5px 0; padding: 10px 0; }
#navigation ul li { list-style-type: none; float: left; margin: 0 5px; display: block; }
#navigation a { text-decoration: none; padding: 10px 5px 10px 45px; }
#navigation a:hover { border: 5px solid #ff9c10; border-width: 5px 0; }

#home a { background: url("images/home.png") no-repeat left center; }
#portfolio a { background: url("images/portfolio.png") no-repeat left center; }
#skills a { background: url("images/skills.png") no-repeat left center; }
#contact a { background: url("images/contact.png") no-repeat left center; }
.youAreHere a { border: 5px solid #ff9c10; border-width: 5px 0; color: #ff9c10; }


#title { margin-bottom: 100px; font-family: serif; border-bottom: 1px solid #ff9c10; padding-bottom: 45px; }
#title h1 { font-size: 3em; margin: 15px 15px 0; }
#title p { font-style: italic; margin: -10px 45px 0; line-height: .8em; }

.article { margin: 45px 15px 0; }
.article h2 { margin: 0 15px 15px; padding: 0; }
.article p { margin: 0 0 1em; padding: 0; text-indent: 3em; }
.article ol { margin-left: 3em; padding: 0; }

#validationLinks { padding: 5px; margin: 15px; float: right; width: 250px; border-top: 3px solid grey; }
#validationLinks ul { margin: 0; padding: 0; }
#validationLinks ul li { list-style-type: none; float: right; margin: 0 5px; padding: 0; }


.highlight { color: #ff9c10; font-size: 1.5em; }


I am temporarily hosting an online version of the problem here:
http://www.angelfire.com/planet/shawninder/cf/shawn.html
There are commercials but they don't change anything to the problem...

So the problem is that my navigation menu at the top right doesn't look the same on firefox and IE (it's ugly in IE) and I can't figure out why.
It looks like IE doesn't set the right heights for my anchors and list-items..
Actually, it looks like this:
http://www.angelfire.com/planet/shawninder/screens.bmp

Any clues, ideas, solutions?

Thanks very much in advance

harbingerOTV
Mar 13th, 2008, 04:44 AM
maybe this.



#navigation ul li { list-style-type: none; float: left; margin: 0 5px; display: block; }
#navigation a { text-decoration: none; padding: 10px 5px 10px 45px; }


should be this



#navigation ul li { list-style-type: none; float: left; margin: 0 5px; }
#navigation a { text-decoration: none; padding: 10px 5px 10px 45px; display: block; }


oh hey, It looks like you might be offering a service right? You need to write an english version too right?

shlagish
Mar 13th, 2008, 05:47 AM
Thanks for the reply, but that doesn't work. I still get the same result in IE (with a little more space between the grey borders..)

edit: actually that's not true. with this, I can see the whole anchors at leats, but the grey lines are still too close together..

And yes I am offering a service. I made my first draft in french because my first potential employer is french :D, but as soon as I get this little problem fixed, I'm making an english version. (Then I will slowly complete everything that's missing, etc.)

effpeetee
Mar 13th, 2008, 01:07 PM
You have some validation errors.:eek:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.angelfire.com%2Fplanet%2Fshawninder%2Fcf%2Fshawn.html&charset=%28detect+automatically%29&doctype=Inline&group=0#result
Frank

harbingerOTV
Mar 13th, 2008, 04:51 PM
see if this fixes it.


#navigation { float: right; width: 35em;}
#navigation ul { margin: 30px 15px; padding: 0; float: left;}
#navigation ul li { list-style-type: none; float: left; padding: 0; margin: 0; }
#navigation a { text-decoration: none; padding: 10px 5px 10px 45px; display: block; border: solid #808080; border-width: 5px 0;}
#navigation a:hover { border: 5px solid #ff9c10; border-width: 5px 0; }

rafiki
Mar 13th, 2008, 05:07 PM
<!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" lang="en" xml:lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Shawn F. Inder" />
<title>Shawn - Page d'accueuil</title>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="style.css" />
<style type="text/css">
/*<![CDATA[*/
<!--

#aboutMe img { float: left; margin: 15px; width: 200px; }
#news { border: 1px solid #ff9c10; float: right; width: 20em; padding: 15px; margin: 0 15px 15px; background: #ffffff; }
#news h2 { margin: 0; padding: 0; }
#news p { text-indent: 3em; }

.article dt { float: left; width: 8em; clear: both; padding: 5px 0 5px 20px; background: url(images/checked.png) no-repeat; }
.article dd { padding: 5px 0; }


-->
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
span.c3 {color: #FF0000}
li.c2 {list-style: none}
div.c1 {clear: both;}
/*]]>*/
</style>
</head>
<body>
<script type="text/javascript" src="http://hb.lycos.com/hb.js">
</script><script type="text/javascript" src="http://ratings.lycos.com/ratings/lycosRating.js.php">
</script><script type="text/javascript">
<!--//--><![CDATA[//><!--
var cm_role = "live";
var cm_host = "angelfire.lycos.com";
var cm_taxid = "/memberembedded";
var angelfire_member_name = "planet/shawninder";
var angelfire_member_page = "planet/shawninder/cf/shawn.html";
var angelfire_ratings_hash = "1205420768:0f7ac6fa4dc7f23c5b6140c363a34805";

var lycos_ad_category = null;

var lycos_ad_remote_addr = "128.30.52.13";
var lycos_ad_www_server = "www.angelfire.lycos.com";
var lycos_ad_track_small = "http://www.angelfire.com/doc/images/track/ot_smallframe.gif?rand=855640";
var lycos_ad_track_served = "http://www.angelfire.com/doc/images/track/ot_adserved.gif?rand=855640";
//--><!]]>
</script><script type="text/javascript" src="http://scripts.lycos.com/catman/init.js">
</script><script type="text/javascript" src="http://www.angelfire.com/sys/ad/code-start.js">
</script><script type="text/javascript" src="http://www.angelfire.com/sys/ad/code-middle.js">
</script><script type="text/javascript" src="http://www.angelfire.com/sys/ad/code-end.js">
</script><noscript><img src="http://www.angelfire.com/doc/images/track/ot_noscript.gif?rand=855640" alt="" width="1" height="1" /> <!-- BEGIN STANDARD TAG - 728 x 90 - Lycos - Angelfire Fallthrough - DO NOT MODIFY -->
<iframe frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="728" height="90" src="http://ad.yieldmanager.com/st?ad_type=iframe&amp;ad_size=728x90&amp;section=280303"></iframe> <!-- END TAG --></noscript>
<div id="navigation">
<ul>
<li class="youAreHere" id="home"><a href="#">Acceuil</a></li>
<li id="portfolio"><a href="portfolio.html">Portfolio</a></li>
<li id="skills"><a href="competences.html">Comp�tences</a></li>
<li id="contact"><a href="rejoindre.html">Me rejoindre</a></li>
<li class="c2">
<div class="c1"></div>
</li>
</ul>
</div>
<div id="title">
<h1>Shawn</h1>
<p><span class="highlight">~</span> Concepteur de sites web bas�s sur<br />
l'accessibilit�, l'esth�tique et le<br />
professionnalisme</p>
</div>
<div id="news">
<h2>Quoi de neuf?</h2>
<p>Je vient d'�tre admis en <a href="http://fr.wikipedia.org/wiki/G&#37;C3%A9nie_logiciel" title="Avoir la d�finition du g�nie logiciel selon wikip�dia">G�nie Logiciel</a> � <a href="http://www.polymtl.ca/">l'�cole Polytechnique</a> de l'Universit� de Montr�al, o� je commencerai les cours d�s septembre prochain.</p>
</div>
<div id="intro" class="article">
<h2>Bienvenue</h2>
<p>Je suis heureux de vous accueillir sur mon site et je vous invite � aller voir <a href="portfolio.html" title="Consulter mon portfolio">ce que j'ai fait</a> dans le pass�, <a href="competences.html" title="Voir les langages informatiques que je maitrise">ce que je peux faire</a> maintenant, et comment <a href="rejoindre.html" title="Avoir mes coordonn�es">me contacter</a> pour me poser des questions, me donner des commentaires ou profiter de mes services. Bon surf!</p>
</div>
<div id="enBref" class="article">
<h2>En Bref</h2>
<p>Mes standards de travail assurent des r�sultats de qualit�.</p>
<dl>
<dt><a href="javascript:void(alert('Cette%20page%20est%20encore%20sous%20construction.'));" title="Cette page est encore sous construction, veuillez r�essayer plus tard dans la semaine">Accessibilit�</a></dt>
<dd>Pour que votre site puisse �tre vu par n'importe qui.</dd>
<dd>
<div class="c1"></div>
</dd>
<dt><a href="javascript:void(alert('Cette%20page%20est%20encore%20sous%20construction.'));" title="Cette page est encore sous construction, veuillez r�essayer plus tard dans la semaine">Esth�tique</a></dt>
<dd>Pour donner l'envie d'explorer le contenu de votre site plus en d�tails</dd>
<dd>
<div class="c1"></div>
</dd>
<dt><a href="javascript:void(alert('Cette%20page%20est%20encore%20sous%20construction.'));" title="Cette page est encore sous construction, veuillez r�essayer plus tard dans la semaine">Professionnalisme</a></dt>
<dd>Pour cr�er une ambiance professionnelle qui sugg�re la confiance.</dd>
<dd>
<div class="c1"></div>
</dd>
<dt><a href="javascript:void(alert('Cette%20page%20est%20encore%20sous%20construction.'));" title="Cette page est encore sous construction, veuillez r�essayer plus tard dans la semaine">S�mantique</a></dt>
<dd>Pour des r�sultats rapides et fonctionnels qui respectent les standards les plus � jour.</dd>
<dd>
<div class="c1"></div>
</dd>
<dt><a href="javascript:void(alert('Cette%20page%20est%20encore%20sous%20construction.'));" title="Cette page est encore sous construction, veuillez r�essayer plus tard dans la semaine">Design/Ergonomie</a></dt>
<dd>Pour assurer la facilit� d'utilisation, tant pour le visiteur que pour la personne qui aura la t�che d'actualiser le site.</dd>
</dl>
</div>
<div id="demarche" class="article">
<h2>Comment</h2>
<p>J'utilise une d�marche � quatre �tapes:</p>
<ol>
<li>Fixer un rendez-vous avec le client pour m'assurer de bien comprendre ses besoins et ses attentes.</li>
<li>Une fois les d�tails et le prix fix�s, pr�voir un autre rendez-vous o� je pr�senterai une premi�re �bauche. Nous en profiterons pour r�gler les d�tails ou petits probl�mes qui seront survenus, ainsi que s'assurer que les objectifs fix�s au d�part �taient bien les bons. Cette �tape sera r�p�t�e le nombre de fois qu'il est n�cessaire, jusqu'� la satisfaction du client.</li>
<li>Compl�ter le paiement et la livraison du produit fini.</li>
<li>Bien entendu, si des probl�mes inattendus surviennent par apr�s, j'offrirai un suivi ad�quat.</li>
</ol>
</div>
<div id="aboutMe" class="article">
<h2>Un peu plus sur moi</h2>
<img src="images/canot.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **" />
<p>Je suis �tudiant en sciences pures et appliqu�es au <acronym>CEGEP</acronym> de Maisonneuve, � Montr�al, mais d�s septembre prochain, j'entre � <a href="http://www.polymtl.ca/">l'�cole Polytechnique</a> en <a href="http://fr.wikipedia.org/wiki/G%C3%A9nie_logiciel" title="Avoir la d�finition du g�nie logiciel selon wikip�dia">G�nie Logiciel</a>. C'est entre autre pour me b�tir tranquillement un portfolio reli� � mon domaine d'�tude que j'ai d�cid� de cr�er ce site et de plonger d'avantage dans la cr�ation de sites web (d'autant plus que j'y prend plaisir et qu'un peu d'argent de surplus n'a jamais fait de mal � personne). De plus, mon exp�rience avec <a href="http://www.jequebec.org/">Jeunes Entreprises</a>, o� j'ai �t� le pr�sident de l'entreprise Froche-Kle-Kle, m'a donner un certain bagage d'entrepreneur qui rendra plus facile l'aspect "affaire" de mon projet de conception web.</p>
<p>Mais je ne suis pas qu'une machine � faire des sites web! Mes pr�occupations les plus pr�occupantes de l'instant sont mes projets de voyage en Europe l'�t� prochain. J'aime beaucoup passer mes �t� � voyager. L'�t� dernier, c'est en canot-camping que j'ai voyager; je vous invite d'ailleurs � regarder <a href="http://www.francoisimage.com/dumoine/index.html">quelques photos</a> d'une de mes exp�ditions, sur la rivi�re du Moine. Elles sont prises par mon ami <a href="http://www.francoisimage.com/">Fran�ois</a>, qui �tudie pr�sentement la photographie et qui, selon moi, est d�j� tr�s bon.</p>
</div>
<div id="next" class="article">
<h2>Et maintenant, quoi?</h2>
<p>Vous voulez en savoir un peu plus? Passez donc voir mon <a href="portfolio.html">portfolio</a>.</p>
</div>
<div id="lacene" class="article">
<h2>Notes pour Mr. Lac�ne</h2>
<p>Ce paragraphe sert � m'assurer qu'il ne me manque rien pour le TP. J'utilise une &lt;table&gt; dans la page qui sert � <a href="rejoindre.html" title="Aller voir!">me rejoinre</a>, page sur laquelle on retrouve aussi des renseignements personnels. Une liste des formations suivis peut �tre trouv�e sur la page d�di�e � <a href="competences.html" title="Aller voir!">mes comp�tences</a>. La section <cite>exp�rience de travail</cite> se trouve sur la page du <a href="portfolio.html" title="Aller voir!">portfolio</a> en tant que tel. Je n'ai pas l'intention de donner ma date de naissance dans mon portfolio, je l'inclus donc ici, pour les besoin de ce travail: 13 f�vrier 1989. Aussi, je n'ai pas encore fini mon portfolio, je n'ai donc pas encore r�v�l� au monde que je connais l'anglais et le fran�ais (ce que je viens de faire, pour les besoins du travail). Je n'ai PAS utiliser les balises suivantes car elles m�langent le contenu de la forme dans le code html, ce qui n'est pas une bonne pratique: &lt;B&gt;, &lt;I&gt;, &lt;U&gt;, &lt;FONT&gt;, &lt;HR&gt; et &lt;PRE&gt;. Je vais toutefois montrer que j'aurais �t� capable de les utiliser, respectant ainsi les objectifs de ce travail:</p>
<p><strong>&lt;B&gt;</strong>, <em>&lt;I&gt;</em>, <u>&lt;U&gt;</u>, <span class="c3">&lt;FONT&gt;</span><br />
hr:</p>
<hr />
<hr width="50%" />
<hr width="25% /&gt; &lt;pre&gt; * * * pre * * * * * ********** &lt;/pre&gt; &lt;/p&gt; &lt;p&gt;je n'ai pas non plus utiliser toutes les tailles d'ent�te (h1, h2, h3, h4, etc) car le besoin de le faire n'est jamais apparu. Les voi�i:&lt;/p&gt; &lt;h1&gt;h1&lt;/h1&gt;&lt;h2&gt;h2&lt;/h2&gt;&lt;h3&gt;h3&lt;/h3&gt;&lt;h4&gt;h4&lt;/h4&gt;&lt;h5&gt;h5&lt;/h5&gt;&lt;h6&gt;h6&lt;/h6&gt; &lt;p&gt;Il reste les balises &lt;sub&gt; et &lt;sup&gt; que je n'ai pas utiliser car je n'y ai pas vu d'utilit�. Je les inclus ici: &lt;sup&gt;&lt;sup&gt;&lt;/sup&gt;, &lt;sub&gt;&lt;sub&gt;&lt;/sub&gt;&lt;/p&gt; &lt;p&gt; Sinon, tout le reste peut �tre trouv� sur cette page! �tant donn� que la section" />
<a href="javascript:void(document.getElementById('lacene').style.display='none');" title="Masquer cette section">la masquer</a> pour mieux appr�cier le travail. Pour retrouver cette section, tout simplement r�-actualiser la page. Merci, et bonne correction!</div>
<div id="validationLinks">
<ul>
<li><a href="javascript:void(alert('Ce%20lien%20ne%20fonctionnera%20que%20sur%20la%20version%20en-ligne%20du%20portfolio.'));"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a></li>
</ul>
</div>
</body>
</html> validates, not sure if it looks correct though, would take this and work with it.

shlagish
Mar 13th, 2008, 10:19 PM
see if this fixes it.


#navigation { float: right; width: 35em;}
#navigation ul { margin: 30px 15px; padding: 0; float: left;}
#navigation ul li { list-style-type: none; float: left; padding: 0; margin: 0; }
#navigation a { text-decoration: none; padding: 10px 5px 10px 45px; display: block; border: solid #808080; border-width: 5px 0;}
#navigation a:hover { border: 5px solid #ff9c10; border-width: 5px 0; }



That's an interesting try. I'm a bit pissed at not having thought of it myself :p
However, there are a few problems. The menu items are too close together and the grey lines don't expand beyond the link items (as I would like them to).. but more importantly, in IE, the hover only works on the top half of the menu items... When I hover the bottom half, nothing happens... Do you know why?
Still, I will try to play with your solution and I will post back if I get any progress.
Thanks



You have some validation errors.:eek:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.angelfire.com%2Fplanet%2Fshawninder%2Fcf%2Fshawn.html&charset=%28detect+automatically%29&doctype=Inline&group=0#result
Frank

Don't worry about thoses. Most of them are caused by angelfire's adds, and I will not host the site with angelfire when it's completed. A lot of the others are caused because the online version also has another section dedicated to my teacher (I used this page as homework too) and he wanted me to use such tags as I, U, B, Pre, etc that will not appear in the final product. As for the rest, I just haven't yet checked for validation, so I forgot to self-close my <link> tags and the such. These little details will all be fixed in due time. The only thing that is a problem is having all these


<div style="clear: both;"></div>

... but Rafiki here seems to have found a nice solution for this. Thanks Rafiki, I'll change things up a bit when I get the time.

So thanks for the warning, but don't worry about it :thumbsup:

harbingerOTV
Mar 14th, 2008, 04:02 PM
add position: relative to your #navigation a and that will fix up the link issue. As for the other, gonna have to play with it more.

harbingerOTV
Mar 14th, 2008, 05:15 PM
okay fixed.



#navigation { float: right; width: 35em; }
#navigation ul { margin: 30px 15px; border: solid #808080; border-width: 5px 0; padding: 0; float: left;}
#navigation ul li { list-style-type: none; float: left; margin: -5px 5px; padding: 0;}
#navigation a { text-decoration: none; padding: 10px 5px 10px 45px; position: relative; display: block; border: 5px solid #808080; border-width: 5px 0; }
#navigation a:hover { border: 5px solid #ff9c10; border-width: 5px 0; }

#home a { background: url("http://www.angelfire.com/planet/shawninder/cf/images/home.png") no-repeat left center; }
#portfolio a { background: url("http://www.angelfire.com/planet/shawninder/cf/images/portfolio.png") no-repeat left center; }
#skills a { background: url("http://www.angelfire.com/planet/shawninder/cf/images/skills.png") no-repeat left center; }
#contact a { background: url("http://www.angelfire.com/planet/shawninder/cf/images/contact.png") no-repeat left center; }
#navigation ul li.youAreHere a { border: solid #ff9c10; border-width: 5px 0; color: #ff9c10; }




<div id="navigation">
<ul>
<li class="youAreHere" id="home"><a href="#">Acceuil</a></li>
<li id="portfolio"><a href="http://www.angelfire.com/planet/shawninder/cf/portfolio.html">Portfolio</a></li>
<li id="skills"><a href="http://www.angelfire.com/planet/shawninder/cf/competences.html">Compétences</a></li>
<li id="contact"><a href="http://www.angelfire.com/planet/shawninder/cf/rejoindre.html">Me rejoindre</a></li>
</ul>
</div>


notice on the html i removed the empty clearing div.

shlagish
Mar 15th, 2008, 03:57 AM
You know what? Every is perfect now, just as I wanted. I used the code you gave me and gave it a little tweak and now it's perfect. Thanks very much.

For the curious, here is the final code (I also updated on angelfire..)

HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Shawn F. Inder" />
<title>Shawn - Page d'accueuil</title>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="style.css" />
<style type="text/css">
<!--

#aboutMe img { float: left; margin: 15px; width: 200px; }
#news { border: 1px solid #ff9c10; float: right; width: 25&#37;; padding: 15px; margin: 0 15px 15px; background: #ffffff; }
#news h2 { margin: 0; padding: 0; }
#news p { text-indent: 3em; }

.article dt { float: left; width: 8em; clear: both; padding: 5px 0 5px 20px; background: url(images/checked.png) no-repeat; }
.article dd { padding: 5px 0; }


-->
</style>
</head>
<body>

<div id="navigation">
<ul>
<li class="youAreHere" id="home"><a>Acceuil</a></li>
<li id="portfolio"><a href="portfolio.html">Portfolio</a></li>
<li id="skills"><a href="competences.html">Comp&#233;tences</a></li>
<li id="contact"><a href="rejoindre.html">Me rejoindre</a></li>
</ul>
</div>

<div id="title">
<h1>Shawn</h1>
<p><span class="highlight">~</span> Concepteur de sites web bas&#233;s sur<br />l'accessibilit&#233;, l'esth&#233;tique et le<br />professionnalisme</p>
</div>

<div id="news">
<h2>Quoi de neuf?</h2>
<p>Je vient d'&#234;tre admis en <a href="http://fr.wikipedia.org/wiki/G%C3%A9nie_logiciel" title="Avoir la d&#233;finition du g&#233;nie logiciel selon wikip&#233;dia">G&#233;nie Logiciel</a> &#224; <a

href="http://www.polymtl.ca/" title="Visiter le site web de l'&#201;cole Polytechnique">l'&#201;cole Polytechnique</a> de l'Universit&#233; de Montr&#233;al, o&#249; je commencerai les cours d&#232;s septembre

prochain.</p>
</div>

<div id="intro" class="article">
<h2>Bienvenue</h2>
<p>Je suis heureux de vous accueillir sur mon site et je vous invite &#224; aller voir <a href="portfolio.html" title="Consulter mon portfolio">ce que j'ai fait</a> dans le pass&#233;, <a

href="competences.html" title="Voir les langages informatiques que je maitrise">ce que je peux faire</a> maintenant, et comment <a href="rejoindre.html" title="Avoir mes

coordonn&#233;es">me contacter</a> pour me poser des questions, me donner des commentaires ou profiter de mes services. Bon surf!</p>
</div>

<div id="enBref" class="article">
<h2>En Bref</h2>
<p>Mes standards de travail assurent des r&#233;sultats de qualit&#233;.</p>
<dl>
<dt><a href="javascript:void(alert('Cette page est encore sous construction.'));" title="Cette page est encore sous construction, veuillez r&#233;essayer plus

tard.">Accessibilit&#233;</a></dt><dd>Pour que votre site puisse &#234;tre vu par n'importe qui.</dd>
<div style="clear: both;"></div>
<dt><a href="javascript:void(alert('Cette page est encore sous construction.'));" title="Cette page est encore sous construction, veuillez r&#233;essayer plus

tard.">Esth&#233;tique</a></dt><dd>Pour donner l'envie d'explorer le contenu de votre site plus en d&#233;tails</dd>
<div style="clear: both;"></div>
<dt><a href="javascript:void(alert('Cette page est encore sous construction.'));" title="Cette page est encore sous construction, veuillez r&#233;essayer plus

tard.">Professionnalisme</a></dt><dd>Pour cr&#233;er une ambiance professionnelle qui sugg&#232;re la confiance.</dd>
<div style="clear: both;"></div>
<dt><a href="javascript:void(alert('Cette page est encore sous construction.'));" title="Cette page est encore sous construction, veuillez r&#233;essayer plus

tard.">S&#233;mantique</a></dt><dd>Pour des r&#233;sultats rapides et fonctionnels qui respectent les standards les plus &#224; jour.</dd>
<div style="clear: both;"></div>
<dt><a href="javascript:void(alert('Cette page est encore sous construction.'));" title="Cette page est encore sous construction, veuillez r&#233;essayer

plus.">Design/Ergonomie</a></dt>
<dd>Pour assurer la facilit&#233; d'utilisation, tant pour le visiteur que pour la personne qui aura la t&#226;che d'actualiser le site.</dd>
</dl>
</div>

<div id="demarche" class="article">
<h2>Comment</h2>
<p>J'utilise une d&#233;marche &#224; quatre &#233;tapes:</p>
<ol>
<li>Fixer un rendez-vous avec le client pour m'assurer de bien comprendre ses besoins et ses attentes.</li>
<li>Une fois les d&#233;tails et le prix fix&#233;s, pr&#233;voir un autre rendez-vous o&#249; je pr&#233;senterai une premi&#232;re &#233;bauche. Nous en profiterons pour r&#233;gler les d&#233;tails ou petits probl&#232;mes qui

seront survenus, ainsi que s'assurer que les objectifs fix&#233;s au d&#233;part &#233;taient bien les bons. Cette &#233;tape sera r&#233;p&#233;t&#233;e le nombre de fois qu'il est n&#233;cessaire, jusqu'&#224; la

satisfaction du client.</li>
<li>Compl&#233;ter le paiement et la livraison du produit fini.</li>
<li>Bien entendu, si des probl&#232;mes inattendus surviennent par apr&#232;s, j'offrirai un suivi ad&#233;quat.</li>
</ol>
</div>

<div id="aboutMe" class="article">
<h2>Un peu plus sur moi</h2>
<img src="images/canot.jpg" alt="Photo de moi en canot" />
<p>Je suis &#233;tudiant en sciences pures et appliqu&#233;es au <acronym title="Coll&#232;ge d'Enseignement G&#233;n&#233;ral Et Professionnel">CEGEP</acronym> de Maisonneuve, &#224; Montr&#233;al, mais d&#232;s

septembre prochain, j'entre &#224; <a href="http://www.polymtl.ca/" title="Visiter le site web de l'&#201;cole Polytechnique">l'&#201;cole Polytechnique</a> en <a

href="http://fr.wikipedia.org/wiki/G%C3%A9nie_logiciel" title="Avoir la d&#233;finition du g&#233;nie logiciel selon wikip&#233;dia">G&#233;nie Logiciel</a>. C'est entre autre pour me b&#226;tir

tranquillement un portfolio reli&#233; &#224; mon domaine d'&#233;tude que j'ai d&#233;cid&#233; de cr&#233;er ce site et de plonger d'avantage dans la cr&#233;ation de sites web (d'autant plus que j'y prend

plaisir et qu'un peu d'argent de surplus n'a jamais fait de mal &#224; personne). De plus, mon exp&#233;rience avec <a href="http://www.jequebec.org/" title="Visiter le site web de Jeunes

Entreprises">Jeunes Entreprises</a>, o&#249; j'ai &#233;t&#233; le pr&#233;sident de l'entreprise Froche-Kle-Kle, m'a donner un certain bagage d'entrepreneur qui rendra plus facile l'aspect affaire

de mon projet de conception web.</p>
<p>Mais je ne suis pas qu'une machine &#224; faire des sites web! Mes pr&#233;occupations les plus pr&#233;occupantes de l'instant sont mes projets de voyage en Europe l'&#233;t&#233; prochain. J'aime

beaucoup passer mes &#233;t&#233; &#224; voyager. L'&#233;t&#233; dernier, c'est en canot-camping que j'ai voyager; je vous invite d'ailleurs &#224; regarder <a

href="http://www.francoisimage.com/dumoine/index.html" title="Aller voir quelques photos de mon voyage de canot">quelques photos</a> d'une de mes exp&#233;ditions, sur la rivi&#232;re du

Moine. Elles sont prises par mon ami <a href="http://www.francoisimage.com/" title="Visiter le site web du photographe Fran&#231;ois L&#233;ger-Savard">Fran&#231;ois</a>, qui &#233;tudie pr&#233;sentement

la photographie et qui, selon moi, est d&#233;j&#224; tr&#232;s bon.</p>

</div>

<div id="next" class="article">
<h2>Et maintenant, quoi?</h2>
<p>Vous voulez en savoir un peu plus? Passez donc voir mon <a href="portfolio.html" title="Consulter mon portfolio">portfolio</a>.</p>
</div>


<div id="validationLinks">
<ul>
<li>
<a href="javascript:void(alert('Ce lien ne fonctionnera que sur la version en-ligne du portfolio.'));" title="Valider cette page pour le XHTML 1.0 Strict">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
</a>
</li>
</ul>
</div>

</body>
</html>


CSS:


body { padding: 0; margin: 0; font-family: Helvetica, sans-serif; }

img { border: 0; }

a { color: #808080; font-family: Comic Sans, Comic Sans MS, cursive; font-size: .8em; font-weight: bold; }
a:hover { color: #ff9c10; text-decoration: none; }
div.clearing { clear: both; }

#navigation { float: right; position: relative; }
#navigation ul { margin: 30px 15px; border: solid #808080; border-width: 5px 0; padding: 0; float: left;

width: 45em; display: block; }
#navigation ul li { list-style-type: none; float: left; margin: -5px 5px; padding: 0;}
#navigation a { text-decoration: none; padding: 10px 5px 10px 45px; position: relative; display: block;

border: 5px solid #808080; border-width: 5px 0; height: 100%; }
#navigation a:hover { border: 5px solid #ff9c10; border-width: 5px 0; }

#home a { background: url("http://www.angelfire.com/planet/shawninder/cf/images/home.png") no-repeat left

center; }
#portfolio a { background: url("http://www.angelfire.com/planet/shawninder/cf/images/portfolio.png")

no-repeat left center; }
#skills a { background: url("http://www.angelfire.com/planet/shawninder/cf/images/skills.png") no-repeat left

center; }
#contact a { background: url("http://www.angelfire.com/planet/shawninder/cf/images/contact.png") no-repeat

left center; }
#navigation ul li.youAreHere a { border: solid #ff9c10; border-width: 5px 0; color: #ff9c10; }

#title { margin-bottom: 100px; font-family: serif; border-bottom: 1px solid #ff9c10; padding-bottom: 45px; }
#title h1 { font-size: 3em; margin: 15px 15px 0; }
#title p { font-style: italic; margin: -10px 45px 0; line-height: 0.8em; }
#title p span { line-height: 0.8em; }

.article { margin: 45px 15px 0; }
.article h2 { margin: 0 15px 15px; padding: 0; }
.article p { margin: 0 0 1em; padding: 0; text-indent: 3em; }
.article ol { margin-left: 3em; padding: 0; }

#validationLinks { padding: 5px; margin: 15px; float: right; width: 250px; border-top: 3px solid grey; }
#validationLinks ul { margin: 0; padding: 0; }
#validationLinks ul li { list-style-type: none; float: right; margin: 0 5px; padding: 0; }


.highlight { color: #ff9c10; font-size: 1.5em; }