I have two containers, with zero distance between them, each has its own border. At the exact point two borders touch (see image below) the upper border is truncated in the form of a triangle, which irritates me a lot. I've done my research, but found no way to fix that, except adding outer container with overlaying border.
Is there any better way to make that triangle disappear?
This comes from having borders defined but the color is actually set to the background, if you add border-top: none; and border-bottom:none; to your css on the the tables the issue will be resolved. The triangle you speak of is the border transitioning from the left border to the bottom or top border.
May be this is because you are having border-radius so only you getting rounded corner at bottom. Please remove radius and try .
Related
This is how my current header looks like. I want to edit it that the part in the picture below has the same color as the div next to it / the border. How can I do this?
Code on jsbin: http://jsbin.com/ezeyib/3/
You can acheive this by oversizing the border thickness and then setting the parents overflow to hidden.
See this example.
http://jsbin.com/ezeyib/5/edit
I mean you need to create a png file using Photoshop or Illustrator to retrieve the expected result.
If you can have a plain background instead of a gradient background, you can create two big blocks (one green and one blue), and on top of those, create a shape with rounded corners which matches the actual look.
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
Ok I am attempting to round my corners via CSS so I can drop a bunch of images from an older style template I am remastering for a client. The idea is use something that can fail gracefully. Which I think it would generally speaking. However in this case it appears the the top left corner of one of the elements is not rounding like the rest of the same element is on its other corners. I am using a class to pass this to elements and this class works on all the other elements flawlessly its just this one element..
content_wrap to be more specific. Its the element that all the other elements reside in.
Here is a jsfiddle version of it.
http://jsfiddle.net/8qZze/
anyone have any ideas/suggestions?
You can add overflow:hidden to the #content_wrap to stop anything from overlapping the corners from inside. Live example: http://jsfiddle.net/8qZze/1/
#content_wrap{
overflow: hidden
}
I removed the ".white" rule and it worked, the child "content_left" has a rectangular shape ant it goes over the rounded corner of "content_wrap", try to specify some margin to leave more space for the rounded corner and everything will be fine.
Or try tw16's advice with overflow (forgot about it :) )
I would like to make an arrow like so:
Is this possible with just CSS3, Notice how it's a black arrow with an inner white arrow slightly -1px from the black. Ideas? Thanks
It can be done with just a singular div and CSS3 transformations. Here is an example: http://jsfiddle.net/yVTr3/5/
It could easily be modified to adapt to the size and exact colors you would need.
Sure you can do that, even with css 2.1 - http://css-tricks.com/snippets/css/css-triangle/
However you'll need to create 3 arrows one on top of each other - black + white + black - and position them accordingly (1px from right for the middle one, 2px from right for the topmost)
I have multiple divs where the left side is an image (varying heights per div) that will determine the height of each div.
The right side of the div has a header on top with content below, so header is solid color and content another solid color.
My issue is the right side has rounded corners, so I need to have an image on the top and bottom for all x-broswering. I don't want to adjust the height for every div based on the height of the left image. Is there a way of setting it up so the the right side will match the height of the left image?
does this make sense?
EDIT: Sorry, this wasn't clear. This should help: http://jsfiddle.net/xtian/cMs7m/
I was not able to use PIE because I need only specific corners to be rounded and it only supports all 4 being rounded. I had to just use images, which I would love to get away from but with IE, its not really possible yet.
I'm not sure I understand you exactly, but let's try...
If leaving IE out is not an option, you should look for solutions such as CSS PIE and others that can emulate CSS3 features in IE. I've used PIE and it does the trick marvellously for border radius. Can't quite remember what other things could be used, but I'm pretty sure there were like 2 more solutions that are pretty common. Would using CSS3 instead of rounded corner images solve your problems?
Not quite sure that I understood the question well, but if it's about having rounded corners, I think the time is totally right to stop using images for this and start using CSS3:
http://www.css3.info/preview/rounded-border/
easy...
for old IE's I think there are alternate solutions:
http://msdn.microsoft.com/en-us/library/bb250413%28v=vs.85%29.aspx