It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
Why is it that my CSS is not applied the same in all browsers? For example, for the below code:
<body align="center" background="F:\photos\sravan\wi7.jpg">
I can see my text which is aligned center and with background in Chrome, but not the same in Mozilla! Why is this happening?
Browsers restrict access to file:// resources for security reasons. AFAIK, you can specify image locations in the same directory only, i.e. your HTML file would also have to be in f:/photos and referenced using a relative path, ie. sravan/wi7.jpg.
Also, as pointed out in the comments, the notation you are using is not CSS. Specifying visual properties using HTML attributes is an outdated technique and it's better to switch to actual CSS. Learn about its basics e.g. here or on one of the sites recommended by Robert.
Your code is not CSS
Instead you should have HTML and CSS as in:
<body>
content
...
</body>
and body CSS
body {
background-image: url(URL to your image and not local path);
text-align: center;
}
Learn the languages
No offence but I warmly suggest you learn HTML and CSS before delving into writing any reasonable code.
Introduction to HTML
Introduction to CSS
HTML Specification
As per W3C specification body element doesn't support align attribute and background is deprecated in 4.01 and not supported in HTML5. So don't use it as an attribute. Define style using CSS:
in separate CSS file that you reference in HTML
add style element inside head HTML element
(not recommended) add style inline with your element:
<body style="text-align: center; background-image: url(wi7.jpg);">
Because of the way that CSS works having many inline styles makes your application hard to maintain and also intrduces new CSS hacks that you have to use in order for your page to render as expected. Separation of concerns rules. HTML file is your content definition, CSS file is its style. Keep them separate whenever possible.
General advice
Since browsers try to follow specification there may be differences between their rendering of HTML+CSS. Some may be very strict about it others a bit more loose. Try to stay within specification and you should get better cross-browser results.
Related
Is it possible to add css rule to an element at some page by adblock?
Something like this
#myElement {
color: white !important;
}
I tried to find a script that updates style of this element on page load but it seems that it is not a best way.
It's possible to do it on uBlock Origin and Adguard (as far as I know). Each has its own syntax for the styling rules, but uBlock is capable understanding both.
Here is an example of a CSS rule that changes Twitter background:
twitter.com#$#body.logged-in{ background-color: #8c8787 !important; }
The styling filters should be constructed like this:
<domain> + #$# + <selector> + { <style> }
Just avoid puting a space between the selector and the opening brace. Cause it can give you some trouble. Reference:
https://github.com/gorhill/uBlock/wiki/Static-filter-syntax#style
https://adguard.com/en/filterrules.html#cosmetic-css-rules
The other answers weren't working for me but there is a way to change an element's style:
example.com##h1:style(background-color: blue !important)
Make sure not to use curly brackets.
There is also some documentation on GitHub.
EDIT: As BeeLabeille mentioned this advice seems specific to uBlock.
I don't think it's possible for AdBlock to change CSS properties, you can use an extension like Stylish (available for Firefox and Chrome) to do just that though.
For AdBlock Plus, you can try this:
##.ytp-pause-overlay, .ytp-scroll-min
##.html5-endscreen, .ytp-player-content, .videowall-endscreen, .ytp-endscreen-paginate, .ytp-show-tiles
##.ytp-endscreen-content
This should disable the display of ads during the pause, and recommended videos, at the end of the video.
PS: Ah.. this is not the subject of the question.. this removes the class from the div element. Well, maybe someone will come in handy, to delete unnecessary blocks in the Youtube player.
The assumption behind this question is that the designer is using proportional queries in a Responsive Web Design and going from 1-column on a smartphone to 2 and 3-column on the displays where they will comfortably fit.
A content widget jQuery plugin (like a Recent Updates widget) should change it's character in the different layouts. In 1-column layout it might need to be 4 small text links and in 2 or 3-column layouts it can include thumbnails and extra text.
For reference, here's the code as the end-user of the content widget would see it.
HTML:
<section id="sidebar">
<section id="latestupdates"></section>
</section>
JS:
(function($){
$(function(){
$("#latestupdates").widgetco_latestupdates();
});
})(jQuery);
I think the best way to hook into the designers layout changes is this. Ask for the breakpoints as parameters for widgetco_latestupdates during initialization and use the resize events to toggle css classes.
Is this even the right method? What are the pitfalls with doing this?
UPDATE:
Since asking, I have found enquire.js which will handle running the queries. That still leaves the question of this being the right method.
If you are careful with the classes you assign to the content, you can likely control everythinhg with standard CSS.
For example, say your desktop output was something like
<article>
<h1> Update heading </h1>
<img src="..">
<p class="intro"> Intro text ... </p>
<p class="full-text"> Full text here </p>
read more
</article>
Then in your CSS you manage what content to show on which devices with
#media screen and (max-width: 480px){
/* for smartphones */
article img, p.intro{
display:none;
}
}
#media screen and (min-width: 481px) and (max-width: 800px){
/* for tablets */
p.full-text{
display:none;
}
}
I think if you can use CSS to manage the different layouts it will be more flexible and easier to update going forward.
Good luck!
EDIT
If you are thinking about ajax to add / remove content based on the visitor's viewport, here are two interesting links:
http://filamentgroup.com/lab/ajax_includes_modular_content/
Project on Github
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
I've searched all over the site but I couldn't find anything that helped me, so here it is:
I have this html file that when you click on Get extern it should place the content from extern.html into the div named content, but is getting stucked, when you click on the link it shows loading and that's it.
test.html file
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
// select all the links with class="lnk", when one of them is clicked, get its "href" value
// adds a "loading..." notification, load the content from that URL and
// place only the paragraph which is in the #cnt into the tag with id="content"
$('a.lnk').click(function() {
var url = $(this).attr('href');
$('#content').html('<h4>Loading...</h4>').load(url+ ' #cnt p');
return false;
});
});
--></script>
</head>
<body>
<h1>Web page test.html</h1>
Get extern
<div id="content">Initial content in test.html</div>
extern.html file
<h2>Content in extern.html</h2>
<div id="cnt"><p>Some text content in extern.html</p></div>
My guess is that your trying to load an external webpage, but it's getting blocked by the same origin policy in your browser. If not, there's a quick way to debug this.
1) My favorite is to use the Chrome developer panel (open by pressing F12). Go to the network tab and try to load the external page via your jQuery. Then you can watch the network activity and see if any errors come up.
2) User $.ajax instead of $.load. See here for more options: JQuery error option in $.ajax utility
If the problem is indeed the same domain policy look into jQuery's JSONP functionality. One example is here: http://www.jquery4u.com/json/jsonp-examples/
Hope this helps!
Generally this 'Loading' appears when the script is not successfully executed or some logical/syntax error is occured. I assume you verified your script with firebug, I suggest you to check with $.noConfllict(); in case if your page has multiple script blocks and libraries conflicting each other.
Put your foot inside the boots of an expert developer that is new to web development.
Certainly he will must deal with JavaScript and probably he will encounter a bit of difficulties with choosing a framework for its job.
For general purpose: which one do you suggest if the an easy usage is the first requirements?
I've worked with jQuery, script.aculo.us, and mootools, and I would highly recommend jQuery, which seems to trump a lot of the other frameworks in its ease of use.
For someone who is familiar with HTML and CSS, jQuery fits the paradigm really well, and makes the transition into Javascript very simple.
For example, with html such as this:
<div id="content">
<h2>Heading</h2>
<p class="featured">This content</p>
</div>
You might have CSS selectors that looked like this:
#content {
margin: 0 auto;
width: 760px;
}
#content h2 {
font-size: 110%;
}
#content p.featured {
font-weight: bold;
}
In jQuery, you can manipulate those elements using the same selectors:
$('#content').hide();
$('#content h2').html('New Heading');
$('#content p.featured').css('border', '#cccccc 1px solid');
jQuery also has excellent documentation that can really help a beginner jump right in.
I would also put a vote in for jQuery. I have found it to be simple to use, easy to learn, powerful, well documented, feature rich, extensible and backed by a great community of plugin developers.
See here for a comparison by feature.
In the past three years, I've used Prototype/script.aculo.us and jQuery. From the two, I prefer jQuery.
Generally, everyone uses jQuery these days. I like it pretty well.
You might also check out MooTools. Depending on your past experience, you may find it fits your style better.
I'd personally go with jQuery too. That's what I use these days when I need that sort of thing.
Well documented and a plethora of plugins already available.
From a newbie: I have been using jQuery and it creates big results with only a little skill. The more skill you build with jQuery, the cooler and easier things get.
jQuery supports a lot of selectors, It’s easy to add/remove attributes to any HTML element, makes ajax and json easy to use and has a big helpful community.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
I've been searching the web and can't find an answer to the question
of how using Cufon affects SEO (the way bots from Google, Bing,
Yahoo... read the page). I know the original text is still there, but
it is inside a tag, inside a tag, and is next to
a tag (instead of next to the word that should be next to
it). In other words, do the search bots read "search by", the same
way they'd read the cufon generated html below?
<cufon class="cufon cufon-canvas" alt="search" style="width: 72px;
height: 28.1667px;">
<canvas width="95" height="28" style="width: 95px; height: 28px; top:
0px; left: -5px;"/>
<cufontext>search</cufontext>
</cufon>
<cufon class="cufon cufon-canvas" alt=" by:" style="width: 36px;
height: 28.1667px;">
<canvas width="68" height="28" style="width: 68px; height: 28px; top:
0px; left: -5px;"/>
<cufontext> by:</cufontext>
</cufon>
I really like cufon since I'm not much of a graphics guy, but I also
don't want to ruin any good SEO I've got going.
Thanks in advance for any help or advice,
Chuck Foster
Cufon does not affect SEO at all. Its rendering engine is written in Javascript, and search engines don't read Javascript.
The code snippet you posted is what HTML looks like in your browser after Cufon has done its job; the search engines will only see your original html (the one you view when you click on View > Page Source in Firefox for instance).
A handy tip I learned while reading up on Google SEO is to take a look at your page in a text-viewer to give you a sense of what's visible to Google. You can do that with this handy tool: http://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php
Notice how your cufon shows up just fine.
Theoretically Cufon shouldn't affect search rankings as it is rendered after the page loads by Javascript. The actual source code still contains the heading. Despite this I found that there were quite a few conflicting opinions about the search-friendliness of Cufon so I've done a small study to try and get some data on whether it does actually affect rankings, here it is: Cufon SEO Effects
The study finds that Cufon doesn't have any direct effect on search rankings, although you could argue that the marginal increase in a page load time on a site that includes the Cufon Javascript file could potentially affect rankings, although in my opinion this difference would be minor.
No SEO impact at all. Much better than sFIR IMO for two reasons. 1. Faster, 2. Simplicity
I have found a great article which will prove there is no "negative seo" in cufon..
http://www.aerodesigns.co.uk/blog/negative-seo-effects-of-cufon/
Thanks..