I have got rollover images setup on a site i'm building using css background images like so:
.rollover a {
display: block;
width: 400px;
height: 400px;
background: transparent url(hover.jpg) no-repeat;
}
.rollover a:hover {
background-position: -400px 0;
}
This works perfectly on all browsers however on the iphone i seem to get 1px extra on the right hand side (so it's showing 401px rather than 400px) so I end up with 1px of the rollover image displayed on the main page which is obviously incorrect. If anyone could suggest any reason why this might be happening i would be immensely grateful.
Thanks very much as ever everyone!
Dave
Try adding this .rollover a {overflow:hidden}
Related
So, I'm working on my Wordpress theme for my personal website, and I'm stuck trying to figure out how to do a couple things:
1) I need for the white to extend above the top edge of the page content
2) I'd like for the container to extend to the bottom edge of the viewport if possible.
I'm using Twitter Bootstrap for all of my layout stuff. Source is viewable by normal means, etc.
I tried using min-height: 100% in various places, haven't had much luck. Maybe it just wasn't in the right place, who knows.
Thanks ahead of time for any response!
To get the white to extend to the top, remove padding-top from the .page-container and add it to page-outline instead. Also add height: 100% to the page-outline.
So your CSS looks like this for page-container and page-outline:
.page-container {
min-height: 100%;
}
.page-outline {
background-color: white;
border-left: 1px solid black;
border-right: 1px solid black;
padding-top: 25px;
height: 100%;
}
I have a background image of a paper airplane on the body tag of this page: http://cogo.goodfolk.co.nz. The very tip of it is being cut off - if you resize the browser window the full image pops back in.
It's only happening in Chrome, and isn't consistent, if you refresh sometimes, or even hover over sometimes it's fine. If I remove all the background styles (background position and no-repeat) then the whole image is there - but of course isn't positioned correctly. It's also happening on other pages of my website (eg http://cogo.goodfolk.co.nz/online-surveying).
After days of debugging/searching I can't find anything that refers to this issue and/or fixes it - is it possibly a Chrome bug with background-position?
Any ideas or workarounds? Thank you!
//EDITED//
The relevant code is pasted below, although obviously this is pretty standard so it must be something else in the site that's causing the problem:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 10% 98%;
}
The background image is set to center, so this is expected behaviour, depending on window size. You could change this CSS declaration from:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
}
To:
.home {
background: url("../img/airplane.jpg") no-repeat center top;
background-size: 70%;
}
This would anchor the image to the top of the screen, meaning it would not clip, but this may not be the behaviour you are looking for.
To complicate matters, you also have this, which is probably contributing to the problem. I would suggest removing it entirely:
#media (min-width: 1200px)
.home {
background-position: 20% -10%;
}
Yay thanks to everyone who left suggestions, fortunately I've figured out a workaround! I managed to pretty much keep the background styles the same, and just placed everything in a :before pseudo element on the body tag. You can check out the updated code at cogo.goodfolk.co.nz if you're interested, or it's pasted here:
.home {
position: relative;
min-height: 860px;
}
.home:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 50% 15%;
}
Set the display to "inline-table".
I'm using an accordion slide in my site and I've noticed that on IE and Firefox I get a weird gap of 20 pixels at the top of the slider.
I've checked the CSS back to back for some padding to the UL or the LI or even the slider itself but couldn't find any. It works perfectly on Chrome.
Read many post suggesting this to adjust the line-height but it didn't work for me.
How can I resolve this issue?
http://www.rom.guywalderonline.com
TRY THIS>>>
#slider {
height: 0px; /*IMPORTANT*/
background: url('../images/romold.jpg') top right no-repeat;
background-color: #434749;
}
This 100% works, if you have any problems please comment back....
If you add the following code to your template css file, it willl remove the gap:
#slider .row-fluid [class*="span"] {
min-height: 0px !important;
}
I have the folowing HTML:
Wardrobe
Wine
Coffee
This is the relevant CSS:
.home-block {
background-color: #c2b89c; display: block; height: 180px; line-height:180px;
text-align: center; font-size: 70px; color:#e2e2e2;
text-shadow: 2px 2px 0 #444; margin-bottom: 20px; background-size: cover;
background-position: center center; box-shadow: 1px 1px 4px #111;
}
My result now looks something like this:
That's OK, but what I really want is the blocks to have a solid color, and only show the image on hover. Like so:
Please keep in mind that I'm using a responsive design, so the blocks will have a different size and aspect ratio on different screen sizes. That is why I'm using background-size: cover. Also this is for a CMS system, so I want the images and colors to be set inline in the HTML, so it will be easily editable and more blocks can be added.
So I basically need a clean solution without absolute positioned elements (because they tend to break if there's no fixed width) to achieve this.
What I have tried is this:
.home-block { background: none; }
.home-block:hover { background: inherit }
but with no success. I was just about to fix all of this with some lines of jQuery, but I just quickly wanted to check if there is no pure CSS way to achieve this.
It's a little bit tricky if you need to have background-image set inline in HTML. You can't overwrite it easily. What I would try to do is to change background-position on hover:
.home-block {
...
background-position: 1000px 1000px; // background-image is there but not visible
}
.home-block:hover {
background-position: center center !important; // make it visible
}
http://jsfiddle.net/h2Jbg/
So for normal state you will not see background image but will see backgroud color. On hover you move image back.
Unfortunately it's not possible to use the :hover pseudo-class inline, which makes it hard to accomplish this inline on a single element.
It is often a bit ugly to use an additional element for the purpose of styling, but at least it is a possible solution to the problem at hand.
<div style="background-image: url(http://lorempixel.com/400/200);">
<div class="home-block">Foo</div>
</div>
You could then use something like this in your CSS:
.home-block:hover {
background: transparent;
}
Demo
This way, you will be able to add new blocks with individual background-images, without updating the stylesheet.
Right now, the portfolio section of my website has the top three images showing properly. But in the Opera browser, it "crops" the top and bottom of the rest of the images, leaving only the very middle of each of the images to show. All of the other browsers show every picture in the portfolio section properly. I've tried messing with the margin and padding on the pictures with no luck. If anyone can help me figure out what is going on, I would surely appreciate it! =] Click here to get to the website.
#portfolio {
overflow: auto;
display: block !important; /* aren't we kind… */
display: inline-block; /* …to IE6 :p */
}
#portfolio a {
float: left;
margin: 3px;
}
Try:
#portfolio a.cboxElement{
display:block;
float:left;
border:3px solid #fff;
}
To answer the "Why?" part of your question, it looks like there's a bug in the browser that's triggered by opacity on some inline elements. Setting the display mode to block will work around it.
Also: which version of Opera are you using?