so i am making a rounded corners box via a tutorial obviously, I am making this hard on myself by not using the same images, instead making my own. which is making me have to alter my css some yadda yadda yadda. anyway if you click the link to my work above you will see that i have a problem. I think it is in the repeat-y part, and there needs to be something there, to format the .mainbody to go up and down enough to meet the top and bottom images. I can do it with negative margins but the problem is with browsers font formatting differences the specific margin formatting will not necessarily be displayed in all browsers the same. also I have the exact css from the tutorial posted so you can see how it is supposed to be, I have pretty much used it as a template, but got rid of the sliding doors portion because I don't need it. I just dont understand what I am doing that is so different. also, see how the text is overlapping the right side of the box, a solution to this would also be much appreciated, padding-right didnt work for me Help me out o great css gods Thanks the urls for what i am working on are my test http://ticebain.000webhost.com/babysite/box.html the tutorial http://www.schillmania.com/projects/dialog/ the tutorial's css http://ticebain.000webhost.com/babysite/box.css
gibberish classnames - wide images without bothering with sliding doors, abundance of classes, yeah I can see how you might have problems. Take a look at my tutorial on doing it using ONE image. Given your border styling it should be fairly quick to implement. http://battletech.hopto.org/html_tutorials/eightcorners/template.html Lemme see... snip snip here, snip snip there, whether you're tin or bronze... Wait, that's not how it goes. Gah, alpha transparent .png - that's going to be a headache from hell (I won't even work with them anymore - too much hassle when 99% of the time you can pre-composite) -- edit -- Here's a quick toss of it into my template for doing that sort of thing: http://battletech.hopto.org/for_others/ticebain/template.html I redid the images as a single palette transparancy .gif for expediency. .png won't color match in IE (even non-tran or palettized) so if you want to go back to .png the best bet is to pad the right side the same width as the center area (3,072px in my example), move the right border over all the way, and don't put a background on .container. Notice the single .gif is half the size of your six separate images. Wee bit of advice - I'd trim the size of those borders GREATLY - too big for most content without looking silly.