Grow your CSS skills. Land your dream job.

Expanding Box with invisible background

  • # November 24, 2008 at 7:07 am

    I used a modified version of Chris’s expanding note box http://css-tricks.com/expandable-css-note-box/ on a site. I had originally attempted to use it without modifying anything except the background image, but when you remove the background, you can see the corners of the middle showing through, and what I was trying had rounded corners. The following page is as close as I could get it:

    Here’s the page: http://lisacerilli.nfshost.com/web_design/proj1/
    Here’s the css for the menu: http://lisacerilli.nfshost.com/web_design/proj1/menu.css
    Here’s the css for the rest of the page: http://lisacerilli.nfshost.com/web_design/proj1/main.css
    If anyone could help me out with making this work, that would be AWESOME.

    Note the evil gap in the area between the middle image and the bottom (Firefox, Opera) or the skewed middle area that’s slightly too high (IE6).

    This is for a class project, and if I really have to I’ll use a non-expandable version as we haven’t even learned this stuff yet, but seriously I’d rather test myself than back off. If there’s a better way of achieving this, that would also be great. Oh, and it doesn’t matter at the moment if it breaks in IE6 or not because we haven’t focused on cross-browser stuff yet (that’s second year).

    Thank you!

    EDIT: I fixed it. All I had to do was p { padding:0 ; } So, if anyone needs to know how to do an expanding box, with a transparent border, take a look at my source code. It works, and I fixed it for IE as well. YAY.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".