3 Replies - 641 Views - Last Post: 20 April 2011 - 06:26 AM

#1 kenryuakuma  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 390
  • Joined: 14-December 08

Move the folder image outside of the border

Posted 19 April 2011 - 05:56 PM

Well...This is what happens

Posted Image

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.

Is This A Good Question/Topic? 0
  • +

Replies To: Move the folder image outside of the border

#2 GhandiJones  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 54
  • View blog
  • Posts: 174
  • Joined: 17-March 11

Re: Move the folder image outside of the border

Posted 19 April 2011 - 06:10 PM

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.
Was This Post Helpful? 0
  • +
  • -

#3 kenryuakuma  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 390
  • Joined: 14-December 08

Re: Move the folder image outside of the border

Posted 19 April 2011 - 08:05 PM

/* 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>


Was This Post Helpful? 0
  • +
  • -

#4 GhandiJones  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 54
  • View blog
  • Posts: 174
  • Joined: 17-March 11

Re: Move the folder image outside of the border

Posted 20 April 2011 - 06:26 AM

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

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1