Solved

Slider div positioning crossbrowser problem.

Posted on 2010-11-10
7
259 Views
Last Modified: 2012-06-27
I'm having cross-browser issues with a slide out div for the header of my webpage. it looks ok in Firefox, and is slightly off in IE (no top padding), but in Chrome/Safari the main area is shifted down about 20 pixels. Can someone have a look at my page/css and let me know if there's anything I can do?

http://westside.metrovancouverproperties.com/header_bak.php

Thank you!
0
Comment
Question by:jameshuckabonetech
7 Comments
 
LVL 10

Expert Comment

by:Tyler Laczko
ID: 34104532
in your style css try


* {
margin: 0px;
padding: 0px;
}
0
 

Author Comment

by:jameshuckabonetech
ID: 34104610
It seemed to kind of work the first page load, but then I refresh and the problem comes back?!?! I've cleared cache, etc. and it doesn't work. I've left it with the change. Do you see what I mean?
0
 
LVL 30

Expert Comment

by:LZ1
ID: 34105001
I would definitely start with a reset sheet:
http://meyerweb.com/eric/tools/css/reset/index.html

Make this the first CSS call in your page, then call the rest of your CSS.

I did try it in Chrome and Firefox and it looked fine.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:jameshuckabonetech
ID: 34105236
hmm,

Ok, I did that (thanks by the way, that's a handy set of rules) and I still get the problem. Arrg. Do you not see a 20 pixel high blue bar across the whole length of the banner in chrome/safari?
0
 
LVL 30

Expert Comment

by:LZ1
ID: 34105258
It looks like there maybe something setting the inline-style wrong.  In FF it's -115px from the top and in Chrome it's only -89px from the top.  

Can you post your script that your using here?
0
 
LVL 3

Accepted Solution

by:
vimalraja earned 500 total points
ID: 34106928
The ".slide-out-div" has a padding-bottom of 20px, if you remove the padding, it slide out tab should work fine, I guess. The only problem then would be that there would not be any space below the share icons. :)
0
 

Author Closing Comment

by:jameshuckabonetech
ID: 34214706
Thank you
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

929 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now