I have some div layers on my site that move to the wrong position when you navigate to the page (almost like the margins are being ignored?) this happens in most browsers i.e. Safari, FF, Chrome etc. Does anyone know why this would happen? Interestingly, the site seems OK locally and only seems to play up once I've uploaded it!! I'd appreciate any help/advice anyone can offer....
CSS:
#page-wrap-padding {
width: 1078px;
height: 700px;
margin: 0px auto 0px;
background-color: transparent;
}
#page-wrap {
width: 978px;
height: 610px;
margin: 35px auto 0px;
background: #dc000f;
overflow: hidden;
z-index:1000;
}
#guts{
margin: -15px;
overflow: hidden;
z-index: 2000;
}
#index-innards2{
position: absolute;
background: #dc000f;
margin: 0px 0px 0px 600px;
width: 378px;
height: 550px;
}
#index-innards{
position: absolute;
margin: 104px 0px 0px 230px;
width: 340px;
height: 390px;
}
HTML
<div id="page-wrap-padding">
<div id="page-wrap">
<div id="guts">
<div id="index-innards2">
Content here
</div>
<div id="index-innards">
More content here
</div>
</div>
</div>
</div>
I made a jsFiddle here: http://jsfiddle.net/FPRFJ/
Is it possible you are experiencing the default margins supplied by browsers?
Try adding this:
body
{
margin: 0;
padding: 0;
}
Related
I have applied a large box-shadow to a position: absolute <div>. Its parent <div> has overflow: hidden set which (from my understanding) should hide any overflowing box-shadow – and this works just fine on Chrome but for some reason not on MS Edge.
See the example here:
.outerbox {
width: 600px;
height: 600px;
background-color: red;
}
.innerbox {
width: 300px;
height: 300px;
margin-top: 150px;
margin-left: 150px;
display: table;
background-color: #fff;
position: fixed;
overflow: hidden;
}
.shadowbox {
position: absolute;
left: 50px;
width: 200px;
top: 50px;
height: 200px;
box-shadow: 0px 0px 0px 100px rgba(0, 0, 0, 0.85);
}
<div class="outerbox">
<div class="innerbox">
<div class="shadowbox">
</div>
</div>
</div>
https://jsfiddle.net/8u43mztw/
When viewed on Chrome it appears as one would expect like this:
But when viewed on MS Edge it appears as follows:
For some reason on Edge, setting overflow: hidden on the box parent to the box on which the box-shadow has been applied has no effect. Chrome has no trouble hiding the overflowing box-shadow. Am I doing something wrong here, or is there a workaround?
In Firefox also. Try to remove display: table; from .innerbox: in Firefox works fine.
.outerbox {
width: 600px;
height: 600px;
background-color: red;
}
.innerbox {
width: 300px;
height: 300px;
margin-top: 150px;
margin-left: 150px;
background-color: #fff;
position: fixed;
overflow: hidden;
}
.shadowbox {
position: absolute;
left: 50px;
width: 200px;
top: 50px;
height: 200px;
box-shadow: 0px 0px 0px 100px rgba(0, 0, 0, 0.85);
}
<div class="outerbox">
<div class="innerbox">
<div class="shadowbox">
</div>
</div>
</div>
I have an icon that is absolute positioned at bottom: 50px, while this works fine in every browser, Edge and IE are the exceptions. I understand there are a lot of problems with Microsoft's browsers and how they render differently. Here I see that the browser is treating the mid-way point of the 100vh div as the bottom. What I need help with is to position the icon in IE & Edge the same way it is in Chrome, Opera and Firefox. Thanks.
IE & Edge
Chrome, Firefox, Opera
HTML
.content1 {
height: 100vh;
width: 100%;
position: relative;
top: 0;
z-index: 99;
}
/* this is the icon I was talking about */
.dropdown_blue1 {
width: 25px;
padding: 20px;
position: absolute;
margin: auto;
z-index: 99;
left: 0;
right: 0;
bottom: 50px;
}
<div class="content1"><img class="dropup_blue1" src="../assets/dropup_blue.png" alt=""><img class="dropdown_blue1" src="../assets/dropdown_blue.png" alt=""></div>
Try with this one, i have changed margin: auto; to margin: 0 auto;
.content1 {
height: 100vh;
width: 100%;
position: relative;
top: 0;
z-index: 99;
}
.dropdown_blue1 {
width: 25px;
padding: 20px;
position: absolute;
margin:0 auto; /* change here */
z-index: 99;
left: 0;
right: 0;
bottom: 50px;
}
<div class="content1">
<img class="dropdown_blue1" src="../assets/dropdown_blue.png" alt="">
</div>
I had a similar problem with the two browsers, position absolute was crazy. In style section I had.
td.Cir {width:7in; height:7in; background-image:url('clock.png');
background-size: 45%; background-position: center;
background-repeat:no-repeat; position:relative; font-size:28pt;
min-width:7in; max-width:7in; text-shadow: -1px 0 blue, 0 1px blue,
1px 0 blue, 0 -1px blue;}
In a table I had
</td></tr><tr><td class='Cir'>...</td><td>...</td></tr>
I changed code to
<table><tr><td class='Cir'>...</td><td>...</td></tr></table>
and Edge and IE now work fine
I fixed it! Simply use margin-left: auto; and margin-right: auto; instead of margin: auto;
I have the following slider in my asp.net page:
<div class="sliderContent">
<div id="sliderFrame">
<div id="slideIT" class="sliderHolderMain">
<div u="slides" class="sliderHolder">
<div>
<img u="image" src="theImages/slider/1.jpg" />
<div u="caption" t="CLIP|L" class="sliderCapMain">
<div class="sliderCapBG"></div>
<div class="sliderCapText">
<span class="sliderCapTextHdr">Healthy Cooking</span>
<br />
<span class="sliderCapTextFtr">Discover simple solutions to cook delicious and healthy meals for you and your family. Cooking tips, how-to guides and more!</span>
</div>
</div>
</div>
<div>
<img u="image" src="theImages/slider/2.jpg" />
<div u="caption" t="CLIP|L" class="sliderCapMain">
<div class="sliderCapBG"></div>
<div class="sliderCapText">
<span class="sliderCapTextHdr">Healthy Cooking</span>
<br />
<span class="sliderCapTextFtr">Discover simple solutions to cook delicious and healthy meals for you and your family. Cooking tips, how-to guides and more!</span>
</div>
</div>
</div>
</div>
</div>
<div style="width: 1100px; min-width: 1000px; height: 10px; background: url(theImages/dropShadow.png) repeat-x; position: relative; margin: 0 auto; bottom: 0;"></div>
</div>
</div>
CSS:
.sliderContent
{
width: 100%;
overflow: hidden;
margin: 0 auto;
text-align: center;
}
#sliderFrame
{
position: relative;
width: 100%;
margin: 0 auto; /*center-aligned*/
}
.sliderHolderMain
{
position: relative;
margin: 0px;
padding: 0px;
float: left;
top: 0px;
left: 0px;
width: 1100px;
height: 337px;
overflow: hidden;
}
.sliderHolder
{
cursor: move;
position: absolute;
left: 0px;
top: 0px;
width: 1100px;
height: 337px;
overflow: hidden;
}
.sliderCapMain
{
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 337px;
text-align: center;
}
.sliderCapBG
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.75);
filter: alpha(opacity=75);
}
.sliderCapText
{
position: absolute;
top: 5%;
left: 5%;
color: #000;
text-align: left;
}
.sliderCapTextHdr
{
color: #0074C9;
font-weight: normal;
}
.sliderCapTextFtr
{
color: #000;
font-size: small;
}
Attached image of what it looks like:
As you can see the shadow is at the top of the slider pointed by the red arrow.
How can I modify the CSS so it appears below the slider, giving it a 3D view
2 ways: in your HTML, you have an inline style (eeeeew!!!) as follows:
<div style="width: 1100px; min-width: 1000px; height: 10px; background: url(theImages/dropShadow.png) repeat-x; position: relative; margin: 0 auto; bottom: 0;"></div>
and at the same time, your slider has a fixed height, so it's really easy to know the size.
So you can do the following:
1) remove the inline styles. Really.
2) add a class to that div, let's say .shadow
3) add the following styles to your CSS style sheet:
.shadow{
width: 1100px;
min-width: 1000px;
height: 10px;
position: relative;
margin: 0px auto;
top: 327px; //it was originally 327 but corrected to 337
background: url('theImages/dropShadow.png') repeat-x scroll 0% 0% transparent;
}
3.a) now you can use what you have now, which is a .png image (but you'll have to flip it vertically)
3.b) or you can use box-shadow property:
.shadow{
width: 1100px;
min-width: 1000px;
height: 10px;
position: relative;
margin: 0px auto;
top: 327px; //it was originally 327 but corrected to 337
box-shadow: -20px -5px 6px rgba(0, 0, 0, 0.75) inset;
}
EDIT: I see you edited my answer and somehow the edit was approved, but the edit is incorrect, so I'll explain it so you also understand how it works: the top position is the height of the container element (337px) minus the height of the div with the shadow (10px), so position is 327px. If you want a shadow div with (say) 50px height, then position would be 287px (337-50) and so on. Explaining this because this answer may be of help for you but also for other people as well, and having this corrected would end with the whole solution not working (literally disappearing off sight)
Im currently building a website with a footer which should be sticked to the bottom, on my desktop (with chrome browser) it works fine, but when i'm trying the website on a mobile device, there is a little spacing underneath the footer, my question is how I can fix this?
My website can be found at: http://block-smash.com/beta and my code is as follows:
<div id="wrapper">
<div id="header">
</div>
<div id="nav">
<center>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
</center>
</div>
</div>
<div id="footer">
© Mickael van Schie
</div>
and here my CSS:
html{
position: relative;
min-height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
body{
background: rgb(230,230,220);
overflow-x: hidden;
margin: 0px;
}
#wrapper{
height: 100%;
width: 100%;
}
#header{
width: 100%;
height: 50%;
background: rgb(100,200,100);
}
#nav{
height: 125px;
margin-left: auto;
margin-right: auto;
margin-top: -62px;
}
#footer{
width: 100%;
height: 15px;
background: rgb(100,200,100);
text-align: center;
padding: 5px;
font-family: arial;
color: rgb(230,230,220);
position: absolute;
bottom: 0px;
}
.circle{
height: 125px;
width: 125px;
border-radius: 90px;
background-color: white;
border: 5px solid rgb(70,130,70);
display: inline-block;
margin: 0px 40px 0px 40px;
position: relative;
}
I got some jquery in the website aswell, but that is not necessary for the footer or any height in the page.
I've altered the code a little for you.
I think that the problem is with the body not being the maximum height. Therefore, the footer might stick to the bottom of the body, which stops somewhere near those circles.
The code I changed is the following:
html {
position: relative;
min-height: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
body {
background: rgb(230, 230, 220);
overflow-x: hidden;
margin: 0px;
position: relative;
min-height: 100%;
height: auto;
}
As you can see, I gave html a solid height, and added a height and a min-height to the body, as well as a position relative.
The fiddle can be seen here.
Remove height property from your footer class.
#footer{
width: 100%;
/* height: 15px; */
background: rgb(100,200,100);
text-align: center;
padding: 5px;
font-family: arial;
color: rgb(230,230,220);
position: absolute;
bottom: 0px;
}
i have the following simple script, but it doesn't work in IE7
<div id="content">
<div id="left"></div>
<div id="right"></div>
<div id="bottom_menus">any text here...</div>
</div>
and CSS
#content
{
margin: 0 auto;
padding: 0;
width: 980px;
background-color: lime;
height: 800px;
overflow: hidden;
position: relative;
}
#left
{
width: 275px;
float: left;
background-color: olive;
margin: 0px 0px -5000px 0;
padding: 0 0 5000px 0;
min-height: 400px;
}
#right
{
width: 704px;
float: left;
background-color: red;
margin: 0px 0px -5000px 0;
padding: 0 0 5000px 0;
min-height: 400px;
}
#bottom_menus
{
background-color: orange;
height: 15px;
position: absolute;
bottom: 0px;
width: 100%;
}
why position absolute doesn't work?
thanks in advance
for absolute position to work, you must specify both direction: eg. top & left, or bottom & rightetc...
For you footer (bottom_menus) to take all space you need to set:
#bottom_menus {
background-color: orange;
height: 15px;
position: absolute;
left: 0;
right: 0; //assuming you need the footer to take the whole width
bottom: 0;
width: 100%;
}
ps: small remark, you dont need to set px unit when value is 0.
You haven't specified a left, so it's defaulting to 0px; Since you have a margin of -5000px on the box, I'm guessing it is working, and the bottom_menus div is off the screen to the left. Absolute positioning would ignore the padding of its parent container. Try setting left: 5000px, assuming you need the negative margin and positive padding. What are you trying to accomplish with that?