Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

› WebAssist Forums › Design Extender › CSS Menu Writer › IE mess!

IE mess!

Thread began 1/15/2010 11:23 am by huey9ball398507 | Last modified 1/28/2010 1:15 pm by neilo | 3458 views | 12 replies |

1/15/2010 11:23 am | #1 huey9ball398507

IE mess!

Hi all!,
Thank you to all who can offer some help.

This is the site.
www.socalmodern.com

works great with all other browsers.. other than IE. How do I get IE to look correct.

Be sure to compare to firefox... Firefox is correct.

Thank you!

1/15/2010 12:58 pm | #2 neilo

In your menu.css stylesheet (CSSMenuWriter/cssmw/menu.css) find the line:

ul#cssmw0 > li > span > a {

and change the property for width from 'auto' to a fixed width for the level-1 menu items:

ul#cssmw ul.level-1 > li > a {
  background-color: #999999;
  background-image: none;
  border-bottom: solid 2px #fff;
  border-right: solid 1px #fff;
  color: #ffffff;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-style: normal;
  padding: 5px 5px 5px 5px;
  text-decoration: none;
  width: 140px;
}

Also add the width to:

ul#cssmw ul.level-1 {
left: 0px;
top: 100%;
width:140px;
}

IE needs widths to be specied. You can adjust the width to suit your needs.

1/15/2010 5:07 pm | #3 huey9ball398507

Thank you so much for the help with the width issue.

The next thing I am up against is the menu bar not loading correctly on deeper pages. Click around and I think you will see what I mean. www.socalmodern.com

Thank you so much for your help.

1/15/2010 5:18 pm | #4 huey9ball398507

Also.... That annoying black line under all the buttons. How can that be eliminated?

And I forgot...menu assist produces a separate IE .css called as an IF-Then statement

1/15/2010 7:48 pm | #5 neilo

Yes, - well spotted. The black line at the bottom of the menu in IE, is the 'border-bottom: solid 1px black;' line which can be found in the rules for sections:

ul#cssmw ul li {
and
ul#cssmw li {

in your 'menu_ie.css' file. These lines (border-bottom: solid 1px black;') can be removed if you don't want them.

I had a thorough trip round the menu testing all levels, - but it all worked well from this end. If there's a particular bit that you find is not loading correctly, then post back with where I can see it.

1/15/2010 11:55 pm | #6 huey9ball398507

Hi Neilo!,

Thank you so much for your help... I got it to work!(black line problem).
The last hurdle.

resources.php

I will attach a screen shot to be sure you see what I am seeing.

Thanks again for your help!

1/16/2010 4:57 am | #7 neilo

Hi,

Yes, - I see what you mean now.

The first thing to do before testing for any other causes, is to make sure that you have put the full 'DOCTYPE' declaration at the top of each page. Firefox and some other browsers may be able to render pages OK, but IE is fussy about this. The DOCTYPE declaration tells the browser what kind of language it's dealing with, and should be on all pages:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

I'm noticing that the pages that seem to be 'failing' are the ones where you have omitted to put the declaration at the top of the page (above the <html> tag).

Check that all pages have this included, then post back if there are still problems with the menu.

1/16/2010 12:28 pm | #8 huey9ball398507

OMG... go figure! It is fixed now...!

You hvae been such great help... I have another for you...( I have learned a lot)

index.php

The icon, rollover to the far right top. +SHARE... That is suppsed to be up at the top right UNDER the join our email list button.

Internet Exploder is ridiculous.

Thanks again!

1/16/2010 4:30 pm | #9 neilo

Hiya Huey,

This example reminds me of just how much I hate tables! No matter how meticulous your logic, or how much care and precision goes in to the formatting, using tables there is always something that drives you having to use a crowbar to get things to display as they should.

In the third column of the top table, place your cursor in the third column anywhere under the the 'share' graphic.

Right-click and select 'Table', then 'Split Cell'.

Select 'Rows', and '2' for the number of rows.

Click OK. The 'Share' Graphic should now be in its own cel. If it isn't, select it along with the javascript icons (or the javascript code in 'code view') and slide it in to the new cell.

The annoying bit: Make or find a 1px by 1px transparent gif (you probably have one in your site files) and slide it in to the cell below the cell that now contains the 'Share' image.

Select the gif image, and in the Properties Panel (properties Inspector) give the image a height of 70px (leave the width at 1px. You may have play with the height of the transparent gif until the page header looks like your other pages.

Hope this works for you!

1/27/2010 1:31 pm | #10 huey9ball398507

Thank you.. new issue

Hey Neilo,

Thank you so much for your help... I came across a new issue.. This is only happening to a handful of pages and that is it, very confusing.

homedetail.php

If you surf around the site you will see the 2 icons on the right "crobared" to the top right.

BUT when you click on the link above you will see that it is not at the top.

Do you have any suggestions?

Thank you again!

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now. Build a store, a gallery, or a web-based email solution.