I have no idea why but in IE 9, when I have links on page using absolute positioning they will not seem to work or appear to sit behind everything else, but if you add a background colour it now works. I actually know the answer to this but I am posting it here to let anyone else who has had this problem know how to sort this.
Add
background: url(./this-not-a-hack.gif) repeat;
Related
Im a new developer, and I just finished my first site. Works fine in all browsers, except safari.
Unfortunately I didn't install a copy of safari while I was developing it, so these issues went unnoticed. I did check every other large browser tho.
Figuring, if it worked in IE it should work in anything else...
Please open up www.enniya.net in safari, and than in chrome or some other browser to see what I am taking about.
By looking at it I do have a theory.
The background, font, colors, transparencies of divs, border colors, thats all their, but the positioning is destroyed.
But the logo position is correct, so my first theory is that
90% of the content is positioned with vw and vh
while the logo actually uses % for positioning...
Except that the latest readings tell me the newest versions of safari understand VH and VW ??? So I dont know.
If you need to see my code let me know, I didn't provide it initialy because Im not really sure what specifically I could provide that would solve this problem.
i have a problem with nicEdit editor. Simply, i found out that resizing uploaded images does not work in Chrome, in FF yes. I tried this (resize images using NicEdit) but it doesn't work. I didn't find any other advices so i hope someone knows where is the problem.
I had the same problem, and came across this, add this to you nicedit.js:
var nicImageButton=nicEditorAdvancedButton.extend({addPane:function(){this.im=this.ne.selectedInstance.selElm().parentTag("IMG");this.addForm({"":{type:"title",txt:"Add/Edit Image"},width:{type:"text",txt:"Width",style:{width:"150px"}},height:{type:"text",txt:"Height",style:{width:"150px"}},src:{type:"text",txt:"URL",value:"http://",style:{width:"150px"}},alt:{type:"text",txt:"Alt Text",style:{width:"100px"}},align:{type:"select",txt:"Align",options:{none:"Default",left:"Left",right:"Right"}}},this.im)},submit:function(B){var C=this.inputs.src.value;if(C==""||C=="http://"){alert("You must enter a Image URL to insert");return false}this.removePane();if(!this.im){var A="javascript:nicImTemp();";this.ne.nicCommand("insertImage",A);this.im=this.findElm("IMG","src",A)}if(this.im){this.im.setAttributes({width:this.inputs.width.value,height:this.inputs.height.value,src:this.inputs.src.value,alt:this.inputs.alt.value,align:this.inputs.align.value})}}});nicEditors.registerPlugin(nicPlugin,nicImageOptions);
comment out the original line, dont delete it, just incase something goes wrong. this worked for me anyways...
I'm asking this question here because the Magnific Popup docs said this was the best place for questions.
I'm having an odd issue, on smaller windows and mobile the popup appears below the page and you have to scroll down to it. I haven't had this issue before and I was hoping someone else had.
You can check the demo site at http://seemywebsite.org/customreserves/
You have to use media queries and override the required classes, for the mobile versions.
Figured it out for anyone else who may have this problem. I'd applied padding to the popup, and that was breaking the layout, so adding box-sizing:border-box worked. Phew.
I'm having a problem with Twitter Bootstrap Inputs showing correctly on safari 6.0.
Im pretty sure this was fine before I moved to Mountain Lion, and it does seem to be an issue with Chrome.
Basically in Safari, the right end of the input seems cut off an is not displaying correctly. Ive taken a screen shot to demo what I mean...
Safari:
Chrome:
Any ideas?
EDIT: Just looking at the Twitter Bootstrap site and I see that alot of their inputs have the same problem!
Anyone else seeing this?
The artifact appears to be an issue with Safari's rendering of border-radius, and is not specific to Twitter Bootstrap. See rendering borders on Apple's support forum. The inputs usually render normally after you select them.
Disabling border-radius on the affected elements with the following two lines removes the artifact. Be careful though, sometimes this causes even more puzzling artifacts on nearby buttons.
-webkit-border-radius: 0;
border-radius: 0;
I've been playing around with EasySlider and everything was working perfectly - until I viewed my site in IE9.
Instead of displaying the slider with 3 images sliding across, it displayed all 3 images sat one underneath the other, and a message at the bottom of the screen saying that scripts etc had been blocked and did I want to allow blocked content.
As I was using this in the hear of my website it pushed my whole site down the page and just looked stupid with the 3 banners on top of each other.
I realise I can get rid of this by unblocking the content, but that's not the point. I think this is the default security settings for IE so everyone that visits my site will see it like this for the first time (or everytime if they don't unblock the content).
So is there a way around this? Or at least a way that if the script is blocked only the first image is shown instead of all of them? This seems a pretty big flaw!
I had the same issue as you and found a very simple solution for it using CSS. All you need to do is copy and paste the line of CSS code below onto the screen.css stylesheet that came with the EasySlider 1.7 Plugin. I hope this helps.
#slider {
position:relative;
}
I found this solution at the "ClickNathan Handmade Websites".