Good day to all. I have a dropdown menu (a div actually with display:none at onclick event on the searchbar it appears) placed inside a div with the following style:
background-image: url("/whatever.png");
height: 80px;
position: relative;
top: 60px;
width: 100%;
The div that appears (the dropdown) has:
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid;
height: 185px;
left: 140px;
padding-top: 3px;
position: absolute;
top: 25px;
width: 134px;
z-index: 25;
Now... here is the problem (I had to hide some elements sorry about that also I can not provide an online copy sorry about that too):
The red line is a div on the same level as the container of the dropdown with style:
top: 140px;
width: 100%;
The blue bar (is a div placed inside 2 other divs with position: relative and float: left, nothing else) has:
background: url("blue.png") repeat scroll 0 0 #00FF00;
color: #FFFFFF;
float: left;
font-size: 12px;
font-weight: bold;
height: 22px;
margin-top: 20px;
padding-top: 5px;
position: relative;
text-align: center;
text-transform: uppercase;
width: 210px;
This only occurs on IE 7 and 6. Is ok on all other browsers. Any help would be appreciated.
Add z-index: 50; to the parent (container) div.
Related
I have a little mark at the bottom right of my own code snippet page, which should also contain my website's favicon. I want to use ::before for this but I have no clue how to resize the image to stay inside the 1em by 1em pseudo-element.
div#snippet {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(200,200,200,0.3);
}
a#l2020-link {
color: blue;
background-color: lightgrey;
position: absolute;
bottom: 10px;
right: 10px;
border: 0px solid grey;
border-radius: 3px;
padding: 3px;
display: flex;
flex-direcion: row;
}
a#l2020-link::before {
content: url(https://www.lampe2020.de/favicon.ico);
width: 1em;
height: 1em;
display: inline-block;
}
<div id="snippet">
<!-- Imagine the code inputs and the iFrame to show the result here -->
Lampe2020.de
</div>
I want the favicon to be fully visible but shrunk down to 1em by 1em.
I've tried CSS object-fit but it had absolutely null effect on the image no matter what I set it to. overflow: hidden or overflow: clip kinda work but they obviously just cut off what's too much of the image and don't resize the image to fit.
You can set the content to "" and use background-image instead, and set the background-size to 1em.
div#snippet {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(200,200,200,0.3);
}
a#l2020-link {
color: blue;
background-color: lightgrey;
position: absolute;
bottom: 10px;
right: 10px;
border: 0px solid grey;
border-radius: 3px;
padding: 3px;
display: flex;
flex-direcion: row;
}
a#l2020-link::before {
content:"";
background-image: url(https://www.lampe2020.de/favicon.ico);
width: 1em;
height: 1em;
background-size:1em;
display: inline-block;
}
<div id="snippet">
<!-- Imagine the code inputs and the iFrame to show the result here -->
Lampe2020.de
</div>
I'm a beginner in Ionic Framework. Recently I have built a page with a swipe-back-button on the left of the navigation bar. This shifts the title a bit to the right: (I have added a red background to the title to illustrate this)
Not using position: absolute:
To center the title, I added the following css code:
ion-title {
font-weight: bold;
position: absolute;
top: 0;
left: 0;
padding: 0 90px 1px;
width: 100%;
height: 100%;
text-align: center;
background-color: red;
}
It works:
Using position: absolute:
The problem is that the title now "covers" the swipe-back button, making it impossible to click on the button.
Any solutions? Thank you in advance.
Try to add position:relative and some z-index value to your back button...
I have created a working snippet to illustrate your problem
div {
position: relative;
}
ion-title {
font-weight: bold;
position: absolute;
top: 0;
left: 0;
padding: 0 90px 1px;
width: 100%;
height: 100%;
text-align: center;
background-color: red;
box-sizing: border-box;
}
button {
width: 20px;
height: 20px;
background: green;
position: relative;
z-index: 99;
}
<div>
<button></button>
<ion-title>About</ion-title>
</div>
I'm building a menu with 100% width - and I'm trying to position one button on the left side and one on the right side.
This is what I have, however as you can see the button is not placed 8px from the right.
How would I go about it? Thanks!
#options-buttons {
height: 40px;
width: 100%;
}
.okay_button
{
position: relative;
top: 3px;
right: 8px;
background-image:url('http://i.imgur.com/RIIV8.png');
float: left;
display: block;
width: 68px;
height: 34px;
background-repeat: no-repeat;
outline: none;
}
.okay_button:hover
{
background-position: 0 -34px;
}
Use float right and right; jsFiddle
.okay_button
{
top: 3px;
right: 8px;
background-image:url('http://i.imgur.com/RIIV8.png');
float: right;
display: block;
width: 68px;
height: 34px;
background-repeat: no-repeat;
outline: none;
}
Working example (I replaced the background with text for demo purposes):
You are mixing float, display, and position incorrectly.
You simply need to change position: relative; to position: absolute; on your .okay_button, since that will force it to be relative to its container, not its otherwise normal position.
Working example: http://jsfiddle.net/zPkH8/3/
.okay_button
{
position: absolute;
...
}
I have a problem with css popup. I am hidden some content in span tags and show it when I hover over a text. But there is a overlap and the text in the second line is overlapping the popup. And the border for the popup is messed up. The content is on this link. And I am using following css:
.rest-cat
{
clear: both;
padding: 3px 40px 0 0!important;
width: 600px;
}
.rest-menuitem
{
position: static;
float: left;
width: 254px;
padding: 3px 5px 0 0!important;
border-top: 1px dotted #DDD;
}
.dishname{
position: absolute;
z-index: 0;
float: left;
width: 229px;
}
.dishprice{
position: relative;
float: right;
width: 25px;
}
.product
{
width: 600px;
padding: 0px 0px 20px 20px!important;
}
.dishname span
{
display: none;
text-decoration: none;
}
.dishname:hover
{
overflow: hidden;
text-decoration: none;
}
.dishname:hover span
{
display: block;
position: static;
top: 0px;
left: 170px;
width: 320px;
margin: 0px;
padding: 10px;
color: #335500;
font-weight: normal;
background: #e5e5e5;
text-align: left;
border: 1px solid #666;
z-index: 200;
}
Is there a easy fix for this? I already tried using position: relative; and added z-index to all the CSS tags. They didn't work and I am stuck on it for a day.
The reason your popups are being clipped is because of this CSS:
.dishname:hover {
overflow: hidden;
}
Removing that would be a good place to start.
Next, z-index only affects elements with a position property other than static. Use relative and they will render the same but the z-index will have an effect.
After that there are a lot of different things that could be affecting the layering I would start like #Michael Rader said by cleaning up your HTML, you have a lot of unnecessary wrappers.
I have designed a search box.
In Chrome/ Safari and IE, it displays as I want.
However, in Firefox, the search button isn't inline.
The code is
.form-search .button {
left: 356px;
position: absolute;
top: 4px;
Is there a way to add a -moz- line of code to set the left and top just for firefox?
EDIT - MORE CODE AND IMAGES
.form-search {
background: url("../images/searchbox.png") no-repeat scroll 0 0 transparent;
float: left;
height: 40px;
margin: 20px 0 0 20px;
position: relative;
text-align: center;
width: 400px;
border: 0;
}
.form-search .button {
position: absolute;
left: 356px;
top: 4px;
}
.form-search .input-text {
color: #847D7D;
font-size: 1em;
font-weight: bold;
left: 110px;
position: absolute;
top: 8px;
width: 230px;
border: 0;
}
That is the entire CSS for the search facility.
Firefox display
IE display
Thanks
You are having this problem because your elements are lacking display: inline-block; and you maybe should use relative positioning for this.