Link referenced to in the text below: http://www.massgeneral.org/international/dev/full-screen.aspx
If you preview the CSS for the div with the class "anythingNavWindow", you can see a background image (sprite) that is being used to cast a shadow effect, giving the navigation window of the thumbnail slider the visual of the thumbnails being behind the triggers.
Well, unfortunately, when viewing in IE8, the shadow moves with the thumbnails when you transition using the sliders to view the additional thumbnails in the slider. Every other browser handles the background image properly, which is to have it be stationary and not move with the thumbnail slider.
The actual transition of the thumbnails is taking place on a parent container, not the parent container with the class "anythingNavWindow", so I'm not sure why this is occurring. Any assistance would be greatly appreciated.
I don't believe this is an issue with the slider, but more of an issue with the CSS.
Here is a jsFiddle ready to be tampered with: http://jsfiddle.net/jodriscoll/fKCFE/
div.anythingNavWindow {
width: 616px !important;
background: url('http://www.massgeneral.org/assets/js-plugins/images/bg-slideshow-shadows.png') no-repeat 0 0 transparent;
}
Things I've tried:
Setting the position to "fixed", somehow ends up hiding the entire DIV container.
Setting the background position using the "background-position-x" & "background-position-y" does nothing
Any help would be greatly appreciated!
Thanks!
Try backgroundPositionX and backgroundPositionY
IE8 uses that, for some stupid reason.
Related
What I want to achieve:
I am doing the very familiar CSS zen garden however I can't seem to get the image to float like this. I want it at the top of the page and to stay at the top like a toolbar like stackoverflow has mounted to the top of the page.
Unfortunately, any time I try to display my image it is not only behind the text but also far too large. I only see about 1/3rd of my image. If I try to scale it in any way then it disappears completely. I have seen that other people do this with the added <divs> but I am told that I should use ::before to do this ....either way I can't get either to even display my image ...the only thing that does barely work is ...
body{
background: url("../CSSMidterm/Header.png") center;
}
but as I said that displays 1/3rd of the image....any idea how I can rectify this situation?
To make it clear, I am asking how to mount an image to the top of a webpage using ONLY CSS no touching HTML at all. I want it to be fairly similar to the toolbar at the top of Stack Overflow own page.
You can try this
body {
background : transparent url("../CSSMidterm/Header.png") no-repeat center center/cover;
}
Link to the documentation for background css
The logo element on the website:
puerteaspecialists.co.uk
was originally at the front. I didnt even update anything and one day i check the site and now the top 3rd is hidden behind the nav bar.
Ive tried z - index and have kinda worked out why this isnt working, but also havnt actually found the solution.
Is there a way to bring this to the front or anyway to show the full image via css?
Thanks!
A simple solution is to remove the solid background of the uppermost navigation bar...
.top_nav_out {
background-color: transparent;
border: none;
}
The problem is that class name .top_nav_out in your top navigation block applies a high z-index which causes the top-most nav block to overlap the lower navigation block (.top_nav) which hides your logo partially.
remove property:
z-index
from class:
.top_nav_out
and your logo will be displayed in full.
From what I have seen, the z-index property is redundant anyway in that class (layout stayed in good shape after removing it)
Hope it helps a bit!
I'm developing a website template and just spotted an issue with the gallery lightbox plugin. http://creativusmouse.com/Proteus/html_preview22/portfolio_2_col.html
When the gallery has more than 1 image the lightbox renders just fine but when it has only 1 image the large image wrapper gets smaller than the image.
I kind of spotted what's causing the issue - this template uses foundation 3.0 framework so on foundation.min.css file the very first selector is causing the problem:
" * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
I tried to remove this and it fixed the problem however the whole website gets broken.
I'm not sure what code shall I paste here. If necessary I can post a link to download all the template files.
Thank you!
Don't change this code, modify the css for your wrapper instead. That snippet of code you posted is telling all elements to include any borders, and paddings in the calculation for width. So a box with 10px of padding and 5px of border space and is 200px wide is actually 200px wide. Without this code the box would actually be 230px wide.
You could do this...
Add to the class lightbox-outer - overflow: hidden.
.lightbox-outer {
overflow: hidden;
}
This works but it hides part of the image, it's like your box doesnt want to scale to the size of the image.
Do you have a setting in the lightbox stuff anywhere that is setting the a specific proportion?
EDIT2: Something else I found, if I remove "width" from the class .lightbox-skin then it starts behaving again. Problem is this width is applied to the element inline dynamically?
I've got this peculiar bug I've been trying to fix today—-still no luck.
If you look at the example below,
http://vitaliyg.com/alpha/hire/
Here's what happens. The full-width background image loads in the correct position, centered along the y axis. Then when we hover over the image, the whole image jumps over to the middle, and slowly adjusts itself back to it's normal desired position.
What's causing this is left: 50%; margin-left: -960px;. This allows us to center the image correctly to begin with. If we didn't have this CSS, the hover wouldn't jump, but the image would load anchoring itself on the top left of the browser.
In the link above, the red box is the content div. The blue box is some text that will be parallaxing with the background-image.
Here is what I am trying to achieve:
Make the background-image appear centered.
When the user hovers over the background-image, it would not jump to the middle of the page.
And lastly, decrease the width of which the user would be able to "parallax" on the x axis. The way it is now, is that the user can see from side to side of the image if patient enough. I want the parallax to be very subtle.
Also, I'm using jParallax, found here:
http://stephband.info/jparallax/
Thank you for your help!
Once you set the position via CSS for the background image, it seems jQuery Parallax plugin alters those settings. The solution then is to apply those settings after the jQuery Parallax has dealt with that parallax layer.
First, remove the margin-left and left from your .parallax-layer#background class.
.parallax-layer#background {
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-position: center bottom;
width: 1920px;
height: 620px;
}
Ideally, center the blue box using the same method (unless you want it partially off screen). I've also removed non essential CSS based on your HTML.
.parallax-layer#tagline {
background-color: blue;
width: 400px;
height: 400px;
}
Finally, add the CSS rules that were removed from the background and tagline selectors so they are applied after jQuery Parallax has manipulated those items.
jQuery(document).ready(function(){
jQuery('#parallax .parallax-layer')
.parallax({
mouseport: jQuery('body')
});
jQuery('#background').css({marginLeft: "-960px", left: "50%", bottom: "0px"});
jQuery('#tagline').css({marginLeft: "-200px", left: "50%"});
});
You no longer will see the large white section (body background color) to the left of the background image when the mouse enters the viewport.
This jQuery Parallax plugin aligns everything top/left by design. If the mouse enters the
viewport from the right of the blue box, that box animates to that location correctly.
However, should the mouse enter from the left side of the blue box, that box will 'jump' to the cursors location. You might consider removing the last jQuery line above so the blue box is top/left upon browser load or use a lower percentage value like 25%.
For those that landed on this Question/Answer and wanted some real markup to work with, I have set up two jsFiddles. One jsFiddle duplicated the problem and the other has the solution as shown above.
Original Problem - jsFiddle
Fixed Applied - jsFiddle
Both jsFiddles are in full screen mode so the Parallax effects can be seen.
Instructions to view Original Problem:
1. Launch the above Original Problem jsFiddle Link.
2. Press the jsFiddle Play Button, being careful not to enter the viewport. If the blue box moves in any way... you've entered the viewport so press the play button again.
3. Enter from the top/left of the viewport and you will see the problem... the HTML Body (white color) is seen as the background image readjusts itself.
4. Press the Play Button at any time to reset the webpage.
To see the Fixed Applied, either launch the link above or at the Browsers Address Bar modify the URL so you see revision 1 of that jsFiddle. (i.e., http://jsfiddle.net/UG4Sq/1/embedded/result/ )
The blue box indicates via text which jsFiddle your viewing. Cheers!
Screenshot of the issue: here
Webpage in Question: http://cure.org
Offending browser: Internet Explorer 7
You'll notice from the screenshot, or if you view this site in IE7, that the background image is not displaying for the content div (#modal-inner-content). Strangely, the image displays in the other divs where it is used (since it's a sprite, I'm using that same image for #modal-top-border and #modal-btm-border).
In all other browsers it displays properly, and even in IE8. I cannot seem to find what CSS rule (or lack thereof) I may be using that IE7 is choking on.
NOTE: in order to get the modal screen, just click the link at the very top banner of the page that says "login to your CURE account
I had the same problem in IE 7 with a transparent PNG acting as a background inside a <div>. Positioning the background at (0|0) fixed it for me:
background: url("images/bg-header.png") no-repeat 0 0;
I had the same problem, buttons with graphic backgrounds aren't displayed in IE7.
It seems that IE7 has problems with such HTML elements with borders, as setting border-width:0 solved the problem for me.
I just remembered that IE7 has a problem with mixed units in the background position property. so -636px top should be -636px 0
I agree with FutureKode. The background on #modal-inner-content isn't displaying because IE doesn't think the element hasLayout, which sometimes causes problems with other style declarations. To trigger hasLayout, the easiest way I see would be to style that div with width:576px (what Firebug is telling me the width of that div is). I'm assuming the width of that box never changes?
More on hasLayout, and what triggers it: http://www.satzansatz.de/cssd/onhavinglayout.html
Are you using some fix for IE and png images ?
If i remember correctly, most plugins/methods to enable transparency to background images by using the filter css property of IE made the background non-repeatable ..
It could be it ..
Not sure why the image isn't showing up in IE7, but this could be a good intermediate fix. this should add a white background if the image doesn't show up.
Try changing #modal-inner-content from:
background: url(http://cure.org/img/modal-bg-xy.png?jcb=1284407379) repeat-y -636px 0%;
to:
background: url(http://cure.org/img/modal-bg-xy.png?jcb=1284407379) #fff repeat-y -636px 0%;
--- Edit - don't use above answer ---
Try wrapping the url in quotes:
background: url("http://cure.org/img/modal-bg-xy.png?jcb=1284407379") repeat-y -636px 0%;
I need to install ie7. My first try would be to add a width to #modal-inner-content
Use the clear-rule:
clear:both;