IE safe way to float logo in CSS?

[AnthroAndStargate]

I am trying to float a logo over some div content, I have done it here: link

The problem is in IE the logo doesn't show at all.

Any ideas on what I can do to make this work in all browsers? Thanks!

The code I used is:

 

[AnthroAndStargate]

I also noticed if you make the window larger it shifts because it stays stationary on the screen depending on how big the screen is. Is there a way to make it stationary to the other div elements but not the screen? (so it looks fine no matter what monitor resolution).

 

[PhatoseAlpha]

IE7 and Firefox 3 seem to display it the same way to me. Both are positioning the image by absolute coordinates based on the last positioned parent element - since the container div isn't positioned, that's the page, and thus, the screen.

The problem is that your container div is not being positioned. This makes the browser muck up when trying to deal with positioned child elements.

Apply 'position:relative;top:0px;left:0px' to your container div, and see if that doesn't fix both your problems.

 

[NiKeFiDO]

I think you'll have more luck making the logo relative positioned (vs absolute)

 

[AnthroAndStargate]

Originally posted by: NiKeFiDO
I think you'll have more luck making the logo relative positioned (vs absolute)

How would I do that and still have it be centered right above the right left of the main div box (the white one).

I tried the suggestion Alpha gave and it also made the logo move out of whack. Maybe there is no way to do this?

Thanks for the help yall

(BTW if you happen to look at the link I gave refresh it to see what I mean). Thanks!

 

[AnthroAndStargate]

Bump for anyone knowing??

 

[PhatoseAlpha]

I'm not sure exactly what you're trying to get it to do. Where exactly do you want it to be?

 

[AnthroAndStargate]

Originally posted by: PhatoseAlpha
I'm not sure exactly what you're trying to get it to do. Where exactly do you want it to be?

I'd like it to be half way over the top right content box. The problem is I can't figure out what the best way to get float over that, stay there correctly positioned, and move with the rest of the content.

 

[txrandom]

Put it inside content and then position it from there. Content should be positioned relatively and logo should be positioned absolutely.

Also, you should set your columns differently. You can float both of them left and put them in a more logical order in the actual HTML.

 

[txrandom]

Also, it may be better just to add another div on top called header and put the img inside that. You should limit using positioning unless you really have to.

 

[AnthroAndStargate]

Originally posted by: txrandom
Put it inside content and then position it from there. Content should be positioned relatively and logo should be positioned absolutely.

Also, you should set your columns differently. You can float both of them left and put them in a more logical order in the actual HTML.

What do you mean about floating them both left? How would that work?

So you think I should make a container div and put the logo in that?

 

[911paramedic]

Originally posted by: AnthroAndStargate

Originally posted by: txrandom
Put it inside content and then position it from there. Content should be positioned relatively and logo should be positioned absolutely.

Also, you should set your columns differently. You can float both of them left and put them in a more logical order in the actual HTML.

What do you mean about floating them both left? How would that work?

So you think I should make a container div and put the logo in that?

Here's a bunch of examples I made quite a while ago, just view the source:

four boxes, header and footer

http://sitenamegoeshere.com/ex...menu_with_sprites.html

^I put the css and some decent comments so you could see how it works in the source code.

Basic stuff below:

http://sitenamegoeshere.com/examples/left_right.html
http://sitenamegoeshere.com/examples/clearing.html
http://sitenamegoeshere.com/examples/boxtest.html
http://sitenamegoeshere.com/examples/boxtest2.html
http://sitenamegoeshere.com/examples/wrapper.html

Hope one or more of those help.

 

[AntiFreze]

make the parent container relative. then the absolute will be based off of that position (and will appear correctly in every browser, resolution, window size.