?
Solved

CSS menu

Posted on 2005-03-07
25
Medium Priority
?
698 Views
Last Modified: 2013-11-19
I have a page layout with a menu on the left, the menu looks perfect in Firefox but the spacing and the rollover effect is all messed up in IE. How can i fix this :

http://clientlink.aiwmedia.com/temp/css/test.htm

I only have control over the CSS not the HTML itself

Thanks Alex
0
Comment
Question by:alex_wareing
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 9
  • 4
  • +1
25 Comments
 
LVL 18

Expert Comment

by:bruno
ID: 13482028
they look more or less the same to me - some extra space on the top of the firefox one.

i certainly do not see a rollover effect.
0
 
LVL 18

Expert Comment

by:bruno
ID: 13482042
your page is a mess - Firefox doesn't even see ANY CSS associated with the page.  

your link statement is in the body of your page, you have dashes in your class names and you have got errors all through the page:


http://validator.w3.org/check?verbose=1&uri=http%3A//clientlink.aiwmedia.com/temp/css/test.htm


If you don't have control over the HTML at all then you are likely out of luck - considering the HTML is wrong when it tries to load the CSS.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13482146
Scrap it and built it to standards from scratch.  It is not even worth trying to salvage.  It will be less work to re-do it.  If you can't access anything but the CSS you are just wasting your time; as Bruno so eloquently put it "you are likely out of luck".

Cd&
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 18

Expert Comment

by:bruno
ID: 13482339
"you are likely out of luck"

was that a bit nicer than you might have put it, Cd&?  ;-)



bruno
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13482446
I'm probably would have said something like you have a much chance of getting it to work as I have of getting bruno to stay out of Hooters. ;^)

Cd&
0
 
LVL 18

Expert Comment

by:bruno
ID: 13482873
delightfully tacky, yet unrefined!  <---- Hooters slogan, or Cd&'s description?

;-)
0
 

Author Comment

by:alex_wareing
ID: 13484107
Ok I've tidyed up the HTML a little, I appreciate what your saying. I really wish i could start from scratch but unfortunatly the HTML is ouput from a CMS database. I was hoping now that i've fixed the HTML a little someone might be able to help me? Thanks
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 13486202
The only difference of any significants is the indent on the menu items which would probably not be there if it was not for the mis-use of a list as a container for menu links.  

Start by adding a doctype to get IE out of quirks mode.  I recommend:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

If that still leaves the gap then you will probably have to use a negative margin on the
#nav ul li a  selector which may then screw it up in Firefox; in which case we will have to do a hack to get around the original hack of using a list for something that is not a list.  Hacks breed hacks so down the road you will just have to keep adding hacks until the whole thing shatters.

Cd&
0
 
LVL 18

Expert Comment

by:bruno
ID: 13486478
holy crap am I looking at the same page I was the other day?  maybe this is what it looks like w/ the CSS applied....

looks great in Firefox - try Cd&'s suggestions and see where that gets you in IE


>>the original hack of using a list for something that is not a list.


what would you recommend was used instead of a list?  I don't think using a list there is a 'hack' at all...
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13488283
Links will stand on their own and can be style just as ble as list eleemnts.  In fact the inherent behaviour if li is part of the problem that has to be worked around here.


http://www.w3.org/TR/WCAG10-HTML-TECHS/#lists

"The HTML list elements DL, UL, and OL should only be used to create lists,..."

"Non-visual users may "get lost" in lists, especially in nested lists and those that do not indicate the specific nest level for each list item."

http://www.w3.org/TR/ATAG10/

"Structural markup should not be used incorrectly to control presentation or layout."

"Structural markup should be used correctly to communicate the roles of the elements of the content ..."

In other words, if it not a list it should not be codes as a list.

The same kind or "shortcuts" in the last century gave us a legacy of table based layouts, and now we are seeing a flood of list based menus.  This one is actually not that bad because it is a single level.

