11 replies [Last post]
AviT
Offline
newbie
Last seen: 13 years 37 weeks ago
Joined: 2007-02-02
Posts: 6
Points: 0

I have a design where the logo has is in an absolute placement layer. I know it says on the forums here not to use absolute placement, but I need the logo to float over the design. It does this perfectly in FireFox no matter what the window size. But for some reason in IE it puts the logo layer next to the layout on the right.

Here's the code:

body { margin-left: 0px; margin-top: 2px; margin-right: 0px; margin-bottom: 0px; background-color: #FFFFFF; } #outside { width:770px; margin-right:auto; margin-left:auto; margin-top:0px; padding:0px; text-align:left; } #logo { width: 420px; height: 55px; float: left; background: url(../images/logo.png); background-repeat: no-repeat; background-position: left; cursor: pointer; position: absolute; } #top { width: 300px; height: auto; text-align: right; float: right; font-family: Verdana; font-size: 12px; font-style: normal; font-weight: bold; margin-top: 17px; } #content { width: 770px; height: auto; text-align: left; float: left; font-family: Verdana; font-size: 12px; font-style: normal; border-bottom-color: #000000; border-color: #000000; border-left-color: #000000; border-bottom-width: 4px; border-bottom-style: solid; border-left-style: solid; border-left-width: 4px; border-right-color: #000000; border-right-style: solid; border-right-width: 4px; border-top-color: #000000; border-top-style: solid; border-top-width: 4px; } #side { width: 186px; height: 430px; text-align: right; float: right; font-family: Verdana; font-size: 12px; font-style: normal; border-left-style: solid; border-left-width: 4px; border-color: #000000; border-left-color: #000000; background-color: #999999; } #footer { width: 770px; height: auto; text-align: center; float: left; font-family: Verdana; font-size: 9px; font-style: normal; border-bottom-color: #000000; border-color: #000000; border-top-color: #000000; border-top-style: solid; border-top-width: 4px; background-color: #CCCCCC; }

Thanks!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

erm . . . HTML please.

erm . . . HTML please.

Verschwindende wrote:
  • CSS doesn't make pies

AviT
Offline
newbie
Last seen: 13 years 37 weeks ago
Joined: 2007-02-02
Posts: 6
Points: 0

Oh, sorry... <!DOCTYPE html

Oh, sorry...

-------


Login | Get an account
---------

GO>>
Event                      More info
Event                      More info

AviT
Offline
newbie
Last seen: 13 years 37 weeks ago
Joined: 2007-02-02
Posts: 6
Points: 0

Can someone help me out?

Can someone help me out? This is kind of urgent...

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

This forum is always quieter

  1. This forum is always quieter one weekends
  2. If it's that urgent, maybe you consider hiring someone to troubleshoot the problem for you
  3. With problems involving images (which we can't see from the code provided), it's always better to provide a link to the page

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 36 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Not tested. In #logo, you

Not tested.

In #logo, you have both float and absolute position. The two are mutually exclusive, with the AP rule winning out. You haven't made proper requisites for the AP's positional reference, and IE tends to be flaky about that anyway.

Take appropriate steps in one direction or the other.

As to this being "urgent", keep in mind the old truism, "Poor planning on your part does not constitute an emergency on mine." This is a world wide forum. The person who takes an interest in your problem may have just gone to bed with plans to take the kids to the zoo tomorrow afternoon before checking in again.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

AviT wrote:Can someone help

AviT wrote:
Can someone help me out? This is kind of urgent...

Not our problem Smile

Verschwindende wrote:
  • CSS doesn't make pies

AviT
Offline
newbie
Last seen: 13 years 37 weeks ago
Joined: 2007-02-02
Posts: 6
Points: 0

Thanks for your help. Sorry

Thanks for your help.

Sorry if I sounded a bit testy, but this site is a non-profit thing that I'm doing, and I needed to make sure that it looks ok in IE so that there's no issue when we go to get our funding. Next time I'll try to be a bit more patient, but I figured that this must be a problem that they experienced members had in the past, so there would be no problem figuring it out.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Have you tried Gary's

Have you tried Gary's suggestions, above?

Verschwindende wrote:
  • CSS doesn't make pies

AviT
Offline
newbie
Last seen: 13 years 37 weeks ago
Joined: 2007-02-02
Posts: 6
Points: 0

Yeah I switched it to

Yeah I switched it to absolute and added in the top but now I'm trying to figure out how to get it to stay at the left side of #outside.

UPDATE: I solved it. It probably wasn't the best way but it works!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

For future reference, and

For future reference, and posterity, how did you fix it?

Verschwindende wrote:
  • CSS doesn't make pies

AviT
Offline
newbie
Last seen: 13 years 37 weeks ago
Joined: 2007-02-02
Posts: 6
Points: 0

This was the final code for

This was the final code for #logo:

#logo { width: 422px; height: 55px; background: url(../images/logo.png); background-repeat: no-repeat; background-position: left; position: absolute; visibility: visible; margin-left: -385px; top: 3px; left: 50%; z-index: 2; cursor: pointer; }

The margin-left is - half of #outside's pixels