Horizontal positioning a gif varies with monitor

HTML & CSS
1

I have a gif graphic just to the right of main logo (upper left). It seems that the monitor displaying it changes the horizontal positioning (mine looks ok as a 16:9 ratio monitor but on letterbox 4:3 monitors it shuffles left and mostly hides behind the main logo.

The CSS otherwise works well.

http://69.89.31.182/~drainma1/

The css is http://69.89.31.182/~drainma1/style.css

2

That’s because the image is absolute positioned. Don’t AP it if you don’t want it sliding places :wink:

img#chute

Or raise the z-index to 100 if you want it on top

3

Hi,
I showed you how to do that in your other thread and it was all working fine, what happened?

I had told you that it needed to be nested in the #header and then the header needed position:relative; to become the containing block for the AP’d chute image.

You have since pulled it out of the header and wrapped it in a span with that silly 960 Grid .container_12 class. That is where you lost the relative positioned parent which served as the containing block.

The site just needs a wrapping div set at 960px with auto margins and your done centering once and for all. :wink:

By the way, you are linking to your style.css twice in the page head, just link to it once.

4

Should I not have used span? and removed the 960 grid .container class?

I restored your code but the sliding still occurs (and the chute image is still in front of the main logo–I want it behind probably because I’m so paranoid about the sliding of the chute).

5

There is no need to wrap the image in a span with that class on it. The image had an ID hooked to it and if it had of been nested in the header everything would have been fine.

I restored your code but…

No, you have not done it correctly if you are referring to the link you posted above. The image is still nested in that span and you have not set position;relative; on your header. The position;relative; on your header is what will keep the chute image from sliding around.

That is all explained in your other thread. :slight_smile:
Try again

6

Sigh. I appreciate your persistence, Ray.

I added position:relative back to the header.
I also put the chute id inside the header div (thereby removing the span).

But the chute still slides with resizing. BTW, do I have too many </div>'s They seem unbalanced.

7

I don’t know what page your working with but according to the link in your first post nothing has changed in the html yet. I have no way of knowing what you are doing unless you update the link with your changes.

You need to get that style.css linked to only once in your head element. I have already mentioned that above and it needs to get corrected so we can make live edits without interference from the second style.css link.

Anyway, here is how to do the html just as it was explained in the other thread.

[B]<div id="header"[/B] class="container_12">
<a id="logo" href="#"><img src="images/logo.jpg" alt="Logo" height="119"/></a>
[COLOR=Blue]<img id="chute" src="images/polychute.gif" alt="polychute height="119"/>[/COLOR]
  <div class="headerlinks">
    <p><a href="#">About Us</a> | <a href="#">Our Guarantee</a> | <a href="#">Blog</a> | <a href="#">Privacy</a></p>
    <p><strong><center>RV Waste Management</center> 
    "Simpler, Safer, &amp; Sanitary"</strong></p>
  </div>
 [B]</div>[/B]

#[B]header [/B]{
   [COLOR=Blue] position:relative;[/COLOR]
    height: 119px;
    z-index:100;
}
a#logo { /* floats logo image left */
    float:left;
}

[B]img#chute [/B]{
    position:absolute;
    top:17px;
    [COLOR=Blue]left:272px; /*was 311px*/[/COLOR]
    z-index: 95;
    height:170px;
    width: 326px;
}
8

Thanks that was it. I hadn’t changed the image chute position and I removed the container_12 class in the header. But I had tried your method of header and then within that the 2 images.

Does position:absolute apply to ONLY within the parent container?

I’m creating a new post about the background not showing up in IE7
body {
background: #8c8a8b url(images/body-bg.jpg) repeat-x top;
z-index: -100;
font: 12px Arial, Helvetica, sans-serif;
}

9

Hi,

Glad you got the header business sorted out. :slight_smile:

If you look back at post#3 you will see that I gave you some links to the SitePoint reference that explain about absolute positioning and containing blocks. When position:relative; is set on a parent div it becomes the containing block for all it’s AP’d children.

You should not be needing z-index:-100 on the body element. I have not looked at it in IE7 yet but there should be no need for any z-index on the body.

10

Stop messing with the page please :slight_smile:

11

When I removed the z-index:100;on the header, IE7 now shows the menu over the graphic. Knowing that the higher the Z-index number is the higher the layer upon which it appears, I’m not sure why that is happening as imagechute z-index is 95 and .sf-menu is 90 (line 377 of style.css). I’m pretty sure .sf-menu is the menu line.

12

Never mind, I found it, I set the header Z-index to 50.

Thanks again!!!

13

Grghhh. spoke too soon. This is weird. My Dreamweaver renders it ok in IE7 and Firefox. I reposted both the style.css (12:51 am) and resaved and posted as index5.html (12:50 am)

http://69.89.31.182/~drainma1/index5.html

yet, the published one does not show the gradient background in IE7. Any ideas?