A Webpage And Some Buttons Looking Wrong...why?

[ivanmax]

Hi everybody!

 

First of all thanks a lot for all the help you have given me in other occasions.

 

Could you please give me a hand with this too?

 

I am building the following website:

 

www.primaryteachingresources.net

 

which basically is a website of totally free resources for primary school teachers.

 

My problem:

 

In IE7 all the pages look ok but the home page, in which the menu looks much smaller and really weird. Also, when I go to 5º-6º E.P.O page (in the menu) the button for that page is highlighted but also the button for the 1-2º E.P.O page. Why does this happen?

 

Well, if you have any other suggestions to make the site look and work better I will very gradly hear them.

 

Thanks a lot,

 

Iván

[TCH-Bruce]

I can't even get the page to load in IE but it looks fine in Firefox. I do have one suggestion though. You have a space in the folder name. I would not have spaces in my folder names or page names for that matter.

[OJB]

It appears to be your menu

 

><ul> 
<lis><a>HOME</a></lis>
<li><a href="http://www.primaryteachingresources.net/teaching%20resources/html/about_us.html">ABOUT US</a></li>

<li><a href="http://www.primaryteachingresources.net/teaching%20resources/html/contact.html">CONTACT</a></li>
<li><a href="http://www.primaryteachingresources.net/teaching%20resources/html/period_one.html">1º-2º E.P.O</a></li>

<li><a href="http://www.primaryteachingresources.net/teaching%20resources/html/period_two.html">3º-4º E.P.O</a></li>
<li><a href="http://www.primaryteachingresources.net/teaching%20resources/html/period_three.html">5º-6º E.P.O</a></li>
<li><a href="http://www.primaryteachingresources.net/teaching%20resources/html/links.html">LINKS</a></li>

</ul>

 

Why does 'home' appear in an <lis> tag? More to the point, what is an <lis> tag? I have been a web developer for years now and I have never used an <lis>

 

It also is probably to do with the anchor tag, try changing it to:

 

><a href="#">HOME</a>

[ivanmax]

Hi,

 

The tag is called lis because I couldn´t find any other way of marking the home button to show the user in which page he is. It works fine in firefox...but just in firefox. It there any other way of doing it? I mean, highlighting the home button so the user knows he or she is in the home page?

 

Thanks,

 

Iván

 

It appears to be your menu

 

><ul> 
<lis><a>HOME</a></lis>
<li><a href="http://www.primaryteachingresources.net/teaching%20resources/html/about_us.html">ABOUT US</a></li>

<li><a href="http://www.primaryteachingresources.net/teaching%20resources/html/contact.html">CONTACT</a></li>
<li><a href="http://www.primaryteachingresources.net/teaching%20resources/html/period_one.html">1º-2º E.P.O</a></li>

<li><a href="http://www.primaryteachingresources.net/teaching%20resources/html/period_two.html">3º-4º E.P.O</a></li>
<li><a href="http://www.primaryteachingresources.net/teaching%20resources/html/period_three.html">5º-6º E.P.O</a></li>
<li><a href="http://www.primaryteachingresources.net/teaching%20resources/html/links.html">LINKS</a></li>

</ul>

 

Why does 'home' appear in an <lis> tag? More to the point, what is an <lis> tag? I have been a web developer for years now and I have never used an <lis>

 

It also is probably to do with the anchor tag, try changing it to:

 

><a href="#">HOME</a>

[OJB]

yes you can use CSS classes

 

i.e.

><ul>
<li class="current"><a href="#">HOME</a></li>
<li><a href="http://www.primaryteachingresources.net/teaching%20resources/html/about_us.html">ABOUT US</a></li>

<li><a href="http://www.primaryteachingresources.net/teaching%20resources/html/contact.html">CONTACT</a></li>
<li><a href="http://www.primaryteachingresources.net/teaching%20resources/html/period_one.html">1º-2º E.P.O</a></li>

<li><a href="http://www.primaryteachingresources.net/teaching%20resources/html/period_two.html">3º-4º E.P.O</a></li>
<li><a href="http://www.primaryteachingresources.net/teaching%20resources/html/period_three.html">5º-6º E.P.O</a></li>
<li><a href="http://www.primaryteachingresources.net/teaching%20resources/html/links.html">LINKS</a></li>

</ul>

 

just add class="current" to which ever page link you are on, then in css:

 

>li.current{background-color:#B0C7D1;color:#0B4F6D;}

Edited May 25, 2009 by OJB

[ivanmax]

Thank you. I am learning so much thanks to you guys.

 

Well, I have tried it and it works in IE7 but not in Firefox. In Firefox all the text in the menu appears highlighted. Why can that may be?

 

I really thank you in advance.

 

Iván

[OJB]

Can you post a link to your new version so I can inspect it when I am at work?

[ivanmax]

There it goes:

 

http://www.primaryteachingresources.net/te.../unaprueba.html

 

Thanks a lot,

 

Iván

[OJB]

Seems to be working fine for me in firefox, try clearing your cache:

 

CTRL + F5 (if you are on a PC)

[ivanmax]

It does work fine. Thanks a lot.

 

Could I ask a last question?

 

In IE7 when you go to 5-6ºE.P.O (button in the menu) both that button and the 1º-2ºE.P.O button appear highlighted.

 

Why is that?

 

I really thank you. People like you make the net a great place.

 

Thanks a lot,

 

Iván

[OJB]

What do you mean by 'highlighted' I can't seem to replicate the issue? Can you explain the steps you take to get this issue?

Edited May 26, 2009 by OJB

[ivanmax]

Hi,

 

Sorry I couldn´t answer yesterday, but I was far too busy.

 

I have included the classes as adviced and the site works fine in IE7 and IE8. It looks horrible in IE6, but should I really worry about such and old browser? The number of users of IE6 are dropping day by day...

 

A problem. As said the site works fine in IE7 and IE8 but the menu doesn´t work ok in firefox. It doesn´t show the user in which page it is, as all the text in the menu is always the same colour.

 

Why does this happen?

 

I have already cleaned the cache.

 

Thanks a lot in advance.

 

Iván

[OJB]

The reason it is not working is because the CSS style for your "current" class is being overridden by other values.

 

Take note that CSS works both on

 

1) last rule takes precedence

and

2) more specific rule takes precedence

 

 

so if for example you have something like this:

 

><ul id="menu">
<li class="current">
<a href="#">BLAH</a>
</li>
<li>
...
</li>
</ul>

 

and you have the following rules:

 

>ul#menu li{color: #ffff;}
ul#menu li a{color: #999;}
li.current {color: #ccc;}

 

despite li.current being further down the css the ul#menu li a will take precedence because it is more specific

 

what i suggest you do is change your li.current style to:

 

>#stripedown li.current a {color:#0B4F6D;}

 

i hope you catch my drift

 

 

 

 

as for IE6, yes it is a pain, yes I hate coding for it every day, however there are still a lot of people using it, not as many as IE7, so I still make sure everything I do works in IE6.