Cd&
0
 
LVL 18

Expert Comment

by:bruno
ID: 13489183
how is a menu different than a "list" of hyperlinks?  one could argue that it is all just semantics anyway.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13490866
>>> how is a menu different than a "list" of hyperlinks?
That menu IS a list of links.  The purpose of lists is to clarify and summarize.  It is structural markup, and in the context of a menu it is being used for presentation, not structure.  Think about it the big accessibility weakness with list, is that the readers have a problem keeping track of where they are; does not sound like the appopriate container for nav, especially some of the one I have seen nested three levels deep.  They end up almost as messy as tables.

Links styled inside a div is a far better choice and if you go throught the PAQ you will find that getting them right is a walk in the park compared to nested lists. The biggest problem I have with these list based menus is that it takes so much time to get them right and they break so easy that they become the most important thing on the page.  

When Nav presentation take more time then content, there is something wrong.  When the focus of a page is nav instead of content there is somthing wrong. When it is necessary to use 5 levels of nest for the selectors like "#nav ul li ul li a" we might as wll go back to tables because that is not cascading; that is cell level styling and all the nested lists are doing is perpetuating the same nested grid structure that forces rigidity so everyone everyone will see the cool menus.

Big deal! It is just part of the cycles.  Images,  then tabs, to image maps, then over-styled divs,  then table row, to buttons, back to tabs, now lists.  I'm not sure if we are done with the horizontal list nonsense yet; or if that should be considered part of the over all "listmenu as the in thing" cycle.

Six months from now it will be something else and developers will be cleaning up messy listmenus, trying to do some other "in" thing instead of taking care of content.  As for me; I will just keep showing folks how to do things the right way, and if they don't wanna do it right.  I just shift my time to those who do.

Cd&
0
 
LVL 18

Expert Comment

by:bruno
ID: 13491089
:-)

seriously, i think it deserves an article on your website.  
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13491369
I will put is on the *list* after I finish the series I am doing on tables.

Cd&
0
 
LVL 18

Expert Comment

by:bruno
ID: 13491473
excellent... :-)
0
 

Author Comment

by:alex_wareing
ID: 13492378
how would you suggest to make the menu bart then?
0
 

Author Comment

by:alex_wareing
ID: 13492402
how would you suggest to make the menu bart then?

Sorry i wrote that without hitting refesh and reading what you had put, but i'd still like to know what the best HTML and CSS is for making vertical menus, thanks
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13496466
>>> the best HTML and CSS is for making vertical menus

There is no such thing as the best HTML and CSS for  anything.  What there is is good code used approriately.

There must be a million free menu scripts on the Internet.  Some are good some are bad.  Some require a high level of skill to use.  

Watch nothing fancy:
<html>
<head>
<title> menu </title>
<style type="text/CSS">
#container {width:200px; text-align:center;background-color:aqua;
            border:3px ridge gold; padding:5px;}
#container input {width:175px;padding:2px;text-align:center; font-weight:bold;
                  margin-top:5px;}
input.out {background-color:blue;color:gold; border:2px solid blue;}
input.over {background-color:gold;color:blue border:2px outset silver;}
</style>
</head>
<body>
<div id="container">
<input class="out" type="button" value="HOME"
   onmouseover="this.className='over'" onmouseout="this.className='out'"
   onclick="location.href='home.htm'" />
<input class="out" type="button" value="Page 1 --- Summaries"
   onmouseover="this.className='over'" onmouseout="this.className='out'"
   onclick="location.href='home.htm'" />
<input class="out" type="button" value="Page 2 --- History"
   onmouseover="this.className='over'" onmouseout="this.className='out'"
   onclick="location.href='home.htm'" />
<input class="out" type="button" value="Page 3 --- About Us"
   onmouseover="this.className='over'" onmouseout="this.className='out'"
   onclick="location.href='home.htm'">
