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
}
Related
The header position of my website is always aligning to the left side in IE.
But it should be in the middle, in Chrome and Firefox its working without problems.
May i ask for your expertice for this?
Homepage:
CSS Code:
.header {
left: 0;
right: 0;
top: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
max-width: 950px;
height: 141px;
background: url(../img/bg_top.jpg);
background-size: cover;
color: #FFF;
z-index: 100; }
Please try this code for proper solution.
For header class you need to add below CSS
.header {
width: 100%;
}
and for navigation part, you need to update left side margin with below CSS.
.nav .ul .li {
margin-left: 32px;
}
By margin auto and max-width fixed no need to give left and right .It will automatically placed in the center of the page.
So just remove left and right
.header {
top: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
max-width: 950px;
height: 141px;
background: url(../img/bg_top.jpg);
background-size: cover;
color: #FFF;
z-index: 100; }
I am wanting to keep one image in place while the background image is scalable in browser.
When I use the height: XXXpx; it will not scale correctly. I've also tried using percentages for the height.
.cbp-fwslider ul li > a img {
border: none;
display: block;
margin: 0 auto;
width: 100%;
}
.big-o {
position: absolute;
top: 360px;
margin-left: 7%;
width: 200px;
height: 358px;
}
www.georges.larsonplusyou.com
Thank you guys.
Try removing the inline style for width from your html, and then change your selector to style the image itself as follows:
.big-o img {
position: absolute;
top: 360px;
margin-left: 7%;
max-width: 100%
width: auto;
height: auto;
}
This worked in my browser, but I would suggest using media-queries for responsive design. I think you need to do a width: auto\9; if the webpage will be used in Internet Explorer because there's a bug.
I have been created simple webpage using html5,css and js.
I have header,menu,slide show,main-content and footer. and also using sticky side-bar
After all coding, slideshow display at the middle of main content and main-content also hidden.
css code for slideshow,main-content and footer:
#wowslider-container1 {
position: absolute !important;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
left: 50%;
top: 60%;
opacity: 1;
}
/* clearfix */
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/* Main ................ */
main {
margin: 20px auto;
max-width: 940px;
}
/* aside */
aside {
float: left;
max-width: 220px;
}
.inside {
background-color: #000;
padding: 10px;
}
#sidebar.sticky {
float: none;
position: fixed;
top: 20px;
z-index: 6;
left: auto;
}
/* main content */
.main_content {
float: right;
max-width: 700px;
color:#fff;
}
/* Footer .............. */
footer {
background-color: #999;
height: 300px;
width: 100%;
}
My page look like this: http://s14.postimg.org/jw2uimt9t/Untitled_1_copy.png
I have lots of file, how to fix my problem, there anyone help me to fix this.
Any help would be highly appreciated. Thanks in advance.
I guess i understood what you need,
most of the div containers that you use don't have css size properties like width and height, but most importantly they don't have a position values in order to fit a html layout structure.
try using position:relative; first on the css for the most important elements of the page.
start first with this default css parameters:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
then add to your slideshow css main class this
*your_slideshow_class_name_here {
position: relative;
}
after that, things become easier to solve
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;
}
My site, http://hivechatter.com/, is super sexy for Firefox, Chrome, IE8, you name it:
But then along comes IE7, who mauls her divs so bad that they nearly run off the screen! And for whatever reason the content within the divs is centered. What the heck is going on here? It seems to be something to do with the way IE7 interprets the left: percentage margins, but I can't figure it out.
For convenience and posterity's sake, below are the relevant portions of my css, with text formatting and other nonsense removed. #container is the overall page container, #blue_box is the main content box, #left and #right are the columns in the blue box, #divider is the white line that separates them, #links is the light blue nav hovering below #blue_box.
#background {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -9999;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: no-repeat #222933;
overflow: hidden;
}
#container {
position: relative;
left: 34%;
top: 10%;
width: 50%;
min-width: 450px;
max-width: 700px;
overflow: auto;
padding: 0;
}
#blue_box {
position: relative; /* so that divider has appropriate height */
width: 94%;
padding: 3%;
overflow: auto; /*needed so that div stretches with child divs*/
}
#left {
position: relative;
float: left;
width: 44%;
margin: 0;
padding: 0;
}
#right {
position: relative;
float: right;
width: 49%;
margin: 0;
padding: 0;
}
#divider{
position:absolute;
left:49%;
top:6%;
bottom:6%;
border-left:1px solid white;
}
#links {
float: right;
width: 16em;
overflow: auto;
}
Change your position from relative to absolute for the container CSS.
Your problem is your image is just there with the container coming after it with a relative positioning.
IE7 is centering your container because you've set your body to text-align:center, then you're setting your container left:34%. IE is just adding those together for some reason. This is probably why your stuff is being centered in IE. You could do a conditional stylesheet for IE7 and remove the text-align.
Can't test at the moment if this will solve the issue but using margins on the blue box to position it instead of position: relative usually makes things a lot easier in the dark world of ancient Internet Explorers.