ThemeShaper Forums » Thematic

[closed]

Positioning Z-index problem

(4 posts)
  • Started 7 years ago by him
  • Latest reply from helgatheviking
  • This topic is not resolved
  1. him
    Member

    Hi,
    I am re-doing design for a client, and facing problem with positioning the main DIV.

    My logo (branding) extends below header and my main DIV rises under it through negative margin, and by positioning branding with higher z-index value. Everything worked well in my local dev, but on the web the main DIV is not going up under the branding.

    Here is the link : link

    It's taking away all the appeal of the design. Any ideas?

    thanks!

    PS: the problem is only in Firefox 3.6+, strngely works fine in IE8!!

    Posted 7 years ago #
  2. proto
    Member

    Hello him,

    Are you using firebug (firefox) or Google Chrome and their inbuilt developer tools? You should be able to identify the problem there. Using firebug I do see a difference in your #main styling. I get the following CSS styling on your homepage for the #main element:

    .home #main (line 356)
    
    {background-color: transparent;
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    
    <difference is here>margin-top: 0px;<difference is here>
    
    z-index: 1;}

    But for the main element I get:

    #main (line 326)
    
    {background-color: #ffffff;
    background-image: url("images/top_bar.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: left top;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    
    <difference is here>margin-top: -40px;<difference is here>
    
    margin-left: 35px;
    margin-right: 35px;
    padding-top: 0pt;
    padding-right: 0pt;
    padding-bottom: 0pt;
    padding-left: 0pt;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 920px;
    z-index: 1;}

    So it looks like your .home #main styling may be taking precedence over just your #main styling because it appears after in the order of your stylesheet. Try adjusting your css so they're both the same, something like (I've put in 40px, but put whatever you want here):

    .home #main {margin-top: -40px;}

    If that doesn't work I'd use Firebug (Firefox) or Google Chrome and its inbuilt developer tools (right click to inspect an element). The only other thought I'd is that I think (happy to be corrected on this) z-index requires to an element to be positioned. See here http://www.w3schools.com/cssref/pr_pos_z-index.asp

    Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

    Someone else might have another suggestion, that's how I'd go about identifying the problem.

    Firebug (Firefox) or Google Chrome have great developer tools, you're probably already using them, if not I would definitely recommend they'll make your life a LOT easier!

    Hope the above helps...

    Posted 7 years ago #
  3. him
    Member

    Thanks for the help Proto!

    Sorry, I was just tinkering around with the margin trying diff. settings and looks like I left the .home margin. Have deleted it and now only the

    #main margin-top:5px;

    is there. Its working fine in Chrome and IE8 but the problem is still there in Firefox. SO i guess I will have to isolate Firefox and see why its doing this.

    Yes, firebug is the lifeline.

    thanks again.

    Posted 7 years ago #
  4. looks like you are overcomplicating

    #branding {
    position: relative;
    }
    #blogtitle {
    position: absolute;
    top: 0;
    left: 0;
    }
    
    #blog-title a {
    display: block;
    height: 230px;
    width: 230px;
    text-indent: -999999px;
    background: url("images/new-logo.png") no-repeat scroll center top;
    }

    or you can put the absolute positioning on #blog-title a instead, doesn't matter much. remove everything else from #branding and remove #branding a entirely. you'll need to tweak the menu positioning afterwards as it will have too much negative margin

    Posted 7 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.