Solved

Slider div positioning crossbrowser problem.

Posted on 2010-11-10
7
261 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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

840 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