/    Sign up×
Community /Pin to ProfileBookmark

Tables & cross-browser compatibility

Copy linkTweet thisAlerts:
Apr 12.2005

I created a table by slicing a 388×316 image in Photoshop and exporting the HTML code and images from ImageReady. After several attempts to create as few slices as possible and turning the spacer cells OFF in ImageReady, I have created exactly want I wanted- in every browser except IE on a PC. It shows up great in every browser on a Mac (Netscape, Safari, even IE) and on Netscape on a PC.

The problem is that there are one or two extra pixels added to either images _06 and _07 or _10 when I view it on IE on a PC, and I have tried EVERYTHING to correct this. If I change the height of these three pictures by one or two pixels, I can actually fix the problem in IE on a PC but it will of course screw up the table in every other browser.

[URL=http://www.oneplayergame.com/menu.html]One Player Game menu[/URL] This is the page. Let me know if you see anything I’m missing when viewing the source code.

Thank you for your time.

to post a comment
HTML

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Apr 13.2005 — I guess the really sad thing is there is no reason at all that image should be sliced. It's just a single image with an image map. Put it out there that way.
Copy linkTweet thisAlerts:
@WoDApr 13.2005 — Remember, Slicing an image and invoking lots of superfluous HTTP requests as well as putting extra load on the rendering core of the users browser makes loading big images so much faster!

Hint: No it doesn't
Copy linkTweet thisAlerts:
@opgauthorApr 13.2005 — I went through several different designs in order to make this site the most compatible and to avoid having users to download a Flash plug-in to view the site. In the last attempt, I used the entire image as the background image in a table. I put transparent GIFs overtop of the buttons in the background image so users could have a hyperlinked image to click on. The only problem was that some PCs with IE didn't even see the background image in the table! Plus, it just seemed like there would be even more problems with the page if I was trying to line up all these transparent GIFs.

I just thought it was bizzare that this site is fine in all browsers except of IE on PCs. If no one can figure out why 1 or two cells on the left side of the table are a few pixels larger than their images are supposed to be, sure- I'll change the design to just one single image with an image map. But so far, things work great. The only picture that actually changes on each page is the 5th slice- the handheld game screen.

Just let me know if you can think of any reasons this is happening.
Copy linkTweet thisAlerts:
@opgauthorApr 16.2005 — I got the table down to three slices, with an image map on both sides. It should load very quickly and there is a hell of a lot less code. If you want to check it out to see if there are any kinks in IE on a PC, just visit the site and let me know. Thanks for your help.

[URL=http://www.oneplayergame.com]One Player Game[/URL]
×

Success!

Help @opg spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...