Am I the only one wondering why the new update in Opera 11.60 made all standard dropdown menu's look small like on the image beneath?
Is there an "easy" way of fixing this? I guess a fast defined height could solve it, but how would it look in other browsers then.. Is there a universal height of all standard select/dropdowns which could be set?
Don't think I've noticed any such problem. Make sure you don't have extensions, user style sheets or user JS that restyles select elements.
I would recommend that you don't try to change anything in your site's CSS to handle this issue. Adding hacks to handle browser quirks will only make the CSS more brittle in the long run, and this issue is merely cosmetic and may not even be seen by all users.
Related
It has been brought to my attention that a website I'm helping out with sometimes has problems with span elements being injected. Those spans will break the whitespaces and make the text hard to read. Those spans look something like this:
<span data-contrast="auto">words</span>
<span data-contrast="auto">,</span>
<span data-contrast="auto">b</span>
<span data-contrast="auto">ut</span>
<span data-contrast="auto">sometimes also only single chars</span>
The website is run with/by WordPress, but that does not seem to be the cause because the affected posts look fine and show no sign of this markup in the post editor or database.
Also, those spans only seem to occur at nighttime. I tried to nail that down, but as so often, I couldn't really verify it yet, as it did not occur again to me, not even at night. Right now everything is fine and none of these spans are present.
I'm guessing it has got something to do with night-mode in browsers (although behaviour was the same in Edge and Firefox) or the night-mode in Windows but then on the other hand I haven't noticed this on any other page yet.
So, this is somewhat strange and hard to nail down, but you'll find copied texts that contain the same markup, when you use a search engine and search for "data-contrast span". So, at least I'm not the only one with this problem.
Any ideas how to nail this down and find out what causes it?
Browser plug-ins are usually given permission to modify page source at run time. I would guess the culprit is a cross-browser extension like Night Eye or Dark Reader.
In general, adding a <span> shouldn't mess with your layout unless your CSS is changing span properties away from the browser defaults.
Option 1
You might be able to fix the issue by adding CSS to control how the layout looks:
span[data-contrast="auto"] {...}
That will select all spans that have that data attribute. Then add styling to counteract the layout issues you see. That said, since the extension is adding the code after the page renders, it may override whatever you do.
Option 2
A better solution would be to create your own dark mode. Most plugins/OS night modes won't mess with your code if you provide your own theme options. A "dark" theme is the 2020 version of being mobile responsive; you should provide it in your code or live with the consequences when users, browser makers, and operating systems make their own decisions.
If you need help creating an alternate theme, CSS Tricks has a good write up.
Since it's not clear what software they are copying from, I've personally experienced this when copying from a Word Doc that's been opened in Microsoft Teams or in SharePoint, and then pasting directly into a website's editor (our site uses the TinyMCE text editor, a commonly utilized free text editor).
My recommendation: copy directly from the desktop version of Word, then paste into the editor and that prevents the "data-contrast" spans.
I assume there must be some hidden spans in non-desktop versions of Word Docs that they add to ensure the document displays the same way as the desktop version. The text editor doesn't know what to do with it, so it strips out everything, but the "data-contrast" portion.
Hope this helps someone out there as the original post was as asked some time ago.
So there are a lot of resets out there, and there are a lot of form stylers for cross-browser forms. My issue is that none of the resets I can find fully reset forms!
Formalize is great, but I want to style it myself from the ground up, where formalize simply has it already styled.
Is there any reset.css that has full capabilities to reset every form element? If so, where?
This may not be the most informative answer ever but I would strongly recommend creating your own form reset if you can't find one online. A lot of the resets aim to cover just 90% of the browser styling in order to keep code overhead down.
To do it yourself use current resets as inspiration and use the Chrome Inspector tool to find out why a form is styled by default in a particular way and counteract it. Then work with other browsers (with Firebug for Firefox etc) until your form is as consistently styled as possible. You can always add to this reset in future projects if you find things are missing.
If you do decide to create one you should share it on GitHub for others who may need it in the future.
While creating a site I've noticed that IE places things slightly differently from Chrome or Firefox.
I mean I have one thing below another and in Firefox and chrome there is a 15px space between them. But in Ie its more like 25px. I keep reading about designing for all browsers. But how do I do that because If I make it look right in one browser it will always be different in another.
Do I move it to suit IE? Because then it will look wrong in Chrome.
You can keep tweaking your code untill it looks good for all browsers
Another option would be to have a seperate style sheet for IE. this would allow you to design for IE as well but you would need to keep in mind that you have 2 style sheets and would need to work on both when you make changes to your site
First of all welcome to web development!
What you can do is load a "Conditional stylesheet" which will only load in IE,
Chris Coyier from CSS-Tricks does a great job of explaining this so take a look here
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
That should help you out, but it is a tricky task getting everything cross browser compliant but not impossible, just keep at it and you'll get there.
Good luck man!
Try using a css reset first in your style sheet. The reset will customize all the attributes which you can define as per your needs. The main purpose of the css reset is acheiving complete control of all the attributes and defining a generic behaviour for the browsers. Tweaks will help, but in long run, a balanced solution has to be implemented for major things to work out well.
Below are some popular CSS Resets that you can use.
Eric Mayer Reset
Yahoo Reset
Hope this helps.
I am making a Google Chrome extension to change the appearance of the (Webkit) scrollbars. I want them to "blend in" with the rest of the page. What I was thinking of doing is reading the page's background colour and assigning it to the background-color of ::-webkit-scrollbar-track-piece. Is this possible?
Also, is it possible to tell if the scrollbar I'm changing is one of the main ones (as opposed to an in-page one).
P.S: I'm really a beginner when it comes to web development.
With a content script you can read the CSS data, and then inject the proper styles on to the page.
As an example, the following will style just the "body" scrollbars:
body::-webkit-scrollbar {background-color:#000}
No, you can't do it in pure CSS, You'd need at least Javascript to accomplish this, but it's probably impossible in Chrome, and for good reason.
The last time I remember this being possible is in IE6. It's a risky idea in general to change user interface elements that are common to all applications on a platform, because the user has to relearn how to use your application.
Think of the best-designed sites on the internet. You probably don't spend much time wishing their scrollbars blended in better. It's just unnecessary, and the downside (confusing the user) far outweighs the upside (possibly making the scrollbars slightly prettier).
The following page looks good in Firefox, Safari, Chrome, IE6 and IE8... but it looks bad in IE7. I don't have IE7 but I need to fix this issue because someone seen it in IE7 and it looks bad. Does anyone has any idea why this page renders different in IE7?...and what is the solution to make it display correctly?
http://www.aetna.com/2009annualreport/mainBoard.html
Problem:
When you click on the "Board of Directors" or "Management Team" link and the listing table panel opens up, the far right third of the panel is getting cut off. Also some information appears to be missing in the cells.
Thanks,
Attila
Yes.. use a css-reset
But also... use the validator.
http://validator.w3.org/
I used the validator and found this:
Polo Ralph Lauren Corporation</p></li>
Notice the misplaced li ?
Also add this to #boardPanel
{ width: 990px; }
This problem disappears when I remove overflow: hidden; from the .boardSlider class.
Look like another hasLayout bug.
All browsers render web pages differently. There is no one solution that will always make everything look exactly the same across all browsers. The best option is to start with a browser such as firefox or safari when you are testing and then tweak your css for internet explorer as you go along. One common technique is to use a CSS reset to try to abstract differences between browsers.
If you don't have IE7 on your machine you can test in it using http://spoon.net/browsers to see what your page will look like or see this question for more suggestions.
Check out Adobe Browser Lab. Very cool and very efficient and the best part is it's free (not anymore thanks for the headsup). It not only has various browser options but also OS options.
HTH
Just a thought - why not use DIVS and floats - you should never really use tables for layout purposes (particularly as it's 2010). Especially dynamically changing layouts. Tables are cross-browser hell, particularly when expanding / contracting using JavaScript and, from a purist's point of view, you are not displaying tabular data, so why use a table?