Very weird issue. The nav-bar background image is loading fine in all browsers except for Safari.
http://lapalomafunrun.com/
Here is the code I'm using:
#navbar {
width: 100%;
height: 53px;
margin-top: -10px;
position:relative;
z-index:1;
background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top / 100% 63px transparent !important;
background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top transparent\9 !important;
}
The CSS 3 background shorthand isn't supported in Safari 6.02 (which I'll assume you're using since it isn't working). You can use the CSS 2.1 background shorthand syntax but will need to remove the background-size property to its own declaration:
#navbar {
width: 100%;
height: 53px;
margin-top: -10px;
position:relative;
z-index:1;
background: url("http://lapalomafunrun.com/wp-content/themes/funrun/images/navbar.png") no-repeat scroll center top transparent !important;
background-size: 100% 63px;
}
I was just having the issue where I couldn't apply a background-image property to the <main> element in Safari. Come to find that Safari (currently) doesn't recognize <main> as a block element, as can happen with many of the implementations of HTML5, so setting <main> to display:block did the trick for me. Hopefully that helps.
Related
I can't figure out why the following css works in Firefox, Safari but not in Chrome. I am trying to create a top fixed navbar which is centered and have a full width black background bar while keeping the contents of the navbar to display within 1200px max-width. I need to achieve this in a Squarespace template where I can only add custom CSS to an existing template and I don't have access to the page code. So I elected the pseudo insertion approach. All is good except Chrome doesn't want to display it correctly. The site link:
https://mango-lanternfish-lzhh.squarespace.com/
Thank you for your assistance in advance.
Attila
body, #navigator header#topBar {
max-width: 1200px !important;
margin-left: auto; margin-right: auto; }
#navigator header#topBar { background-color: #000000 !important; }
#navigator header#topBar:before {
content: "";
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 85px !important;
background-color: #000000 !important;
}
I have a span with a background where I want the image resized without loosing the radio. I mean not stretching. My image disappear when I use height: auto;
#logo_span{
display: inline;
background-image: url("../gfx/hs_logo.png");
margin: -5px auto auto -100%; /* margin top right bottom left */
background-size: 50% 50%;
background-repeat: no-repeat;
width: 90%;
height: auto;
}
You will need to set the height to an integer or percentage like so:
#logo_span{
display: inline;
background-image: url("../gfx/hs_logo.png");
margin: -5px auto auto -100%; /* margin top right bottom left */
background-size: 50% 50%;
background-repeat: no-repeat;
width: 90%;
height: 250px;
}
Another way would be to place an <img> inside this div but have another div with the same properties but instead of have an img have the background-image. However this is considered messy and can slow down loading speeds as your loading 2 of the same image.
<div class="hiddendiv">
<img src="//file src">
<div class="visiblediv"></div>
</div>
<style>
.hiddendiv img{height:200px; width:500px;}
.visiblediv {height:200px; width:500px; margin-top:-200px; background-image:url(//path to your image);}
</style>
This is just a rough example but this has worked for me in the past, no matter how much im not a fan of this method.
If you want responsive image use <img/> tag instead css background-image. And then in css use width: 90%; height: auto;
I am making a menu with 2 items per line and I want them to have a background-image and on hover the image will change to other. I was able to do it in chrome, using content in CSS, but Firefox and IE don't support this. Thus it should be made with background-image. The problem of this is that with content I can specify that the buttons will have 35% of the width and height of the left side while making this with background-image is impossible, I need to say specifically that they will have px of height and that will not make it resize when I resize the window. When I resize the window the left side resizes thus what's inside of it resizes automatically because I defined 35% of it. Here is an example code of how I made it (works in chrome, not in firefox and IE). Can someone help me doing this with background-image and still resize the buttons when I resize the window?
https://jsfiddle.net/37qbtwak/
ul.sidebar-menu li a span {
width:35%;
height:35%;
border:1px solid;
}
ul.sidebar-menu li a span#menu_sensor {
content: url('http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png');
background-repeat: no-repeat;
background-size: 100% 100%;
-webkit-background-size: 100% 100%; /* Safari */
-khtml-background-size: 100% 100%; /* Konqueror */
-moz-background-size: 100% 100%; /* Firefox */
}
With background-image I have to do it like this:
ul.sidebar-menu li a span#menu_sensor {
content: url('http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height:100px;
-webkit-background-size: 100% 100%; /* Safari */
-khtml-background-size: 100% 100%; /* Konqueror */
-moz-background-size: 100% 100%; /* Firefox */
}
Best Regards
That is not a valid use of the content property, which is only intended to be used on pseudo elements.
If you set the display property of your spans to inline-block, you can set a height relative to the width using the padding property. Then set the background-size property to contain and center your image(s).
ul.sidebar-menu{
list-style:none;
margin:0;
padding:0;
}
ul.sidebar-menu li{
margin:0 0 50px;
}
ul.sidebar-menu li.sub-menu{
line-height:15px;
}
ul.sidebar-menu li.sub-menu a{
color:#aeb2b7;
margin-bottom:0 20px 30px 10px;
outline:none;
text-decoration:none;
transition:all .3s ease;
}
ul.sidebar-menu a span {
border:1px solid;
display:inline-block;
padding:0 0 12.25%;
width:35%;
}
#menu_sensor{
background:url('http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png') center center no-repeat;
background-size:contain;
}
#menu_sensor:hover,#menu_sensor:focus{
background-image:url('http://www.webyposicionamientoseo.com/base/ui/images/blog/27-google-hummingbird.jpg');
color:#fff;
}
<ul class="sidebar-menu" id="nav-accordion">
<li class="sub-menu">
<span id="menu_sensor"></span>
</li>
</ul>
The CSS -
#header {
overflow: hidden;
background: url(images/header-bg.png) top repeat-x #FFFFFF;
position: relative;
border: none;
display: block;
height: 125px;
width:100%;
}
The HTML -
<div id="header">
<img src="images/logo.png" alt="" />
</div>
This works good in Firefox -
But not in Chrome :( -
The image isn't being stretched vertically in Chrome.
Help!
Just a note, I'm on Linux.
Edit : The background image (50x112px) -
Check it out here - http://movie-buffs.info/
So chrome was automatically taking up background-size from another css file.
When I put
background-size: auto auto !important;
in #header,
the issue was gone.
Thanks everyone for help.
The shorthand you are using for background, is placing the color #FFFFFF in the last argument, it's supposed to be in the first. Try getting rid of the shorthand, so your code will look like this:
/* background: url(images/header-bg.png) top repeat-x #FFFFFF; */
background-image: url(images/header-bg.png);
background-repeat: repeat-x;
background-color: #fff;
background-position: top;
Shorthand order:
background-color, background-image, background-repeat, background-attachment, background-position
I'm designing a clean style to use in some web apps. And I've come across a IE bug (always the same).
Well its pretty simple. I have a gradient background, and on top of it a rectangle with no border and its filled with nothing and with a shadow around it, giving the illusion that its on top of the background, as you can see in the snapshot.
Its displayed well in all browsers except IE. IE displays like this.
IE increases about 4 px to the top div with the class "content-top-shadow". And it shouldn't. I have used margin and padding 0 to fix it and no luck.
PS: The png's have transparency.
Any idea how can i fix this bug, or whats wrong in the CSS?
Thanks.
Here is the code:
HTML
<div class="content-holder">
<div class="content-center">
<div class="content-top-shadow"></div>
<div class="content-center-holder"></div>
<div class="content-bottom-shadow"></div>
</div>
</div>
CSS
.content-holder {
width: 100%;
height: 570px; /*once complete change to auto*/
background-image: url(images/content-holder-bg.png);
background-repeat: repeat-x;
padding-top: 20px;
text-align: center; /*IE Bug Fix to Center the other divs inside this one*/
}
.content-center {
width: 918px;
height: auto;
margin-left: auto;
margin-right: auto;
}
.content-top-shadow {
width: 918px;
height: 9px;
background-image: url(images/content-top-shadow-bg.png);
background-repeat: no-repeat;
}
.content-center-holder {
width: 918px;
height: 200px; /*once complete change to auto*/
background-image: url(images/content-center-holder-bg.png);
background-repeat: repeat-y;
}
.content-bottom-shadow {
width: 918px;
height: 9px;
background-image: url(images/content-bottom-shadow-bg.png);
background-repeat: no-repeat;
}
IE thinks your div should be bigger than 9px, because of text size, even if there is no text in it (!), so you need to set
font-size:1px;
or something like that, on the top and bottom divs.
Here's something that helps me overcome cross-browser incompatibilites when it comes to empty spaces especially within DIVs and TDs. Place this as the sole content of the empty space, while making sure your spacer.gif image is a 1px x 1px transparent dot. Cheers!
<div style="width:1px;height:1px;visibility:hidden;overflow:hidden;clip:rect(1px,1px,1px,1px);color:#FFFFFF;font-size:1px;"><img src="/images/spacer.gif"></div>