I have a DIV which is displayed on top of images of items that are for sale on a portfolio website. This works fine in standard browsers, but when it comes to older browsers (the dreaded IE) for some reason the DIV is pushed to the right.
Any help would be appreciated
This is the code for the for-sale banner;
.post .forsale {
width: 70px;
height: 75px;
position:absolute;
margin-top: -10px;
margin-left: -8px;
display: none;
background-image: url(images/fs.png);
background-repeat:no-repeat;
}
This is the code for .post
.post {
text-align: center;
overflow: hidden;
width: 200px;
height: 380px;
border: 1px solid #ccc;
-webkit-border-radius: 10px;
border-radius: 10px;
display: inline-block;
margin: 0 10px 62px;
background: #e0e0e0;
vertical-align: top;
*display: inline;
zoom: 1;
}
Related
Considering the next code:
.test {
position: relative;
padding: 0;
margin: 0;
border: 0;
background: initial;
font-size: 11px;
border: 1px solid black;
margin-left: 20px;
}
.test::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: red;
}
<button class="test">Some Text Content</button>
In Chrome it's rendered like (hot it is required):
In Safari it's rendered like:
So, in Safari it's not vertically centered and the block has different size.
The main question is how to center it vertically in Safari?
The secondary question is how to make blocks absolutely similar?
I tried display: flex; align-items: center;, vertical-align: center;, changing line-height – nothing from that seemed to work...
.btn {
border:1px solid #000;
box-sizing:border-box;
color:#000;
display:inline-block;
font:1rem/1.5 sans-serif;
height:2rem;
padding:0 1rem;
text-align:center;
vertical-align:middle;
width:auto;
}
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..
In my project,I use bootstrap and less. Although when I test the template, it look beautiful, but when test it using ieTest, I found something wrong.
The pictures are, from top to bottom, Chrome 22, IE9 and IE6:
I found all I can find, eg "three pixel jog", but I still can't solve it.
here is the html code:
<p class="top-tag">
<span class="floatbutton">
<
>
</span>
down
ask phone
time /
rate
<b>1,10</b>
</p>
here is the css:
p.top-tag {
margin-top: 25px;
font-size: 12px;
width: 100%;
a.down, a.ask-detail {
display: inline-block;
height: 25px;
text-align: center;
line-height: 25px;
border: 1px solid #dddddd;
color: #2f2725;
}
a.down { width: 44px;}
a.ask-detail {
width: 90px;
margin: 0 43px auto 20px;
}
b {
margin-left: 284px;
display: inline-block;
}
span.floatbutton {
float: right;
width: 39px;
//display: inline-block;
overflow: auto;
zoom: 1;
//for the IE6
//---
//_overflow: hidden; zoom: 1;
//---
height: 25px;
margin: 4px -3px auto 0;
a {
display: inline-block;
vertical-align: top;
width: 13px;
height: 13px;
border: 1px solid #ddd;
padding-left: 4px;
padding-bottom: 4px;
}
a.left-button {
float: left;
display: inline;
border-right-style: none;
*margin-top: 1px;
}
}
}
I use the bootstrap.css and css.less at the beginning of the template.
The question is why the pixel under the IE, they can't work. And the IE6 they can't display, and float far.
Thanks!
I am having an issue with my divs in Internet Explorer. I have a three column layout and it displays correctly in all browsers (chrome, firefox, safari) except for Internet Explorer. In IE, the middle div displays at the bottom of the page instead of between the sidebars.
I've been trying for days to figure out what the issue is. I'm sure it's something to do with my CSS, but I'm not sure.
Any help would be appreciated!
My website is: http://www.onedirectionconnection.com
And here's the CSS:
div#container {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 1125px;
text-align: left;
}
div#header {
clear: both;
height: 500px;
margin-top: 0px;
padding: 0px;
border: 0px
}
div#navi {
text-align: center;
background: #FFFFFF;
clear: both;
height: 60px
margin-left: 13px;
margin-right: 13px;
margin-bottom: 10px;
padding-left: 39px;
border-bottom: 3px solid #FF0000;
border-top: 3px solid #FF0000;
}
div#left {
float: left;
width: 320px;
}
div#right {
float: right;
width: 320px;
}
div#middle {
padding: 0px 325px 5px 325px;
margin: 0px;
}
I just included the parts I think are relevant to the problem, but anyone can feel free to serf the code on my website if necessary!
Increase width of container or decrease some margins.
#middle
{
padding: 0px 0px 5px 0px;
margin: 0px;
overflow: hidden;
width: 485px;
float: left;
}
You need to work on the positioning of the DIVs. The left div is ok. Add middle div after left div and then right div.
Add float: left; width: 400px; margin: 0; to middle. And adjust the widths of middle DIVs child elements.
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.