I have a navigation menu in one div and there's a background image in other div which is set to absolute because it has to be in some a bit different position of the website. Now that image is transparent PNG and it blocks clicking the last link in the navigation because that image is technically on top of that link (visually not).
So I set z-index: 1 to menu and that fixed the problem only on Firefox, the link becomes clickable. It doesn't work on Chrome, Opera and IE though.
What could be the problem?
There's a screenshot, as you can see that girl image is transparent and when selected it shows that it technically is over that Contact us link and it somehow blocks it:
http://i.stack.imgur.com/O4rEV.jpg
The menu and the image are not in the same parent div.
#the-menu {
margin: 17px 0 0 17px;
z-index: 1;
}
#the-img {
background: url("../images/img-girl.png") no-repeat scroll center 0 transparent;
height: 351px;
position: absolute;
right: 50px;
top: -52px;
width: 381px;
z-index: 0;
}
#the-menu should have relative position in order for the z-index to work.
Related
I am using the default Lightbox2 for my website. When clicking an image, the Lightbox works perfectly except that the box (along with the darkened background) appear at the top of the page, rather than in it's scroll position. This only happens on the iPad. Is there something to adjust in the lightbox.css that I am missing?
Thank you in advance!
use this css to dark background,give fixed position using css also make top, left,right, bottom to 0 so it fits to screen and content inner to it will scroll using overflow auto css
position: fixed;
z-index: 999;
/* padding-top: 100px; */
left: 0;
top: 0;
bottom:0;
right:0;
overflow: auto;
So I added background image to an element for mobile devices in css, a regular png image to a div, positioned them absolute and thats it. However on iPhones and iPads it displays horribly, the image is darker, doesnt stay where it should on scroll (it moves, disappears, reappears...).
Screenshot from iPhone:
Screenshot from Android:
You can see that on first image it is very very different for some reason.
CSS:
padding: 0 !important;
position: absolute;
left: 10px;
width: 25px;
height: 37px;
background: url('../../Content/emerge-tiles/Images/left-opacity.png');
I'm attempting to help a friend with her site jessheading.com
She's using a WordPress theme and the WP Touch mobile plugin. But when someone clicks to view the full-site version on mobile, the orange box with the quote part way down the page runs off to the side when you zoom out (creating a sort of side-scroll).
The CSS on that box is:
.pull-quote {
background: #fb8063;
width: 300%;
margin: 30px 0 30px -100%;
z-index: 70;
position: relative;
}
How can I fix the CSS or the viewport settings to prevent zooming out so far so that that orange box overflows to the right?
Parent of the box:
{
overflow-y: auto
}
.pull-quote {
background: #fb8063;
width: 300%;
margin: 30px 0 30px -100%;
z-index: 70;
position: relative;
overflow: hidden;
}
this merely clips overflow, and the rest of the content will be invisible
some other things to consider is to resize the whole orange box as well as the tags with it.
other overflow css you can try are: scroll, auto, etc.
quite possibly even set the width of the orange box to be fixed and display it within a div tag that has a background of orange.
hope this helps
I have an issue on this page when I open it on iPad. Crimson colored top identification header goes to left and then on the right side you can see a blank space. All other major browsers including Safari shows the page as it should be except iPad. Here's the screen shot from iPad view. Any ideas whats wrong with it?
First off, it looks like you have the university logo in the upper left set as both a background image and a regular image within the <a>. Removing the regular image fixes the problem seen in both your iPad screenshot and in my desktop browser where the logo is cut off on the left and "ity" repeats in "University".
I don't have an ipad in front of me, but it's possible that might fix the problem with the right space as well. You might want to consider adding a margin-right to the form in the header so the "Go" button isn't right up against the edge of the window at 1024px resolution.
The content in your #signature div is bigger than your #signature div, so the background isn't stretching to fit the content (you can get the same reaction by shrinking the size of your window and scrolling to the left or right).
Fixes:
Remove left: -5px; from #signature a.iu
Add background: #7D110C to #signature
Change right: 0 on #signature form to right: 5px.
That should straighten things up.
EDIT
Here's what your updated styles should look like.
#identity #signature {
height: 44px;
margin: 0 auto;
position: relative;
text-align: left;
width: 990px;
background: #7D110C;
}
#identity #signature a.iu {
background: url(pw_files/img/iu_crimson.gif) no-repeat 20px 0;
display: block;
height: 44px;
position: relative;
top: 0;
width: 250px;
}
#identity form {
height: 44px;
position: absolute;
right: 5px;
top: 0;
}
I pulled these styles out of screen.css
I have an HTML page to which I am applying background image using CSS properties.
The problem is, I want this background image to appear at bottom of the relatively longer page, i.e. the page is to be scrolled to bottom to view the background image.
I applied following:
body {
background: url("images/bg_homepage.png") no-repeat scroll right bottom transparent;
}
This works fine for Firefox and Internet Explorer, but doesn't work for Chrome and Safari browsers. Chrome and Safari needs the background-attachment property to be set to "fixed", but that is exactly I don't want.
Please guide.
Thanks
If you dont want it in your body, you could create an div with and id bg for example :)
and then do something like this
#bg {
background: url("/bg.gif") no-repeat scroll left bottom #FFFFFF;
bottom: 100px;
height: 396px;
position: fixed;
width: 288px;
z-index: -1;
}
if you dont want to use fixed anywhere on the page, it won't work in the major browsers :(
I've done that with
body {
width: 100%; height: 100%;
position: absolute;
background-image: url(img/strand_402.jpg);
}
Works in all browsers (including IE).