I sliced an image on a new site which I am constructing. All of the slices were vertical, except one, which was horizontal. The slices were arranged in a table. In Preview Mode of my HTML Editor, everything looks fine; however, in Firefox, the horizontal slice is very clear. There is a horizontal split along my image and I don't know how to push everything together to close the split. Can anyone help, please? Below's the code. The sections of the image which do not connect have been rendered in dark blue. <table width="843" border="0" cellpadding="0" cellspacing="0"> <tr> <td rowspan="2"><img src="img/Header_01.png" width="314" height="90" alt=""/></td> <td rowspan="2"><img src="img/Header_02.png" width="336" height="90" alt=""/></td> <td><img src="img/Header_03.png" width="61" height="28" style="border-style:none" alt=""/></td> <td><img src="img/Header_04.png" width="61" height="28" style="border-style:none" alt=""/></td> <td><img src="img/Header_05.png" width="71" height="28" style="border-style:none" alt=""/></td> </tr> <tr> <td colspan="3"><img src="img/Header_06.png" width="193" height="62" alt=""/></td> </tr> </table>
Unfortunately, no; the site is incomplete. Here's something which has totally confused me . . . When I open the Photoshop-generated HTML code for the sliced image, it looks totally fine. Only when I put it on my site do the horizontally-sliced sections come apart.
I'll tell you why, and this is important. Listen to me. Browsers have "rendering engines" which they use to look at HTML and CSS and build the page as it loads. Every browser uses a different engine: IE uses Trident like the gum (I think), Firefox and all the Mozilla-Nutscrape family uses Gecko, Konqueror and Safari use basically the same engine but the names are changed (KHTML? and I forget Safari's, Web something, but it's basis is the same), and Opera has its own and I've never heard the name of its engine. This is one reason why often on these forums you see HELP!! My site looks great in -- but like crap in --!! What you've done is possibly added ANOTHER rendering engine to the mix-- the one your HTML editor uses (like, Dreambeaver in Design Mode). Since no HTML editor (that I know of) renders a page like any currently used browser, it's practically useless. Which sucks cause if you're building a web page in an image editing programme (not a good idea) it means you are likely a very visual person. Slicing relys on pixel-perfect alignment 99% of the time-- and you'll almost never get it. Most sliced pages try to rejigger their pages so it looks okay in IE6 or 7 an maybe Firefox-- they don't even bother checking in Opera or Safari cause they'll likely be off by a pixel or two. Did I mention some browsers calculate the number of pixels? If they get 4.78 pixels, and you can't have half a pixel, they'll likely round it up to 5px. But another browser may say no, that's 4px. Why do they calculate? Because everyone has different screen resolutions (Yes, your site might've even looked good in real browsers on YOUR computer... then change screen rez and DOH!) If you want to build web pages, you really can't slice and dice your way in. You need to build a page like making something of legos. You have content (your text and non-decorational images) wrapped in semantic HTML tags that tells the browsers what those things are (this is a headertext, this is a blockquote, this is a paragraph, this is a link, etc) and then you get this nasty-looking text-document... so then you use CSS to move everything around, colour it, add the decorative images, etc. I'm actually a visual person myself and knew GIMP before ever touching HTML and CSS... but I learned from a really good book, these forums, my mistakes and other people's mistakes. You have a browser (or three or 5) already open, and you make a change, and you look at it in a real browser instead of "Desgin View" or whatever your editor uses. That way, at least you have one real working example of your page. Photoshop was invented to retouch photos. It does a lot more now, of course, but it will never be a good web page builder. It has a slice tool, but hey, you could use a screwdriver to pound in a nail too. Sometimes it works. But your dad will yell at you for trying to break his tools. Right tool for the job. Read some threads on this forums and some other HTML forums.... you won't always get the best advice (o man do I see bs out there) but you'll get a better idea of what web page building is than Photoshop. Good luck. 'Scuse the typos, I'm drinking coffee and on my way out to work-- building webpages : )
Stomme Poes, thanks for the great and thorough response! Whenever I construct a site, I always make sure that it renders properly in both IE and Firefox. I pay no attention to my HTML editor's Preview Mode. This is the first time that I have sliced my images, and it's not going well . . . The image with the problem looks fine in IE, but in Firefox, the horizontal slice hangs, making the slice clearly visible. The strange thing is, Photoshop provides the HTML for the image, and this looks fine when I open it on Firefox! The horizontal slice only hangs when I put the code on my site. Anyway . . . I have since re-sliced the image only in vertical planes, so there no longer is a problem. Thanks for your help.
Don't bother slicing it, write out the HTML yourself, then make all the images necessary and add them as background images in CSS. @Stomme Poes, I think Opera's engine is called Kestrel, though it could be falcon.