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.
Related
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 have tried all the solutions I can find to this problem, but the damn thing keeps overflowing. To be specific, when I add anything more than an extra word to the "Watch the space" text to the right here http://robinlovelace.net/ , it disappears from where it should be an moves to the bottom of the page, below the 'comments' link.
I've tried adding overflow: auto; and word-wrap: break-word; in the CSS #home_right area, (as recommended here) but this fails also. It's such a simple problem I think I must be missing something that may be of use to others.
You need to set a width on it.. try the following:
#home_right {
width: 220px;
}
This is what it currently is:
#home_right {
overflow: auto width: 10 em; /* Syntax is incorrect, you forgot the ; */
}
In this case, there is actually no need for overflow.. all you needed was a width!
This is because the div is floated and when you add content to it the width is extended by the text and becomes larger than the available area and so it floats to the nearest available space. To prevent the text from widening the div, you need to set a width on the sidebar. Using firebug I figured out that in your case you need to add this in your CSS for #home_right:
width: 224px;
What you have:
overflow: auto width: 10 em;
What you should have:
overflow: auto;
width: 10em;
Spaces and semi-colons, be careful!
Something strange is happening with a margin setting in Firefox, I have a div with an id "wrap" with a top margin of 20px, when a user is logged in a div appears above the wrap div with an id of user_nav I don't want any margin above this div, but Firefox is for some unknown reaslon propagating the top margin I have on the wrap div to the user_nav div above it, it isn't happening in any other browsers.
If I remove the top margin from the wrap div it is removed from both.
I can get rid of it by giving the user_nav div a negative top margin, but that messes up all the other browsers.
div#user_nav {
width: 980px;
margin: 0 auto;
}
div#wrap {
width: 980px;
margin: 20px auto 30px auto;
}
Any ideas about what is happening?
Thanks
Rob Fenwick
It is indeed quirky behaviour - and it appears to be one of the effects of this old bug related to clearing block elements (or one of its many, many duplicates):
https://bugzilla.mozilla.org/show_bug.cgi?id=451791
One way to get around it is getting rid of the <div class="clear"> and using the overflow method of clearing instead (though that's not always possible, e.g. - obviously - if you have content inside the cleared element that will extend outside it):
http://www.quirksmode.org/css/clearing.html
I.e., remove <div class="clear"> from inside user_nav_frame and apply overflow: hidden (and width: 100%) to it in the CSS instead to clear the floats:
div#user_nav_frame {
background-color: #0A4D84;
overflow: hidden;
width: 100%;
}
JSFiddle: http://jsfiddle.net/69aD9/2/
There are counter-hacks too, if this won't work out in your case. See the above bug report.
I had big trouble with printing from Firefox (any version, mine is 16.0.2, but even Aurora dev builds did the same).
When printing the page, Shrink to fit in the Print preview doesn't work. Only way, how to fit the page onto the paper is selecting Zoom 70% in the same dialog.
Other problem:
it prints only first page.
What to do?
I needed to adapt the CSS file for printing, so I've done one. It works flawlessly anywhere, but not in Firefox. What was the problem?
First I've tried specifying Width and height for BODY and HTML in the print.css file. Than margins, etc.
Later I figured out what was the problem:
standard CSS file had the following in it:
body {
...
overflow-x: hidden;
overflow-y: scroll;
}
So I've added the following into the print.css file:
body {
overflow-x: visible;
overflow-y: visible;
}
I guess, if you had only overflow specified in the CSS, not -x & -y, you would need to specify only overflow:visible in the print.css file.
Printing from Firefox works now as it should. I just thought, that this may help somebody, who has strange printing behavior happening in Firefox.
In addition to the Kokesh's answer, some times attribute
display: table
generates this problem too. So you need change it to 'block' or another that fits to your requeriments.
I tried the fixes suggested in other answers but they didn't solve the problem for me. After a lot of research and trial & error, I have found this article by A list apart. I was skeptical because it's so old but it states that:
If a floated element runs past the bottom of a printed page, the rest of the float will effectively disappear, as it won’t be printed on the next page.
As I have a big floated container I thought I'd give it a try. So, I made a mix from the other answers and this article and came up with this:
body {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
/*this is because I use angular and have this particular layout*/
body > .fade-ng-cloak {
height: 100%;
display: block;
flex: none;
float: none;
}
.l-content,
.l-sidebar {
float: none;
}
So basically:
Setting body to overflow: visible
Setting elements that behave as wrappers to display: block, eliminate all flex styles and reset height if necessary
Eliminate float on long containers
That mix worked for me! I'm so happy I thought I'd share :)
I've been working on creating a Spell check dialog for the tinyMCE editor using jQuery's dialog control. My reason for doing this is because our users have touch screens and the default method of click-word/click-replacement is too cumbersome.
I've finally got the spellcheck dialog to the point of everything works.
However, the div where I display the text can go nuts in 2 different ways if provoked.
For example, here is the dialog as I want it to work. Seen "working" here in ie7. http://jsfiddle.net/PMX8r/2/
Viewed in ie8 (or any newer browser) it is a much different matter.
The other issue is if the user enters a ridiculously long word my buttons get pushed away! Seen here in ie7. http://jsfiddle.net/PMX8r/3/
What style properties should I be looking at get this div under control?
Edit:
Sweet, it looks like overflow: hidden solves the 2nd issue as well.
The buttons aren't pushed aside for me, but the first issue, where text overflows the div, can be fixed by
.SpellCheckDiv {
overflow: hidden;
}
Assuming there's some other way to scroll, otherwise use overflow: scroll;
Try adding
overflow: scroll
or
overflow: hidden
to the style tag of your container-textarea.
This will add scrollbars (1st case) or hide the overflowing text.
The reason of this behavior is your div is 100px in height and your content is exceeding the limit of 100px
use overflow:auto; in your .SpellCheckDiv class.
.SpellCheckDiv
{
height: 100px;
width: 318px;
border: 2px solid black;
word-wrap: break-word;
overflow:auto;
}
overflow:hidden; - if you dont need scrollbars
you can use overflow-x:{scroll|auto|hidden} and overflow-y:{scroll|auto|hidden} to even controll your vertical and horizontal scrollbars too.(CSS 3)
You can test the result of different overflow behavior here
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_overflow-xy
The overflow property should help you. With respect to your code:
.SpellCheckDiv
{
height: 100px;
width: 318px;
border: 2px solid black;
word-wrap: break-word;
overflow: scroll;
}
It says when there is a overflow of text (i.e. it doesn't fit in the current window size), it should automatically scroll.
This is the modified JSFiddle code.