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.
Related
I have an old project JSP page with the following CSS block which formats the main form div
.container {
background-color: #f2f2f2;
padding: 20px;
position:absolute;
width: 400px;
min-height: 300px;
height: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -250px);
}
requirement is such that I need to get a border around this form and in between some text so I used Pseudo-element after with following css block
.container:after {
position: fixed;
content : '\00a0 \00a0 \00a0 Login to external function';
font-size: 1.3em;
font-weight: bold;
border-radius: 25px;
padding-top:15px;
top: -40px;
left: -25px;
right: -25px;
bottom: -25px;
border: black 2px solid;
border-spacing: 10px
}
I got the required output, but the form is freezing now, and I cannot click anything. Can you please help me know what I did wrong?
Pseudo-elements are treated as descendants of their associated element. That means by default they sit above their parent in the stacking order. Even though in this case the pseudo-element is transparent, it is still blocking the .container below, preventing you from clicking it.
To fix it, you can place the pseudo-element behind its parent (.container) by giving it a negative z-index value.
I am trying to make a replica of taco bell's website just for fun and as a challenge, and the replica website is private so no one will see it, anyways I am trying to make a side bar, it went good so far until this extra space (https://imgur.com/8soZSIg) appeared in the side bar, here is my css code (also I am a beginner):
.nav {
height: 84%;
width: 150px;
max-height: 84%;
position: fixed;
z-index: 1;
top: 137px;
left: 0;
background-color: #111;
max-width: 100%;
overflow-x: hidden;
padding-top: 0px;
padding: 0px;
padding-bottom: 0px;
min-width: 150px;
margin-bottom: 0px;
}
Try using display: inline-block it will work better since it will turm into an inline element with block element properties but also make sure to fix the max height and max width stuff because they are probably what is causing that space.
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.
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.
I want to display a noscript warning when users have javascript disabled, in the same way StackOverflow does.
I use this html:
<noscript>
<div id="noscript-warning">
Este sitio funciona mejor con JavaScript habilitado. Descubrí
cómo habilitarlo.
</div>
</noscript>
and this css:
#noscript-warning
{
font-family: Arial,Helvetica,sans-serif;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 101;
text-align: center;
font-weight: bold;
font-size: 12pt;
color: white;
background-color: #AE0000;
padding: 10px 0;
display: block;
}
#noscript-warning a
{
color: #FFFFC6;
}
#container
{
width: 98%;
margin: auto;
padding: auto;
background-color: #fff;
color: black;
border-style: solid;
border-color: #3E4F4F;
border-width: 1px 2px 2px 1px;
line-height: 130%;
}
where #container is the main content element of my template.
When the noscript tag is visible, it appears in front of some content. I don't want that, the content should be displayed below the warning.
How can I do that?
If you want the behavior of position: fixed AND need to push the initial content down from the top, you can include a second div in your noscript area. Give this div visibility: hidden and a height equal to the height of the div with position: fixed.
The problem is with you setting position: fixed on the warning. You can't really expect the page's content to move around that, since you're fixing it to the top of the browser window. What would happen when you scroll down? The whole page's content rearranges itself to go around the warning?
Do you want the warning to be stuck at the top of the browser window even if they scroll? If not, position: fixed isn't what you're looking for.