Image slicing

Ok so i'm not new to design in fact i've been doing it for a while now. One method which I never usually adopt is image slicing, yet for my current project it seems necessary. My question is I am creating an image that is 750*61 which makes up the middle bar of the site, in this bar there are some quite snazzy masking effects, I also took a screenshot of a search textbox so that I could fit it into the graphic and when necessary replace the picture of a text box with a real one. The problem is when i delete the sliced image where the text box will be containedd and then put a text box of the exact same size. It makes an unbelievable screw up of my nice neat table! Does anyone have any ideas how to do this? An example of the type of image slice i'm looking for can be seen at Sharkyextreme .

While I'd need to see your specific instance to really say what would work best in your case, the Sharkyextreme is actually very interesting if you check out the code.

The entire header image (/i/t.gif...what bizarre naming conventions they have going on here) is a table cell background image.

They then use a transparent gif (/i/f.gif) to position the search box (one on the top that is 52px high, one of the left that is 614px wide) and then the same transparent image on the right that actually doubles as the submit button.

The use of the transparent image as a search button is a technique I hadn't considered and will be "borrowing" down the road.

Hope that helps...if you follow their lead, it's not actually a slicing issue after all!

- jp