0

Had this issue for a couple days now but I can't for the life of me figure out what's causing it. A few google searches have pointed me a collapsing margin bug but I thought I'd get a definitive answer or at least get pointed in the right direction.

I have a div that is positioned absolutely within a relative div. This div is position varies from mac to pc.

The below screen shot is on a mac

text out of place.

The below screen shot is on a windows pc

text in place

This same issue happens on iOS devices as well, and is consistent across browsers.

   <div style="position:relative;" id="section3">
<div class="highheader" style=" font-size:42px;position:absolute; top:-8px; left:25px; color:black;" id="categoryname">VIDEO HIGHLIGHTS</div>

Above is a text snippet of the code. For some reason it just appears to be interpretting the top:-8px absolute value differently from machines. It's the same for every div I've set up like this. There is a version of this code up on my server where this issue is happening.

www.atomichael.com/mmaplus

Anyway I hope the information provided iss helpful enough, if it isn't please don't hesitate to ask for more details!

I really am stumped on this so any help would really be appreciated. Thank you.

kidshenlong
  • 552
  • 6
  • 16
  • 1
    more likely a browser variation than the os –  Jul 11 '13 at 22:27
  • 3
    It seems to be caused by the negative top position, but why are you positioning your text over an image? I would use the image as a background image of the box. – jeroen Jul 11 '13 at 22:29
  • Did you happen to test this in OS-whatever with any other browser than Safari? – mikedugan Jul 11 '13 at 22:32
  • thing is I've tested the same browsers on both platforms (Firefox, Chrome and Safari) and the issue doesn't vary across browsers but does across OS. Same goes for iOS (happens on chrome and safari). – kidshenlong Jul 11 '13 at 22:33
  • Yes multiple browsers and Jeroen, I'm a bit of a noob, that would probably prove to be a more elegant setup lol. – kidshenlong Jul 11 '13 at 22:34

2 Answers2

1

Fonts are not standard. Also, you can add padding, height, or line-height for some adjustments, or even adjust your position. I would start with the font. See:

http://www.w3schools.com/cssref/css_websafe_fonts.asp

StackSlave
  • 10,613
  • 2
  • 18
  • 35
  • Does appear to be an issue with the non standard font. The difference disappears when I revert to a font like Arial. Surely I should be able to fix this my explicitly declaring the padding, height,etc values? – kidshenlong Jul 11 '13 at 22:49
  • If anyone else ever encounters this issue I was able to use this site to solve my issue. http://www.fontsquirrel.com/tools/webfont-generator Fonts have three sets of embedded vertical metrics information and that site tries to synchronise them also giving you the css and setting up a bullet proof font face – kidshenlong Jul 11 '13 at 23:22
0

Just set top:0px and it will work fine for the following divs

<div class="highheader" style=" font-size:42px;position:absolute; top:0px; left:25px; color:black;" id="categoryname">VIDEO HIGHLIGHTS</div>

<div class="highheader" style=" font-size:42px;position:absolute; top:0px; left:25px; color:black;" id="categoryname">LATEST NEWS</div>

<div class="highheader" style=" font-size:42px;position:absolute; top:0px; left:25px;" id="categoryname">PLUS BABES</div>

<div class="tileheader" style=" font-size:42px;position:absolute; top:0px; left:25px;" id="categoryname">LATEST POSTS</div>

Other option is to create a class and apply different css for chrome and for safari

Probably this hack can work 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .myClass {
     top:-8px;
    }

    /* Safari only override */
    ::i-block-chrome,.myClass {
     top:0px;
    }
}

This is taken from here

Community
  • 1
  • 1
Khawer Zeshan
  • 9,470
  • 6
  • 40
  • 63
  • Not quite. It then displays fine on Mac but becomes 8 pixels lower on windows, which isn't the desired postion :( – kidshenlong Jul 11 '13 at 22:44
  • I imagine this hack would work but should probably avoid targeting specific platforms like that... Thanks for the suggestion anyway! – kidshenlong Jul 11 '13 at 22:52