On http://onpole.org/roland/, I have used background-images to decorate the page.
I, myself, use Mozilla Firefox, so I created my CSS with that browser in mind.
However, if I open the same website in different browsers (Chrome, Safari, have not tried IE yet) I see minor differences, which disrupt the layout.
Examples:
(this one actually is wrong in Firefox)
At the top of the page, there is a drawing, in which a white line comes out and goes down, into the next part of the website.
In Firefox there is an error when it comes to the next part,
But in Safari and Chrome this line is correct!
I would post more examples, but apparantly my reputation is too low to post more than 2 links. There goes being specific.
There's also a part where there are arrows coming out of the line. This works fine in Firefox, but has an error in both Safari and Chrome.
So the first error is not correct in Firefox but works fine in Safari and Chrome.
The second error is exactly the other way around.
I am posting this here because I need advice on how to tackle these problems.
Should I make browser specific css where I move the line 1 pixel?
Or is there some other way? Or do any of you know why these differences occur?
Just a suggestion but why not create a separate stylesheet? When I helped redesign my company's website, my supervisor and I found that our stylesheet rendered properly in Chrome but not in Firefox. Ultimately we created a stylesheet to fix those areas. It would only launch if the browser being used was Firefox.
Using a simple PHP command (and assuming that your Gecko stylesheet will be stored in a folder called CSS in your site's main template directory), here's how you can detect if the browser being used is Firefox which will then force the Gecko stylesheet to launch before the page is even loaded:
// firefox
if ($this['useragent']->browser() == 'firefox') {
// add gecko stylesheet
$this['asset']->addFile('css', 'css:gecko.css');
}
Important: When writing a stylesheet meant for Gecko-based browsers only, the sheet must be written as follows:
#-moz-document domain(YOUR-DOMAIN.com) {
/* ADD YOUR CSS HERE */
}
Only the code in between the { } will be read in Firefox. The best thing of all is if you want to target specific subdomains on your site, you can add a declaration for that subdomain all on the same stylesheet.
#-moz-document domain(YOUR-DOMAIN.com) {
/* ADD YOUR CSS HERE */
}
#-moz-document domain(SUBDOMAIN.YOUR-DOMAIN.com) {
/* ADD YOUR CSS HERE */
}
Just remember to keep your rules inside the curly { } brackets and you'll be good to go.
Related
I am newbie to web development, in specific browser related css compatibility issues.
I have the following css in my home page, which works fine in Firefox, and I can see the css properties when I inspect the element using firebug. But the same css rules are missing when I use chrome. when I inspect, I can't even see the rules in chrome. I wonder why this happens. I understand that some css rules are browser dependent. But now am really confused by thinking how could I resolve this.
Please refer to this link to see my css rules.
Any suggestions regarding why and how this happens. Any useful link also will be appreciated.
Thanks in advance.
Try using a media query, selecting only webkit specific stuff such as:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Your CSS */
}
This query checks the device pixel ratio in webkit. Safari & Chrome are the only big browsers using webkit, so this will not affect FireFox or IE.
I am using conditional comments to apply different style-sheets for IE. This seems to work fine with IE7, but no matter what I try, I cannot get IE8 to load more than one stylesheet at a time. Both stylesheets appear as options in the Page -> Style menu and I can switch between them but IE8 will NOT apply both at the same time.
Example: http://www.davidapfel.com/booknow.html. I have applied a pink background in IE for testing purposes. IE7 displays the page as I intend it, but IE8 completely ignores the iefix.css and iefix2.css stylesheets. (I tried removing the conditional comments but that made no difference).
Thanks in advance for any clues
Edit: Just found that the same problem exists with IE9 - it also ignores the extra stylesheets.
I have just found something very weird while developing a website. While trying to get a div element to display across the top of the screen, I noticed that I wasn't achieving a desired result in any browser except for old versions of IE. In order to test some different code, instead of deleting the faulty line, I used '//' to comment it out (I'm not really even sure if that works in css) but what happened was, the compatible browsers used the uncommented code, while IE used the code marked by '//'. here is the code:
#ban-menu-div{
position:fixed;top:0;
//position:relative; //<-- IE keeps the banner with rel pos while the other
display:block; // browsers used fixed
margin:auto;
padding:0px;
width:100%;
text-align:center;
background:black;
}
so basically, it seems as though // can be used to instruct newer browsers to ignore specific lines of code, and instruct older versions of IE to use it? If this is common practice someone please let me know. it sure makes developing for older browsers a hell of a lot easier
// is not a valid CSS comment.
Browsers that parse CSS properly will ignore //position because //position is not a valid property name (details are here, property -> IDENT S* -> follow it through).
This only works in IE7 due to its well known bug of accepting properties with junk prepended to them.
It's not just // that works. IE7 will have red text here:
body {
!/!*//color: red;
}
This is most typically exploited with *, for example *display: inline; as part of the display: inline-block workaround for IE7.
Don't fall into the temptation of commenting out single lines or blocks and not using the correct /* */ couple. A customer who has access to the website folder just chose by himself to comment out a single line using this:
//* comment here *//
Actually, Chrome and Safari will ignore ANYTHING that follows this line. I would call it a "css killer". :D
I am having trouble with cursors not being pulled through in WebKit browsers. Surprsingly IE and Opera work as I expect them to. Here's the CSS
.olControlDrawFeatureActive {
cursor: url(<DOMAIN>/common/images/cursors/draw.png), crosshair, default;
}
It quite simply changes the cursor to either the Draw png or, if it doesn't accept custom cursors or PNGs (like IE or Opera) then it should default to the crosshair. Works fine in IE and Opera, it goes to the crosshair as I want it to, FireFox, Safari and Chrome on the other hand refuse to return any css for this at all. Looking at the returned CSS in Firebug I just get.
.olControlDrawFeatureActive {
}
Empty, and utterly useless. I have tried replacing the URL with it's full path and relative path and (and this is the most confusing bit for me) I have tried removing the custom cursor entirely so it should default to the crosshair, but still it just returns an empty CSS rule! It's been bugging me for a while now because it originally worked fine in Webkit but not in IE, got it working in IE and now WebKit decides to not play ball! Am I doing something really obvious wrong? Any help or pointers would be hugely appreciated as it is driving me bananas
The problem seemed to lay in the fact that I had specified 3 levels of cursors i.e. The Custom one, the Crosshair and the Default cursor. There was no need to have the default one in there anyway as Crosshair is accepted by all browsers. Removing this seemed to make it work.
This seems strange though, does CSS only allow for two levels of cursors? If so then why did Opera and IE accept it, do they just ignore the first one?
Fixed CSS
.olControlDrawFeatureActive
{
cursor:url(<DOMAIN>/common/images/cursors/draw.png),crosshair;
}
This is for using in Safari, though it could probably be used on Firefox as well. In Chrome you have to add a plugin anyway (which generally allow for custom CSS per domain), and Opera already allows this to be done without needing any CSS. But while it's for customizing on the client-side, it's also a pure CSS question. So I'm using no plugins here.
So, again, I got a custom CSS code (easily) working for all domains. Now I want to get specify CSS code for each domain. All with just 1 CSS file that's being loaded by Safari.
Over the web and googling, I've found two ways to supposedly do this, but none actually worked. They're both documented on userstyles.com:
#-moz-document domain("your-domain.com") { }. This would be perfect, since I can have several tags like that and just choose which style will be loaded for which domain. It just doesn't work.
#namespace is quite confusing and I've tried every variation I could think of. None worked.
Safari does not appear to support the #-moz-document rule, which would explain why that wouldn't have worked for you. In Firefox, the following stylesheet will work:
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document domain("stackexchange.com"), domain("stackoverflow.com") {
/* your styles here */
}
However, in Safari 5, there is an extension called User CSS (note: link is to the developer's website and not to a page in the Safari Extensions gallery; caveat emptor) that will allow you to apply a single user stylesheet to multiple sites. (It seems to be the rough Safari equivalent of Stylish.)
With respect to your last comment, I think you're right: there still seems to be no way to do this with only CSS.
have you tried setting a <link /> src dynamically based on the document.domain? If you're using javascript, that is. This will let you set the src of the link tag to mydomain.com.css or myotherdomain.com.css