Hi guys I'm trying to crop an image using another div. Margin -left,-top,-bottom work, but for some reason margin-right does not seem to be working for me on chrome. Any ideas what I should do? I've been trying to figure this out for hours :c
http://knowmad.herokuapp.com/sunapp/10/
I'm not quite sure why the margin-right isn't working but did you consider using the clip property?
http://webdesignerwall.com/tutorials/5-simple-but-useful-css-properties
Use pixels in margin-right instead of percentages. ie margin-right:20px
Related
I've been trying this but for some strange reason, The box-shadow won't appear for the <nav> tag. I also tried changing the z-index to a higher value incase the next element was above it, still it doesn't work. Can anyone help with this and a possible explanation?
Here's the code.
https://jsfiddle.net/dqLvaghn/2/
Thanks in advance
Your box-shadow 4th value is too big. But before that issue, add position:relative to your both elements, because z-index doesn't work without a position value.
I have Firefox and Chrome lined up side by side. I have an h1 element with no vertical padding or no vertical margin on a text item that uses a Web Font. I am getting a one pixel difference. If I look at the Computed info in firefox and also in chrome, both are computed at 56px, but visually there is some padding on both of which firefox is 1 pixel extra. Any ideas on how to fix this? Unable to upload a photo.
You would have to provide us with some image or something so we can better assist you.
But try using Normalize.css
http://necolas.github.io/normalize.css/
Well, if you really want to get into it, there's a host of direct FF only CSS calls like you use to target IE https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
There's one for margin and padding that may work.
<style>
* {margin: 0;padding: 0}
body,html {height: 100%;width: 100%}
</style>
add this to your style and all should go well
Hi I'm having troubles with a problem in chrome. I think it might be a bug but I can't find much info on it. Basically I want to apply border radius on an image. The border-radius will be 50% forming a circle. The reason I've set it as a % is because i wont explicity know the width/hieghtt of the image.
Any ideas why chrome doesn't display the border correclty? I haven't tested in FF < 4. but FF4 works well as does IE for a change
What are you trying to do? Do you want a circle to appear behind the image? That is what I see in FF. In Chrome, the circle is clipping the edges of the image.
According to the spec -- http://www.w3.org/TR/css3-background/#corner-clipping -- content is supposed to be truncated.
The content of replaced elements is
always trimmed to the content edge
curve.
Which, to me, means that Chrome is following the spec correctly on this.
Webkit doesn't currently clip corners of images. Remove the src tag from the image and you'll see that the border is being rounded correctly.
One workaround is you could set the background-image property in css: http://jsfiddle.net/tEzwJ/
I figured out a way around it, by adding the border and the border-radius onto the parent . I then applied the border radius to the image too. Although there is a minute gap It works in chrome now. I haven't tested it in FF3.6. But FF4 displays the same result
I am having a problem with IE. The url to my site is www.trecall.com. I want to put a margin on the left side of the animated menu, to make the menu centered on the page. This works fine in FF, but in IE, the margin does not show up.
Any idea why?
THANK YOU!!
You can try wrapping it in another div and using padding on that. IE is not very good with margins.
Playing with left margin is not the correct way to do horizontal centering, it'll only work on your own display resolution..
see this for horizontal centering in css (old but still correct)
I am working on a project. I am facing a problem in ie. Problem is vertical-align:middle not working for image.If you have any solution for this problem please help me.
Site link:http://dev.tenthtime.com/family/highchairs/default.aspx
vertical-align is used for tables not for images. Try using margin and padding if your image is not inside a table.