shlagish
03-13-2008, 03: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é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é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%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 page est encore sous construction.'));" 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>
<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é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>
<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éessayer plus tard dans la
semaine">Professionnalisme</a></dt><dd>Pour créer une ambiance professionnelle qui suggè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é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>
<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é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" />
<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="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
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é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é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%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 page est encore sous construction.'));" 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>
<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é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>
<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éessayer plus tard dans la
semaine">Professionnalisme</a></dt><dd>Pour créer une ambiance professionnelle qui suggè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é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>
<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é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" />
<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="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