Imaged Borders Positioning Bad

HTML & CSS
1

Hi everyone, I got this side navigation that I’m working on and I have 3 images, the top part, then the background and 2 image borders on the left and right side that have a faded look. Where you see id = display_menu_2 is JavaScript content and it isn’t my coding, this is under volusion hosting. But the content thats display_menu_2 (links) are pushing the background borders down, can’t figure out what is wrong, thanks for any help.

        <div style="position:relative;height:300px;width:233px;margin:5px;">
           <div style="width:233px;padding:0;margin:0;height:300px;">
              <div style="background:url(http://kizzofsengir.webs.com/topsidenavbg.gif) no-repeat;height:28px;"><b id="Menu2_Title" class="Config_Colors_MenuTitle">Our Categories</b></div>
                 <div id="display_menu_2" style="background: url(http://kizzofsengir.webs.com/sidenavbg.gif) repeat-x top;height:300px;">    
                       <div style="position:absolute;top:5;left:0;background: url(http://kizzofsengir.webs.com/brdrfade.gif) no-repeat;height:300px;">&nbsp;</div>
                       <div style="position:absolute;top:5;right:-5px;background: url(http://kizzofsengir.webs.com/brdrfade.gif) no-repeat;height:300px;">&nbsp;</div>
                 </div>        
              </div>
            </div>
2

Where you see id = display_menu_2 is JavaScript content and it isn’t my coding, this is under volusion hosting.

But the content thats display_menu_2 (links) are pushing the background borders down, can’t figure out what is wrong,
Hi,
For starters, that first nested div with the same dimensions as the wrapping div is not needed at all so you can eliminate it. :wink:

As far as the problem you mention above, I’m not seeing the border divs being pushed down. Probably because there is no content in your example, what I mean is the script may be setting some bottom margins on the title. Hard to tell without seeing the live example.

You also left out the px unit behind the top:5 offset. That is being ignored and it is setting itself as top:auto;


<div style="position:absolute;[COLOR=Red]top:5[/COLOR];left:0;background: SNIP; height:300px;">&nbsp;</div>
<div style="position:absolute;[COLOR=Red]top:5; right:-5px;[/COLOR]background: SNIP; height:300px;">&nbsp;</div>

That right:-5px is not needed either, you should be able to set it as right:0

Here is a cleaned up version that seems to be working fine. Be careful using those fixed heights though.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
body {
    margin: 0;
    padding: 0;
    font: 100%/1.2 arial, helvetica, sans-serif;
}
.menu {
    width: 233px;
    height: 300px;
    margin: 15px;
    position: relative;/*containing block for AP border divs*/
}
.menu-title {
    height: 18px;/*28px with padding*/
    margin: 0;
    padding: 5px 10px;
    font: bold 16px/18px arial;
    background: url(http://kizzofsengir.webs.com/topsidenavbg.gif) no-repeat;
}
.menu ul {
    height: 298px;/*300px with padding*/
    margin: 0;
    padding: 1px 0;
    list-style: none;
    background: url(http://kizzofsengir.webs.com/sidenavbg.gif) repeat-x top;
}
.menu li {
    margin: 5px 10px;
}
.brdr-lt, .brdr-rt {
    width: 1px;
    height: 300px;
    position: absolute;
    top: 28px;/*position below the h2*/
    left: 0;
    background: url(http://kizzofsengir.webs.com/brdrfade.gif) no-repeat;
}
.brdr-rt {
    left: auto;
    right: 0;
}
</style>

</head>
<body>

<div class="menu">
    <h2 class="menu-title">Our Categories</h2>
    <ul>
        <li>Menu Content</li>
        <li>Menu Content</li>
        <li>Menu Content</li>
    </ul>
    <div class="brdr-lt"></div>
    <div class="brdr-rt"></div>
</div>

</body>
</html>
1 Like