I've managed to get my header to work as a link in ff, safari and opera with the css image replacement
#header h1 {
background-image: url(../images/logo.png);
background-repeat: no-repeat;
text-indent: -9999px;
margin-left: 15px;
}
#header h1 a {
display: block;
height: 120px;
width: 400px;
margin-top: -135px;
}
I'm trying to optimize the site its for in IE, my last step before I launch it on monday but the logo doesn't appear at all in IE 8 or 9, But it very surprisingly does in IE 7. I managed to get the logo to appear in IE9 by making the display inline-block
.ie9 #header h1 {
background-image: url(../images/logo.png);
background-repeat: no-repeat;
text-indent: -9999px;
margin-left: 15px;
}
.ie9 #header h1 a {
display: inline-block;
height: 120px;
width: 400px;
margin-top: -135px;
}
bit the image is no longer a link when I do this, does anyone have any idea how to fix this? I would put the image in the HTML instead of using the image replacement but Its been hammered into my head that from an SEO standpoint using the image replacement is better.
I think it is the margin-top: -135px causing the problem. The height is only 120px so it will end up being -15px (height - margin) so disappearing underneath the bottom of the H1 tag.
Related
I'm having a strange issue I just can't get my head around. On firefox and IE, my footer's background image displays fine, but on chrome, it only shows up when I start selecting the footer text, or when I refresh the page.
Here's the website:
www.josephviatte.com
here's the footer's CSS:
.site-footer {
background-color: #660000;
background-image: url("http://josephviatte.com/wp-content/uploads/manual-uploads/footer-bg.jpg");
color: white;
height: 260px;
padding: 50px 0;
margin-top: -5px;
margin-bottom: 0;
background-size: 100% 260px;
background-attachment: fixed;
background-position: 0 100%;
background-repeat: no-repeat;
}
Does anyone have a clue?
Thanks in advance!
Not sure, but I found something wrong:
.site-footer {
background-color: background-color: #660000;
this is invalid.
Finally, I decided to remove
background-attachment: fixed;
Of course, my background is a little sadder now that it scrolls, but at least it displays. Chrome seems to have something against fixed backgrounds...
See Demo. Please check on Chrome and firefox and feel the difference
I have a div element that uses the css classes below. Basically, I'm creating a responsive sprite of images:
.what-wwb-logo, .what-national-geographic-logo, .what-atm-logo, .what-us-ski-logo-large, .what-boart-logo,
.what-comas, .what-left-arrow, .what-right-arrow{
max-width: 100%;
background-size: 100%;
background-image: url('/images/sprites/what_our_client_say_new.png');
}
.what-wwb-logo {
background-position: 0 0%;
background-size: 100%;
padding-bottom: 41%;
}
.what-national-geographic-logo {
background-position: 0 16.588419%;
background-size: 118.648019%;
padding-bottom: 59%;
max-width: 77%;
}
.what-atm-logo {
background-position: 0 42.466823%;
background-size: 146.685879%;
padding-bottom: 94%;
max-width: 100%;
}
.what-us-ski-logo-large {
background-position: 0 65.003723%;
background-size: 181.785714%;
padding-bottom: 65%;
max-width: 70%;
}
.what-boart-logo {
background-position: 0 84.194978%;
background-size: 200.393701%;
padding-bottom: 84%;
max-width: 84%;
}
.what-comas {
background-position: 0 92.206077%;
background-size: 435.042735%;
padding-bottom: 62%;
max-width: 80%;
}
.what-left-arrow {
background-position: 0 96.196003%;
background-size: 820.967742%;
padding-bottom: 93%;
min-width: 7px;
}
.what-right-arrow {
background-position: 0 100%;
background-size: 820.967742%;
padding-bottom: 93%;
min-width: 7px;
}
And in my HTML I have the following code:
<div class="what-right-arrow " />
...
<div class="what-left-arrow " />
...
<div class="what-comas" />
...
<div class="what-boart-logo" /> // and so on and all divs in different position
I ran the HTML in Chrome, IE and Firefox. It ran good in Chrome and IE but not in Firefox.
The problem is that images (ONLY what-right-arrow, what-left-arrow and what-comma) are vibrating (up and down, left and right) all the time.
Is spriting not done properly or is it a Firefox problem ?
I think it's a Firefox problem as there are some bug reports about shaking images in Firefox.
It seems that when I move the background-image style onto the individual selector the vibration stops: See Demo
Example:
// Vibrates
.a, .b {background-image: url(example.png); background-size:50%;}
// Doesn't Vibrate
.a, .b {background-size:50%;}
.a {background-image: url(example.png);}
.b {background-image: url(example.png);}
I had the same problem with the vibrating background images in firefox when resizing the sprite. After adding the background-image to each instruction the problem went away, so the fix is not limited to just your demo.
Personally I'm starting to doubt this approach of resizing the sprite. I'm doing it as a solution for retina devices, but it seems the code is harder to maintain and the sprites are less precise (as not all browsers support fractions of a pixel well). The end result is:
Vibrating bug in firefox and the needed workarounds
The background-position values are just off enough to cut images off in an odd manner
Needing a solution to multiple all values by 50%, which means I can't just copy and paste the generated code from a sprite maker.
I have an html portion of code in my page that goes something like this:
<section class ="sidebar">
<ul>
<li class="facebook">Facebook</li>
<li class="linkedin">LinkedIn</li>
<li class="twitter">Twitter</li>
<li class="google-plus">Google+</li>
</ul>
</section>
And the css goes like this:
.sidebar ul {
float: left;
}
.sidebar ul li{
display: block;
width:35px;
text-indent: -9999px;
margin: 3px;
}
li.facebook{
height: 35px;
background: url(img/icon_face.png) center center no-repeat;
background-size: contain;
}
li.twitter{
height: 35px;
background: url(img/icon_twitter.png) center center no-repeat;
background-size: contain;
}
li.google-plus{
height: 35px;
background: url(img/icon_g+.png) center center no-repeat;
background-size: contain;
}
li.linkedin{
height: 35px;
background: url(img/icon_in.png) center center no-repeat;
background-size: contain;
}
What happens here is that I have 2 strange issues:
First the element li.google-plus does not show in any of the browsers. The browsers just ignore it. Here is what firebug shows:
The second is that the only image that shows in firefox is the twitter one. In chrome and opera all the other ones show correctly. As they are showing correctly in other browsers I assume the problem is not the path in the background property.
Any idea on what the problem may be?
EDIT:
Check what firebug says about the background image path:
It says that it couldn't load the given url.
Both in .sidebar ul li and in li.facebook,li.twitter etc. You should write width: and height: properties which You didn't set.
Ok, so it turns out that the problem was my AdBlock extension. After disabling it, it started working normally.
Figured it out through this answer: https://stackoverflow.com/a/466020/1235708
I have a photo background on my site using background-size:cover. It works for the most part but leaves a weird ~30px white space on my Galaxy S3 in portrait mode.
I've attached a screenshot. The 1px teal line is to illustrate the entire screen. Seems like the background stops right after the social media uls.
I tested this by removing the ul and the background attached it self to the bottom of the tagline text.
Also, here's my CSS pertaining mobile portait view:
#media only screen and (max-width: 480px) {
.logo {
position: relative;
background-size:70%;
-webkit-background-size: 70%;
-moz-background-size: 70%;
-o-background-size: 70%;
margin-top: 30px;
}
h1 {
margin-top: -25px;
font-size: 21px;
line-height: 21px;
margin-bottom: 15px;
}
h2 {
font-size: 35px;
line-height: 35px;
}
.footer_mobile {
display: block;
margin-top: 20px;
margin-bottom: 0px;
}
li {
display: block;
font-size: 1.3em;
}
This used to not happen, but I guess I accidentally bugged it while trying to solve another issue.
After hours of trying different things, adding min-height: 100%; to the bottom of html under the { background:... } worked for me.
This works on Android 4.1.2 and iOS 6.1.3 (iPhone 4) and switches for desktop. Written for responsive sites.
Just in case, in your HTML head, something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
HTML:
<div class="html-mobile-background"></div>
CSS:
html {
/* Whatever you want */
}
.html-mobile-background {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 125%; /* To compensate for mobile browser address bar space */
background: url(/images/bg.jpg) no-repeat;
background-size: 100% 100%;
}
#media (min-width: 600px) {
html {
background: url(/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
.html-mobile-background {
display: none;
}
}
Galaxy S3 havs a width of greater than 480px in either portrait or landscape view so I don't think those CSS rules will apply. You will need to use 720px.
Try add:
* { background:transparent }
right at the end & move your html { background:... } CSS after that.
This way you can see if there is a mobile footer div or any other element you created that is getting in the way, blocking the view.
Also I would try applying the background CSS to body rather than HTML. Hope you get closer to the answer.
Current solution would be to use viewport height (vh) to indicate the desired height. 100% did not work for Mobile Chrome. CSS:
background-size: cover;
min-height: 100%;
i had been trying to get horizontally expanding menu's coding to work.. the menu has an image background and it should expand sideways as the content increases.
in code, i use background-position:left for one div and background-position:right for the next inner div.
it works fine in all the browsers except IE6... as IE6 doesnt support background-position:left
i need the same to work in IE6 as well.. for instance the top menu here.
do i need to code differently??
This might be overdoing it... but according to netrenderer it works till ie 5.5
http://photoshopmesta.net/1/test.html
CSS:
.left {
width: 25px;
height: 46px;
background-image: url(http://scentjunkies.com/wp-content/themes/Scent%20Junkies/images/menur_hover_left.png);
background-position: top left;
background-repeat: no-repeat;
float: left;
}
.middle {
height: 46px;
background-image: url(http://scentjunkies.com/wp-content/themes/Scent%20Junkies/images/menur_hover_right.png);
background-position: top left;
background-repeat: repeat-x;
float: left;
}
.middle span {
font-family: Arial;
font-size: 12px;
color: #ffffff;
padding: 19px 20px 10px 20px;
float: left;
}
.right {
width: 40px;
height: 46px;
background-image: url(http://scentjunkies.com/wp-content/themes/Scent%20Junkies/images/menur_hover_right.png);
background-position: top right;
background-repeat: no-repeat;
float: left;
}
HTML:
<span class="left"></span>
<span class="middle">
<span>Lorem ipsum</span>
</span>
<span class="right"></span>
Try using the extended form:
#something{
background-position: left center;
}
Ad#m
Many people have issues trying to get code to work correctly in IE6. If you don't really need it I would recommend not trying as it is very difficult.
If you are going to go ahead with it I recommend creating a different version of the website that is compatible with IE6, using a different css file for IE6 only. See the link below.
http://www.quirksmode.org/css/condcom.html
Also this is very handy for dealing with IE6 quirks
http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs