Skip navigation
EagerBob
EagerBob
Currently Being Moderated

absolute positioning problem in IE7

Oct 21, 2011 7:50 AM

Tags: #ie7

Hello Dreamweavers,

 

I am having a problem with an new site I am working on.

In the left top corner there are two absolutely positioned elements: an image and a H1 heading like so:

 

 

.primary h1 {

          position:absolute;

          left:20px;

          top: 90px;

          z-index:100;

}

 

 

.masthead {

          position: absolute;

          left:60px;

          top: 20px;

          z-index:101;

}

 

both elements are in div .primary which has a position: relative.

Works well in all browsers except for IE7

In the screenshot you can see that the h1 heading seems to disappear behind the white square of the slideshow pushing the image down.

 

 

I tried different things, like setting "display: inline" to floated elements but no succes yet.

 

Site is here:

 

http://www.productfotografie-fotograaf.nl/

 

screenshot is here:

 

http://dl.dropbox.com/u/604341/screenshotie7.png

 

What could this be?

 

Bob

1063 Views   11 Replies   Latest reply: EagerBob, Apr 6, 2013 11:14 AM
 
Replies
  • MurraySummers
    Currently Being Moderated
    1. MurraySummers,
    Oct 21, 2011 7:51 AM   in reply to EagerBob
    Report

    Screenshots don't help us with your code.  Can you post a link to the live page, please?  And are you sure it's important to worry about IE7?

     
    |
    Mark as:
  • Curtis_E_Flush
    Currently Being Moderated
    2. Curtis_E_Flush,
    Oct 21, 2011 8:02 AM   in reply to MurraySummers
    Report

    I agree. with IE 7 now accounting for about 2.1% of all web users, it may not be worth the effort to accomodate them.

    That said, I'm no big fan of APDivs unless they are absolutely necessary (ie: a floating image in a header or a text box with nothing else under it). They tend to cause more problems than they solve when you're dealing with display sizes from 3.5 inches to 40 or bigger. They can end up all over the place.

     
    |
    Mark as:
  • EagerBob
    Currently Being Moderated
    3. EagerBob,
    Oct 21, 2011 8:18 AM   in reply to MurraySummers
    Report

    Can you post a link to the live page, please?  And are you sure it's important to worry about IE7?

    A link to the live site: http://www.productfotografie-fotograaf.nl/

     

    I am still supporting IE7, yes.

    Or is IE7 the new IE6?

    Last time I checked it still had a substantial share, at least where I am.

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    4. MurraySummers,
    Oct 21, 2011 8:29 AM   in reply to EagerBob
    Report

    I would solve the problem by a) making that camera the background image of the container div, and using background-position to nudge it to the location you want (with background-repeat:no-repeat, of course), and b) then just letting the <h1> fall where it wants which should be close to where it is.  Get rid of the absolute positioning altogether....

     
    |
    Mark as:
  • Curtis_E_Flush
    Currently Being Moderated
    5. Curtis_E_Flush,
    Oct 21, 2011 8:34 AM   in reply to EagerBob
    Report

    I hit a "cached" page and was inadvertently looking at an old IE6 stat in my previous post. I stand corrected about the 2.1% quote. IE7 only accounts for 3.9% of all IE users (http://www.w3schools.com/browsers/browsers_explorer.asp) and Internet Explorer only accounts for 22.9% of ALL web users (http://www.w3schools.com/browsers/browsers_stats.asp), so you're basically trying to please 3.9% of 22.9% of everyone on the web. That's one tenth of one percent or 0.0092 of the people who can visit the page. Hardly seems worth the effort to me, but then I don't build anything for IE7 anymore.

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    6. MurraySummers,
    Oct 21, 2011 8:44 AM   in reply to Curtis_E_Flush
    Report

    Certainly seems like a waste for that purpose, but I think the change I recommend is good in general.  We can forget that it's to accommodate IE7 users, and just do the change for general principles!

     
    |
    Mark as:
  • EagerBob
    Currently Being Moderated
    7. EagerBob,
    Oct 21, 2011 8:52 AM   in reply to MurraySummers
    Report

    Murray *ACP* wrote:

     

    then just letting the <h1> fall where it wants which should be close to where it is.  Get rid of the absolute positioning altogether....

    That was the point. I want the image to sligthly overlap the H1, since it has a reflection that sits over the H1, giving it a bit  of a shine and more of  a"logo" look.

     

    I could offcourse make the heading and the camera as one image, make it a background image to the H1 and indent the text -9999px.

     

    Only thing is I recently heard Matt Cutts saying that you shouldn't br really doing that...

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    8. MurraySummers,
    Oct 21, 2011 9:27 AM   in reply to EagerBob
    Report

    Only thing is I recently heard Matt Cutts saying that you shouldn't br really doing that...

     

    Listen to Matt.

     

     

    That was the point. I want the image to sligthly overlap the H1, since it has a reflection that sits over the H1, giving it a bit  of a shine and more of  a"logo" look.

     

    OK - make the <h1> position:relative, and include the camera image within the <h1> along with the text.  Use something like this -

     

    h1 img { position:absolute;top:-75px; }

     

    and adjust the left/top values to put the overlap where you want it.  In this case, I'll allow you to use the absolute positioning.

     
    |
    Mark as:
  • JoeyD1978
    Currently Being Moderated
    9. JoeyD1978,
    Oct 21, 2011 9:35 AM   in reply to Curtis_E_Flush
    Report

    I'd be suspect of the W3Schools web browser usage stats. Keep in mind those are the statistics for their particular site only, which I'd think lean heavily towards the type of people that are more likely to upgrade their browser.

     

    This site reports ie7 at almost 11%, which is much more believable in my opinion:

     

    Stat Owl

     
    |
    Mark as:
  • Curtis_E_Flush
    Currently Being Moderated
    10. Curtis_E_Flush,
    Oct 21, 2011 10:15 AM   in reply to JoeyD1978
    Report

    I'm pretty sure if I looked hard enough I could find a site that says XP SP1 32 bit still accounts for 50% of ALL computer users. That's neither here nor there. IE is currently in an early beta for 10 (I'm testing it). 7 will soon go the way of  6, and Netscape and the original Mozilla browser.

     

    Especially when it come to a commerce site, I take the approach that if someone is still using a six year old browser on a four or five or six year old computer, they aren't looking to spend any money they don't have to and are likely to be a visitor versus a customer. That's not to say they don't just take good care of their stuff, but in the world of computers, it's like driving a 55 Chevy as your main transportation. It doesn't run well on today's unleaded gas, it doesn;t get nearly enough mileage for $3.50 a gallon, and if it gets hit or breaks down it's costly and time consuming to repair it with the parts being as old as they are.

     

    But I digress from the original point of this post - the APDiv. I think Murray has the best solution in doing away with it altogether and using the image as a background or incorporating it with the text in the h1 tag.

     
    |
    Mark as:
  • EagerBob
    Currently Being Moderated
    11. EagerBob,
    Apr 6, 2013 11:14 AM   in reply to MurraySummers
    Report

    OK - make the <h1> position:relative, and include the camera image within the <h1> along with the text.  Use something like this -

     

    Yes, that seems like the best solution, I think I'll try that.

    (apart form what Matt said, making an image of the text is not even possible, I don't own the font, it is a Typekit webfont)

     

    Thanks

     

     

    JoeyD1978 wrote:

     


    I'd be suspect of the W3Schools web browser usage stats.

    Yes, that seems hardly representative. According to this article IE7 share worldwide was 6.58% worldwide in june:

    http://arstechnica.com/web/news/2011/07/june-browser-stats-rapid-relea se-edition.ars

     

    Curtis_E_Flush wrote:

     

    I take the approach that if someone is still using a six year old browser on a four or five or six year old computer, they aren't looking to spend any money they don't have to and are likely to be a visitor versus a customer.

    I beg to differ.

    Many people don't care about their computer, or their browsers, they do not even know they can install a different one. A browser is something that came with their Windows computer, and shouldn't be messed with in order not to break the thing.

    When I ask  clients which browser they use they do not really know. When they are on Windows that is

     

    *update*

     

    Fixed. Thanks Murray, I agree with Flush that you suggested the best solution

     

    *update 2*

     

    live site is here : http://jeroenevers-productfotografie.nl/

     

    Thanks

     

    Message was updated by: EagerBob

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points