Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
I have noticed in some areas that browsers like Safari renders font-size differently than IE and Firefox.
So i thought converting every value with px to em would be good since it should be perfect cross browsers.
But my layout is totally wrong now, either the em converter tool is broken or something is a miss here.
My layout is created for example like this:
#content {
position: absolute;
width: 58.19em;
height: 26.50em;
margin-left: 0.13em;
}
(Its positioned under a wrapper)
If i write px instead of em then it shows fine, but if i use em it shows totally wrong. Text size is way smaller and the layout is a mess. Is it the converter tool that is wrong or am i missing something here ?
http://riddle.pl/emcalc/ -
Try this
body {
font-size: 62.5%;
}
#content {
border:1px red solid;
width: 5.8em;
height: 2.6em;
margin-left: 0.13em;
}
#content1 {
border:1px red solid;
width: 58px;
height: 26px;
margin-left: 0.13px;
}
</style> -
Does not work. I have that in my body and said that in a div that font-size: 0.75em; which SHOULD equal 12px.
But the text size gets extremely small. So its not 12px, gets about 4-5px or something. -
Based on body font-size : 0.75em
body {
font-size: 0.75em;
}
#content {
border:1px red solid;
width: 5.8em;
height: 2.6em;
margin-left: 0.13em;
}
#content1 {
border:1px red solid;
width: 70px;
height: 31px;
margin-left: 2px;
}
</style>
Check http://pxtoem.com/
it will give you better idea.
1 to 4 of 4