Jump to content

IE 7.0 CSS Layer Not Rendering


seaweed

Recommended Posts

Yeah I know, it's IE. I have a site I am working on and I am using a JavaScript Photo Gallery Library, but I think the problem is in my CSS.

 

The problem is that the CSS layer for the enlarged photo is not pulling up correctly in IE7. It should create (make visible) a new CSS layer with a high z-index so it is on top of the page, a la "LightBox style" - but in IE7 it just loads a typical browser page with the photo. At the top of the .js file in the notes, it mentions that there was an IE fix last summer, regarding images not showing; is this the same issue or a new one? Did the .js file I downloaded not get updated?

 

My website can be seen at: http://www.whobrokemyworld.com/natecarvey/project1.html

 

Everything seems to work beautifully in FF, Chrome, Safari, Opera and IE8. Screenshot #1 is the page, Screenshot #2 is how it renders in every other browser with the enlarged photo in a new DIV, centered in my design. Screenshot #3 is how it renders for me in IE 7.0.6001. Thanks for any advice!

 

Screenshot #1

 

ncarvey1.jpg

 

Screenshot #2

ncarvey2.jpg

 

Screenshot #3

ncarvey3.jpg

Link to comment
Share on other sites

First,

 

You need to fix the head tag items and all the html errors. Invalid html acts strangely across browsers.

 

You are better off with no meta tag than to have a blank meta tag. You MUST have a charset/mime type.

 

You are using XHTML closing slashs with an HTML 4.01 Strict Doctype.

 

border="0" does not exist in any html 4.01 Strict specs.

 

You MUST use an "alt="something" tag for any image.

 

Second, you have to clear your floats and have a separate css file for IE - you have all the IE bugs hitting this double margin, HasLayout, un-cleared floats. http://www.positioniseverything.net/explorer/

 

Too much for anyone here to help specifically.

 

 

Link to comment
Share on other sites

dbrimlow,

 

I've added the alt elements, removed the border elements, cleared all of my floats except one, which i will get to in a minute, and added:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

and

 

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

 

I also filled in my other meta tags. I still have the same problem in IE 7.0, with the new css layer not rendering. Is there some specific IE hack for this sort of situation?

 

On the float problem, when I clear my .main class float it pushes the content down to the bottom of the page. Do you see a reason for this? If I do not float main, or use inline, it also screws it up.

 

 

Link to comment
Share on other sites

Okay, ie hacks installed but still no luck. It is even happening in IE 8.0, but everyone else says it works fine for them. I am on a windows vista machine, IE8, 1440x900 res... WTH gives? Look at the photos above, when you click a thumbnail it should render like the 2nd photo above, mine goes to a new window altogether like if it was set to target=self.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.