so I'm using fancybox, as well as Google's minify http://code.google.com/p/minify/
but then after minifying the fancybox css, when I click on something that is fancyboxed, the close button on the fancybox disappears from it...
I checked the minified css source code, and there doesn't seem to be anything wrong with the close property:
#fancybox-close{position:absolute;top: -15px;right: -15px;width:30px;height:30px;background:transparent url('/jqui/plugins/fancybox/fancybox/fancybox.png') -40px 0px;cursor:pointer;z-index:1103;display:none}
versus the normal version
#fancybox-close {
position: absolute;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
background: transparent url('fancybox.png') -40px 0px;
cursor: pointer;
z-index: 1103;
display: none;
}
does anyone know how to make fancybox close button still work despite minifying css using google's minify...
without minification, everything works correctly
The image path is probably wrong, try giving it a background:red or something and see if it shows up.
Related
I've searched through the existing threads about PIE.htc not working in IE8 but couldn't find a good resolution -
I've tried applying it to every single element on my page that uses an IE8-incompatible CSS3 attribute and I can't get anything to happen. IE8 doesn't tell me that the path is wrong and PIE.htc sits in the same folder as the page which calls it. Here is a random css example from an element which pops up when the user hovers over a graphic:
CSS:
.info_bubble {
-webkit-border-radius: 5px;
padding: 8px 8px 16px 8px;
background-color: white;
-moz-border-radius: 5px;
behavior: url(PIE.htc);
border-radius: 5px;
position: absolute;
margin-top: 1em;
display: none;
bottom: 2.5em;
left: 3.5%;
width: 80%;
height: 0;
}
It is meant to have rounded edges but it still refuses to work in IE8.
According to this link, you should try to set z-index and position:relative to make the border-radius work IE8:
z-index: 0;
position: relative;
Hope this helps!
So I figured it out - Sort of.
It works if I use another version of PIE.htc. I have no idea why, but I guess for anyone else stuck in this situation, try a different version.
Edit: I was trying to use PIE 2.0 beta 1. I resolved the issue by downgrading to PIE 1.0.0.
The usual problem is that the path in the behavior rule is not correct.
As pointed out in the documentation http://css3pie.com/documentation/getting-started/ the path is relative to the HTML file not the CSS.
I am designing my theme for my website, and have no other CSS files in my folder besides template.css.
.header-wrap,
.nav-wrap,
.slideshow-wrap,
.body-wrap,
.sub-footer-wrap,
.footer-wrap {float: left; width: 100%; clear: both;}
.header,
.nav,
.slideshow,
.body,
.sub-footer,
.footer { width: 960px; margin: 0 auto;}
.header-wrap { height: 118px; background: url('files/img/background/bg-header.png')
repeat-x; border-bottom: 1px solid #6A6A6C}
.nav-wrap { height: 38px; background: url('files/img/background/bg-nav.png') repeat-x;
border-top: 1px solid #D9D9DB; border-bottom: 1px solid #B8B8BA}
.body-wrap { background: #F4EDDB url('files/img/background/bg-body.png') repeat-x;}
I don't believe that the issue is relating to that but there must be something else doing this to my webpage:
The red lines show the whitespace that is being generated for some unknown reason. I have been looking at this for a while and have not been able to find the source. I was wondering if anyone has had an issue like this before? Or someone that might be able to point me in the right direction to fix the matter. I have also tried multiple browsers and have the same issue. I have also made sure that it wasnt just an administration issue. It keeps happening no matter what. I am using Google Chrome currently.
--EDIT--
Here is my jsfiddle for those of you who asked (it still does it on there too) this has the full html
http://jsfiddle.net/RCMh7/
Add this to your css.
body { margin: 0px; padding:0px}
Or google "reset.css" and add it into your theme, the Eric Meyer one is fairly popular.
http://www.cssreset.com/
you should put margin-top:0 and margin-left:0 on this divs.
can you show on jsfiddle for us? or a link page?
Use the firebug for firefox tool to check that CSS issue . It might be occurring just due to some background image or CSS file. For all CSS linked to that theme check that theme's .info file also.
Although As per my experience you will able to get exact source of CSS by using firebug .
It may be some background kind of image or CSS effect.
I'm working with webcams and have experienced a weird issue.
I have a flash object with my webcam video, and I have put a div over it (with absolute positioning), as a button to toggle the video. The HTML is something like this:
<div id="container">
<object></object>
<div class="camicon"></div>
</div>
And the CSS:
div.camicon {
height: 32px;
width: 32px;
background-image: url('../../images/broadcast/webcam-icon.png');
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
The problem now is that, in Firefox, cursor is not restored to its default value (i.e. the arrow) while cursor has left the icon AND stays on the flash object. However, cursor is restored properly when it moves outside the flash object.
This doesn't happen on Chrome, so I guess this may be some annoying bug.
Does anyone know something about this? I have tried lots of possible fixes for it, but no success so far.
More info:
Ubuntu 11.10 32bits
Firefox 13.0.1
Flash 11.2.202.236
I don't have any code to test it, but I would think something like this should work to help force the point (maybe this is one of the solutions you already tried):
#container {
cursor: auto; /* or "default" */
}
#container div.camicon {
height: 32px;
width: 32px;
background-image: url('../../images/broadcast/webcam-icon.png');
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
I'm working on a project to upgrade a system to use the button tag rather than regular submit buttons. For the formatting of the buttons, I have the following CSS classes:
button::-moz-focus-inner {
border: none; /* overrides extra padding in Firefox */
}
button {
background: transparent url('images/greenrightbutton.png') no-repeat scroll top right;
color: #FFFFFF;
display: block;
font: normal 12px arial, sans-serif;
height: 25px;
padding-right: 8px; /* sliding doors padding */
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
text-decoration: none;
border: 0px;
overflow: visible;
}
#loginbox button {
float: right;
}
button span {
background: transparent url('images/greenleftbutton.png') no-repeat top left;
display: block;
line-height: 18px;
padding: 4px 5px 5px 12px;
margin: 0px;
border: 0px;
}
They work absolutely perfectly in every browser except IE8.
In IE8, the buttons work in most places, but then I find a page where the two background images don't quite line up and no amount of tweaking padding, line spacing etc fixes it.
Does anyone know why this might be the case?
Demo page: http://test6.placement.co.uk/demo/test.asp
---Update---
After some fairly extensive testing and trying things, I've now got a pretty fair idea of what's causing the problem in page 1, but no idea how to fix it, while another page with the same issue has a completely different cause (which I haven't found) but where I HAVE stumbled on a fix...
The problem on the first page appears to relate to a ul entered further up the page. Take that out and everything behaves - unfortunately, that's not an option as the ul is part of user-entered content, so I'm scratching my head about that. Particularly given...
Page 2 has no uls to cause an issue, but randomly sticking two break tags in just before my button code resolves the problem.
Naturally, THAT fix doesn't work on page 1.
I'm just about ready to give in and find some alternative way of rendering these buttons, because whatever the actual problem is, it's clearly so deep in either my CSS or my basic HTML that I'm probably never going to find it.
I don't see any difference between IE8 and other browser. Could you pleas mention bit more clear what you want to do?
Hi I'm using facebox plugin to display iframe link.
I want to change the style of my close button. I want to show it on Top can any one please help with CSS part.
I want to make facebox draggable is it possible to do soo..
Thanks
For Dragging facebox window i used jquery UI's draggable plugin like this,
$(document).bind('reveal.facebox', function () {
$("#facebox").draggable();
})
thats it.
For close button CSS im using,
facebox .close-image
{
background-color: inherit;
position: absolute;
right: -2px;
width: 24px;
height: 22px;
background-image: url(../images/close.png);
cursor: pointer;
z-index: 1103;
display: none;
}