I've seen other solutions on this topic, but none of them did the result I need (or want).
The problem is, Mac renders some fonts in an awkward way, the fonts are way too thick, even on Regular style. It's annoying!
So I thought I'd go for a CSS-Workaround to let the fonts seem thinner. All I could think of would be an inner-shadow for texts in hope they won't get too blurred, but this is easier said than done, text-shadow doesn't support this (for whatever reason).
Does anyone have an idea on how to achieve this effect?
I think this would be a losing battle, if you take into consideration that now, rather than the possibility of only dealing with fonts at a fixed resolution (72dpi, the standard on monitors for a decade or so, now), you also have to deal with some Mac's "retina displays" where the resolution is approximately 220-227ppi.
I'm also certain I read somewhere that those programs that have not been rewritten to scale properly on retina displays have to be interpolated by the OS, so it's quite possible that, from Mac to Mac, browser to browser, the same font is going to look quite different. As of right now, the only browsers I can confirm having Retina support are Safari (big surprise there, right?) and Chrome.
(For more information on this subject, see this question: https://apple.stackexchange.com/questions/54905/retina-macbook-pro-fonts-look-terrible)
You might be able to vary the fonts used based on pixel-ratio with a media query, if you are really committed to trying to hit this moving target.
#media all and (-webkit-min-device-pixel-ratio: 2) {
/* all your retina-display-tweaked settings, here */
}
Maybe this is a little bit too much effect but i think this is what your are looking for.
Adding a text inner shadow effect with :before & :after
.depth:before, .depth:after {
content: attr(title);
padding: 50px;
color: rgba(255,255,255,.1);
position: absolute;
}
.depth:before { top: 3px; left: 3px }
.depth:after { top: 4px; left: 4px }
jsFiddle: http://jsfiddle.net/4GAkK/
Related
I am trying to obtain a dashed table border, which has rounded edges (using border-radius). I have achieved this in all other browsers, but I know it is a bug in Firefox, and will never display properly. See the problem I have here.
I am wondering if it was possible to have Firefox alone displaying a solid line, rather than a dashed line, whilst leaving the other browsers to display a dashed one.
Essentially,
If Firefox,
border: 2px solid #000000;
-moz-border-radius:10px;
If any other browser,
border: 2px dashed #000000;
-webkit-border-radius:10px;
border-radius:10px;
I am fairly new to CSS and haven't dealt with browser specifics yet. If anyone could help (or point out problems to this method!) then I would be very grateful.
Thanks
If FireFox is bugging out, it may be worth going down the route of images for firefox.
You could have some classes:
.tr, .tl, .br, .bl {
display: none; /* Don't show for normal browsers. */
}
#-moz-document url-prefix() { /* Activate for FF. */
div { /* Probably best to tie this to a class / id. */
position: relative;
}
.tr, .tl, .br, .bl {
display: inline;
position: absolute;
}
.tr { /* top right */
background-image: url("curved_top_right.gif");
top: 0;
right: 0;
}
.tl {} /* top left - Use .tr as a ref */
.bl {} /* bottom left - Use .tr as a ref */
.br {} /* bottom right. - Use .tr as a ref */
}
Then in your Html
<div>
<div class="tr"></div>
<div class="tl"></div>
<div class="br"></div>
<div class="bl"></div>
</div>
Not ideal but might help you as FF is bugged.
You can do this a few different ways.
You could add a conditional stylesheet for firefox. This is a little overkill for just a couple styles.
You could use a CSS hack. This is not the best method since it relies on a browser bug (that could be fixed).
You could use a javascript or PHP function to parse the user-agent and append the os, browser, and version to the body or html tags as classes. Then you can write the styles with the correct class.
You could submit a bug report and pray.
Hope this helps! Good luck!
The short answer is no, that's not really possible.
The ideal solution is for Firefox to fix the problem and the issue to just go away. It looks like a fairly obvious problem, so I would assume that the Mozilla team know about it; it might be worth your time checking the Firefox issue tracker to see if they've got a ticket for it and whether it's had any work done on it. Given their rapid release cycle, there's a chance it may be fixed relatively soon, you should check this -- one thing you don't want to do is spend ages fixing your site to work around it, only to find it's a non-issue by the time you've done the work.
Having said that, the effect does appear to be deliberate by the browser: I recall that earlier versions of Firefox did show dots on rounded corners, so there may be some sensible reasoning behind it. I agree it's not ideal though. But if it's a standard feature of the browser, why not just run with it and let Firefox users have it the way Firefox wants to show it? (it doesn't look that bad, does it?)
On the flip side, of course, a question that might be asked is that if you're happy to have a solid border for Firefox users, why not just make it solid for everyone? That would seem to be the simplest answer.
Assuming you do still want to resolve it, in terms of work-arounds, I would strongly advise you to shy away from browser hacks or user agent parsing; both these solutions are brittle and could lead to problems. Obviously, in this case, the worst that is likely happen is the wrong border being shown, but nevertheless, you should be wary of both techniques.
One suggestion would be to try out border-image instead of border-radius.
border-image is a relatively new and little-used CSS feature, which allows you to construct your borders using images. (you'd never guess from the name, right?)
The beauty of border-image is that you can do pretty much anything you like with your border. If you want a specific dotted pattern, then just create an image with that pattern of dots; problem solved.
The syntax is a bit fiddly, and it works best with SVG images, but I'm sure you'll get it after a bit of experimentation.
As you can probably tell, it's a very powerful feature. The main reason it's little-used is because it's new. This means it doesn't have great browser support, but for you that really shouldn't matter because you'll be drawing borders that look relatively close to the standard border-radius effect, and you can use the standard border-radius as a fall-back. The one browser that you do want to affect (Firefox) does have support for it, so it should solve the problem.
Yes, I agree, it's a slightly complicated answer to a simple question, but it may be a way to make it work reasonably consistently across all browsers. Worth a try anyway.
I'm really stumped here. What I have is a div stylized as a rectangle, containing text which is the main header for the page. Relevant code follows:
HTML:
<div id="rectangle">
<h1>SIN</h1>
</div>
CSS:
h1 {
text-align:right
font-family:Buenard;
font-size:120px;
font-weight:normal;
color:#FFFFFF;
position:absolute;
width:98%;
line-height:109px;
border:1px solid white; /*for debugging purposes*/
}
#rectangle {
position:relative;
width:237px;
height:109px;
background:#6F0000;
margin-top:40px;
}
The problem that is driving me crazy is that I have two different Windows 7 computers, one Home Premium and the other Enterprise, that produce different results for the same version of Chrome (Firefox has the inconsistency as well). On the Enterprise computer, the text is closer to the bottom of the box, and on the Home Premium computer, the text is closer to the top.
I remember reading that browsers like Chrome and Firefox use OS system settings for fonts sometimes, but I can't figure out what could be causing this, nor how to remedy it. I ultimately want the text to be vertically centered and right aligned inside the rectangle, and can pull that off for each of the computers but not both at once.
I believe that the Mac OSX computer I tried this on had the same behavior as the Windows Enterprise computer (but I'm not entirely sure), so this may just be a setting on my personal computer.
I realize I could just use an image to fix this problem (and I may) but I'd really like to know what's going on here.
EDIT: I tried it out on my other computer and the issue still exists. The web font is referenced in the manner stated below. Any other ideas? My inclination is that it is a system settings issue, but I can't find what setting that would be.
It most likely is the font your using as it may not be installed on one of those computers. I would suggest trying a different font-family first.
h1 {
font-family: san-serif;
}
If you want to use that font you will first have to determine if you have the legal right to distribute it and then you would have to have every visitor to your site download and install the font so your site displays properly.
If you want custom fonts I would suggest looking into web-fonts. Google web fonts are just one sample found here: http://www.google.com/fonts/
EDIT:
In addition to making sure, and thanks to #w3d, your font will work, though not the way you have it referenced. You will need to make it a webfont reference so that browsers know to go to the web resource, otherwise the fallback fonts will be used instead.
As per the images you added, the line height might be your issue, try removing it. If you need to elevate that text off its borders, then wrap it with a span and apply some styling.
HTML
<span class="elevate">SIN</span>
CSS
span.elevate {
display: inline-block; /* to allow applying margins and padding */
margin: 2px 0; /* puts 2px worth of margin below and above text */
}
I like to know if is possible to specify the border drawing style (not border-style) with CSS (I need that works at least on webkit).
Well, I have an element like div.border and it have four-side border 5px silver solid. But depending of class addition, like div.border.red-mark, it will receive a border-left: 15px red solid. I need that the rendering style be rectangular and not adaptative to line width (or angled to a point).
To clarify, take a look at this example. And I need get something like that. But I can't modify the HTML structure, like I did on second example; I really can use only CSS for that.
Is it possible?
You could use CSS pseudo-content to achieve a fake border, like this:
.red-mark:before {
content: '';
display:block;
width: 15px;
position: absolute;
top: -15px;
left: -15px;
bottom: -15px;
background: red;
}
See: http://jsfiddle.net/MnPka/1/
The minus positions are because 0 starts within the border. You may be able to change this behaviour by setting box-sizing though support for that isn't that great yet - http://caniuse.com/#search=box-sizing
The :before solution offered by Josh Davenport is probably the best answer here, but just for completeness, I should also mention border-image.
border-image is a relatively new CSS feature that allows you to specify an image for each of the border edges and corners. This would enable you to design your border exactly as you want it.
Your example would be a pretty trivial case for it; as I said the other answer is probably better for you; but for more complex cases, it's a great little feature to have in your toolbox.
You can read more about it here at the MDN.
The one thing to note (as mentioned on the MDN link above) is browser compatibility. It will work in most current browsers, but not in any current IE versions (IE10 or earlier), and may have issues in older versions of other browsers. However, you specified you were particularly looking for a Webkit solution, and it has been supported in webkit browsers for ages, so it should be okay.
I'm designing a site (a customer portal) that will probably be used with mobile/touchscreen devices at some point in the future. In the past I've used CSS code like this:
div.Info
{
display: inline;
position: relative;
text-decoration: none;
}
div.Info span.InfoDetail
{
display: none;
}
div.Info:hover span.InfoDetail
{
padding: 3px;
display: block;
position: absolute;
top: 1em; left: 1em;
border: 3px inset Gray;
background-color: White; color: #000;
text-align: left;
white-space: nowrap;
z-index: 25;
}
to create little CSS popups that display on mouseover and they seem to work very well. However I'm conscious that this may or may not work on touchscreens so I was wondering what the "correct" behaviour was as there doesn't seem to be much consistency that I've found across the limited amount of mobile browsers I've been able to look at. I had looked about a bit and it seems that this hover event may activate if the object gains focus, so I created some test code at http://mad-halfling.webs.com/testcode.htm that displays a small popup if you mouse over the "Mouse over for detail" text or the little up-arrow image:-
on iOS (I found a demo iPad in a shop to test it) this doesn't seem to work (I only tried the text as I have only just added the image)
on MicroB on my N900, tapping the text and image both bring up the popup, fine
on Firefox (I believe it's Fennec) on my N900 tapping on either does nothing
What's your take on this - it seems a shame as it's such a useful way of making popups without having to resort to javascript, but if it won't work with touch-screens going forward I'm going to have to rethink my strategy
Cheers
MH
The fundamental problem with mouseover, including when it is used for desktop websites, is that there is no UI indication of a behavior.
This isn't a definitive answer but I've noticed that in places where you would be using "mouseover" now on a mobile device you can use "long touch". The problem though is that nothing on the UI indicates that behavior. (To be fair UI conventions that have no indication have been around for a while, like double clicking).
The rule of thumb probably should still be that just like mouseovers, critical functionality shouldn't require them.
Why not have a image of a question mark in a circle (which seems to be common idiom) near whatever you'd like a popup for, and have that have onhover and onclick functionality to display your documentation?
I have a website which uses CSS for all of its styling, and in Windows, the line-spacing and font sizes are all consistant accross Firefox, Opera, IE, Safari, Chrome.
I have just tried it under Firefox on the Mac (Snow Leopard) and whilst the fonts generally look a little more bold than on windows, the general sizing looks about the same.
However, in Safari on the Mac, all of the fonts appear so much smaller, line-spacing is much tighter also.
What is the likely cause of this? Is it a known scenario, perhaps with a nice workaround?
If you would like to check the situation, the site in question is:
http://www.marcusstarnes.co.uk
Thanks
Since you set font-size in em (a good thing - don't change that!) the font-size depends on the browser settings / user preferences. You've probably got a smaller font set on Safari.
On the other hand, if you are in the "all browsers must look a-like, or the world will end" camp, then you shouldn't be using ems.
I'm unsure about the line-height: 1 in the reset style sheet. That just seems wrong to me...
EDIT:
Oh wait, I just discovered font-size:62.5%;. Doesn't change what I said, but that is uncomfortably small for many, because you are using two thirds of the users preferred size.
I know this is an older post, but I recently ran into the same issue. The only browser I was having trouble with was Safari on Mac. What I ended up doing to resolve the issue was change my reset from :
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
to
html { font-size: 16px; overflow-y: scroll; -webkit-text-size-adjust: 16px; -ms-text-size-adjust: 16px; }
This just forced the browsers to all use the "medium" font size and then scaled it from there. The only reason I am adding this is because there really wasn't an answer given. Hopefully this will help someone that comes across this.