I have been working on debugging our web app for days now, and I am not sure what is causing it to crash in mobile safari. The app works wonderfully on the iPad2, but for some reason it crashes on the iPad3. I commented out every piece of code, and what seems to be the problem is absolute positioning on an element. Here is my code for the section.
.page .main-content .study-bo {
background: #F4F4F4;
border-top: 1px solid #D1D1D1;
border-bottom: 1px solid #D1D1D1;
width: 644px;
position: absolute;
top: 501px;
left: 0px;
padding: 30px 40px;
z-index:500;
-webkit-transition: top .5s ease-in-out;
}
.page .main-content .study-bo .text {
width: 100%;
height: 100%;
position: relative;
left:auto;
}
.page .main-content .study-bo p {
font-family: "FrutigerRoman";
font-size: 12px;
color: #000000;
margin-bottom: 15px;
}
.page .main-content .study-bo .study-design {
width: 92px;
height: 20px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(199, 199, 199, 1)), color-stop(100%,rgba(167, 167, 167, 1)));
-webkit-border-radius: 5px 5px 0px 0px;
border: 1px solid #999;
font-family: "FrutigerItalic";
font-size: 13px;
color: white;
text-shadow: 1px 1px 0px #8E8E8E;
filter: dropshadow(color=#8e8e8e, offx=1, offy=1);
text-align: center;
padding-top: 4px;
-webkit-box-shadow: inset 0px 1px 0px 0px #e5e4e4;
position: absolute;
top: -26px;
font-style: italic;
z-index: 50;
left: 44px;
}
.page .main-content .study-bo .study-design .btn.active {
background: #6c6a6a;
text-shadow: 1px 1px 0px #434343;
filter: dropshadow(color=#434343, offx=1, offy=1);
-webkit-box-shadow: inset 0px 1px 0px 0px #9e9d9d;
}
The part in the code that is making the app crash is:
position: absolute;
top: 501px;
left: 0px;
I am not sure if this is an apple bug? I have multiple elements positioned absolute with no problems. If I comment out those three lines (and only those three lines), the app works. I have tried commenting out other sections of my code and keeping those three lines in, and it doesnt work. Anyone have any suggestions?? Thank you!
It could be a bug, but it's hard to say without seeing and exploring the webapp first-hand. I would try to fiddle with the layout to try to:
get relative positioning to work, instead of absolute,
using percentages instead of pixels in the top and left attributes,
working with float:left or float:right, with margins or padding, instead of absolute positioning,
apply a CSS reset/normalizer before your other CSS, like normalize.css, to see if that magically fixes the problem,
or as a last resort, look into an alternative layout that doesn't force you to use absolute positioning here.
These are all shots in the dark, but maybe they'll help.
Related
I created a horizontal timeline with dots for each information, however if enough "dots/information" are created the body width needs to be able to expand to make the dots continue on the same line of the timeline instead of moving down a line because of the limited width of the page.
I tried giving the body a larger width, it does fix the problem but I would much rather have the width working dynamically to correspond with the timeline's dots. So if there is only a few dots on the timeline, the page wont have to be any wider, but if there is a lot then the page width should expand.
Here is the css of my timeline.
The time is implemented with PHP and HTML. The dots are created through a simple php sql loop.
div#timeline3 {
background-color: lightblue;
margin-top: 150px;
height: 12px;
width: 100%;
top: 0px;
position: relative;
}
div#timeline3 .inside {
position: absolute;
height: 4px;
background-color: #fff;
width: 0%;
top: 3px;
left: 0;
}
div#timeline3 .dot {
z-index: 99;
transition: 0.3s ease-in-out;
width: 52px;
height: 52px;
border-radius: 50%;
position: relative;
top: -20px;
margin-left: 220px;
float: left;
text-align: center;
cursor: pointer;
-webkit-box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
-moz-box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
box-shadow: 8px 0px 05.3px -8px black, -8px 0px 05.3px -8px black;
}
div#timeline3 .dot:nth-child(1) {
left: 1%;
background-color: lightblue;
}
Okay, hi, I feel like this is a very silly question, and I've found a lot of questions like it, but none of the answers seemed to work for me.
My issue is that have one div (taskbar) and inside of it another div (taskbar-bar) and I want taskbar-bar to stay within taskbar. I tried putting position on absolute and relative and it didn't seem to work at all, it's always underneath the taskbar div. I could push it up with top, but I don't feel like that's the way to go right now. I don't know, though, I'm honestly very new to CSS and HTML and still am learning.
Here's a jsfiddle of my code: https://jsfiddle.net/5zghzczs/3/
.taskbar {
width: 100%;
height: 40px;
box-shadow: 0px 1px 0px 0px #C2C5CA inset, 0px 2px 0px 0px #FFF inset;
background-color: #C2C5CA;
position: absolute;
left: 0;
bottom: 0;
}
#taskbar-start {
margin-top: 4px;
margin-bottom: 2px;
margin-left: 2px;
width: 90px;
height: 33px;
background-color: #C2C5CA;
cursor: pointer;
}
.taskbar-start-inactive {
box-shadow: -1px -1px 0px 0px #000 inset, 1px 1px 0px 0px #FFF inset, -2px -2px 0px 0px #868A8E inset;
}
.taskbar-start-active {
box-shadow: -1px -1px 0px 0px #FFF inset, 1px 1px 0px 0px #000 inset, 2px 2px 0px 0px #868A8E inset;
}
.taskbar-start-frame-active {
margin-top: 2px;
margin-left: 2px;
width: 84px;
height: 27px;
border-style: dotted;
border-width: 1px;
position: absolute;
}
.taskbar-start-logo {
margin-top: 6px;
margin-left: 3px;
width: auto;
height: 20px;
-webkit-user-select: none;
}
.taskbar-start-text {
margin-top: 10px;
margin-left: 5px;
display: inline;
font-size: 12px;
letter-spacing: -2px;
-webkit-user-select: none;
font-family: "Press Start 2P";
position: absolute;
}
.taskbar-bar {
height: 35px;
width: 2px;
background: green;
margin-left: 100px;
}
<div class="taskbar">
<div id="taskbar-start" class="taskbar-start-inactive">
<div id="taskbar-start-frame">
<img class="taskbar-start-logo" src="img/logo.png" />
<div class="taskbar-start-text">Start</div>
</div>
</div>
<div class="taskbar-bar"></div>
Your problem is that you are using margin-left, which is trying to give a margin in between one div and the other. Here is a new JSFiddle where I set the position to absolute, changed the margin-left to left, and added top: 0px; to set it to be at the top (overlaying the other div).
.taskbar-bar {
position: absolute;
top: 4px;
left: 100px;
height: 35px;
width: 2px;
background: green;
}
I think the best way to do this is to make the parent a flexbox container.
This will position all children in a row.
display: flex;
See https://jsfiddle.net/5zghzczs/7/
Read more about flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Change the "display" of taskbar-start and taskbar-bar to "inline-block"
.taskbar-start, .taskbar-start {
display: inline-block;
}
fit-content worked for me like a charm when dynamic text was forcing my modal wider.
max-width: fit-content;
More on fit-content https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content
I'm trying to recreate this image in CSS.
This is what I got from experimenting, so far. I used box-shadow to act as the second box. I'm not sure if there's a better way to do this?
h4 {
font-family: sans-serif;
text-transform: uppercase;
text-align: center;
border: solid 3px black;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
color: black;
letter-spacing: 2px;
padding: 20px 15px;
background: white;
box-shadow: 10px 5px 0px 0px #ffffff, 11px 7px 0px 2px #000000;
}
<h4>3. Scouting for a location</h4>
You can achieve this via absolutely position pseudo element. Also avoid property duplication via CSS inheritance.
.border {
text-align: center;
border: solid 3px black;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
color: black;
letter-spacing: 2px;
padding: 20px 15px;
margin: 15px 15px;
background: white;
position: relative; /* new */
}
/* new */
.border:after {
content: "";
position: absolute;
display: block;
background: inherit;
border-radius: inherit;
border: inherit;
left: 2px;
top: 2px;
width: 100%;
height: 100%;
z-index: -1;
}
<div class="border">3. Scouting for a location</div>
The concept behind using box-shadow is that two shadows, one white and one black, overlap to simulate a second black border. But the black shadow is only visible in the direction from which it is offset from the white shadow, so a gap is apparent between the original border and the black shadow (as shown in the OP's original post).
The "spread radius" of the black shadow could be utilized to eliminate this gap (cleverly demonstrated by Nirav Joshi), but then the curvature of the corners is amplified and the two borders look different.
To duplicate the original border, I'd use ::after to generate an absolutely-positioned pseudo-element and use z-index to place it behind the original element. To further ensure that the border is duplicated exactly, I like Vadim Ovchinnikov's idea of inheriting the border color and radius from the original element.
.border {
position: relative;
text-align: center;
border: solid 3px black;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
color: black;
letter-spacing: 2px;
padding: 20px 15px;
margin: 15px 15px;
background: white;
}
.border::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 3px;
left: 3px;
border: solid 3px black;
border-radius: 5px;
z-index: -1;
}
<h4 class="border">3. SCOUTING FOR A LOCATION</h4>
Try this example
Hope it will help you.
.border {
text-align: center;
border: solid 3px black;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
color: black;
letter-spacing: 2px;
padding: 20px 15px;
margin: 15px 15px;
background: white;
-webkit-box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000;
-moz-box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000;
box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000;
}
<div class="border">Title</div>
EDIT
Here now you can see that i made box-shadow to 3px and no longer right side corner.
Use an absolute positioned ::after or ::before pseudo element and have its z-index lower than the element itself.
I've transparent bar which has conflict with <div id="content">
When position:relative;of #content is active the page looks like this:
When position:relative;of #content is missing transparent bar is okey
http://jsfiddle.net/t0p95q9c/
How to make that bar was transparent with relative position of my content?
You need property z-index:1 to #navigation, as LcSalazar says
and you also need add z-index:2 to .MetroMenuBox, instead of invalid 999px (px is not a valid)
#navigation {
z-index:1;
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
.MetroMenuBox{
position: fixed;
background-color: #111111;
padding-left: 5px;
padding-right: 5px;
z-index: 2;
}
http://jsfiddle.net/t0p95q9c/2/
When you specify a position property, the element is affected by the z-index properties.
So, give the navigation a high z-index value, that would place it in front of every other positioned elements, like:
{
z-index: 100;
}
http://jsfiddle.net/t0p95q9c/1/
check this out:
http://jsfiddle.net/t0p95q9c/3/
#content {
z-index: 1;
}
#navigation {
z-index: 2;
}
The idea is to use a bigger integer as the z-index of the layer on top.
I'm trying to insert a data-icon to two input fields, but they keep shifting my input fields to the right, like they where adding a margin-left to it.
I'm using z-index:2 to the icons in order to keep them floating above the fields and they do, but the added margin is still there.
Here's my css:
#loginBox input#username, #loginBox input#password {
height: 20px;
width: 120px;
padding: 5px 5px 5px 32px;
border: 1px solid rgb(178, 178, 178);
box-sizing : content-box;
border-radius: 3px;
box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
transition: all 0.2s linear;
}
#loginBox [data-icon]:before {
content: attr(data-icon);
font-family: FontomasCustomRegular;
color: #999;
position: relative;
left: 25px;
z-index: 2;
}
And here's a screenshot:
Any thoughts?
Thanks.
Sanjeev and Stéphanie Walter's code in nearly identical
http://www.infotuts.com/email-verification-php/
http://tympanus.net/codrops/2012/03/27/login-and-registration-form-with-html5-and-css3/
[data-icon]:after {
content: attr(data-icon);
font-family: 'FontomasCustomRegular';
color: rgb(106, 159, 171);
position: absolute;
left: 10px;
top: 35px;
width: 30px;
}
position: absolute;