Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS IE alignment problem – Sandbox based WordPress Theme

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #26323
    reverend
    Member

    Hi all,

    I have a bit of a problem. I have built a wordpress based theme, based on Sandbox, however the menu navigation is a little off. I am not sure why. Maybe one of you coud point me in the right direction. Thank you very much.

    Common Menu styles:

    Code:
    /* @group Menu */

    div#menu {
    height: 30px; margin: 1em 0; width: 100%; background: #fda200 none no-repeat left bottom; border-top: 2px solid #970200; -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px;}

    div#menu ul {
    padding: 0 2em;}

    div#menu ul,div#menu ul ul {
    line-height: 1; list-style: none; margin: 0; padding: 8px 0 0 0;}

    div#menu ul a {
    display: inline; margin: 0 0.25em 0 0.25em; padding: 0.2em 0.3em; text-decoration: none; color: #360f08; font-size: 1em;}

    div#menu ul a:hover {
    color: #970200;}

    div#menu ul ul ul a {
    font-style: italic;}

    #menu ul li ul li a {
    color: #360f08; margin-top: 15px;}

    /* My Comment */

    div#menu ul li ul {
    left: -999px; position: absolute;}

    div#menu ul li:hover ul {
    margin: 0; padding: 0.6em 0; left: auto; background: transparent url(images/sub-nav.png) no-repeat left top; line-height: 2em;}

    div#menu ul li:hover ul li {
    margin: 0; line-height: 2.5em;}

    div#menu ul li:hover ul li:last-child {
    }

    /* @end */

    IE styles so far:

    Code:
    div#menu ul li:hover ul {margin:0; padding: 0.6em 0;}
    #64989
    reverend
    Member

    I am a little stumped here, not a single idea? I’d greatly appreciate it.

    #64999
    Dominic
    Member

    I’m not familiar with sandbox and without seeing your HTML I can’t help much…

    I have had problems with IE not liking position:absolute unless a position for both x and y axis are declared. eg, left:999px; you need to also use top:0;

    Other thing with position absolute in IE, is it seems to take it’s position value (top, left, right etc) from inside the padding of the element it’s getting its position from. So if you have padding of 10px on the relatively position div, the absolutley positioned div inside it might be 10px out in IE.
    Wouldn’t hurt to set padding and margins to 0, just to see if you get a consistency between browsers.

    post a link to your HTML and I might have better advice for you.

    #65016
    reverend
    Member

    Hello Dominic,

    Thank you very much for your reply. I am trying that out this morning, but I thought I post the URL to the dev site in the meantime.

    URL: http://bit.ly/Xc02c

    Thanks for taking a look.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.