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;
}
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
}
I checked my Tumblr theme on IE and the footer is in the middle of the page and here is the code I have.
#mastfooter {
background-color: #4F3117;
height: 295px;
clear: both;
margin-top: 0;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
width: 100%;
position: absolute;
left: 0px;
bottom: -38px;
}
Is there an Internet Explorer 9 solution to that?
Ryan Fait has the best cross browser solution to a sticky footer
See Here
But there are countless examples of sticky footers using just CSS on stackoverflow.
Based on the code provided, I would guess that you need to change it to something like this-
#mastfooter {
background-color: #4F3117;
height: 295px;
clear: both;
margin-right: auto;
margin-left: auto;
width: 100%;
position: fixed; /* keeps the footer visible even when scrolling*/
bottom: 0px;
}
Note that the top and bottom margins have been removed, they were most likely the cause of the positioning problem.
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;
}
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
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).)