I'd like to slightly change the look of some browser widgets (like changing the background color of required fields). But apparently this forces the browser to switch back from 'native'-looking widgets to boring common-look widgets. This is especially bad if you have both unmodified and modified widgets on the same page.
Problem occurs with Firefox on OS X and Ubuuntu.
Any ideas how to get around that 'fallback'-behavior?
Example:
https://bounty.schuettel.ch/~reto/so/demo.html
<input type="text" value="123 test" style="background-color: #FFC;"/>
Thanks
Reto
I've noticed that on Firefox as well. I don't think there's any way around it.
In my sites I always set the styling on all my input fields deliberately to trigger this behaviour across the board -- I don't mind that it does that, but I do need all my select boxes to have the same style.
But to be honest I don't really like the "native-looking" select boxes anyway. They tend not to fit very well into a lot of web site designs, so I prefer the standard ones.
Related
Right now, we are trying to achieve consistent formatting of textarea elements, across Safari/Chrome/Firefox/IE on Mac and Windows. I believe this may be a rabbit hole, since any combination thereof could produce formatting in a slightly different way -- maybe one combination adds a bit of padding to a div here differently than the others, another one breaks multi-line text there differently than the others, and so on.
Instead of using textarea (or div) elements, can we achieve pixel-perfect positioning using HTML5's canvas? Or using the Raphael JavaScript library? Or maybe some other JS library?
Mainly, by pixel-perfect, what I mean is any arbitrary text should get rendered in the exact same way (especially with respect to line breaks and padding) in any of the above-mentioned browsers.
(I'd prefer to avoid Flash-based solutions for the moment, unless that is the only solution...)
Send the text to the server, have the server render an image, display the image. Voilà.
I would say this is nearly impossible.
I would also say that there is no reason to have pixel perfect across all browsers because the overwhelming majority of visitors only view your site with one browser. And those who do visit your site in more than one browser (say at work and at home) are unlikely to notice elements that are off a few pixels or have slightly different border colors.
What we should be concerned about is that the content looks good in each browser.
That said, here's a great list of textarea tricks: http://css-tricks.com/6841-textarea-tricks/
One main reason that PDF exists is that browsers are not about pixel-identical layout but PDF is. Among other things, not even typefaces are guaranteed to be the same from one OS/browser to the next.
Even, if you don't let the browser position anything and you do all your own pixel level positioning, you still won't necessarily have the same fonts to work with. If you let the browser position anything, then you can have variations.
Would one solution be to begin your css with a clean slate? Give everything a known default?
For example, I start my css files like this so I always know what to expect:
*{
margin:0;
padding:0;
}
Is that what you're looking for? Similarly, you could change '*' to 'textarea'.
I'm not sure if it is possible, however one thing you may want to look into is using the web developer toolbar for firefox or the web developer add-on for chrome. There is an option to disable browser default styles. Check this and then style everything. The borders, border type, all margins, paddings, background colors, etc. Then reenable browser default styles and make sure it looks the same. If not, wash, rinse and repeat.
Also, if fonts play a part, you will have to embed them into the page since some operating systems may not have a particular font installed.
I'm writing a web app. It's only ever going to be used with IE8, so I'm not concerned with the behavior of any other browsers here.
So: I know how to custom-style a button using CSS properties e.g. background-color, border, and so on. However, when you apply styles that way, the resulting button looks like a blocky table cell, nothing like the nice, glassy-looking button that IE8 renders by default.
Is there some way to add a tint to the nice glass-looking button? I.e., it looks just like it normally does, but with a red outline instead of blue, and a red highlight on mouse-over?
Or is this something I'm going to have to do by hand with images? Again, IE8-specific methods are perfectly acceptable.
Thanks!
-dan
There isn't really a filter that will get you as close to the default in IE, though you can get pretty close using the button tag and standard css. It will not look the same in all versions of IE though.
Here's the filter reference though if you want to try other things.
Regardless of browser, one of the quickest, easiest, most widely tested methods for styling buttons via markup is Jquery UI's button It's a matter of adding a few tags to the class element, and you've got a button based on an link, button, or input field. For styling, you can handle styling via CSS, or via the very well done ThemeRoller option, where you can control everything from text size to background type via a simple gui interface--and you can change on the back end or even the user end on the blink of an eye, even via drop down.
One caveat, since IE is non-standards compliant, rounded buttons fail gracefully to square--with proper styling.
I realize that you have determined that you can use a proprietary solution for IE, and in your case it might be just fine over the long term. But in my experience, that's a really dangerous path to follow. What if the actual long term is longer than your anticipated "long term?" You're specifying that it's acceptable to be proprietary to a browser that's well behind the accepted standards, is already a version behind, and uses unsupported (by universal standards) solutions to solve problems. Conceivably, that version is going to get tougher and tougher to find, and if Microsoft holds true to their patterns, once you install IE9 it will effectively render your computer difficult of downgrading. And, I can't emphasize enough that IE's market share is dropping like a rock, which is scary considering basically 95% of the machines out there have it pre-installed. All it's going to take is one overzealous IT director with "security in mind" to render your programming efforts moot. Sorry for the rant, but IE proprietary code has bit me hard more than a few times...
I'd have to double-check, but you should be able to use a combination of a background color and use a transparent PNG or GIF as the "background image" to add the highlights.
All things being equal, I've rather embraced the flat, square button - finding ways to make it work well with the design - but then again I've always been a straight line, square edge kind of guy. :)
As others have mentioned, you do want to be mindful (within reason) of what you may have to handle. It's quite possible that before the next re-write you're going to have to deal with IE9 - writing code that works well in IE8 and IE9 would be the most prudent approach.
Have a look at http://www.webdesignerwall.com/demo/css-buttons.html and also http://css3pie.com/.
Combining those you can get nice looking buttons in IE as well..
Can someone look at this page carefully. I am trying to fix font on this page. I don't know what previous programmer has done to font. Can you look at service guarantee and service features headings in green panels, edges of text are like someone cut this font with seesaw. Similarly on other parts of page. They are supposed to look smooth.
viewing page on ff and ie8 (widows xp).
I think you mean that these sections aren't anti-aliased. This isn't something you can control when you display text on the browser -- it's actually browser- and OS-dependent.
If it's important to your users to have smooth fonts, then you could anti-alias them in an image program and use images instead of text, but this is extremely inefficient and makes your page a gigantic pain to update.
So, in short, there isn't anything you can do to fix this. See this SO question for more details.
use firebug which is a firefox plugin to see the styles and html tags used in the web page, you can even edit the css used in the web page through firebug.
Your page looks fine on my browser (Chrome under Windows).
Different browsers all render text differently. What you will find is that there are often sweet spots in font sizes that look better than others. In any case, what you are talking about is whether the browser is displaying fonts anti-aliased or not.
There is a CSS3 property, font-smooth, that you can adjust for this, but don't expect it to work on browsers that aren't smoothing their fonts anyway. You can read about it here: http://webdesign.about.com/od/styleproperties/p/blspfontsmooth.htm
In short, don't worry about it. If it is a big deal for you, then experiment with different fonts and sizes. A good tool for doing this is at http://www.typetester.org/
Don't forget to test your site at BrowserShots.org. It will do screen captures for you, so you can check these details on a wide range of platforms.
If you must have your font rendered in a specific way, then it must be done in an image. This is not recommended. Text should be text wherever possible. However, if you must do it this way, consider one of the many scripts that assist, so you can keep text for browsers that don't support the script, and SEO isn't a problem. Typeface.js is commonly used for this.
Is it good to use bullet image inplace of browser default bullets for UL to get cross browser result?
Unless it's a very stylized/graphics heavy site, I'd say no. Users don't expect your webpage to have any particular look/feel...but they do expect it to be familiar and intuitive. If you have a completely different theme and a completely custom look, then yes, go for it. If you don't...let the user see what they're used to seeing.
Example: Checkboxes look different on different browsers, but 99% of the time, the same to the user that's always using that browser on their computer. Now using images/javascript to change what those checkboxes look like is slightly jarring, because they're suddenly unfamiliar.
If you're totally immersed in a different environment anyway (example: lots of graphics, black background, etc) then make your styles on anything fit that...for the standard-ish looking webpage that's very light on styles, I'd let the browser defaults prevail.
Well, if you are using list-style-image:url(), then you pretty much enter a world of pain, since different browsers will position the image differently. If, however, you're using background images + padding, then you can indeed get consistent cross-browser results at almost no cost.
We have an HTML page which displays a bunch of pretty bars using divs and repeating backgrounds. We are in the process of making a report out of this that can be printed nicely, but this may take some time because we don't have a reporting framework in place. As an interm solution we'd like to make the HTML version printable. The background of the divs are the only problem, and they don't print because of the default setting (which can't be enabled because the workstations are locked down).
I have found a work around for printing background images, but this doesn't work when the background needs to be repeated.
Are there any other work arounds which might be able to help? I have also been trying to insert an image inside the dive and stretch it, but this is throwing off all the other relative positions and is proving to be very difficult to fix. I am still looking into this however.
I have used this ActiveX Component in situations where controlling the printer output was absolutely neccessary (think printing stickers etc).
The function you'd want is : printBackground
However this doesn't come with their free license but perhaps the cost of that license outweigh the other work arounds implementation time.
Drawback: IE only.
If you can educate your users, there is an option in the print dialog box of IE and Firefox that is labeled something like 'Include Background Images' or 'Print Background Images'
This will include repeating background images.
I couldn't load the link, and I may not be understanding the problem correctly, but...
This is more of a work-around than a solution, but would you be able to make a single image that just appears to be repeated? Or at least, is repeated (for variable browser and screen sizes), but is large enough to be 'proper' for printing (which is a much more standard size)?
The easiest way I can think of achieving this is to have different stylesheet for printing that uses standardised images that fit the containers printed on paper.
The display stylesheet would continue to use the repeated images which wouldn't hinder performance as the full images loaded in the print stylesheet would only be loaded when the page is sent to the printer.
...at least, that's what the HTML spec says should happen. Whether this is actually the case, I can't be 100% sure.