i have a background image on a webpage and i am placing an image in my body to line up over the image:
here is my css:
Background:
body {
font: 12px tahoma, Arial, Helvetica, sans-serif;
line-height: 1.5em;
margin: 0px;
padding: 0px;
color: #241a10;
background:#c9e4ec url(/Content/images/myImage.gif);
}
Image:
#leftSideContainer {
position:relative;
margin-top:-47px;
width:147px;
height:93px;
background:url(/Content/Images/image2.gif);
}
In IE7 and Chrome, it looks perfect and lines up exact:
But in IE8 and Firefox, the image shows a little lower down compared to the background image:
If it was just an old version of IE that was broken i wouldn't care but in this case firefox is broken as well.
i tried playing with the:
margin-top: -47px;
but if i move it higher to get it to line up in firefox, it them obviously looks misaligned for the other browsers.
any suggestions for what might be causing this discrepancy.?
CSS reset is your friend
http://meyerweb.com/eric/tools/css/reset/
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
Related
Codepen Link: https://codepen.io/calebzahnd/pen/OWxxLw
h1 {
max-width: 800px;
font-family: sans-serif;
font-size: 90px;
font-weight: 900;
text-shadow: 0 0 50px #000;
}
Screenshot:
I've found what I can only imagine to be a bug in Chrome Browsers when displaying on a Retina screen. There is a strange clipping on the text shadow, and the text shadow itself is pushed way below the actual text. When adjusting the font-size, the clipping will randomly change to only clip certain characters. If you adjust the blue value of the text-shadow, certain values will snap the shadow back to where it should be located, but without any sort of rhyme or reason. I've checked and this displays fine on Safari and Firefox. Can someone explain what is going on here?
I can perfectly see the text shadowing in Chrome and Safari browser with my retina display screen.
Try updating your browsers and/or clean your cache.
h1 {
max-width: 800px;
font-family: sans-serif;
font-size: 90px;
font-weight: 900;
text-shadow: 0 0 50px #000;
margin-left:25px;
}
<h1>This is what you want everyone to see</h1>
The problem is that there is this large shadow, and the text is right against the pixel edge. Some devices/browsers won't render past the pixel edge of a window or a div. My suggestion is a 25px margin to the left of your text. Perhaps even 25 all around.
This is the third time I have faced this problem.
I don't know what is wrong.
Here are two pictures of how it looks like:
On desktops:
On mobile devices:
As you can see on mobile devices text is not aligned center vertically.
Again this problem is only visible on mobile devices.
What is the problem? What did I miss? This problem is also visible in inputs.
I am using the following code for the buttons:
.button
font-family: 'Gotham Pro', sans-serif
font-size: 14px
color: $color-text--button
padding: 10px 15px
text-transform: uppercase
background: $color-button--default
border: 1px solid $color-transparent
Please note, I use padding for setting height of buttons
UPDATE
I have just tested in mobile android Firefox browser, everything works just fine the issue only with Chrome
There is no line-height specified in your code.
Try setting a specific line-height. In addition I suggest, that you center your text via line-height and not via padding. Set a line-height with the same height the button has.
CSS
.button {
height: 40px;
line-height: 40px;
}
This works of course only for single line texts.
Also have a look at this SO question
Did you specify a media query SPECIFICALLY for mobile?
You may need to add
// you can use any other value of screen width mobiles use like 640, 768
#media (max-width:480px){
line-height: 15px; // The line height you want to show on mobile
}
Not all browsers have a default. Almost always I make a habit of setting styles on the body element
body{
font-size: 100%;
line-height: 1.333%;
}
to take care of things like this.
I had to work with a fancy font today and I noticed that it has different line-height rendering on chrome mobile device and chrome desktop mobile emulator (devtools). Which is apparently a bug to be reported for either dekstop either mobile chrome. Changing line-heights is the option to fix but cumbersome if you have many elements. After some digging I figured out this properties
ascent-override: 92%; /* play with values */
descent-override: 10%; /* one might not be needed */
Futhermore as I needed font change for mobile chrome only I tried media query and it worked.
#media (max-width: 1000px) {
#font-face{
font-family:'FancyFont';
src:url('fonts/FancyFont.ttf');
font-weight:400;
ascent-override: 92%;
}
}
I have my site how I like it, cross browser, although I have letter-spacing in CSS, but in safari it does not understand what I have, it ruins the design - any advice? Here is the CSS:
body
{
margin: auto;
font-family: 'Lato';
letter-spacing:0.50px;
font-size: 14px;
color: #999;
font-weight: normal;
}
It seems it doesn't give it any. It works fine in Mozilla Firefox
Webkit browsers (Safari, Chrome) round differently than Gecko (Mozilla). Thus, use 1px instead of 0.5px, as Webkit will round down to 0 while Mozilla will round up.
Chrome/Blink has fixed this issue some time ago so this should work on current stable version: http://src.chromium.org/viewvc/blink?view=revision&revision=153727
Webkit just fixed this, so you will have to wait a little to have it working on safari and other webkit based browsers:
http://trac.webkit.org/changeset/161521
I'm working on a site's CSS and am running across an issue with the body margin section. If you look at this in Firefox and then IE, you can see the line isn't lined up right in Firefox, but it is in IE. (In the black header section).
Here is what I have for the body tag, It's something with the margin and I can't figure it out:
body {
margin: -2px;
padding: 0px;
background: #E7E7E7 url(images/bg01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #888888;
}
Thank you for any responses!
You've placed the image with the text "Nickelson Associates" inside a table cell with a default padding which is 1px in MSIE. You need to force the td element in question to have a padding of 0.
That said, using tables for layout/positioning is considered bad practice.
In Firefox 3.6, IE7 and Opera 10 on Windows, this HTML has an odd behavior:
<html><head></head>
<style>
span {
font-family: monospace; background-color: green;
}
span.b {
font-weight: bold;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>
The bold span in the middle is shifted down by one pixel. That doesn't happen for other fonts.
Why is that? How can I fix it?
Why is that?
Excellent question. Just spent half an hour trying to figure out the why, to no avail. Marcgg's solution doesn't seem to work, either, the offset is still there. Google turns up nothing. This only seems to happen on Windows, not just in the browsers you mention, but also in Opera 9 and IE6. Not in Firefox 2.0 though. Puzzling.
How can I fix it?
The only solution that has worked so far for me is this:
span {
font-family: Courier; background-color: green;
}
span.b {
font-weight: bold;
}
I.e., specifying Courier instead of monospace. This renders consistently in all browsers I tested (IE6, Opera 9, FF 2.0 under Windows 2000; Opera 10, FF 3, and Konqueror under Ubuntu). As to why, I still have no idea.
It's just an optical effect. Grab a screenshot and zoom in: you'll see the text baseline does not change at all.
It should fix itself if you choose a different colour contrast.
Update
alt text http://img690.imageshack.us/img690/421/opticaleffect.png
The problem is the font "Courier New" which is the default font used my most Windows browsers when "monospace" is requested. For the bold variant, the baseline is at a different offset:
<html><head></head>
<style>
span {
font-family: "Courier New"; background-color: green;
}
span.b {
font-weight: bold; vertical-align:top;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>
With this code, you can see that the middle text is shifted up (= different baseline offset) but the background color is now aligned properly.
The solution is to request "Courier" as a font and to avoid "Courier New".