Solved

Slider div positioning crossbrowser problem.

Posted on 2010-11-10
7
265 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

636 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