I am facing problem with z-index in IE7.
My actual requirement is to open the pop (kind of) div when you click on the heading.
So I am using position:absolute to pop div to place it accordingly. It works absolutely fine in all the browsers except IE7.
In IE7 you can see that second heading text is coming over pop div.
Here is my CSS
.heading{
border:solid 1px #d6d6d6;
background:#efefef;
padding:2px 6px;
margin-bottom:6px;
}
a{
color:#088f93;
text-decoration:none;
display:inline-block;
}
.pop-div{
position:relative;
}
.pop-up{
position:absolute;
top:25px;
left:0;
background:#fff;
padding:8px;
border: 1px solid #c6d0d9;
color:#404040;
display:none;
z-index:10000
}
FIDDLE
Related
i am trying to make a new menu for my site and i'm using transitions on highlight.
but i am getting some issues with elements being pushed around. for example if you highlight Home it will push all elements to right of it.
however if there are 2 lines it will not push the element down. instead it will just mask it. how can i make sure each element has it's own dedicated space and not be pushed and also not be masked.
I tried making an absolute with an inner relative but that didn't work.
http://jsfiddle.net/yg68cnnt/
Html:
<ul>
<li> Home </li>
<li> About </li>
<li> FAQ </li>
<li> Locations </li>
<li> StackOverflow </li>
</ul>
CSS:
ul{
list-style-type:none;
position:absolute;
}
li{
display:inline;
transition: all 2s;
width:0px;
position:relative;
margin-right:3em;
padding-top:10px;
padding-right:30px;
padding-left:4px;
}
li:hover{
background-color:red;
border-right:20px solid black;
border-bottom:20px solid black;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
}
If you want the border to grow, you can trick it by using css3 box-shadow with blur set to 0 instead of using border, because shadow does not cause the element itself to grow.
li:hover{
background-color:red;
box-shadow: 10px 10px 0 10px black;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
}
(Note that it is probably a hack and not the most correct way to solve your problem. It sort of works though.)
Vertical space between items can be achieved by setting display to inline-block and setting margin-bottom:
li{
display:inline-block;
margin-bottom:2em;
transition: all 2s;
position:relative;
margin-right:3em;
padding-top:10px;
padding-right:30px;
padding-left:4px;
}
updated jsFiddle
You could set a transparent border on the non-hover state like this:
li {
display:inline;
transition: all 2s;
width:0px;
position:relative;
margin-right:3em;
padding-top:10px;
padding-right:30px;
padding-left:4px;
border-right:20px solid transparent;
border-bottom:20px solid transparent;
}
jsFiddle example
I want the whole div clickable, but it will not show. I want it to change when hovered as well. I believe I have used this same coding before and it has worked, not sure why I am having issues.
<div class="clickable_one">
</div>
div.clickable_one {
float:right;
}
div.clickable_one a {
position:absolute;
width:120px;
height:30px;
text-decoration:none;
background-image:url("images/forums_link copy.png");
}
div.clickable_one a:hover {
position:absolute;
width:120px;
height:30px;
text-decoration:none;
background-image:url("images/forums_link_2 copy.png");
}
The problem is you are using float:right on your div and position:absolute on your <a> which forced everything to move on right corner of screen. If you use InspectElement you will have clear view. I placed a border around your div as example to check location of div
I'v updated your CSS a bit and content is showing.
div.clickable_one
{
border: 2px solid blue;
}
div.clickable_one a {
width:120px;
height:30px;
text-decoration:none;
background-image:url("images/forums_link copy.png");
}
div.clickable_one a:hover
{
width:120px;
height:30px;
text-decoration:underline;
background-image:url("images/forums_link copy.png");
}
DEMO
I'm making a dropdown menu in pure CSS and I'm encountering some difficulties making the dropdown look the same in every browser.
I've tried everything I can think of - setting margins to zero, setting padding to zero... and nothing seems to work.
http://jsfiddle.net/mf9cS/
Safari renders it perfectly:
Firefox has a mysterious gap between the title and the dropdown:
And Chrome is missing one pixel out of the border on the top right concave corner:
CSS:
.container {
position:absolute;
top:50px;
left:50px;
margin:0px;
}
.title {
position:relative;
display:inline-block;
height:25px;
overflow:hidden;
font-size:15pt;
padding:0px;
padding-top:1px;
margin:0px;
}
.title:hover {
height:200px;
}
.title:hover > .links {
width:150px;
}
body {
font-size:14pt;
}
.links {
width:0px;
border:1px solid grey;
visibility:hidden;
padding-top:0px;
margin-top:0px;
}
.titletext {
margin-left:0px;
margin-top:0px;
height:25px;
margin-bottom:0px;
}
.title:hover > .titletext {
border:1px solid grey;
border-bottom:1px solid white;
}
.title:hover > .links {
visibility:visible;
}
a {
text-decoration:none;
color:grey;
width:150px;
display:block;
}
a:hover {
background-color:purple;
}
HTML:
<html>
<body>
<div class="container">
<div class="title">
<span class="titletext">
This is a test
</span>
<div class="links">
Link 1
Link 2
This is the third link
</div>
</div>
</div>
</body>
</html>
Problem is your white border of title span element. All browsers are rendering border different way. In chrome and firefox that white border is touching to end of that element where you see white space at corner. Set border radius to 2px it the space will go away. I'm sure but here is the demo.
`border-bottom-right-radius:2px`
http://jsfiddle.net/mf9cS/3/
I'm having trouble with cross-browser compatibility.
I have a simple menu (with all JS functionality removed for the purpose of this demonstration). The background of the links are meant to go orange when hovered over.
Firefox (V3.6.17): Works properly.
Chrome (V11.0.696.60): The Main Links expand with :hover, shifting all the other menu items. I think the padding or margins expand on hover
InternetExplorer (V8): The links show in blue despite defining a colour.
I think the problem would easily be recognised by someone who knows CSS well, but my knowledge isn't up to scratch. An explanation would be greatly appreciated!
Here is the code on JS Fiddle
Here is a portion of the CSS:
#mainlinks {
position:absolute;
display:block;
overflow:visible;
margin:0px;
padding:0px;
}
#mainlinks li {
display:block;
position:relative;
float: left;
cursor:pointer;
overflow:hidden;
padding:4px;
margin:45px 3px 2px 3px;
font-family:Arial, Helvetica, sans-serif;
color:#000;
font-size: 14px;
text-decoration:none;
list-style: none;
}
#mainlinks li :visited {
text-decoration:none;
color:#000;
padding:4px;
margin:45px 3px 2px 3px;
}
#mainlinks li :hover {
text-decoration:none;
color:#FFF;
padding:4px;
margin:45px 3px 2px 3px;
background-color:#f1592a;
}
try li:hover instead of li :hover, li:visited instead of li :visited
hope this works ^^
you should try applying the text specific styles (ie: color) to the 'a' tag instead of on the LI
I am trying to create a little growl like div for a site. It works great in Firefox, but not IE6 (haven't tried IE7, but I still need to support IE6).
In Firefox: Centered text with image floated to right side of div
In IE6: Centered text with image to the left of text.
I've tried switching the img and span tag order, but that causes a line break in FF between the two, and IE renders the image on the right of the text, but not docked to the right side of the div.
HTML
<div id="growl">
<img src="close.gif" class="action" title="hide" />
<span class="text">Grrrrrr.......</span>
</div>
In css:
#growl {
background-color:yellow;
text-align:center;
position:absolute;
top:0; left:0;
width:98%;
padding:10px 0;
margin-left:1%;
z-index:10;
border:1px solid #CCCCCC;
}
#growl > .text {
font-size:120%;
font-weight:bold;
}
#growl > .action {
float:right;
cursor:pointer;
}
The > selector does not work on IE 6.
Just get rid of it:
#growl .text {
font-size:120%;
font-weight:bold;
}
#growl .action {
float:right;
cursor:pointer;
}
The > css selectors are not supported by IE6, try just removing them.
No point in adding a class to each elements in the div when you only have one img and span. Do this instead for cleaner code.
<div id="growl">
<img src="close.gif" title="hide" />
<span>Grrrrrr.......</span>
</div>
-
#growl {
background-color:yellow;
text-align:center;
position:absolute;
top:0; left:0;
width:98%;
padding:10px 0;
margin-left:1%;
z-index:10;
border:1px solid #CCCCCC;
}
#growl span {
font-size:120%;
font-weight:bold;
}
#growl img {
float:right;
cursor:pointer;
}