Align Horizontal Menu to the Right in a DIV - RESOLVED

[davebarnes]

http://marketingtactics.com
looks OK in Firefox
does not in IE8

I cheated to get it looking OK in Firefox by making the DIV a particular width.
I spent an hour searching the Milonc website and this forum and could find my answer.

Question: How do I get the entire horizontal menu to align (or float) to the right in the DIV?

[Ruth]

Hi,

I don't have IE8 so it's hard for me to give any response. I tried 6 and 7 but it is working just like in FF. If you could give me a screenshot, or explain what is happening, I might be able to figure out what is up, many times I can do that just seeing what's happening. One thing I did notice is that you are calling the menu in a div, but you don't have it set up a relatively positioned menu. You have all menus in the same file and are not using the buildAfterLoad=true; nor do you have the main menu set as position='relative'; I have no idea if that is causing the problem or not.

Ruth

[davebarnes]

I added:
buildAfterLoad="true"; to the top of my Menu_Data file
position="relative"; to the main menu in the file

Screen shot of IE7 shows the problem is still there.
For me: Firefox has the menu flush right. Safari, IE7 and IE8 have it offset to the left by about 8px.

MT_IE7.gif.jpg (27.5 KiB) Viewed 7810 times

[Ruth]

Hi,

OK, just to be sure...are you saying you want the menu to be right up to the right border just like the grey box at the top is?

Ruth

[davebarnes]

Yes

[Ruth]

Hi,

OK, here is what I came up with for fixing this. Change the div to the following

Code: Select all

<DIV style="MARGIN-TOP: 19px; FLOAT: right; WIDTH: 100%; HEIGHT: 23px; xbackground-color: #1A75CF;" align='right'>

Notice that I changed the width to 100%. The reason I did that is for people who have larger fonts. I set the fontsize in the menu to 150% and when this is done, if you leave the div at the 446 the menu expands to the right side in IE7, NN7.2, 9, Opera 9.5, 10, FF 1.5, 2.0.0.18, 3.0.8. The only ones it goes to the left is Safari 4, GoogleChrome 1x. So, making it 100% for the div works in all browsers with larger fonts with expansion to the left, the other way it only works in the two I mentioned that I have.

Hope this helps

Ruth

[davebarnes]

Ruth,

Thank you very much for the SOLUTION.

My only problem--a very minor one--is that your solution uses a deprecated technique.
My code now reads: <div style="width:100%; height:23px; float:right; margin-top:19px;" align="right">
align="right" should not be necessary.

Sometimes, I just hate CSS.

thanks,
dave

[Ruth]

A man after my own heart. The day I can find a tutorial which starts with one simple page layout and then using that same beginning layout adds to it building more involved ones so you can see from a single foundation what is going on, I might think about trying to learn css for page design. The day they actually create divs so they work with clear explanations of how they are working, I will go out there and learn some of it!

The problem has to be something in the css, that is, how the divs are supposed to work, and I will keep trying to find out what it is, but in the meantime this works. Yes, the tag is deprecated, but it's interesting that it actually works the same in both IE and FF, that is almost an unheard of occurrence. Hmmm, does that mean the problem, or rather how the divs work, is in css since both IE and FF work fine with the align=right, but neither work really correctly with just the float: right? I'll do some research and let you know, though it may take some time to find it. I'd like to know

Ruth

[Ruth]

Well, I found a solution which doesn't use the deprecated align=right, following an example at w3 org, though this was for a paragraph with a span in it to move a letter all the way right, I tried it with the menu code, and it seemed to work in all the browsers I have. That should validate, I think.

Code: Select all

<DIV style="MARGIN-TOP: 19px; FLOAT: right; WIDTH: 100%; HEIGHT: 23px; xbackground-color: #1A75CF;">
<!-- Milonic DHTML Website Navigation Menu Version 5.0+ Copyright 2005 (c) Milonic Solutions Limited (UK). -->
<SPAN style="float: right"><SCRIPT language=JavaScript src="milonic_menu_code.js" type=text/javascript></SCRIPT>

<SCRIPT language=JavaScript src="MainMenu_data.js" type=text/javascript></SCRIPT></SPAN>
</DIV>

Ruth

[davebarnes]

Ruth,
The span works perfectly.
Thanks,
dave

By the way. XHTML requires that all attributes be in lower case. So, "MARGIN-TOP" should be "margin-top", etc.