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.