<input class="out" type="button" value="Subscribe to this site"
   onmouseover="this.className='over'" onmouseout="this.className='out'"
   onclick="location.href='home.htm'">
<input class="out" type="button" value="Store --- great deals"
   onmouseover="this.className='over'" onmouseout="this.className='out'"
   onclick="location.href='home.htm'">
</div>
</body>
</html>

It takes 15 minutes and basic navigation is done.  It can be generated from server script, put in an include ar generated with Javascript; or just cut an pasted into page.  The caontainer can go anywhere with position or floats.  Want it to go to a horizontal bar change one attribute... the width on container as 100% BANG!! That gives yields a cross-resolution horizontal nav.  K.I.S.S.

Menu ain't rocket science and users don't care what they look like.  Spen time on content instead of creating menus that say "hey look what I did!... no cares.

Cd&
0
 
LVL 18

Expert Comment

by:bruno
ID: 13497071
cd&, looks nice but can search engine spiders follow those links?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13497357
Where was search raised as an issue?  It is a red herring.  If a developer spends all their time on nav instead of content; then a ranking is worthless, becaues users don't waste time on sites that don't present content the way they want it. However that exact same method and style can be used by replacing the input with a, or span or button. Links can be put in a span or in a button. You could even use images by setting them for the backgrounds.  Like I said at the beginning of that post there is no "best" just "appropriate".  There is no one size fits all menu; which is why most of the menu scripts around are worthless.  The only reason there are millions of them around is because anyone can write a menu script.

You are absolutely 100% missing the point.

Which is: Any developer who spends more than an hour doing a menu should get a job doing something else.  It is the simplest piece there is, and if you can't do a menu you are never going to master content presentation (which is where you do need the search engines to see the good stuff).  

It never fails to amaze me that we get developers coming to this site worrying about getting some pixel perfect display cross-browser; because they think someone cares. Then when they are finally finished an put the site up.  The content is worthless.  So the next month they are back again with a new look to get users to their site; because the reason they are not coming has t be either they are being screwed by the search engines or they are not doing enough animated gifs, and flash effect on the home page.

Some people just don't get it. The the nav on a simple site is worth 2% of development time.  On a very complex site it should rise to no more than 5%.  It is like there is a wave of junior developers who  have decided to follow the bloggers in spending all their time on look and feel to hide the fact that the content is 90% worthless.

Cd&
0
 
LVL 18

Expert Comment

by:bruno
ID: 13497740
it was just a question.... :-)


>>because they think someone cares.


I am sure someone does - probably the person who is sigining their paycheck.  most of the developers we are answring questions for here aren't the ones who came up with the design - and might not have a huge input into changing it to make it more 'web' friendly.
0
 
LVL 18

Expert Comment

by:bruno
ID: 13511751
Cd&,

Just saw this as I was validating a page and thought of you...  ;-)

http://www.w3.org/QA/Tips/unordered-lists

0
 
LVL 23

Expert Comment

by:sciwriter
ID: 13649780
Alex, if you are still in need of some help with this, and you only have control over the CSS, you might look at this -- it includes an IE fix for list elements, which are notoriously chaotic in IE --

http://www.seoconsultants.com/css/menus/tutorial/

If you have control over the HTML, it could be fixed too, but you don't I assume.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13649850
An interest link.  A very nice menu, but the screwed up content presentation in both IE and FF, probably proves my point about wasting time on menus instead of getting the content right is counter productive. The page ends up with unnecessary horizontal scrollbars. In FF it renders outside the borders on some components, and with a large font size it turns into an unusable mess.

But I guess presentation does not matter if you have a "cool" menu.

Cd&
0
 

Author Comment

by:alex_wareing
ID: 13649924
COBOL I am 100% behind your points about focusing on content. I belive it to be by far the most important part of the page, however I am employed by a company that offers a CMS solution and I develop templates for them. In this case I only have control of the CSS and i am only intressted in the menu and navigational features as the client completes the rest.

0

Featured Post

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question