On my site, http://www.granthpark.me/outside If I resize my browser to smaller sizes, my content will be hidden and I can't scroll to it. Can anyone point out what's making the content fixed?
Here is the CSS, can't post it here because it's too long http://www.granthpark.me/assets/css/main.css
EDIT: New problem. I can scroll now because I tried replacing every instance of position:fixed with absolute in addition to changing overflow:hidden to scroll. But now I don't know how to fix the margin of my background to resize properly when I resize the browser.
Simple replace the style sheet, you will get rid of all the problems. click to see
add property in body tag this in css:
body{overflow: scroll;}
Change your body's property to overflow: scroll;
Right now your overflow property is set to hidden.
body {
background: #fff;
overflow: hidden;
}
Here's the culprit:
body {
background: #fff;
overflow: hidden;
}
add this property in body tag:
overflow-x:hidden;
In css file "main.css" line no. 934 add this property in id #bg
Position:Fixed
Related
I fixed the height of the Bootstrap dialog, but for some reason a double scroll bar appeared, but I just needed to try overflow: hidden, but unfortunately it didn't solve the problem. The problem comes when I select a check box and the dialog jumps down since a longer part of the dialog comes in, I can't paste many codes because the components of the dialog are made up of several components.
So far I have done css formatting:
body {
overflow-y: hidden;
}
.dialog-layout-modal-body {
min-height: 662px;
max-height: 700px;
overflow: auto;
}
And the parent CSS code:
body {
overlfow: hidden;
}
Is there some bootstrap or css or any solution how can I fix this problem?
One is from browser scroll and another is from the dialog. Check if the Parent section has css property as 'overflow:auto;` which will cause this issue.
OR
you can do something like this for body tag.
body{
width:100%;
overflow-x:hidden; // hides bottom scroll
overflow-y:hidden; // hides vertical scroll
}
I have the following site that is using a CSS sheet I inheritated from the last dev.
http://bit.ly/1m0LZjZ
Everything seems okay except for the menu. Originally in the #nav (Line 381 of the style sheet) CSS the width was a fixed 960px. I changed this to 100% by user request and now cannot get the text to center?
I used text-align:center and also commented out the ul elements use of float:left thinking that was the problem. What else can I try?
You need to center the wrapping div, which has width: 950px.
#menu-main
{
margin: 0 auto;
overflow: hidden; /* to clear floats */
}
EDIT: Think about clearing your floats in #menu-main.
For example you could add overflow: hidden on #menu-main, that would clear containing floats.
I am new to css, i created a webpage using css and it looks perfectly as expected when browser is maximized. But when i retrying the web page, the div elements i used in the page overlap each other making the perfect mess of things...!
I tried wrapping the div element.
#wrapper
{
min-width:500px;
overflow-x:scroll;
}
and also tried to set minimum-width attribute to parent div. Nothing worked out...
Please Help.
Try
#wrapper
{
min-width: 500px;
overflow-x: scroll;
position: relative;
}
I've noticed that if I view the page at wider resolution, the content of a section gets aligned to the right, instead of centered.
I use
margin: 0 auto;
width: 998px;
overflow: hidden;
It seems to have this bug, at least in Safari, Firefox and Chrome. I tried disabling overflow: hidden and it gets rid of the bug, but messes up my floats inside the content.
You can see an example at the page live here:
http://autouncle.dk/da/brugte-biler/Kia or http://autouncle.dk/da/brugte-biler/Ford (you have to view it at at least 1500px widescreen to see the bug).
Any ideas on what can cause this bug and what are possible solutions?
About the reason of the problem: this is due to the page-title element of your header:
#header-outer element contains some floated elements but you forgot a clearing, so the offset left of the main section of your site starts where the page-title ends. (you can verify this by hiding page-title element — when you set display: none the page is correctly centered)
So adding
body#basic_page #header-outer {
overflow: hidden;
}
you solve the problem
As a sidenote strongly avoid to put empty div only for clearing purposes: there're cleaner methods that don't require extra markup, like easyclearing
Your solution is removing overflow: hidden
To fix the float bug on the second example you gave try to use 100% of the width:
body#basic_page.brands_controller #content .text_info {
overflow: hidden;
font-size: 12px;
width: 100%; /* new rule */
}
Remove the
overflow:hidden
from div#content and put its contents in an extra <div> in it which has
width:100%;
overflow:hidden;
This resolves the problem for me.
im having a problem regarding using background property with url('location') value with a div element. All browsers do not show the background image for any content written within the div tag.
code:
HTML:
body has a div tag with the class = slide. this div tag contains some content and links.
CSS:
div.slide {
margin: 0 auto;
background: url(images/btnslide.gif);
}
please help me identify the error. maybe i have misused div tag. please point out the solution for the above problem
thanks in advance
You either haven't set the height for your .slide element, or you haven't cleared the floats for the elements inside .slide. Try setting a height or adding overflow: auto if you want to clear the floats inside your <div>.
This code should work by default, as everybody said something else is wrong.
Either the height is wrong or the image does not exist.
Which browsers are failing exactly?
If you like you can try writting the CSS with full syntax:
background: url(..) top left repeat;