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.
Related
I created a drag and drop or sortable image using touch punch.. Everything works fine in chrome even in android. But it seems it is not working in Safari using iPhone..
https://jsfiddle.net/y05w1mog/
Might be an CSS issue.. Image should be draggable to one of the four options below.
td {
width: 200px;
vertical-align: top;
}
.box {
border: 2px inset #aaaaaa;
height: 240px;
overflow-x: hidden;
text-align: center;
padding: 10px;
overflow-y: auto;
}
.box img {
position: relative !important;
}
#div-images img {
height: 120px;
position: absolute;
top: 5px;
left: 0;
}
#div-images {
height: 100px;
width: 150px;
position: relative;
margin: 0 auto;
border: 3px double black;
padding: 5px;
}
th {
background-color: #538DD5;
color: white;
}
It turns out
containment: 'window',
from the touch punch is the one, not working in safari..
I am trying to create a custom shape in CSS3 but I am having problems with the position of the object at certain screen resolutions.
What I am trying to make:
CSS:
.foobar {
position: relative;
width: 100px;
background-color: #666733;
color: #ffffff;
border: none;
padding: 5px 0;
margin-left: 10px;
margin-bottom: 5px;
}
.foobar:before {
content: "";
position: absolute;
width: 110px;
height: 22px;
background: #666733;
padding-left: 0;
margin-left: -32px;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
z-index: -100;
}
The issue I am having is with the foobar:before at different screen resolutions looks off:
iPhone:
iPad:
Desktop:
How can I properly code the shape with CSS so that it will work with all screen sizes? I have attempted to create #media with an adjustment of margin-left but I was curious to know if there is a better way?
When you use position: absolute;, it's better to use top, left, right and bottom position properties. You will have consistency that way irrespective of the device. Look at the DEMO and try for yourself.
HTML
<div class="foobar"></div>
CSS
.foobar {
position: relative;
width: 150px;
height: 50px;
background: #666733;
}
.foobar:before {
content: "";
position: absolute;
top: 13px;
left: -15px;
width: 180px;
height: 24px;
background: #666733;
border-radius: 15px;
}
i have a menu that has the following css:-
#top-navigation {
padding: 45px 0 0 0;
position: relative;
z-index: 200;
float: right;
}
Now i have a notification that is displayed over the top of this menu with the css:-
.SmallBox {
position: absolute;
right: 0;
top: 20px;
padding-right: 30px;
width: 420px;
color: #fff;
font-family: 'Segoe UI',Tahoma,Helvetica,Sans-Serif;
z-index: 9999;
}
the problem is that due to the relative attribute of menu it is giving me problems and the notification box does not totally display over the menu in chrome.
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.
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.