[Solved] margin-top different for chrome and safari?

[Prashant]

1. Chrome and safari both supports webkit. then why margin-top different for chrome and safari?
2. What is the solution on that? I dont want to try padding-top..because of some reason.

this is my demo code for responsive design.

div id='demo'></div>

#demo{
    position:absolute;
    margin-top:22%;
    width:10%;
    border:1px black solid;
    height:5%;
}

[Paulie_D]

22% of what?

Are you using a reset in your CSS?

[Prashant]

22% of body or parent div.

yes, I am using reset css.

[Paulie_D]

The you’d have to demo it.

Which version of Chrome or Safari are you using and what OS

[Prashant]

chrome 40 and safari 5.7.1 something

[Paulie_D]

you’d have to demo it

[Prashant]

yes

[Prashant]

@Paulie_D : do u have any solution on my problem?

[Paulie_D]

When you demo it we can take a look.

[Prashant]

@Paulie_D how can i show you my demo on different browser? i some have restriction on my server…. i already paste my code. You can test on your local server using above code.

http://jsfiddle.net/prashantptapase/hcracnsb/

Its urgent if you have solution then tell me

[Paulie_D]

Interesting.

In Safari 5.1.7 the 22% is flexible when the viewport is resized but not in Chrome.

Not sure why that is…but I’m sure it could be found with a bit of searching.

However, I would not be using margin-top here…but rather just top.

http://jsfiddle.net/hcracnsb/2/

[Prashant]

@Paulie_D: I already tried top tag. But no use. there is also minuet difference.

[Paulie_D]

Then I can’t help….because it’s not clear to me what the overriding issue is.

top:22% works so unless there is an actual issue you’re not covering I guess I don’t see the problem.

[Prashant]

Website link. check this site in both browser.
My problem.
1. Mouse hover is not working over the black strip of each product. (because of padding-top)
2. If i used margin-top then my hover problem solved but safari is not supporting to margin top.

I think u got my problem?

[Paulie_D]

If you mean the

.Product-price-tag {
position: absolute;
width: 6.5%;
margin-left: 15.7%;
padding-top: 16.5%;
z-index: 1;
/* background-color: pink; */
}

that contains this image

Firstly, the parent element doesn’t have position:relative…I’m not sure why.

Then you can position the image div bottom:0; right:0 and you really don’t need margins at all.

Frankly however, that image should be a background not an inline image.

I’m not sure what the “hover effect” is supposed to be.

[Author]

Posts