I have this page at
http://kornar.co.uk/example.html
But it doesnt render HTML. I know its there because when I check view source the HTML code is there, on my localhost it works perfectly, thanks for your help!!
Well to start, js/jquery.js is missing so none of your js is going to run... all the tabs are hidden so without the js the code in the tabs won't be come visible...
Its works correctly for me.
There is possibily two explanation why it do not works for you :
- Your Browser cache need to be cleared
- Your DNS cache need to be cleared.
Try both and let us now if it works
Line 90 in your layout.css file says:
.tab {
padding: 16px;
display: none;
}
If you remove the "display:none" bit, you'll see more.
Try to use Firebug when debugging stuff like this, it's awesome!
You have .colorpicker set to display:none in the css file.
Related
I'm working on my new online portfolio at http://asbjorn.org/ny/, and I've come across the weirdest issue!
Every time you open the page for the first time, the next and previous buttons for the slideshow don't appear. If I open the inspector, they pop up immediately, and they also appear when reloading the page.
They're pretty standard html elements, not added dynamically, so I have NO clue as to why this happens! Of course I can't have the site visitors reload the page just to see them. :/
I really hope someone can help me! :)
update: seems like it's a chrome only issue. For me it happens consistently in chrome on both Win7 and OSX. A few of my friends also has the same issue (probably in chrome on osx)
So I'll take a stab at an answer. When I see the problem in Chrome 22, and I bring up the inspector, I note that the #previousLink and #nextLink divs have a width of 0 in the broken state. Try setting an explicit width for these in your CSS, or make the nested image use display: block.
#previousLink { width: 31px; }
#nextLink { width: 37px; }
or
#previousLink img,
#nextLink img { display: block; }
I think the combination of these inline items and your overflow: hidden rule are biting you. I think. This is a tricky bug!
I just noticed that on my website I have lots of unexpected space, and I don't know where it is coming from.
Here is my web: http://freshbeer.lv/new/latvian/index.php
As I am unsure where problem comes from I can't post code (if I post all code it would be to damn long)
So if someone can suggest are that's causing a problem, I'll post code here for you.
Remove the height:1511px from style.css line 287
See below image
This is creating pretty much space from your CSS file (style.css):
#slideshow-right {
height: 1511px
}
It's working fine if you simply remove the height attribute from that CSS rule.
here is the issue, it was a TYPO only 1 ruined this
#slideshow-right {
height: 1511px
}
it was supposed to be 151px only ; :)
one suggestion use Firebug to such issue they detect problems easily.
hope this will help you in future also.
in-case you don't know : what is firebug and how to use this
Can ayone explain why my form is broken in Firefox? I have tried various ways to correct it, but keep getting the same result. I would be grateful if someone could tell me where I am going wrong with it. I have included grabs so you can see the problem. I have also posted the code at fiddle. I also note that at fiddle i am using IE8 and the layout is broken there also but not in my broswer. Many thanks.
Grabs:
http://img20.imageshack.us/i/ffformincorrect.png/
http://img195.imageshack.us/i/ie8formcorrect.png/
Fiddle: http://jsfiddle.net/tdfLQ/
I tested your jsfiddle link in Firefox,Safari,Chrome and IE 8 and they all render it the same way, and Aziz' solution just require some tweaks, try looking at: http://jsfiddle.net/tdfLQ/1/
In addition to removing the width like Aziz suggested, I have just added margins to the fields and send button.
A quick google came up with this page, which looks helpful (maybe a little old): http://www.websiteoptimization.com/speed/tweak/forms/
Remove width: 350px; from .fb-input-right-con
Here is a working example of what you wanted: http://jsfiddle.net/tdfLQ/8/
Please can anyone help me out. I have an html page in which I have added a modal popup from ColorBox. In the ColorBox popup, I have added a CKEditor. The problem is as follows:
In IE, the CKEditor works fine, but in FF & Chrome, I get the CKEditor like in readonly mode (I can't type anything in it).
If i put the CKEditor directly into the page (and not in the modal popup), it works fine in all browsers.
I think this might be a problem with the z-index on one of the elements generated by CKEditor. But I don't know which one exactly?
I would really appreciate some help plz, thanks in advance!
We got around our problem by switching lightboxes, rather than use ColorBox, use Simple Modal. I have a funny feeling it will work for you. Good luck!
<script>
$(document).ready(function() {
initCKEditor(); //function ckeditor.
$("#id_textarea").val(CKEDITOR.instances.id_textarea.getData());
});
</script>
Render/create ckeditor on colorbox "onComplete" callback.
See callbacks here : http://www.jacklmoore.com/colorbox
After some debugging I found that it is because of a CSS rule.
In the skin named kama you need to change the following CSS rule in mainui.css from:
.cke_skin_kama .cke_browser_ie.cke_browser_quirks .cke_contents iframe
{
position: absolute;
top: 0;
}
To:
.cke_skin_kama .cke_browser_ie.cke_browser_quirks .cke_contents iframe
{
top: 0;
}
Depending on your setup, you might need to change it in skins/kama/editor.css
I however recommend upgrading to a newer version of ckeditor. I found this issue on version 3.6.2.
At my work, we're interested in tracking how often people print our web pages. (If a lot of people are doing it, we'll probably put more focus on making the print view nicer.)
Obviously if we put a "Print" button on the page, we can log when people click on that, but if users just use the "File" menu and choose "Print," we have no way of knowing if they did that.
Is there some clever way to use print-only CSS to cause the browser to issue a web request only when printing? My experiments seem to say no, but this seems like it should be possible.
Edit: A reasonable answer is offered below that works in FF; I'm offering a 100 point bounty for a solution that works on IE as well.
To build on responses from Tyson and Jao, you can try this approach to get around the issue of background images not being displayed/printed by default. instead of background image, use a bullet image...
Insert an element in your HTML source like:
<div id="print_tracker"><ul><li> </li></ul></div>
In your screen CSS:
#media screen {
#print_tracker { display: none; }
}
#media print {
#print_tracker { display: block; }
#print_tracker UL { list-style-image: url(/images/printtracker.gif); }
}
Then track the hits to that image. Hacky... i know
There is no accurate way to see when a page is being printed (and some may consider it privacy invasion). The suggestions for having a separate print CSS do work, but they can create a lot of false alarms - Print Preview, prefetching, and mirroring tools (even wget) would request the CSS file too, even if they are not going to print anything.
Maybe you could add a background image to the print.css file and link that background image to a file on your server which does the logging.
For example:
body {background-image:url(http://www.example.com/printlogger.aspx);}
I'm not sure if that works, just a thought
Update: I just tried the above. It does increment the counter if you do a print preview. However it doesn't when update the counter when printing a page (even with print background images turned off). Another option might be to use the CSS content property.
UPDATE II You can use the content property, works in Firefox, not in IE8. I haven't tested other browsers:
body
{
content:url(http://www.example.com/Count.aspx);
}
Insert an element in your HTML source like:
<div id="print_tracker"></div>
In your screen CSS:
#print_tracker { display: none }
(That's not really needed unless you have some default styles for divs that causes it to have a size.)
In your print CSS:
#print_css { display: block; height: 1px; background-image: url(clear.gif); }
Then just track the hits to that image.
You could check that your printing CSS has loaded (you can select CSS for a particular layout using media selectors) with javascript. The javascript could then log to the server this request.
For IE, explore use the print - related events of the Document body.
window.onbeforeprint - Fires just prior to the page being printed
window.onafterprint - Fires immediately after the page to be printed out has been loaded into printer queue/cache.
$(function() {
//Check to see if browser supports onbeforeprint (IE6, IE7 and IE8)
if (window.onbeforeprint !== undefined) {
window.onbeforeprint = TrackPrint;
}
}); function TrackPrint(){
$.get("http://www.example.com/Count.aspx");}
You could have a "print version" page and put some server-side logging on that page, however that could be a bit annoying for all parties involved.
What else you could do to is something like this:
On page load, use javascript to add a print-only stylesheet on the page which hides everything except a message saying "Please use the print link on this page".
Use javascript here so that users with JS disabled will still be able to print as normal. You won't be able to log them, but you won't piss them off either.
Put a link on the page which, when clicked, logs the event via AJAX, removes that stylesheet and then calls window.print()