SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Shadow/border problem

    Hi all,

    I try to make a nice shadow drop. I have a content block with in it a .inner.

    Here is my css code:

    #content {
    margin:0px 300px 0 0px;
    padding:0;
    background-image:url(images/shadow.gif);
    background-repeat:no-repeat;
    background-position:bottom right;
    }
    #content .inner {
    border:2px solid #FF9900;
    padding:9px;
    margin:-5px 5px 5px -5px;

    The problem is that as soon as I apply a border to .inner, the border wil overlap the shadow image of content. I tried to pull back the borders a bit with margin as you can see put the problem is that at the bottom the border will not move up. It does not matter how much margin you set.

    If somebody knows what the problem is please explaine what the theorie is behind the solution. I really want to improve my css knowlidge in order to design quicker with better code.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I solved my problem by adding padding to #content of 3px overall. I still dont get why this is necessary tho so replies are still welcome

  3. #3
    derrrp
    Join Date
    Aug 2006
    Location
    earth
    Posts
    923
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    give your .inner a width: #;

    most likely something just shy of where your shadows start, then center the div.

    just a shot.
    No, I REALLY dislike having to use Joomla.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •