• Web Design (WordPress, Joomla, etc.)

  Horizontal Spry Menu and UL Alignment Issues in IE

  Posted by Shweta Shyamani on July 5, 2009 at 3:10 am

  Hi there,

  I’m very new to web design and I’m having a bunch of trouble with a Spry menu I created in Dreamweaver. When viewed in Firefox it is roughly centered and looks fine (if there’s a way to lock down the position in all browsers that would be great), but in IE and Safari the menu bar floats off to the right. The menu bar is grey but IE adds a white rule at the top of it.

  Also, I have an unordered list in one of the cells of my table and IE is not displaying it properly. If I add margin/padding to account for the spacing issue in IE, the text is moved too far right in other browsers. Is there an IE only fix or workaround that anyone can recommend?

  Here’s the page both issues are happening on:

  https://www.liberation2010.com

  Thanks in advance 🙂
  Shweta

  Shweta Shyamani replied 17 years, 1 month ago 2 Members · 2 Replies
• 2 Replies

• 

  Curtis Thompson

  July 5, 2009 at 7:28 pm

  hello…

  it looks like your primary problem is that you have the divs that are parents to the menu absolutely positioned:

  #apDiv1 {
  position:absolute;
  width:738px;
  height:41px;
  z-index:1;
  left: 346px;
  top: 276px;
  clear: both;
  float: none;
  }

  you can see the problem in action if, once you load the page, you resize your browser window horizontally. the content behind the menu centers itself as you go, but the menu stays fixed (due to the absolute positioning)…

  no guaranteed fix, but i’d remove the position:absolute attribute (or make it position:relative – same thing) and then remove the top and left px position bits. that will get it back to living in the page beneath it, and then you can start to see what adjustments need to happen at that point…

  hope that helps!

  sitruc
• 

  Shweta Shyamani

  July 8, 2009 at 3:22 pm

  Thanks so much! I’ll give it a try…

Reply to this Discussion! Login or Sign Up