I have a problem with positioning a background-image in my main-menu. It looks ok in Chrome, FF and Opera, but that isn't the case with Safari. Please look at the link down below.
http://www.kurvers-bouwbegeleiding.nl/kerndisciplines.php
Please help me!
Chears,
Robin
i think you use a css3 property :
background-position: xpos value ypos value;
try to include space in your picture and place it in right bottom
background-position: right bottom;
Best regard
Nico
Related
I have a simple animation that put an element into "position: absolute" to translate it.
Works perfectly and as expected on Chrome.
On Safari, absolute positioning is completely ignored...
Fiddle : https://codepen.io/anon/pen/YvVZNv
Am I missing something ?
note: I don't want to transform:translate instead of left
Thanks
Set the position outside of the keyframes, updated example which works in Safari
I am struggling with a strange problem for a couple of days now. I am using big triangles in my website. I know if i make triangles in png or any other format, there is a big chance this is gonna look crispy. Thats why i go for the svg approach.
The first thing i approached was a big border under the svg elements. This was fixed by simply adding vertical-align: top; to the svg element.
The problem is that it is very buggy in some browsers. Some browsers show a line beneath it when resizing. Sometimes the line is always there.
The following image illustrates the problem, this is taking in safari 10.1 when resized:
This is how it should be
The svg are absolutely positioned i
Is there anyone who has faced this problem before and can help me out with this?
Thanks for you're help guys, really appreciate it!
I ended up with a (dirty) fix.
The elements that are aligned to the bottom i gave a transform: translate(0, 0.4px);
And the elements that are aligned to the top i gave a transform: translate(0, -0.4px);
For now this seems a good fix without disrupting the layout!
This site is displayed properly in chrome, firefox and also IE9. But it does not display properly in IE8.
I tried all thing like margin:0px auto, display : block but it does not display properly.
Please help me.
Thanks in advance.
The site look nice in IE8... write exacty what do you want to change...
Some tweaks that you should make:
for Search side:
add a vertical align for the number in the rounded thing;
changeSearchForm .number_bg{ display:table;}
changeSearchForm .number_bg span { display: table-cell; vertical-align: middle; }
make the inputs and inputs images smaller
use some font awesome icons
fix the margins for the footer in IE
if you want to make a circle, all the border with 50%, so it's always a circle, does not matter the with and height.
P.S. Next time work in % for the 'skeleton', base site architecture :)
I am able to see the issues you mentioned in IE quirks mode, actually IE8 is working fine.
Still if you need to fix this issue, Do this -
Add text-align center to the main div(class-skin) or even body tag - this will center the content and then add text-align:left to the content div(class = outter-wrapper) so that again text-align will be set to default for the content.
.skin{text-align:center;}
.outter-wrapper{text-align-left;}
Thanks,
Karthik.
I'm looking for any working solution in IE8 for this little issue I'm having. For some reason css pie isn't working great on this server we are working on so we are having to use images for IE8 specific stylesheets to sort some quirks out.
On the right hand side there is a facebook panel that needs rounded corners, so far I have an image on the top of the panel to give it a rounded corner, but ideally we want rounded ones on the bottom too, but I just can't figure out how. Could anyone shed some light? Quick dirty fixes are welcome!
Image attached - see how it is in webkit compared to IE8:
http://i.imgur.com/0A9Ns2v.jpg
Thanks guys!
Edit: My solution was to add an extra div inside the parent. Thanks #Pete.
if you add an extra div inside your #block-facebook-pull-facebook-pull-default and then flip your /images/fb_top.jpg to create a bottom image, you can add the following style to the new div:
#block-facebook-pull-facebook-pull-default > div
{
background:url(../images/fb_bottom.jpg) left bottom no-repeat;
}
you then want to take all the padding off the parent div and put it onto the new div
I'm having trouble adding 3 images to a table cell in css and was wondering if anyone could help me to figure out what I'm doing wrong. Here is what I have:
css
.Example {
background-image:url("image1.gif"),url("image2.gif"),url("image3.gif");
background-position: top left, top center, top right;
background-repeat: no-repeat, repeat-x, no-repeat;
}
html
<td class="Example">
Example
</td>
When I open the page however, all I get is a cell that says Example with no background image. Any suggestions?
Try
.Example {
background-image:url("image1.gif"),url("image2.gif"),url("image3.gif");
background-position: top left, top center, top right;
background-repeat: no-repeat;
}
without the three parameters on background-repeat.
And keep in mind that this is not working on every browser.
I suggest you use the old fashion way to resolve this. Put a link on every picture with the same href.
The only browser projects having this
feature implemented so far are WebKit
and KHTML (Konqueror). This got into
Safari 1.3 though, and works in
OmniWeb 5.5 and up.
Source
Having multiple background images in the same element and the current limitations have been answered here: layering-images-in-css-possible-to-put-2-images-in-same-element and also here: an-i-have-multiple-background-images-using-css
Currently not all browsers support that feature as stated in the answers in the above links.
There is also suggestions to work-arounds, such as using multiple Divs and placing each image into its own div and using z-orders to display divs as required.