Jump to content
Sign in to follow this  
ivanmax

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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 by OJB

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

CTRL + F5 (if you are on a PC)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by OJB

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...