3

I am trying to give the #page div an inner border that is in line with the grey border around the top part: http://www.designated.net.au/testbed/testpage/

I realise I could just add another div, but that is not the solution I'm looking for as there will be other content within #page. Is this possible?

This follows on from this question: Border-box CSS not working properly

Community
  • 1
  • 1
dais
  • 69
  • 1
  • 7

2 Answers2

2

If you don't mind it not working in older browsers you could just use a .box-shadow. This can be done without having to add extra markup. You could also use :before or :after pseudo css classes as well but box-shadow is cleaner IMO.

-webkit-box-shadow(inset 0 0 1px #000);
   -moz-box-shadow(inset 0 0 1px #000);
     -o-box-shadow(inset 0 0 1px #000);
        box-shadow(inset 0 0 1px #000);
Mark
  • 5,680
  • 2
  • 25
  • 26
  • 1
    Its broken because you are not using a ; (semicolon) at the end of each box-shadow definition. I added it to my example to be clearer. – Mark Sep 08 '12 at 06:01
1

You can leverage the relative positioning you are already using to align your images with the border.

Example: http://jsfiddle.net/zbrcb/

Merge these definitions with your existing definitions.

#page {
 border: 10px solid #333;  
}

#spotlight-main-top-left { z-index:3; position:relative; float:left; width:40px; height:40px; left: -10px; top: -10px; }
#spotlight-main-top-top { z-index:2; position:relative; width:100%; height:10px; background-color:#333333; top: -10px; }
#spotlight-main-top-right { z-index:3; position:relative; float:right; width:40px; height:40px; right: -10px; top: -10px; }
#spotlight-main-top-title { z-index:3; position:relative; margin:0 auto; width:200px; height:30px; top: -10px;  }
#spotlight-main-top-title-left { position:relative; float:left; width:30px; height:30px; }
#spotlight-main-top-title-right { position:relative; float:right; width:30px; height:30px; }
#spotlight-main-top-title-middle { position:relative; margin:0 30px 10px; width:140px; height:20px; background-color:#333333; }
#spotlight-main-top-title-text { position:relative; width:140px; height:18px; text-align:center; }

​Works in Chrome, FF, Safari, IE 8/9 (7 could probably be made to work as well; your header is misaligned in IE7 even without this change).

Personally, I would try to reduce the number of elements you are using to create the top of the site, but to be fair it works fine.

Tim M.
  • 53,671
  • 14
  • 120
  • 163
  • Thanks again Tim. I was trying to do something like that with the overall div which didn't work of course because it was set to width:100%. I'll use your suggestion. – dais Sep 08 '12 at 06:03