Yup! Its IE!
Okay, I have been using firefox (yup! I'm sane!) so I made my really nice site (its not online yet but for the rest of this evening you can see it at <!-- m --><a class="postlink" href="http://80.43.171.19/mysite/index.htm">http://80.43.171.19/mysite/index.htm</a><!-- m -->.
It all looked lovely in firefox so i was all very happy, sent the link to my friend and he took one look and told me it broke in internet explorer. I was annoyed! (But I then persuaded him to change to firefox and he was happy). In IE the nice black top bar across the top suddenly became really thin (it was ignoring my percentages) and the links didnt work. I fixed the black bar by using conditional comments so IE had a seperate stylesheet which set a fixed height of 200px. There is a good intro to conditional comments here (<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/condcom.html">http://www.quirksmode.org/css/condcom.html</a><!-- m -->) if anyone is interestd.
The links problem remains though and I would be grateful if anyone could help me. The relevant css and html is included below.
Thanks
Dathor Verlox
(soon to be at harrymills.me.uk)
HTML
<div class="nav">
<h2>navigation</h2>
<ul class="nav">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"/blog/blog.htm"><li>blog</li></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"/forum/index.php"><li>forum</li></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"books.htm"><li>books</li></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"quest.htm"><li>the quest</li></a>
</ul>
</div>
CSS
ul.nav a:link li {
color: #FFFFFF;
background-color:#660000;
border-top: 1px solid #990000;
text-align: center;
}
ul.nav a:visited li {
color: #FFFFFF;
background-color: #660000;
border-top: 1px solid #990000;
text-align: center;
}
ul.nav a:hover li {
background-color: #000000;
color: #FFFFFF;
width: 100%;
border-top: 1px solid #990000;
text-align: center;
}
NB I have only shown the css affecting the navigation bar links - other links are formatted differently but thwey work.
Thanks again.First step is to validate (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->). You got your list wrong, the <li>'s go directly inside the <ul>, like so: <ul class="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/blog/blog.htm">blog</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/forum/index.php">forum</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"books.htm">books</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"quest.htm">the quest</a></li>
</ul>I've not taken a look at your other code, but try messing around with your CSS now and check that all the browsers play along.
Also, do you have a DOCTYPE? if not then slap one on there and the browsers behavior will probably change somewhat, become more strict. I would recommend using an HTML 4.01 Strict DOCTYPE but if you have some experience with XHTML then try and XHTML 1.0 Strict or XHTML 1.1 DOCTYPE.
Here is a complete list (<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m -->) of DOCTYPE's.Thanks for the help, i put the <li>'s inside the <a>'s so that the whole of the list element was a link rather than just the text. It also let me do my rollover effect. Can I use display: block; so the links take up the entire width of the <li>.
The site is now at <!-- m --><a class="postlink" href="http://80.43.89.207/mysite/index.htm">http://80.43.89.207/mysite/index.htm</a><!-- m --> is case anyone wants to have a look. I am hosting it from my own machine so its only online when I am, sorry but my hosting should be up soon.
Ill have a play.
Thanks againWahey!
The display: block; worked so the links now are \lmost fine. In IE6 (I havn't tested any other versions of IE or anything other than firefox) the links are fine until you hover the mouse over them, when then jump to left align. The code is below, I'll continue to play but I have tried everything I have thought of, any ideas?
HTML
<div class="nav">
<h2>navigation</h2>
<ul class="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/blog/blog.htm">blog</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/forum/index.php">forum</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"books.htm">books</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"quest.htm">the quest</a></li>
</ul>
</div>
CSS - All browsers
ul.nav {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
}
ul.nav a:link {
display: block;
color: #FFFFFF;
background-color:#660000;
width: 100%;
border-top: 1px solid #990000;
text-align: center;
}
ul.nav a:visited {
display: block;
color: #FFFFFF;
width: 100%;
background-color: #660000;
border-top: 1px solid #990000;
text-align: center;
}
ul.nav a:hover {
display: block;
background-color: #000000;
color: #FFFFFF;
width: 100%;
border-top: 1px solid #990000;
text-align: center;
}
NB the normal links have been removed again for clarification.
IE specific CSS
/* CSS Document : Occultatio Vesania*/
ul.nav a:link li {
color: #FFFFFF;
border-top: 1px solid #990000;
text-align: center;
}
ul.nav a:visited li {
color: #FFFFFF;
border-top: 1px solid #990000;
text-align: center;
}
ul.nav a:hover li {
color: #FFFFFF;
border-top: 1px solid #990000;
text-align: center;
}
div.nav {
border: 1px solid white;
height: 300px;
}
div.top {
height: 200px;
}
NB Thats all of the IE specific stuff
Thanks againhad to restart ISS
site now at <!-- m --><a class="postlink" href="http://80.43.90.200/mysite/index.htm">http://80.43.90.200/mysite/index.htm</a><!-- m -->
links now work in all browsers i have tested but IE still breaks the alignment.
thanks again, sorry i have to keep changing the address but i dont have anywhere to host it until i sort out my hosting (should be done soon)well? any ideas?Hmm, quad post. I'm not on all the time you know.
Try changing your nav link styles to this:ul.nav a, ul.nav a:link, ul.nav a:visited {
display: block;
color: #FFFFFF;
background-color:#660000;
width: 100%;
border-top: 1px solid #990000;
text-align: center;
}
ul.nav a:focus, ul.nav a:hover, ul.nav a:active {
background-color: #000000;
}I think that IE is playing up because of the lack of any styles for just the a element. I also simplified the styles and combined a few selectors into one. You also ommitted the :focus psuedo-class, while not technically required it's best to put it in for people who like to tab through the links on your page.
Since you're absolutely positioning your nav bar, why not put the nav bar markup at the end of your HTML page. That way to anyone using a screen reader the content will be read first and then the nav links.thanks ill try it out. sorry about the quad post.Hi, your site is fine in Netscape 7.2. but not in Opera7.54.
Menu hidden behind header.
Not knowledgable to advise on problem, sorry Mimorkeris.thanks for the info, ill go get opera and try and fix it. If anyone else notices a problem in any of the browsers (im not really bothered about anything older than internet explorer 5, if people have a browser older than that they deserve the problems for just being lazy!)
Okay, I have been using firefox (yup! I'm sane!) so I made my really nice site (its not online yet but for the rest of this evening you can see it at <!-- m --><a class="postlink" href="http://80.43.171.19/mysite/index.htm">http://80.43.171.19/mysite/index.htm</a><!-- m -->.
It all looked lovely in firefox so i was all very happy, sent the link to my friend and he took one look and told me it broke in internet explorer. I was annoyed! (But I then persuaded him to change to firefox and he was happy). In IE the nice black top bar across the top suddenly became really thin (it was ignoring my percentages) and the links didnt work. I fixed the black bar by using conditional comments so IE had a seperate stylesheet which set a fixed height of 200px. There is a good intro to conditional comments here (<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/condcom.html">http://www.quirksmode.org/css/condcom.html</a><!-- m -->) if anyone is interestd.
The links problem remains though and I would be grateful if anyone could help me. The relevant css and html is included below.
Thanks
Dathor Verlox
(soon to be at harrymills.me.uk)
HTML
<div class="nav">
<h2>navigation</h2>
<ul class="nav">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"/blog/blog.htm"><li>blog</li></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"/forum/index.php"><li>forum</li></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"books.htm"><li>books</li></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"quest.htm"><li>the quest</li></a>
</ul>
</div>
CSS
ul.nav a:link li {
color: #FFFFFF;
background-color:#660000;
border-top: 1px solid #990000;
text-align: center;
}
ul.nav a:visited li {
color: #FFFFFF;
background-color: #660000;
border-top: 1px solid #990000;
text-align: center;
}
ul.nav a:hover li {
background-color: #000000;
color: #FFFFFF;
width: 100%;
border-top: 1px solid #990000;
text-align: center;
}
NB I have only shown the css affecting the navigation bar links - other links are formatted differently but thwey work.
Thanks again.First step is to validate (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->). You got your list wrong, the <li>'s go directly inside the <ul>, like so: <ul class="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/blog/blog.htm">blog</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/forum/index.php">forum</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"books.htm">books</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"quest.htm">the quest</a></li>
</ul>I've not taken a look at your other code, but try messing around with your CSS now and check that all the browsers play along.
Also, do you have a DOCTYPE? if not then slap one on there and the browsers behavior will probably change somewhat, become more strict. I would recommend using an HTML 4.01 Strict DOCTYPE but if you have some experience with XHTML then try and XHTML 1.0 Strict or XHTML 1.1 DOCTYPE.
Here is a complete list (<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m -->) of DOCTYPE's.Thanks for the help, i put the <li>'s inside the <a>'s so that the whole of the list element was a link rather than just the text. It also let me do my rollover effect. Can I use display: block; so the links take up the entire width of the <li>.
The site is now at <!-- m --><a class="postlink" href="http://80.43.89.207/mysite/index.htm">http://80.43.89.207/mysite/index.htm</a><!-- m --> is case anyone wants to have a look. I am hosting it from my own machine so its only online when I am, sorry but my hosting should be up soon.
Ill have a play.
Thanks againWahey!
The display: block; worked so the links now are \lmost fine. In IE6 (I havn't tested any other versions of IE or anything other than firefox) the links are fine until you hover the mouse over them, when then jump to left align. The code is below, I'll continue to play but I have tried everything I have thought of, any ideas?
HTML
<div class="nav">
<h2>navigation</h2>
<ul class="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/blog/blog.htm">blog</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"/forum/index.php">forum</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"books.htm">books</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"quest.htm">the quest</a></li>
</ul>
</div>
CSS - All browsers
ul.nav {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
}
ul.nav a:link {
display: block;
color: #FFFFFF;
background-color:#660000;
width: 100%;
border-top: 1px solid #990000;
text-align: center;
}
ul.nav a:visited {
display: block;
color: #FFFFFF;
width: 100%;
background-color: #660000;
border-top: 1px solid #990000;
text-align: center;
}
ul.nav a:hover {
display: block;
background-color: #000000;
color: #FFFFFF;
width: 100%;
border-top: 1px solid #990000;
text-align: center;
}
NB the normal links have been removed again for clarification.
IE specific CSS
/* CSS Document : Occultatio Vesania*/
ul.nav a:link li {
color: #FFFFFF;
border-top: 1px solid #990000;
text-align: center;
}
ul.nav a:visited li {
color: #FFFFFF;
border-top: 1px solid #990000;
text-align: center;
}
ul.nav a:hover li {
color: #FFFFFF;
border-top: 1px solid #990000;
text-align: center;
}
div.nav {
border: 1px solid white;
height: 300px;
}
div.top {
height: 200px;
}
NB Thats all of the IE specific stuff
Thanks againhad to restart ISS
site now at <!-- m --><a class="postlink" href="http://80.43.90.200/mysite/index.htm">http://80.43.90.200/mysite/index.htm</a><!-- m -->
links now work in all browsers i have tested but IE still breaks the alignment.
thanks again, sorry i have to keep changing the address but i dont have anywhere to host it until i sort out my hosting (should be done soon)well? any ideas?Hmm, quad post. I'm not on all the time you know.
Try changing your nav link styles to this:ul.nav a, ul.nav a:link, ul.nav a:visited {
display: block;
color: #FFFFFF;
background-color:#660000;
width: 100%;
border-top: 1px solid #990000;
text-align: center;
}
ul.nav a:focus, ul.nav a:hover, ul.nav a:active {
background-color: #000000;
}I think that IE is playing up because of the lack of any styles for just the a element. I also simplified the styles and combined a few selectors into one. You also ommitted the :focus psuedo-class, while not technically required it's best to put it in for people who like to tab through the links on your page.
Since you're absolutely positioning your nav bar, why not put the nav bar markup at the end of your HTML page. That way to anyone using a screen reader the content will be read first and then the nav links.thanks ill try it out. sorry about the quad post.Hi, your site is fine in Netscape 7.2. but not in Opera7.54.
Menu hidden behind header.
Not knowledgable to advise on problem, sorry Mimorkeris.thanks for the info, ill go get opera and try and fix it. If anyone else notices a problem in any of the browsers (im not really bothered about anything older than internet explorer 5, if people have a browser older than that they deserve the problems for just being lazy!)