[kenryuakuma]

Well...This is what happens



I'm just wondering if there is a way to move the folder images outside of the white border or box.

I have tried padding, it works great in firefox, but when they are displayed with internet explorer, the image folders are located or hanged in between the white border and the outside black area.

[GhandiJones]

Post your code related to those folders and someone will be able to help you. Right now, I have no idea how you have them set up, so I can't tell you what to adjust or add.

[kenryuakuma]

/* TAB MENU   
----------------------------------------------------------*/
ul#menu
{
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: right;
}

ul#menu li
{
    display: inline;
    list-style: none;
}

ul#menu li#greeting
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#menu li a
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #034af3;
}

ul#menu li a:hover
{
    background-color: #fff;
    text-decoration: none;
}

ul#menu li a:active
{
    background-color: #a6e2a6;
    text-decoration: none;
}

ul#menu li.selected a
{
    background-color: #fff;
    color: #000;
}

/* For rolling and blocking effect of the
three tabs: Home, About and Movies*/
#navcontainer
{
margin-top:60px;
padding: 0px;
}

#navcontainer ul
{
margin-top: 0px;
padding: 0px;
list-style-type: none;
text-align: left;
position: relative;
}

#navcontainer ul li { float: right; }

#navcontainer ul li a
{
text-decoration: none;
background: url(http://butterlabel.com/transfer/butterlist/images/folderOFF.png) no-repeat top right;
font-size: 10px/12px;
float: right;
margin: 0px;
height: 67px;
width: 75px;
padding-top: 13px; 
padding-right: 15px;
padding-bottom: 0px;
padding-left: 10px;
}

#navcontainer li a:hover
{
background: url(http://butterlabel.com/transfer/butterlist/images/folderON.png) no-repeat right top;
color: #000000;
}

This is the CSS.

<div id="navcontainer">
            
                <%--<ul id="menu">  --%> 
                <ul>           
                    <li id="active"><%: Html.ActionLink("About", "About", "Home") %></li>
                    <li><%: Html.ActionLink("Movies", "Index", "Movies") %></li>
                    <li><%: Html.ActionLink("Home", "Index", "Home") %></li> 
                </ul>
            
            </div>

[GhandiJones]

Better. I still need a frame of reference for your navigation div. What is it inside of? And without some type of reference, all I can say is that if you want to move it around you can play with margins (margins can be negative as well) or take it outside of whatever container it is in and give it a position of absolute, utilizing the top and right css types for positioning.

This post has been edited by GhandiJones: 20 April 2011 - 06:30 AM