The alignment of my CSS drop down menu is off across all browsers.

  • 1
  • Question
  • Updated 7 years ago
  • Answered
So close to finishing my page, however today all the CSS drop down menus are aligned incorrectly on the first item.

Today the only change I made to the site was redirecting another URL to the site, which I don't think would have an effect - which leaves me at a loss as to why. Though I suspect something in the CSS needs to be overridden.

That being said I've tested it on blank templates and can replicate the error.

It was created using pure CSS (purecssmenu.com) and the CSS and HTML code has been added to the header as advised elsewhere on this forum, and alighned using an html widget.

This is basically the last piece of the site to finalise so if anyone has any ideas on how to correct the bug it would be much appreciated :) My site is www.veteransexercise.com.au

Thanks!
Photo of veteransexercise

veteransexercise

  • 8 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hello verteransexercise,
I'm sorry you're having some trouble with this. I am forwarding this to our HTML team to take a look at as unfortunately this is not my area of specialty. Please allow them 48 hours to review your case and post back here. Thanks much for your patience in the meantime.

Kind Regards,
Emmy
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I'm commenting here because it wont allow me to anywhere else because of bad code posted to this topic. Could you or another Yola Moderator remove the post by Shawn below that has bad code in it? It is messing up this topic.

Thanks,
Nathan
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Hello verteransexercise,
I'm good with HTML and CSS so I'm going to take a look at this and see if I find a problem.

Could you tell me where you got this menu from?

Best Regards,
Shawn
Photo of veteransexercise

veteransexercise

  • 8 Posts
  • 0 Reply Likes
Hi Shawn,
It was created using Pure CSS Menu (purecssmenu.com). All the code in the header source is what is used to create it.
Thanks,
Nick
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Added to the header you say??? That might be your problem there.

I would do the following instead (Caution: use a test page first until you know which top margin setting to use):

1) Drag a two column widget from your right toolbar onto your page
2) Drag an HTML widget into the right side of the two column widget and paste your menu code inside of it
3) Adjust the margin settings of the two column widget from step one until your menu is in the same location as it is now. Do the TOP margin setting adjustments in increments of no more than 50 and watch your menu rise from bellow your banner to above it.

Alternatively, if that fails then try this in addition to above...

On a test page things to try:

A) In the first part of your menu code make the following snippet the same as I believe they might need to be.

ul{position: absolute;left:-1px;top:98%;} ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}

Paste

absolute;left:-1px;top:98%

in the place of

absolute;left:98%;top:-2px;

Additionally, as Internet Explorer seems to have issue with it you could try removing all the code in brown in your HTML editor:

B) Removing the following

1) <!-- Start PureCSSMenu.com STYLE -->
2) <!-- End PureCSSMenu.com STYLE --> <!-- Start PureCSSMenu.com MENU -->
3) <!--[if gt IE 6]-->
4) <!--[endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
5) <!--[if lte IE 6]></td></tr></table></a><![endif]-->
6) <!--[if gt IE 6]-->
7) <!--[endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
8) <!--[if lte IE 6]></td></tr></table></a><![endif]-->

I think that it might be as easy as using the HTML widget and adjusting the margin settings as described above rather than the Heading editor.

Happy site building
Ed

If the lady bears don’t find you handsome they should at least find you handy...Don't forget to share the bear....

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
PS. I and many here know what your forum name means but a hyphen might be a little clearer for those who don't. ;) Or maybe my mind was in the gutter when I read your name too quickly. LOL Who knows...
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
PPS. When you try my advice from above don't forget to remove the entire code from your header as it will undoubtedly interact with the advice steps.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
PPPS. I noticed the little drop in the "Home" button the other day (last week) but forgot to add it to my post. My bad... It is nothing that you have done recently as it has more than likely been there the whole while.
Photo of veteransexercise

veteransexercise

  • 8 Posts
  • 0 Reply Likes
Thanks Ed, very helpful once again. I managed to get it to the right place, only thing is the words are now underline when it's put in a widget. Any ideas on how to remove.

haha yes i know the name can sometimes read another way. we have purchased hyphened url but all the business cards have the other address, so there is a possibility we can cloak it but it may be confusing.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
I cannot see that any changes have been made. Did you republish your site yet? I still see the dropped "Home" link in Chrome.

The menu script is still in your heading...

Additionally, you have a boatload of improper images in your menu script. I see that

/images/arr_white_2.gif

and many others don't link to any image in your resources folder.

As far as the underlining is concerned I cannot see it or the source until you update your site.

Sadly, i have to run but I am sure that someone will help you when I am not here.
Photo of veteransexercise

veteransexercise

  • 8 Posts
  • 0 Reply Likes
screen shot reference...
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello veteransexercise,

I apologize for not getting here earlier. I have tried a number of things to remove the underline to no avail. I hope that Mr. Ed may be able to spot the issue!
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Hello everyone...
I can't post on this post anymore.
You see that post below it mest my getsatisfaction up

Here is the code you need to put to fix the underline problem:

Just add this to the a tag

style="text-decoration: none;"

Like this:

  • Home


  • Please delete the post below so i can post normally again, Thanks
    Photo of Shawn Holman

    Shawn Holman

    • 486 Posts
    • 26 Reply Likes
    IM sorry but the code tags aren't working either
    Photo of Shawn Holman

    Shawn Holman

    • 486 Posts
    • 26 Reply Likes
    the underline problem is fixed one that one screenshot because i fixed it using the developer tool