2 replies [Last post]
DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 16 years 16 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

Hey everybody!

That's right, the subject line is true... this happens to be a rediculously difficult CSS question, and I can't find insight anywhere so I leave my hopes in the hands of the capable CSS Forum experts...

First, check out http://test.phark.net/newUI.html.

The "box" all the way to the right with the title "styleSWITCHER" doesn't actually have any borders or any background-color at all. That entire box design is actually faked using a carefully-sized background picture (check out the source code for the url to it).

"Wait a second here, why would you fake the borders and stuff if you could do that in CSS really easily???"

The answer is because of that diagonal corner on the bottom right edge of the box. What I wanted to do was to use CSS for the background-color and borders and stuff, but just make a little triangle with the appropriate transparent areas and colors to have a corner effect on the box.

Unfortunately, with the 5px padding and the borders, I cannot find a way to move the background-image "through" the padding and "through" the borders in order to have it line up on the very outer edge of the box as to complete the corner effect.

This wouldn't be such a bad idea, to use the background-image to fake it, BUT IE6 and other browsers do not display dotted borders correctly, so it looks odd when all the other boxes have similar weird dashed borders and mine is perfectly dotted.

I'm working on a solution to this right now, hopefully it'll work, but what do you think???

-Mike

</twocents>

blakems
blakems's picture
Offline
Enthusiast
UTah, USA
Last seen: 16 years 14 weeks ago
UTah, USA
Timezone: GMT-7
Joined: 2003-04-07
Posts: 60
Points: 0

Rediculously Difficult CSS Question ;)

Have you tried using the padding: 0; on the outer div and then nest another div in that with the padding. Like below

<div class="topRightBox" title="Style switcher, XML feed, and MT code">
            <div class="boxContent">    <h2>style<span>SWITCHER</span></h2>
              </div>
</div>

  

Then you could positition your background img at the bottom right.

-bMs-
http//www.blakems.com !important;

DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 16 years 16 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

Rediculously Difficult CSS Question ;)

Yeah, unfortunately that's what I thought would be the solution too.

It fails to work however because the inner div overlaps the background-image from the parent div... and since there's no way to change the z-index on non-absolutely positioned elements...

But, I figured out another way to do it. I did, in effect, nest one layer inside another, and the "corner" div is underneath the content div.

Check out http://test.phark.net/newUI.html to check out how I got it to work.

-Mike

</twocents>