background color missing from part of some menu items

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:10

background color missing from part of some menu items

Poster: HelenM
Dated: Wednesday May 20 2009 - 20:48:44 BST

Hello,

I have a horizontal menu of 8 items, which I embedded in a table row of 8 cells, each in its own cell. I have a fixed width on each cell depending on the length of text heading. In Internet Explorer browsers (v6, v7, v8) this works exactly as I want. However, FireFox v2 and v3 have trouble rendering the background color of the leftmost 4 cells, leaving the background outside the text with no color. I have no way to provide an accessable link to my development site, so I have attached all the page sources, etc. A screen shot was too big to attach.

Thanks for any help you can give me,
Helen

Attachment:

files.zip

Re: background color missing from part of some menu items

Poster: Ruth
Dated: Thursday May 21 2009 - 22:02:28 BST

Hi,

Is the menu supposed to be the width of the table cell in which it resides, and thus the background color completely covers the table cell? If that is the case, then I suggest you add itemwidth=x; to each menu, where x is the width you have listed in the table cell.

You say IE is working correctly, if you could get a screenshot of that and put it in the zip file I could open that image and I could see how you want the menu to look. [as long as it is something like, jpg, gif, png file I can open it] If I'm right above, then putting in item width should work.

Ruth

Re: background color missing from part of some menu items

Poster: HelenM
Dated: Tuesday May 26 2009 - 13:28:15 BST

Hi Ruth,
I tried Friday to post a reply, but it didn't make it, I'll try again.
Yes, the menu in the cell is supposed to fill the full width of the cell. I finally figured out how to turn a screen shot into an image. Here is the IE screen:

Attachment:

IE browser screen shot.zip

Here is the FF screen:

Attachment:

FF browser screen shot.zip

Code:

with(ASCStyleM1=new mm_style()){
onclass="home_milonic_on";
offclass="home_milonic_off";
offbgcolor="#02003E";
offcolor="#FFFFFF";
onbgcolor="#000099";
oncolor="#FFFFFF";
offdecoration="none";
ondecoration="none";
}

Here is my CSS for the first cell:

Code:

.home_milonic_off {
  font-size: 8pt;
  font-family: verdana;
  font-weight: normal;
  text-decoration: none;
  text-align: center;
  width: 59;
  padding-top: 4px;
  padding-bottom: 4px;
  border-top: 1px solid #FF0000;
  border-bottom: 1px solid #02003E;
  border-right: 1px solid #02003E;
  border-left: 1px solid #FF0000;
  line-height: 1;
  letter-spacing: 0.01px;
}
.home_milonic_on {
  font-size: 8pt;
  font-family: verdana;
  font-weight: normal;
  text-decoration: none;
  text-align: center;
  width: 59;
  padding-top: 4px;
  padding-bottom: 4px;
  border-top: 1px solid #FF0000;
  border-bottom: 1px solid #02003E;
  border-right: 1px solid #02003E;
  border-left: 1px solid #FF0000;
  line-height: 1;
  letter-spacing: 0.01px;
}

Here is TD for the first cell:

Code:

            <td width="59" align="left" valign="top" >
<script type="text/javascript">
with(milonic=new menuname("Main Menu1")){
alwaysvisible=1;
orientation="horizontal";
style=ASCStyleM1;
aI("text=Home;url=<c:out value='${WarrantyPolicyURL}' escapeXml='false' />;");
}
drawMenus();
</script>
            </td>

Thanks,
Helen

Re: background color missing from part of some menu items

Poster: HelenM
Dated: Tuesday May 26 2009 - 18:57:10 BST

Hi Ruth,

I tried Friday and this morning to post a reply, but it doesn't make it in, doesn't seem to give an error, the preview seems okay, I'll try again.

Yes, the menu in the cell is supposed to fill the full width of the cell. I finally figured out how to turn a screen shot into an image. Here is the Internet Explorer screen:

Attachment:

IE browser screen shot.jpg

Here is the FireFox screen:

Attachment:

FF browser screen shot.jpg

I haven't been able to get itemwidth=x; to work with this, so I have a width: x: in the CSS. Of course, I have tried so many different combinations I could be lost in the sheer number of them. I guess you are saying to put the itemwidth=x; in the script that is in each cell, I think I've been testing with it in the js file. I didn't realize the menu had already been moved from the file into the html. I will try that and see what happens.
Thanks,
Helen

Re: background color missing from part of some menu items

Poster: Ruth
Dated: Friday May 29 2009 - 18:34:30 BST

Hi,

The posts actually did show, so I just removed the extra ones

Place the itemwidth=x in each menu, not in the style. Also, I noticed you are putting each in the table, but you have not put in position='relative'; in each menu, like below. I tested this in FF and it takes up the full table cell. The problem for me is that I don't actually have your 'html' page code. I have no way to get the asp pages to work on my desktop. I did take all the 'coding' and built an html page using what is in those files.

Code:

<td width="59" align="left" valign="top" >
<script type="text/javascript">
with(milonic=new menuname("Main Menu1")){
alwaysvisible=1;
orientation="horizontal";
style=ASCStyleM1;
position='relative';
itemwidth=59;
aI("text=Home;url=<c:out value='${WarrantyPolicyURL}' escapeXml='false' />;");
}
drawMenus();  </script>
            </td>

If adding that to your pages doesn't work completely, since my testing is based on what I built, you can also add the background color to that table where you have put each menu. I don't know what part of the css governs that, so I put it in the actual table coding on the page I made. Adding that fills in any spacing that is from padding or something else in the css that is causing the table to add padding or spacing, if there is anything. This is just a precaution.

Code:

<table id="catalogheader" width="741" border="0" cellspacing="0" cellpadding="0" style="background-color:#02003E">

Ruth

Re: background color missing from part of some menu items

Poster: HelenM
Dated: Tuesday June 2 2009 - 18:31:01 BST

Hi,

Glad my replies finally arrived. I could not see any of them still on Wednesday 5/24, on Friday they were all there, must have been visiting in post limbo.

I put in the itemwidth where you said and my problem was cured.

I had tried the "buildAfterLoad=true;" in menu_data.js with the "position=relative;" but that did not work at all in my setup, which is a JSP with JSTL. So today I put "position=relative;" where you showed it and IE browser made some things a little fatter: the search image row, the menu row, and the 4 silver image row in the footer stick out on the right and left. FF browser was well behaved on that.

Attachment:

IE browser Relative.jpg

We have two live Milonic menus, both are in one table cell, and neither use the relative. These were setup for us by a person who was familiar with your menus, and now I'm trying to learn how to make these menus work. We don't try to please all browsers, so I think I'll go without the relative on this one, but will try it on the next.

Thanks very much for your help,
Helen

Re: background color missing from part of some menu items

Poster: Ruth
Dated: Saturday June 6 2009 - 3:00:47 BST

Hi,

The increase size is probably going to be something from the css, most likely padding or margin, or if they are in table cells something to do with those, again most likely padding or margin. Because most people have a lot of css and things are difficult to find, usually what I do when testing for those issues is just begin removing [and putting back after testing] any line, one at a time, that has padding or margin coding it it.

Ruth

Re: background color missing from part of some menu items

Poster: HelenM
Dated: Thursday June 11 2009 - 15:18:59 BST

Hi,

Thanks for the tip on how to test this out, I'm not an HTML/CSS expert yet.
I need to move on right now to develope the rest of the site, but I will come back to test this later.

Thanks again,
Helen