URL: http://bit.ly/1GUzfPx
html, body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
background: #201E24;
}
.grid-view {
width: 100%;
overflow: hidden;
}
.library .list {
overflow: hidden;
padding-top: 0;
}
Although my page structure and CSS is quite simple but I just can't find whats blocking the scroll on Chrome and Android. Been scratching my head over this for a while now.
Now that you have removed overflow:hidden in media="all" body, .ionic-body please try the following:
Add height:100% to html,body
Remove height: 1052px; from the inline styling of content has-header grid-view
And hopefully that sorts it out.
I am not sure if I got your problem, but try this.
.library .bar-clear{
background:#35323A;
position:relative;
}
.has-header{
top:0px;
}
Related
I need a horizontal scrollbar to show on my website when I make the browser window smaller. When I put {overflow-x:auto;} I get a scrollbar instantly even when browser is maximized, and I get like 100 pixels of blank space of my body on the right side.
body {
padding: 0;
margin: 0;
}
.container {
font-size: 0;
height: 100%;
width: 100%;
position: fixed;
top: 0px;
bottom: 0;
overflow-y: scroll;
overflow-x: hidden;
}
Try to use this
body {
padding:0;
margin:0;
}
.container {
font-size: 0;
height: 100%;
width: 100%;
position: fixed;
top: 0px;
bottom: 0;
overflow-y:scroll;
margin-right: -10px;
overflow-x:hidden;
} `
If you still face any issue. Can you please share fiddle link where I can check and provide you more accurate solution.
If you want to show the scrollbars only when needed, then you need to use overflow:auto, for more reference please have look here.
The structure of the page is quite messy so I won't go into fixing the structure, but will provide the answer how I got the horizontal bar to show.
The problem is in the div#navbar child elements. And the way you are using margin and padding properties. For some information how to use them have look here.
The div#ctu element has the margin-left property active which expands the element outside its inherited sizes.
#ctu{
margin-left:20px --> padding-left:20px;
}
#ft{
position:absolute; ---> position:relative;
padding-left:10px --> padding-left:0px;
}
.container{
overflow-y: scroll; ---> overflow-y:auto;
overflow-x: hidden !important; overflow-y:auto;
//OR
overflow:auto;
}
I'am a beginner of this kind of work. So please be patience!
My Header is a bit messy in Firefox, IE and mobile safari. The logo displays huge and over the nav bar. I manage to fix it by adding overflow: hidden;.
Its a wordpress site.
But it still doesnt displays in the right way.
This is what ive done to fix it.
.logo-wrapper {
line-height: 2.5ex;
height: 90px; /* 2.5ex for each visible line */
overflow: hidden;
/*Option 1: display: inline */
/*Option 2: overflow: auto; */
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
What im I doing wrong?
Check out the site: http://bit.ly/1akopZL
Best regards.
Try simply adding the following to your CSS:
.logo img {
max-height: 100%
}
I gave this a text and it should do the trick.
Edit: taken responsiveness into consideration.
I am trying to get my basic webpage layout together and I hit a few problems. Could someone please help me solve it. My understanding of CSS is not superb.
Code: http://jsfiddle.net/HJLzt/
The sticky footer is working, and I want to have a column left and right of the page in between header and footer. I'm not sure if the way I did it is correct.
Between left and right column and header and footer I would like to put the content. How do I center it. I cannot find a proper way, as there is always overflow and I want it only to go between the left and right column and nothing to cut off.
Thank you for your help!
EDIT:
I have updated my layout and used a bit of jquery to help out. I know I should try and make everything work in css, but it seems impossible.
Maybe I should add, that I want a whiteboard as theme. I want a wooden frame, so the sidebars always have to connect to the header and footer, as the top and bottom frames go through there.
If somebody could have a look and tell me if that is ok or not.
* { margin:0; padding:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 150px; } /* must be same height as the footer */
#main header{
height: 100px;
width: 100%;
background-color: #5d3be6;
}
footer{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
background-color: #afeba4;
}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
#layout_left{
float: left;
width: 100px;
min-height: 100%;
height: 100%;
background-color: #f21ce7;
}
#layout_right{
float: right;
width: 100px;
min-height: 100%;
height: 100%;
background-color: #f21ce7;
}
#content_layout{
border-left: 100px solid #e4f662;
border-right: 100px solid #e4f662;
width: auto;
height: auto;
background-color: #c36161;
}
#content{
margin: auto;
width: 96%;
}
As you've stated you're new to CSS but I'd very much recommend against your layout, it's seemingly 10 years ago standard. (no offense intended ofcourse, you're new to this, you're not going to know the do's and do not's as of yet).
Research online portfolio examples using google for ideas!
to answer your question:
I recognise your sticky footer code, I didn't work for me either, well not completely.
It doesn't work great, I'd recommend: http://css-tricks.com/snippets/css/sticky-footer/
I'd tell you myself but that tutorial is very well written and easy to understand and implement.
And for centering container use:
margin: 0 auto;
centering text you can use:
text-align: center;
Hope that helps.
I can't seem top find a definitive answer to this.
The following styling will remove scrollbars from an iframe in firefox and chrome but I can't seem to find an alternative for ie. I really don't want to have to set the scrolling attribute. Any ideas?
iframe
{
height:500px;
width:500px;
overflow:hidden;
}
iframe::-webkit-scrollbar
{
display: none;
}
edit: I would have no control over the html for the iframe source. IE sadly means ie7 upwards.
How about this trick? (If you just don't want to show scrollbars)
Your <iframe> must have a container. So do something like this:
<container>
<iframe src="http://www.domain.com"></iframe>
</container>
And your CSS:
container {
width: 500px;
height: 500px;
overflow: hidden;
position: relative;
}
iframe {
width: 517px; /* scrollbar = 17px */
height: 517px; /* scrollbar = 17px */
position: absolute;
top: 0; left: 0;
}
I use this style information to make my footer stick to the bottom of my web pages and it works super in FF, Chrome and Opera. Only in IE, the footer appears in the middle of the page instead of at the bottom.
body { margin: 0; padding: 0; height: 100%; font-family: Georgia; }
#parent
{
min-height: 100%;
position: relative;
}
#header { position: relative; left:0px; top:0px; width: 100%; height:45px; background-color: black; }
#content { padding-bottom: 150px; position: relative; }
#footer { position: absolute; left: 0px; width:100%; bottom: 0; height:80px; background-color: black; }
The HTML structure is as follows:
HTML body tag
parent
header
content
footer
Update
I figured if I add a conditional this selector for IE, it works in both browsers.
#parent { height: 100%; /* min-height: 100%; */ }
Now, would someone please tell me if it is legal to add a conditional CSS comment in a .css file that is included as an external in an HTML file? I guess not. How do I go about using this conditional comment without using an additional IE only CSS file?
This should help:
html {
height: 100%;
}
Take a look in the source code and try it on any browser: Footer at the bottom of the page. It works on IE7, IE8 and IE9, only IE6 and under will not becouse of min-height property. I think putting correct DOCTYPE will fix your issue. Hope that helped.
I had the same problem a few weeks back and a found a pretty good tutorial on this. Click here! The general idea behind this solution is to create a wrapper which soaks up most of the page, leaving only enough room for your footer to be positioned at the bottom of the page. This trick definitely works in IE.