OK so I have positioned images with borders, working fine in ie9 yet in ie8 for some reason the images are slightly padded right+bottom by a few pixels. I've searched for answers for a while now with no results. (If I take away positioning there's no padding)
Here is the img code and a img with class .image
img {
border: solid 8px white;
display: block;
}
.image {
position: absolute;
top: 580px;
left: 450px;
}
Any suggestions?
Are you using a CSS reset? have you tried zeroing out margins & padding to solve this problem:
img {
border: solid 8px white;
display: block;
margin: 0;
padding: 0;
}
.image {
position: absolute;
top: 580px;
left: 450px;
margin: 0;
padding: 0;
}
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've been trying to do an inset blur on an image, from what I was reading there are two ways that are common to do this. I've tried both ways.
What I have now, is I wrapped the image in a div, and was attempting to use z-index to place the div with the blur above the image, however, I am not seeing the div at all.
#mainpicdiv {
box-shadow: inset 0px 0px 30px rgba(255,0,0,0.9);
width: 100%;
margin-top: 3%;
position: relative;
z-index: 1;
}
#mainpic {
width: 100%;
margin-top: 3%;
margin: 0 auto;
padding: 0%;
position: relative;
z-index: -2;
}
You can do this with a full height and width psuedo-element added to the div that wraps the image. img tags do not support box shadows
#mainpicdiv {
position: relative;
}
#mainpicdiv:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset 0px 0px 30px rgba(255,0,0,0.9);
}
#mainpicdiv > img {
width: 100%;
display: block;
}
Working example: https://jsfiddle.net/hz70mc13/1/
The output of this below code DIV #imagemiddle is not stretching till the browser full width, I want the top tool bar has to be fixed and the below div to be position: relative and not absolute or fixed.
HTML
<div id="topbar"></div>
<div id="imagemiddle"></div>
CSS
#topbar {
position: fixed;
display: inline-block;
top: 0px;
left: 0px;
background-color: #2D2D2A;
border-bottom: 2px solid rgba(0,0,0,0.2);
height: 42px;
width: 100%;
z-index: 5;
overflow-x: visible;
overflow-y: visible;
}
#imagemiddle {
position: relative;
display: inline-block;
top: 40px;
background-color: #4D4D4D;
border-bottom: 2px solid rgba(0,0,0,0.2);
height: 44px;
width: 100%;
z-index: 0;
overflow-x: visible;
overflow-y: visible;
background-color: "red"
}
A simple solution, you need add margin:0; to the body in your css.
body{ margin:0;}
DEMO
Your browser's default body margin is the problem:
body {margin: 0;}
http://jsfiddle.net/E8uNY/
Consider using a reset spreadsheet or creating a custom one to avoid cross-browser CSS inconsistencies.
Also, when using words for CSS colors (red), don't put them inside quotes.
background-color: red;
Is there any way I could draw a trapezium span thing with text in it? Doesn't matter if the corners are rounded, in fact, I'd prefer it if they were. I know how to make an oval/circle with border-radius, but I'm stuck on the trapezium. Help please!
I did it pure css using pseudo-elements and skew css property with support border-radius: demo on dabblet.com
http://img135.imageshack.us/img135/9683/eedea21cb3bc438fb33c80c.png
html: <span>Trapezium</span>
css:
span {
display: block;
z-index: 1;
position: relative;
/* custom sizes */
width: 200px;
height: 50px;
}
span:before,
span:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: -1;
}
span:before {
transform: skew(25deg);
left: 25px;
}
span:after {
transform: skew(-25deg);
right: 25px;
left: auto;
}
UPD: demo without pseudo-elements
Use this css code
span {display:block;
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
I did it once, think it was something like this:
http://jsbin.com/ebejip/
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.