Page content is covering the mobile menu on our site. Make your browser smaller, if needed, to see the problem.
I searched quite a bit and read a bunch of forum posts, so, I've tried playing with z-index and position:relative and I deleted a body tag with overflow-x:hidden, but I am not getting any results.
Here is the CSS I am currently using
.cshero-mobile-menu { position:relative; z-index:20000; }
.cshero-mobile-menu a { position:relative; z-index:21000; }
.cshero-mobile-menu span { position:relative; z-index:22000; }
.article * {position:relative; z-index:1000;}
Can anyone see what I am doing wrong and advise me how to fix it?
Thank You!
Add the following z-index rule to fix your issue:
#cs-header-custom-bottom .container {
…
z-index: 11;
}
Related
for some reason my Blogger page won't let me create transparent space between my footer and the bottom of the page. I would like the footer to moved up (tried both margin and padding, but nothing) so that the background is seen for about 10px but need help with what code to use! Please help, thanks!
Link to blog: http://thewordswecarve.blogspot.ie/
Just add this to your css.
.content-cap-bottom.cap-bottom {
height: 10px;
}
This will make sure this div stays 'open' so you can see the background below it.
In you css sheet add this:
body { margin-bottom: 10px; }
I inspected your page and added this to .content-inner
.content-inner {
margin-bottom:10px;
}
And it seemed to work fine.
I've tried many answers I've found on here regarding this topic.
I'm using bootstrap v3 carousel. I'm using the default html and css. ( the html is taken from the carousel example template provided by twitter bootstrap )
I have a full width carousel on my home page. It works great. It resizes as any browser width as it should. What I would like;
- is for the carousel to do is to stay at the height I specify.
- For the image to stay centred.
- For the width of the carousel to be responsive but for the images/slides to crop left and right.
A lot of the solutions I've found have suggested displaying the images in as css backgrounds.
But I know what i require is possible with out using this option.
I've spent a lot of time experimenting with this trying to get it work. More than a few days! Any help would be greatly appreciated. From searching on various sites it seems other people would appreciate some help on this subject.
Please let me know if you would like me to post more details.
Here's the code I got working :)
So after many more trials I got exactly what I described above. I hope people find this question and find it helpful. If you can't get it to work, maybe I can help?
Here is the code I used. (This is the css from twitter boostrap v3)
.carousel {
position: relative;
height: 685px;
}
.carousel .item {
height: 685px;
}
.carousel-inner > .item > img {
position:absolute;
right:0;
left:50%;
margin-left:-800px; /* Half the width of the image */
height:685px;
max-width:none;
}
.carousel-inner {
position: relative;
overflow: hidden;
}
I have set
.x-mask {
height:100% !important;
}
But the parent window is scrollable. So when I scroll the window, the bottom portion does not have mask. Any way to solve this issue?
I am using extjs.
Your CSS isn't written correctly:
.x-mask {
height:100%;
}
If this doesn't fix your problem you would have to supply us with more code and/or a link to your website or a fiddle showing the issue.
x-mask {
position:fixed;
height:100%;
width:100%;
}
there seem to be a few posts on this subject but i can't find anything conclusive one way or the other, so thought i'd try on here for someone far more knowledgeable in CSS than me! I have 3 container divs which have background images to give the impression of a tapered out line effect at the top and bottom of the main content. I can't get the middle div to dynamically expand as far as i need it to, it seems to need a specific height. Is there any way to get height: auto or 100% working on this? The site is here - thanks!
Edit: Sorry, you are trying to stretch the background image.
The technique is to remove the float:right; style and add a margin to the left:
#main_body {
float: right; //remove this
margin-left: 320px; //add this
}
-works on Chrome
There are solutions described. You can use pure css to do it or even use javascript.
I am considering that you are only requiring a css solution. Try the following CSS.
body {
margin:0;
padding:0;
height:100%;
}
or
html{
width:100%;
height:100%;
}
or check out this link, a better solution. Click here
If someone can please help I am having an issue with my site in IE7. Go to this link
Testing page link
When you load the page then hover over one of the top nav links the Footer shoots up half the distance on the page and can only be reset by rolling over another tab on the right.
What the heck is going on? Is this a DOCTYPE or CSS problem? Here's what I've already checked
Doctype
CSS styles for image height and width to see if its releasing some kind of height (I dont know)
Duplicate css styles
Any help would be awesome THANKS
Just add:
overflow:hidden
to #nav a
Btw there are some better, pure css rollover techniques, just in case you didn't know
this has a strange smell to it (from your CSS file):
.rollover { display: block; cursor: pointer; }
/* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; }
/* only set width and height once */
.rollover:hover { visibility: visible; /*for IE */ }
/* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; }
i would fool around with this here, maybe getting rid of the visibility hack...
if you want to make something not show, use display: none; instead of visibility: hidden;
EDIT: While this may or may not be a solution, I used to put endless comments in my source code so that I "knew where I was" when I was developing. One day I came across a strange error in IE that was generated by the use of a strange combination of comments. After I got rid of all my comments, the error was gone... I'm not saying, I'm just saying... maybe worth a shot...
I wanted to add comment. But, I dont have any points to add comment. Thats why adding it as answer.
I am using IE8. I have opened the link you have given in IE8 and I haven't noticed what ever you mentioned. It is working fine... If possible, you can try using IE8.
Thanks,
Srikrishna.
Really strange issue...
I was just curious about your float: left; property on #footer, and after i deleted that it seemed to work. Give it a try...
hope it helps.
Sinan.