I am trying to use Google Custom Search (Business Edition) on my site. I am not using the iFrame but I am using the Custom Element. I selected a theme and everything looks fine in all the browsers except IE6. All the search results are taking the Promotion CSS.
Update - Posted Code
<div id="cse-search-form" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('XXXXXXXX');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setSearchFormRoot('cse-search-form');
options.setAutoComplete(true);
customSearchControl.draw('cse', options);
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/minimalist.css" type="text/css" />
<div id="cse" style="width:100%;"></div>
I have solved the issue. The issue was with CSS that Google provides. They no longer support IE6 and infact do not have the browser installed anywhere to test (or so I've been told).
The issue is with IE6 and its inability to support multiple classes. Have a look at Ryan Brill's post for more information. To get the Google Custom Search CSS to work with IE6, the CSS selectors have to be tweaked a bit.
Ex: div.gs-promotion{ } instead of .cse .gs-promotion.gs-result, .gs-promotion.gs-result{ }
Related
I have a web page that is was optimized mostly for IE and Chrome. I am trying to figure out tips on how I should display this image since it looks quite awful just sitting above the copyright on all my webpages. I am looking for any CSS tips on how I can make the highlighted portion of this web page have a more professional look to it. All suggestion are greatly appreciated!
<p class="clearfix">
This page is optimized for Internet Explorer and Chrome. To ensure accurate processing of your mail packet, please ensure JavaScript is enabled in your browser.
</p>
What I suggest doing is center the copyright info. Then create two separate CSS files. One that will be used if the user doesn't have javascript enabled and the other if they do. The text you have ("This page is optimized for..") should be in the CSS file where javascript is disabled(Also move that text to the top of the page and center it).
How do you check to see if they have javascript enabled? do this
<link rel="stylesheet" href="jsdisabled.css" />
<script type="text/javascript">
document.write('<link rel="stylesheet" href="jsenabled.css" />');
</script>
"although the solution below works it does not validate
inside your noscript tag you can put some style tag that hides the rest of your content. "
*no script option *
<noscript>
<style type="text/css">
#content { display:none; }
</style>
no js content goes here.
</noscript>
How can I show different content when JavaScript is disabled?
This way that text won't appear for everyone, just the people who don't have javascript enabled.
How do I import an css file for Chrome (or webkit).
I want to do something like this for ie6:
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Your best, and easiest, bet is using a server-side language that can detect the user's browser. PHP, ColdFusion, JSP, etc have built-in functions and variables that can help you determine the browser a user has.
If not, then a client-side scripting agent is your next option. JavaScript, and its efficient library option, jQuery, are good approaches.
//jQuery
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
if ($.browser.webkit) {
///Chrome-specific css here.
}
</script>
If you can't (or don't know how to) use the library, then the following works as well, but you'll need to do a few more conditional checks
//Javascript (Note: Chrome will say 'Netscape' for its name)
<script>
var browserName = window.navigator.appName;
var browserVersion = window.navigator.appVersion;
</script>
if you want to only change lines of code instead load a full css file you could use this:
http://rafael.adm.br/css_browser_selector/
First a link to the site: www.fish-fry.com
I know this is considered bad practice, but I have been dealing with this issue for about a months, the site I've built is now 100% finished except for this issue and I can't get paid until it's resolved.
When viewing from Mac, site looks good on all major browsers, when viewing from PC, my navmenu and search bar input are 2px lower.
I've found some code that seems like it will let me call different stylesheets pending the platform, but it's not working for me, wondering if anyone here has any insight:
<script type="text/javascript">
} if (navigator.userAgent.indexOf('Windows NT')) {
document.write('<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style-windows.css" />');
}
else {
document.write('<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />');
}
</script>
Any help is greatly appreciated!
#sarnold, no validation errors.
Though removing the closing bracket did not seem to work either. Originally it screwed how things looked on a mac, so I changed it to this:
<script type="text/javascript">
if (navigator.userAgent.indexOf('Windows NT')) {
document.write('<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style-windows.css" />');
}
elseif (navigator.userAgent.indexOf('Mac OS')) {
document.write('<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />');
}
</script>`
but, when I open chrome or firefox from Windows, it's still reading from the default stylesheet.
Is anyone familiar with the script above? Not sure why my PC is still referencing the Mac stylesheet.
Thanks in advance for any help!
I've tried this script too, seems that still, both platforms are only referencing 'style.css'
<script type="text/javascript">
/***********************************************
* Different CSS depending on OS (mac/pc)- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var csstype="external" //Specify type of CSS to use. "Inline" or "external"
var mac_externalcss='http://www.fish-fry.com/dev/wp-content/themes/FISH-FRY-MUSIC-AND-SOUND-CUSTOM-THEME/style.css' //if "external", specify Mac css file here
var pc_externalcss='http://www.fish-fry.com/dev/wp-content/themes/FISH-FRY-MUSIC-AND-SOUND-CUSTOM-THEME/style-windows.css' //if "external", specify PC/default css file here
///////No need to edit beyond here////////////
var mactest=navigator.userAgent.indexOf("Mac")!=-1
if (csstype=="inline"){
document.write('<style type="text/css">')
if (mactest)
document.write(mac_css)
else
document.write(pc_css)
document.write('</style>')
}
else if (csstype=="external")
document.write('<link rel="stylesheet" type="text/css" href="'+ (mactest? mac_externalcss : pc_externalcss) +'">')
</script>
Any help? This is driving me bananas :|
Your problem is the stray closing brace at the beggining of the script
As a suggestion for future projects, you may want to use reset stylesheets to synchronize all browsers. This will help avoid viewing headaches. Any of these are a good starting point:
http://html5doctor.com/html-5-reset-stylesheet/
http://meyerweb.com/eric/tools/css/reset/
http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
http://developer.yahoo.com/yui/reset/
Yahoo's reset is probably the oldest and most outdated. Search for most recent, most popular reset stylesheets in the past year for the poison of your choice.
I guess from the comments above that you found the problem in the stylesheet and fixed it - which is great news.
But for those situations where it's the browser which is buggy, the approach used by the developer of Thematic is really elegant:
They have created a nice bit of code in the theme which adds styles to body that you can hook styles into throughout the site if you need. Here's a real example:
<body class="home page page-id-5 page-template-default windows firefox ff1">
That means you can have one stylesheet with css like:
.firefox #menu { margin-top: 2px; }
.IE6 #menu { margin-top: 4px; }
If you want to play with different user agents check out the Thematic theme website or if you prefer go to my website.
I have a web page, I want to detect whether it's running on mobile safari on an ipad. If so, it should load different css files (and if it is running on websheet then it should load another css).
I am using following way for handling css but it shows only one for both:
<link rel="stylesheet" href="main.css?v=2">
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">
Are you using a programming language to dynamically generate pages? If so, you can use user-agent sent by browser and according to it, decide which css to include.
Example:
<script type="text/javascript">
$("#btn_load_css").click(function(){
var w = screen.width;
var h = screen.height;
$(document).append("<link rel='stylesheet' "
+" href='css/defaults.css.php?w="+w+"&h="+h+"' />");
});
</script>
This will cause the css to load at the end of the file.
If your main concern is the viewport size simply use media queries.
See MDN for an easier explanation and some examples.
I have added a css file on my page. But sometimes. the css file doesnt load and the page renders in Normal HTML style. If we refresh the page manually then it loads. This issue is intermittent for all the browsers. Is there any solution for this. Can we ensure that the css loads every time before the page renders?
Thanks,
Rohit
I have seen this issue a lot in web development and there seems to be no solution as far as I know. Even sites like YouTube and gmail will sometimes not load the CSS leading to the page being rendered in a jumbled fashion with a white background. If it seems to only happen on your site, try switching hosts; maybe that will help.
Good luck!
Edit: the only reason I don't think this is code related is because you said it happens intermittently. Have you tried testing on numerous machines, not just different browsers?
Make sure you put the style reference in <head> section of html and make sure the css markup are correct.
Style reference
<link href="SiteStyles.css" rel="stylesheet" type="text/css" />
You can load dynamically with JQuery
$(document).ready( function() {
$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
href: "/css/stylesheet.css"
});
});
Or this one
$(document).ready( function() {
$("head").append("<link rel='stylesheet' type='text/css' href='css/style.css' />");
});
you can use this trick also not good but may be work
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("style").load("css/style.css")
})
</script>
This is the default behavior of the browser. Actually the browser caches the css file. But there is one way, you can do this, and that is to pass a query sting value as follows...
<link rel="stylesheet" type="text/css"
href="http://www.domain.com/css/abc.css?v=1.1" />