richardterris Posted April 22, 2008 Share Posted April 22, 2008 Hi all. I recently accepted a job of re-doing my friends site using php instead of his already html. The reason being is that the left and right column content is the same throughout the site, and has to be updated on 60-odd pages.. With php the updates only need to occur once. Anyway, the site is quite image-intensive as its an art dealers, and he's using the hoverbox gallery to display these.. this is working fine in firefox. In IE 6 and 7, when hovered on, the large image appears to be sitting on top of the right and left columns but underneath the content. I think the problem is z-indexing, but im at the stage now where everything is identical with his and my versions of the site, except that im using php. Put this way, imagine 3 columns, the left and right columns z-indexes are set to 0, and the main column z-index is 1, this means that anything on the centre column will overlap the left and right when it needs to... In this case it is overlapping the columns, but not the content because they are pulled in. My question is, is there anything with using php that should affect this, or is it just a css issue? As i understand the php rendering is done server-side, which should mean that the page is complete by the time the browser sees it? If so, then the images should overlap everything Help please, im getting to the end of my tether. Quote Link to comment Share on other sites More sharing options...
sy278 Posted April 22, 2008 Share Posted April 22, 2008 For anyone who wants to have a look at it, you can find the site here: http://www.matthewjamesmenswear.com/tracey_mcnee_stage/index.php?page=avis The issue that richard has described is only apparent in IE, it works fine in Firefox. I am positive that its an issue linked with z-index and the div's in IE. There are still a few image links that need to be sorted too (the broken images in the gallery). Quote Link to comment Share on other sites More sharing options...
kenrbnsn Posted April 22, 2008 Share Posted April 22, 2008 Without seeing code snippets, it's hard to determine what's causing your problem. Ken Quote Link to comment Share on other sites More sharing options...
thebadbad Posted April 22, 2008 Share Posted April 22, 2008 Remember that z-indexes only work on elements that have been positioned (e.g. "position: relative;"). I can see you/your friend forgot that for a few elements. Also, writing standards compliant code will save you a lot of time in the big run, and eliminate heaps of weird problems. Validate. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted April 22, 2008 Share Posted April 22, 2008 Also, writing standards compliant code will save you a lot of time in the big run, and eliminate heaps of weird problems Absolutely. This markup is semantically well done (well 85% or so) ... so why just slap html at the top and serve it as a quirks mode IE buddy? Seems a shame. Use a doctype and put it into a semblance of standards mode. Since the tags have an xhtml closing slash, replace <html> with: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> I don't usually advocate using xhtml at all (when served as text/html), and never advocate using a transitional doctype, but since you are working with existing code that uses old, deprecated HTML 3.0 code, it is easier to just use the xhtml 1.0 transitional doctype. A large part of the problem is the javascript. It is not a very elegant effect and is a contributing factor to the positioning issues. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.