Apparently, elements with position:absolute nested in a span with position:relative render differently in Firefox and Chrome. I have two such elements in a span with position:relative that I need to overlay and the problem is that I can't overlay them in both Chrome and Firefox.
Here are images describing the issue:
Firefox
Chrome
CSS:
.csv-upload-btn{
position:relative;
margin: 0 0 10px 4px;
height:20px;
width: 54px;
#id_uploaded_file {
position:absolute;
z-index:2;
opacity:0;
height: 16px;
width: 47px;
}
.upload-btn {
background: url(images/btn-upload-bg.png) repeat-x 0 0;
position: absolute;
padding: 0 5px;
border-radius: 3px;
color: #fff;
width:47px;
}
}
EDIT: I understand this isn't a lot to go on, but unfortunately, this is all I can legally share. Any ideas and suggestions would be appreciated. I will provide more details if/when I can get a hold of my partner
Set your #id_uploaded_file to top: 0, left: 0. It is absolutely positioned but you haven't specified the position.
#id_uploaded_file {
position:absolute;
top: 0;
left: 0;
z-index:2;
opacity:0;
height: 16px;
width: 47px;
}
HTH.
Related
Having an issue I don't understand. The only way I've been able to center a button on my page perfectly across all devices is if I apply a width: 100% to it.
Issue with this however, is it then makes a sprawling button, way too wide. I'd like to cut it down. The problem is, anytime I get rid of the width: 100% in any way, it makes the perfect button position go haywire.
Any thoughts on how I can have my button centered, but also not super wide and sprawled out. Thank you. -Wilson
link to site: http://www.wilsonschlamme.com/test3.html?
CSS:
img {
width:100%;
max-width:500px;
max-height:340px;
box-shadow: 5px 5px 5px grey;
border-style: groove;
border-width: 1px;
position: absolute;
top: 107px;
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
width: 100%;
position: relative;
top: 600px;
}
#ShowText{
width: 800px; /* change to your preferences */
overflow:hidden; /* older browsers */
position: absolute;
margin-top: 500px;
text-align: center;
margin-left: -140px;
font-size: 18px;
font-family: vendetta, serif;
line-height: 25px;
}
h1{
position: absolute;
top: 5px;
font-size: 250%;
width: 800px; /* change to your preferences */
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
#wrapper {
width: 500px;
margin: 0 auto;
}
take a look at this site there's a complete guide to centering a div.
http://www.tipue.com/blog/center-a-div/
I don't know what's your base using absolute positioning for mostly of your element, but to answer your issue, give text-align:center; to #wrapper, then give text-align:left for each of #wrapper children, except the button.
My nivoslider slideshow on my index page shows us correctly in chrome, IE 10 and opera.
Only in Firefox it shows us up on the right side.
Here is my site: http://www.colombian-emerald-jewelry.com/
How can I fix this ?
I appreciate your help
You can also just add float:left; to the nivoSlider class:
.nivoSlider {
float: left;
height: auto;
overflow: hidden;
position: relative;
width: 100%;
}
Positioning is the way I got it working, in both browsers try this:
Add:
.slider-wrapper {
height: 350px;
position: relative;
}
Edit:
.theme-default .nivoSlider {
background: url("loading.gif") no-repeat scroll 50% 50% #FFFFFF;
box-shadow: 0 1px 5px 0 #D3D3D3;
position: absolute;
}
.theme-default .nivo-controlNav {
bottom: 0;
clear: both;
left: 45%;
overflow: hidden;
padding: 0;
position: absolute;
}
In case anyone meets the same problem, but wants to avoid using float (it forces using clearfix if your slider is let's say above the main content of page), the clear: both works even better.
.nivoSlider {
height: auto;
overflow: hidden;
position: relative;
width: 100%;
clear: both
}
I am having some problems with my DIV, it wont display over a a DIV that has a web user control in it. Below you can find my css. I believe I have done everything right and am hoping that someone can maybe see an error that I have made and help me out. If you need any other code let me know. I also wonder if its just IE rendering it wrong? Thanks for looking.
The Popup CSS:
{
background: #ececec;
position:absolute;
top: 236px;
left: 201px;
height: auto;
width: 280px;
border: solid 1px gray;
z-index: 50;
text-align:left;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 15px;
font-size: 8pt;
}
The Activity DIV (same the div above just changed position)
{
border: solid 2px #A9C5EB;
position: absolute;
top: 353px;
left: 290px;
width: 710px;
height: 227px;
font-size: small;
overflow: scroll;
overflow-x: hidden;
background-color: #F8FBFE;
z-index: 2;
}
To know the HTML is essential to fix your problem.
What is the html that contains your popup? Is it relative to the body tag or some other element? Is the containing element position: relative;?
Try setting the containing element's z-index and position:
#my-container {
position: relative;
z-index: 1;
}
See this SO post about absolute positioning.
On a side note, check out IE-7.js which fixes many IE browser issues, including - AFAIK - this bug.
I am using sprites to control two graphical navigation elements. The CSS I have written works perfectly in Chrome, but fails in FF and IE.
The CSS is:
a.gallery-left{
margin-top: 5px;
background: url('arrows_sprited.png') 0 0px;
width: 45px;
height: 34px;
overflow: hidden;
float: left;
}
a.gallery-left:hover {
background: url('arrows_sprited.png') -46 0px;
cursor: pointer;
zoom: 1;
}
a.gallery-right{
margin-top: 5px;
background: url('arrows_sprited.png') -133 0px;
width: 46px;
height: 34px;
overflow: hidden;
float: right;
}
a.gallery-right:hover {
background: url('arrows_sprited.png') -89 0px;
cursor: pointer;
zoom: 1;
}
Invoked in the html document by this:
<a class="gallery-left"></a>
<a class="gallery-right"></a>
Why is it failing in FF?
When I examine the element with firebug, the second is not visible (but it is in the first . Very strange.
any ideas?
thank you very much!
add the px after the offset values.
background: url('arrows_sprited.png') 0px 0px;
background: url('arrows_sprited.png') -46px 0px;
background: url('arrows_sprited.png') -133px 0px;
background: url('arrows_sprited.png') -89px 0px;
In the first it worked because the value is 0 which is universal in all unit types.
Inline elements do not honor width or height values. They will have exactly the width and height that fits whatever text they contain, in this case an empty string.
Either change the <a> to <div> or make it display: block.
When I use the folowing CSS code on Firefox, I get a gap between the banner and the top of the screen. How can I avoid this?
#container1
{
position:absolute;
left: 0px;
right: 0px;
width: 1000px;
height: 255px;
margin: 0;
}
#logo1 {
background:#FFFFFF;
margin: 0;
border: 1px solid red;
position:absolute;
left: 0px;
top: 0px;
width: 200px;
height: 250px;
}
#Banner1 {
background: #1071A6;
position:absolute;
left: 200px;
top: 0px;
width: 789px;
height: 250px;
vertical-align:top;
margin: 0; border: 1px solid red;
}
body{margin:0 padding:0;}
should do the trick.
a gap between the banner and the top of the screen
Have you set the body's margin and padding to 0 as well?
I would recommend using a reset stylesheet like this for every design you do. It guarantees a clean slate on every browser. Any changes you make will look pretty much the same in every browser after using a reset, so you can avoid problems like these.
Use a reset stylesheet to set all default values to 0 in all browser. Make sure this is the first stylesheet in order, if you have problems after applying the stylesheet then it'll make it much easier to fix.