This bug has already been discussed here, but I haven't found a solution to it yet.
There are small lines on the top and bottom of my background image that appears to be the background color. Both the background image height and container height are the same (29px), and the image is not transparent, but rather with a white background. There isn't a border at all on the container, so this leaves me a bit stumped. This looks fine in Safari on a Mac, but shows the above issue on iPad.
html:
<a class="help" href="#">Help</a>
css:
.help {
color: #fff;
display: block;
float: left;
font-size: 12px;
font-weight: bold;
background-image: url(../img/help.png);
background-repeat: no-repeat;
background-color: #ee3224;
height: 29px;
line-height: 29px;
padding: 0 10px 0 26px;
text-transform: uppercase;
position: absolute;
left: 0;
top: 0;
}
I had the same problem, It appears to be a difference between the way IPad safari calculates img size and it's container block size.
This is discussed more here https://stackoverflow.com/a/6324025/1210282
The solution being to add an outline of 1px to your image to stop the background bleeding through
I found a solution for this.
It's quite simple, just use:
background-clip: content-box;
background-size: cover;
where the background-color and background-image is set.
Since I have padding on the box where this bug is happening, what did the trick for me is:
background-clip: padding-box;
Related
So I made a search bar, and everything works fine. Except the css.
This is what it looks like on computers:
Search bar on computer
And this is what it looks like on iOS: (tested on iPhone, iPad, and iPod)
Search bar on iPad
You'll notice that on the iPad, the search text height is greater than the button.
This is my css:
input.searchFormText {
-webkit-appearance: none;
-webkit-border-radius: 0;
padding-left: 2.25px;
border-top-left-radius: 4.25px;
border-bottom-left-radius: 4.25px;
height: 19.5px;
border-color: gray;
border-style: solid;
border-right: none;
border-width: 0.5px;
background-color: white;
font-size: 12.25px;
font-family: "Open Sans";
transition-duration: 0.225s;
}
So I need the search text input height to be less, but only on iOS.
For some reason iOS Safari gives the input element a different default padding than other browsers. Just set the padding-top and padding-bottom of your input and it should have the same height in every browser ;)
I am making my portfolio and i get stuck. I just made small view of it...how should it look. I started testing it on my PC it is OK...just how i want...than i started to test it on my iPad and the BACKGROUND-IMG was not fit but on my Sony Xperia mobile it was OK as on my PC. Can you please help me? Thank's
---> link to testing website: http://marten.esy.es/
I hope there are some people which should help me with that :) Have a nice day!
There are a couple of things. I would remove the fixed position from your background on slide 1. Then change the property of background-size to cover. This allows you to set a height for each of your media queries. I would also suggest adding background-position: center; so the image always stays in the center relative to the div.
.slide1 {
background: url('mountainsmorning.jpg') 50% 0 no-repeat;
color: #fff;
height: 400px;
margin: 0;
padding: 25% 0 30% 0;
background-size: cover;
text-align: center;
}
as far as i could understand your question and after looking at the example i think the problem is with the covering the background to the whole view-port. If it's such then use the following style for your .slide1 element.
.slide1 {
background: url('mountainsmorning.jpg') 50% 0 no-repeat fixed;
color: #fff;
/* height: 400px; */
margin: 0;
padding: 25% 0 30% 0;
background-size: cover;
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Note: And don't use fixed height or width as you're developing for multiple screen sizes. Else's is fine.
I made a website that looks exactly like it should on Firefox but unfortunately not on iOS (which uses Safari webkit) and chrome on some devices of the device. It just doesn't properly display the Menu-Bar (it should be position fixed). The problem here is, that I don't really know what the issue is.
Screenshots:
White space between address bar and photo should be the menu:
Here you see that you only see the menu when it's above the parent
I can't really figure out why it behaves like this, because according to various wikis position fixed is relative to the viewport and not it's parent "the viewport is always their containing block" ( http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Summary )
*The CSS:
.main-navigation {
clear: both;
float: left;
width: 100%;
position: fixed;
width: 100vw;
height: 6rem;
background: -webkit-linear-gradient(top, #fff, #d6d6d6);
background: -moz-linear-gradient(top, #fff, #d6d6d6);
background: -ms-linear-gradient(top, #fff, #d6d6d6);
background: -o-linear-gradient(top, #fff, #d6d6d6);
top: 0;
right: 0;
z-index: 100;
overflow: visible;
}
nav {
display: block;
}
.home header.site-header {
top: 24rem;
left: 8rem;
position: absolute;
z-index: 3;
}
.home header.site-header is the parent of the menu
There are so many issues with :position: fixed; on mobile devices/with mobile browsers, that I don't even know where to start.
http://bradfrost.com/blog/mobile/fixed-position/
Check Brad Frost's article on the matter and you will see why this is not an easy task to accomplish.
What could help is Filament Group's fixed-sticky-fix:
https://github.com/filamentgroup/fixed-sticky
I have a button image I'm using as a background image for some links.
The background image has rounded corners.
I want to use a css drop shadow instead of putting the drop shadow in the image
The problem is, the drop shadow appears to be drawn around the element. Although I kind of expected to see the drop shadow color through the transparent parts of the background image, I'm seeing the background color instead (see this jsfiddle).
My actual goal is a little more complex, but if I can satify my first three bullet points then I can nail this task. Specifically, what I want to do is use two nested elements with background images of the right and left parts of a button image (rounded corners) so that I can use the same css to wrap a 'button' around text of any length. Since the backgrounds overlap in a css 'sliding doors' style, a png alpha drop shadow shows a 2x dark section where the images overlap. Soo.. I thought I'd use a css shadow, but as you can see in the jsFiddle, there are problems with that too.
Any ideas?
Box-shadows don't show through transparent backgrounds. A more simple test case would be:
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: transparent;
box-shadow: 0 0 10px #000;
}
The output expected would be a nice blurred black square right? Well... no, it's a white square with a dropshadow. http://jsfiddle.net/UjhrW/
To achieve what you want to do you will need separate markup for the dropshadow, fill it with white, and then set the spill of the shadow so it looks like a blurry square...
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: #000;
box-shadow: 0 0 10px 6px #000;
}
http://jsfiddle.net/Etmty/
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: #000;
box-shadow: 0 0 10px 6px #000;
}
<div class="box"></div>
I'm trying to come up with my own star image that's slightly smaller and different style than the one provided in the gem/plugin, but Ajaxful_rating doesn't have an easy way to do this. Here's what I've figured out so far:
The stars.png in the public folder is three 25x25 pixel tiles stacked vertically, ordered empty star, normal star, and hover star.
I'm assuming as long as you keep the above constraints, you should be fine without modifying any other files.
But what if you want to change the image size of the stars to larger or smaller?
I've found where you can change the height in the stylesheets/ajaxful_rating.css
.ajaxful-rating{
position: relative;
/*width: 125px; this is setted dynamically */
height: 25px;
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
background-position: left top;
}
.ajaxful-rating li{ display: inline; }
.ajaxful-rating a,
.ajaxful-rating span,
.ajaxful-rating .show-value{
position: absolute;
top: 0;
left: 0;
text-indent: -1000em;
height: 25px;
line-height: 25px;
outline: none;
overflow: hidden;
border: none;
}
You just need to change every place that says "25px" above to whatever height your new star image is. This works fine but doesn't display the horizontal part correctly. Anyone know where I would look to set the horizontal part as well? (I'm assuming it's in an .rb file somewhere based upon how many stars you specified in your ajaxful_rating setup)
Nevermind, I'm stupid.
In the lib/axr/stars_builder.rb, find the following:
def ratings_tag
......
#css_builder.rule('.ajaxful-rating', :width => (rateable.class.max_stars * 25))
....
end
Change the 25 to your new width.