DIV position absolute issues

Hi,

I have put a div containing some festive decor and aligned it top:0px; with an absolute positioning. However, there are two social linked images in my nav and my logo link now all are not working since the new div has been put into place, when i switch off the absolute positioning they work?

Is there a way around this? not seen it before.

http://www.bluebean.org.uk

Many thanks,

Andrew
Andy6350Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
When you absolute position, it sits on top of the underlying content you can see through the transparency b ut the mouse cannot.


Cd&
COBOLdinosaurCommented:
You just need to position the winter glyphs to places on the page where the mouse does not need to see anything.


Cd&
ZadoCommented:
You need to give 'position' property to social linked images (value doesn't matter, could be relative, absolute or other, just play with it a bit) and 'z-index' property with value=99, then add 'z-index' to your decor element with lower z-index, for example '0' or '-1'. Example:

.your_social_buttons {
   position:relative;
   z-index:99;
   /* other properties */
}
.your_decor_element {
   position:absolute;
   z-index:-1;
   /* other properties */
}

Open in new window


Hope it's clear, good luck and let me know if it works for you (it should).
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Andy6350Author Commented:
Thanks, I changed the z-index values and replaced the logo with a png file also. I have just noticed that i positioned the winter symbols 50% left and a negative margin to pull it to the middle, however i noticed it lets me scroll to the right to see the rest of the image, can i avoid that?
COBOLdinosaurCommented:
The only way to get eid of the scrool is to reduce the size if the image.



Cd&
ZadoCommented:
Damn it, I wrote an answer and I had to restart my comp ...anyway, there's two ways to fix this.

1. Add 'overflow' property to your body tag in your css:
body {
   overflow-x:hidden;
}

Open in new window

it will disable vertical scroller, more about this property here: http://www.w3schools.com/cssref/pr_pos_overflow.asp

2. Use three 'width':
body {
   width:1024px;
   width-min:1024px;
   width-max:1280px;
}

Open in new window


Just play a bit with these properties and you will get what you want.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Andy6350Author Commented:
Thanks Zado, fantastic, overflow-x:hidden; worked a treat!!
ZadoCommented:
No problem, glad to help!
Andy6350Author Commented:
Hi Zado,

Sorry but i just noticed that yes it works fine in Chrome but not in IE, is there something i should use to get around IE?

ZadoCommented:
Well, it's IE, there are always problems, what's the problem in IE? Which version? If IE6, I wouldn't bother.
Also I told you about width-min and width-max css properties, but there should be min-width and max-width.
Andy6350Author Commented:
It was IE 7&8, i wouldn't bother if it was 6 either. I put overflow-x:hidden on the body and it looked fine in chrome, i have removed it for now until i get it right, but i did try it with min and max widths and it didnt like it. Is it the body i am applying the widths to?

Thanks
ZadoCommented:
Try to apply it to html too:
html, body {
   overflow-x:hidden;
}

Open in new window

or html only.
Andy6350Author Commented:
No it didn't work. Although i have noticed even without any overflow-x:hidden div that has the snow flakes in causes the footer to crop in IE 7&8. All i want is some festive decor and IE cant behave!

Do you suggest a better way, im tempted to just do a design thats 1024 wide but even then, by positioning it absolute causes issues with the footer and scroll, i dont think its the size thats the problem, probably where i have put it and how i positioned it?

ZadoCommented:
You can try one more thing: Instead using img tag you can use div tag and include your image as a background of your div:
div {
   background-image:url('images/myimage.jpg');
   background-repeat:no-repeat;
   background-position:top right;
   /* etc. */
}

Open in new window

Andy6350Author Commented:
I tried that also :( no luck. I think i might just redesign the decor to fit 1024 wide, thanks IE!! grr

Anyway, thank you very much for your help, if my design was different i would have set it in the bodys background center top.

Thanks again
ZadoCommented:
No problem. If your design look differently only in IE, but looks good in any other browser, read this:
http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
Very useful info.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.