If you go here, let the input fields empty and press Submit, you will notice that Name input is over the "The field is required" popup.
I have tried to apply z-index and other css strange "solutions" but I am simply unable to fix that...
Can you please suggest something?
Try changing....
formError {
position: absolute;
top: 300px;
left: 300px;
display: block;
z-index: 5000;
cursor: pointer;
}
to:
formError {
position: absolute;
top: 300px;
left: 300px;
display: block;
z-index: 9999;
cursor: pointer;
}
in the validationEngine.jquery.css file
EDIT: Also you might want to change
#contentContainer .content{ position:absolute; left:0px; top:0px; width:680px; z-index:999999; margin-bottom:20px;}
To a z-index that's more reasonable.
.emailformError {
z-index: 999999;
}
Will do it :)
(All I have done is brought the bubble higher in the z-index (brought it above the other layers).)
Related
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
}
Hi all I seem to be having serious trouble getting my div to go exactly where I need it to. Here is a link to the website.
As you can see my slideshow is supposed to be in the frame, but in now way shape or form am I able to make it do so.
here is the link to the style sheet that Im working with.
Some help would be much appreciated, I've googled page upon page and can't seem to find any solution so I can to the place that I've found help from before.
#slideshow {
position: relative;
left: auto;
right: auto;
top: 119px;}
This CSS looks horrible (width of #content, left:auto; margin-top: auto...)
My suggestion is to make a fresh start and get rid of all those autos.
Have you tried removing the "margin-top: auto;"?
#content {
height: 374px;
width: 524;
margin-right: auto;
margin-left: auto;
margin-top: auto;
}
A quick fix would be to add
.ws_images{
margin-top: 122px;
}
This'll fix what ails you:
#contentbox {
position: relative;
}
#content {
position: absolute;
left: 100px;
top: 100px;
}
Personal preference:
#wowslider-container1 {
border: none;
}
So I've set up some div's on my page and while they look fine to me other people log on and the div will be improperly placed. I've looked and looked but can't find out why it's not loading the same for me, so if anyone can help in this it'd be appreciated. The div not showing correctly is
div.head-content
{
display: block;
position: absolute;
top: -64px;
left: 92.7%;
margin-left: -360px;
width: 131px;
height: 46px;
}
The reason for this is either browser comparability or some alignment mistake.
if you are using wrapper make
#wrapper
{
position:relative;
}
and it will do the job.
Unless you show us the entire code this is the most I can help.
#vivek is correct try this
#wrapper
{
position:relative;
width:100%;
height:100%;
}
.head-content
{
display: block;
position: absolute;
top: -64px;
left: 92.7%;
margin-left: -360px;
width: 131px;
height: 46px;
}
Hey all i have a wonderful CSS problem here.
I am trying to use an APDIV that has a style of:
#name {
position: absolute;
width: 356px;
height: 25px;
z-index: 1;
left: 43px;
top: 1000px;
}
#donation_form {
margin-left:auto;
margin-right:auto;
width:785px;
height:520px;
background-image:url(../img/formBG_ChattClub.gif);
}
And that looks great in dreamweaver in design view:
BUT when i go to view it in the browser it shows like so:
The HTML code for the name is:
donation_container does not have a style associated with it.
What am i missing so that it lines up with the boxes just fine without any problem??
Thanks!
#donation_form {
position: relative;
}
#name {
top: 3px;
left: 5px;
}
Beside what you have written already
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.