I am having an issue making my a drop down menu visible over the content below it. I have tried using the overflow: visible; command but it doesn't seem to work so I presume there is some sort of conflict going on. The other issue I have encountered is when you move down the menu to click on the options it closes once you get to the the point where it is not visible. I presume though that both issues are interlinked.
JSfiddle: http://jsfiddle.net/aXcje/
#menu {
height: 44px;
font-family: otto;
font-size: 42px;
word-spacing:15px;
text-shadow: 0px 0px 1px #000;
border:1px solid #1a1a1a;
margin-bottom: -1px;
margin-top: -1px;
background-image: url("images/menu.png");
background-repeat:repeat-x;
box-shadow: 2px 2px 2px #000000;
}
Website: http://www.debbie.travismoore.co.uk/
Any help is appreciated,
Cheers,
Travis
Resolved by using the z-index property on the drop down menu
Related
I am getting a odd effect (currently in chrome). I have created my own overlay dialog box. which has a semi transparent background sitting on top of my website with a box on top of that. the top of the bar as you can see has a black background. The main part of the box is white thought.
Its not the easyist to see but it is annoying me.
The white is showing through from behind. (I know as if i change it to red it changes colour) Which you can see in the top right hand corner of the screenshots, just above the "X"
Both the header and the box has a border radius 3px
.blockUI .overlay {
background: #f00;
border-radius: 3px;
margin: 0 auto;
padding: 10px;
overflow: hidden;
position: relative;
top: 20%;
text-align: inherit;
width: 600px;
z-index: 10009;
}
blockUI .overlay h1 {
background: #000;
border-bottom: 2px solid #F48421;
border-radius: 3px 3px 0 0;
color: #FFF;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: -10px;
padding: 10px;
}
Since overflow: hidden; along with border-radius seems to cause some rendering inconsistencies in some engines (take a look at this), one should use border-radius on both the parent and the child elements to achieve rounded corners.
As you have noticed, you still get some wierd results with extra pixels "shining" through. Just reduce the border-radius of the child (or the other way round) to compensate this.
blockUI .overlay h1 {
border-radius: 2px 2px 0 0;
}
I had same problem. But I solved.
.blockUI .overlay {background:#000;}
and remake some!
You should try on the parent div:
-webkit-background-clip: padding-box;
Finally fixed this completely by adding this on parent and child divs.
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
outline:none;
border:none;
text-decoration:none;
I am trying to implement this dialogue box without reverting to using images for the top right corner. The following is my implementation for it.
.box{
-webkit-border-radius: 6px 6px;
-moz-border-radius: 6px / 6px;
-khtml-border-radius: 6px / 6px;
border-radius: 6px / 6px;
width:33%;
border: 1px solid #DDD;
display: inline-block;
margin-right:10px;
margin-bottom: 10px;
max-width: 290px;
padding: 10px;
}
.triangle-topright {
width: 0;
height: 0;
border-top: 50px solid #fafad6;
border-left: 50px solid transparent;
-webkit-border-top-right-radius: 6px 6px;
-moz-border-radius-topright: 6px / 6px;
-khtml-border-top-right-radius: 6px / 6px;
border-top-right-radius: 6px / 6px;
float: right;
margin-top: -10px;
margin-right: -10px;
}
<div class="box">
<div class="triangle-topright"></div>
<h3>title</h3>
<p>stuff</p>
</div>
The problem is this works for safari, but for chrome, -webkit-border-top-right-radius: 6px 6px; seems to cause a conflict. When it is activated, the top right will be rounded, but the triangle will disappear.
is there a workaround to this? or is there a better way to do this?
thank you.
One solution that appears to work (tested in Chrome, Safari, Firefox) is removing the following lines from .triangle-topright
-webkit-border-top-right-radius: 6px 6px;
-moz-border-radius-topright: 6px / 6px;
-khtml-border-top-right-radius: 6px / 6px;
border-top-right-radius: 6px / 6px;
And instead simply adding overflow: hidden; to the .box css.
Demo: http://jsfiddle.net/BcrKH/
I think your idea of creating a triangle shape in CSS is over-thinking the problem. A CSS gradient would seem to be the simpler solution here.
It's possible to create gradients that are just an abrupt color change, and you can make them diagonal too, so it seems like it can offer exactly the solution you're after.
Now we've established a different tack to the question, we can refer to other questions like this one for reference: How to make a diagonal css gradient without the colors blending together(a sharp color change) that's displaced 70% to the right?
The only problem with CSS gradients is that they're not supported in older versions of IE. This can be resolved however. IE6/7/8 does have its own filter method of creating gradients which can do the trick, but my preference would be to use CSS3Pie, which allows you to use the standard CSS3 gradients even in old IE versions.
Hope that helps.
I use framesets (I know, that is very very bad :)) and that works for me, but I have one little problem: the frameset does not allow me to see the dropdown box that I have made. It just shows one list item and the other 4 items are invisible. If I enlarge the frameset, then it will show up, but that is not a solution because the site won't be the way I want it to be (it goes to the bottom).
This is the frameset: frameset id="f" border="0" rows="50" and this is the css of the dropdown menu:
.dropdown .dropdown-menu {
background-color: #ECECEC;
border: 1px solid #D9D9D9;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
display: none;
float: left;
left: 0;
margin-top: -1px;
min-width: 150px;
position: absolute;
top: 100%;
z-index: 1000;
I have tried overflow etcetera, but it didn't work. Can someone help me out, please?
It's obvious that this happens, because this is a frameset we are talking of.... A thing used before Christ...
So yeah, my answer is solved by my own.
I just can't figure this out. The links below work absolutely fine in every browser except IE8. If you click on the elements in IE8, the button disappears. If you click again where it was it reappears. But no amount of clicking will actually lead you to the href location. Can anybody explain to me why that might be? I've exhausted all of my thoughts and it still doesn't work. Many thanks for all your thoughts!
The html...
<div style="padding:0px 0px 30px 0px; clear: both;">
<div style="width: 50%; display: block; float: left;">
Learn More
</div>
<div style="width: 50%; display: block; float: left;">
Get Started
</div>
</div>
...and the stylesheet...
.big_button {
-moz-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
box-shadow: inset 0px 1px 0px 0px #bbdaf7;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff
), color-stop(1, #378de5) );
background: -moz-linear-gradient(center top, #79bbff 5%, #378de5 100%);
filter: progid : DXImageTransform.Microsoft.gradient (
startColorstr = '#79bbff', endColorstr = '#378de5' );
background-color: #79bbff;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #84bbf3;
display: inline-block;
color: #ffffff;
font-family: Arial;
font-size: 18px;
font-weight: bold;
padding: 15px 45px;
text-decoration: none;
margin-left: 130px;
}
.big_button:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background: -moz-linear-gradient(center top, #378de5 5%, #79bbff 100%);
filter: progid : DXImageTransform.Microsoft.gradient (startColorstr = '#378de5', endColorstr = '#79bbff' );
background-color: #378de5;
}
.big_button:active {
position: relative;
top: 1px;
}
Its because of the 'filter:' part in your css, remove it, then it will work...
I just figured it out. IE8 seems to have a problem with :active in css. So the following section of the stylesheet was causing issues:
.big_button:active {
position: relative;
top: 1px;
}
Current fix is to exclude the ':active' part of the css for the button as it's not essential. If anybody has any further information on why IE8 has issues with :active, I'd be interested to know about it.
i have this code:
<style type="text/css">
div {
margin: 100px auto;
width: 0px;
height: 0px;
border-right: 30px solid transparent;
border-top: 30px solid red;
border-left: 30px solid red;
border-bottom: 30px solid transparent;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
position: relative;
}
</style>
<div></div>
that produce:
in firefox,
but in chrome (linux, and windows - didnt try in mac) i see nothing why?
I believe it is some sort of bug, actually. It works for me if you change the height and width to 1px. This leaves a little white dot, unfortunately, but that can be fixed by changing the background to red and the background-clip to content.
JSFiddle example.
Because you gave 0px width and 0px height to the div so you see nothing.
width: 0px;
height: 0px;
Change this, hope it'll be visible.