I am trying to create an element with either :before or :after and position it at the bottom of its parent, halfway out of the element, to hide the box shadow there. This seems to work, except for IE.
Demonstration: http://jsfiddle.net/XV6pT/
The white border from :before should overlay the bottom border and its box-shadow. However, in Internet Explorer, the parts of the element below the bottom boundary of the button are not displayed.
There is no filter or similar which would set something to hidden (according to How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?). The CSS is copied as-is.
The general aim (maybe someone has a better idea) is, that below the button, there is a dropdown navigation, that should look like the dropdown and the button are "one part", so there should not be any border or box shadow between the button and the dropdown.
It seems that the problem occurs in IE9 and IE10. Switching from absolute to relative positioning also didn't help.
Any hints?
Take a look at this: Creating a CSS3 box-shadow on all sides but one
It involves a bit more html, but IE and pseudo-elements can drive you nuts. That answer also includes a shadow for the menu "baseline" but without deeply looking into it, I think it can be safely removed.
Good luck!
Related
I'm developing a simple opacity slider for my site and I've encountered a weird rendering bug (?) that happens only in Firefox (Chrome and Opera handle it perfectly).
The problem is while slides change each other, there's horizontal line appearing over them:
Obviously it has something to do with arrows which switch images. If I set display: none to them, there's no line appearing.
Arrows are simple > < in spans, and they have text-shadow. If I remove text-shadow from them, the line gets thinner:
Spans with arrows are positioned absolutely inside divs which taking half of slide container each. These divs are inside other div, which is sibling to slides and has z-index:1 to be over them. If I set right/left position for spans so they will just a little superpose image, or if I make divs thinner (for example, 40% instead of 50%) for the same purpose, the line disappears:
It may seem like it's related to spans' width, but setting max-width and display: block doesn't help too.
How can I get rid of this weird line? Maybe there's CSS hacks for it? You can check slider yourself here. Thanks!
So I've removed spans and instead put arrows just inside divs. I've vertically centered them using :before CSS hack from this answer. No weird lines and works like charm, though I've had to add some nbsp's before and after arrows so they would not be just on the edges of slide container. Well, a bit dirty but it's fine for now. Works even in IE10 and I don't need more.
Any way to do this kind of tab design? I can't seem to get my hands on good code online to accomplish it. There's two border-radius for each tab. IS it even possible?
You can use an internal div in each tab and set border for that.set border for your main tab and now you have two border
A quick Google search for "css curved tabs" gives an excellent article from css-tricks.com as the first hit: (Better) CSS Tabs With Round Out Borders. The code is right there to copy and paste, but here is a summary of the css tricks involved:
Use the css :before and :after pseudo-elements to create the tab's rounded elements with curved border-radius styles. (These pseudo-elements with position: absolute essentially provide two extra drawing layers - think of layering a transparency sheet on top of your tab's <li> html element, and drawing your tab's rounded elements on top of that).
Use clever box-shadow settings on the rounded elements to hide the square edges of the underlying <li> element.
Use slight negative margins on the <li> elements to allow the tabs to overlap each other.
This keeps all the css styling on the same element, and is easily configurable with different gradients, color schemes, and styling elements.
It's definitely possible, but a little bit tricky, because the effect has to be simulated somewhat. For example, for the right edge of the middle tab, the top border curve must be defined using border-radius on the middle tab, but the bottom curve must be defined using border-radius on the right tab. The rest of the effect is done by having elements behind the tabs with the appropriate background colors.
There are several ways this could be accomplished with images. You could do background image with a transparent png, for example.
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 have a div element with some child elements, and I'm trying to apply a inset box-shadow the child elements seem to be covering up the box-shadow, here is a jfiddle example:
jsFiddle Demo
If you take away the background-color on the optn class you'll see the inset box shadow there, so my code is valid. So the questions is, how do I make it so the child elements appear under the box-shadow?
Had the same problem, find half-solution (works well if you don't have scroll inside).
You can position background in element under the shadow by placing it inside the :before or :after pseudo-class and setting it z-index: -1. It will do the background part.
But it will create new problem: To position :before element you will need to apply to .optn element "position: relative;" and if you apply "position: relative;" to it it will start to shows from under the rounded corners in Webkit browsers.
If you don't have scroll inside, you can fix it by rounding corners if the first and last .optn element, bit if you want to scroll this content then you unfortunately can't do so.
Anyway there is an example: http://jsfiddle.net/qN99W/
http://jsfiddle.net/wdYpv/3/
Move the background color to the parent.
you can add padding like so: http://jsfiddle.net/jalbertbowdenii/wdYpv/2/
If I'm understanding your own goal correctly, you've already got the answer in your question. ;-) Remove the background-color from optn and add it to optn-group instead.
As you've already discovered, though, if you have a different background color for optn on hover or on active, it's still over top of that inset shadow. The easy and possibly lazy solution is to not modify background-color for those, but to use text-color and other effects (shifting by 1px down, for example). Or if you want the border-radius but for those special cases (hover, active) you can live without the shadow, just set border-radii appropriately.
Other than that, don't let the world brainwash you into thinking that just because we have great new tools in CSS that you can't use images anymore. What you REALLY want to do might still be more easily accomplished with images.
Look at the "pinking shears" effect on numerous webpages, and it's still done with one or more transparent PNGs artfully placed.
In FF and IE8 things look pretty good. I have a mock up of the drop down that I'm trying to create with rounded corners at bottom here: www.geowinedb.org/drop-down-test/test.html. In IE6 the mega div is extending to the far left edge of the window. What do I need to change/add (e.g. underscore hacks) to get the drop-down to shrink-wrap its contents (the ul).
p.s. I'll be back to ask about the z-index problem that blocks the drop-down (IE6 again), but if anyone want to answer that as well it will be much appreciated.
EDIT 20091107: More specifics on the requirements: It must work in IE6+ and the drop down menus cannot be fixed width. The client wants to be able to change menu item text at will and have the drop-downs size automatically.
EDIT 20091111: I never did find a great solution. The menu along with some other requirements for hover changes, meant that JavaScript was necessary. So, I found that I could position each main menu item absolute, then position each sub-menu div absolute (this solved the z-index problem), and lastly I computed the width from the underlying ul and set the outer div width. Then the rounded corners positioned themselves correctly on all the browsers that I needed.
Does it bother to use fixed width for your UL (and maybe UL.mega-b too) ? because this way you will definitely avoid this problem.
display:block in your UL can also be the cause of this.