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!
Related
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.
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.
I have a "ribbon" type header on the top of my website:
#top-wrapper {
border-bottom: 5px solid #A1C1BE;
width: 100%;
background-color: #59554E;
position: absolute;
top: 0;
left: 0;
margin-bottom: 100px;
padding: 10px 0 0 0;
color: #C0C0A8;
}
The absolute positioning is needed to make sure it occupies the complete width of the user's browser (as far as I know). However, the rest of my webpage (the main body which contains all my other divs) is hidden behind this ribbon:
#pagebody {
width: 60%;
margin-left: auto;
margin-right: auto;
}
The only solution I have been able to find is adding a bunch of <br> between the end of top-wrapper and the start of pagebody.
Is there a better way of doing this?
As per my comment in another answer:
You can just use width: 100%, but make sure you remove the default gap it leaves with:
html, body {
margin: 0;
padding: 0;
}
You should also check out necolas' normalize.css. It includes all of this basic CSS rules you're going to need in pretty much every site :)
Absolutely positioned elements (top-wrapper) are always on top of relative elements (pagebody), unless you do some hacky stuff with z-index (and even that is limited). What you probably want to do is move the pagebody element down just past the top-wrapper. I don't know how tall your top-wrapper is because it has no specified height. And you might not know it due to font-size differences. But overall, you simply need to add a top margin or padding to the pagebody tag, something like this:
margin-top:50px;
Absolute positioning takes an element out of the normal flow. You do not need absolute positioning to maximize width. You do that with width:100%.
There are many ways to do this. First, you can place your top wrapper outside the pagebody element and then just define its width as 100%.
If you have a graphic that is a ribbon and it is supposed to overlap the top of the pagebody element - as I think you are saying above - then you would use position absolute and z-index to place it above the pagebody element. Then add the proper padding-top to pagebody.
You didn't provide html so we don't really know what you're up to totally.
I have an arbitrary amount of text that will be displayed in a confined space.
How can I trim the output so that whatever is "beyond" the box is not displayed, or how can I force the box to create a vertical scroll bar?
For HTML:
<div id="smallBoxWithLotsOfText">There is way more text in here than what
I have typed. I mean, this text is long. There is lots of it.
You can't even imagine how long this text is gonna get. No joking.
It's long; it's very, very long. It keeps going, and going, and going.
It's the Energizer Bunny of text. Like, seriously dude. It's crazy.
Absolutely crazy.
</div>
Try CSS:
#smallBoxWithLotsOfText {
width: 100%;
height: 100px;
overflow: auto;
}
The height property tells the box how high to be. The overflow property tells the box to add a scroll bar when the contents get bigger, but not to always have a scrollbar (like scroll does).
You can see this in action.
usually 'overflow: auto' should work if there is a set height/width. You can force a scroll bar with 'overflow: scroll'. You can hide anything with 'overflow: hidden;'
The key to overflow with CSS styles is the height and width have to be determined by the browser in order for it to know when to start overflowing.
The overflow property. You can set the value to hidden to hide the data and scroll to scroll the data.
<div class="text">this is some text that would be very long...</div>
//Hidden
.text
{
overflow: hidden;
width: 50px;
height: 50px
}
//Scroll
.text
{
overflow: scroll;
width: 50px;
height: 50px
}
Take a look at overflow. overflow: hidden clips content, overflow:Scroll adds a scrollbar.
How can I trim the output so that
whatever is "beyond" the box is not
displayed
Use overflow: hidden
How can I force the box to create a
vertical scroll bar?
Use overflow: auto. To use this, though, make sure you have a width/height specified on the box
You may try using ellipsis by adding the following in CSS:
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
More ways to trim text and show ellipsis can be found here:
http://blog.sanuker.com/?p=631
Just a quick question regarding CSS positioning. I have several "segments" on my site which are 100% wide (fills the screen), and I want them floated next to each other. So only the first one will be visible, the other ones will be off-screen. I've tried playing around with positions and the overflow property without luck. Right now they just pop down below each other instead of floating.
This would work perfectly if the elements did not exceed the screen width, but as they do, they just pop down as I said earlier. I've tried setting a huge width to the "wrapper", something like 99999px. And then setting the segments to 100%, but that will just fill the whole 99999px width instead of the screen.
Any ideas?
JSFiddle example: http://jsfiddle.net/9xGPb/
Do you mean like this?
Example Fiddle: here
I used my favourite alternative to floats, inline-blocks
if you actually take it out of the fiddle it has some pretty (gaudy?) colours which show that it allows for the min-width: 900px; on the centered_content div to work too, and I removed the absolute positioning for the menu so the content would go below it, for demo only but you may find it useful..
let me know if any good or if you have any questions
Updated with some jQuery and to make corrections for default word-spacing
New Example: here
re: the IE6/7 hack rightly mentioned in the comments;
.segment {
display: inline-block;
overflow: hidden;
width: 0;
}
.segment {display: inline !ie7;}
needn't be a "parse hack" if that's your preference as long as that second rule is given to [lte IE 7] somehow, and separately at that it cannot be combined into the original rule with the * hack or anything, it won't work.. has to be in a separate ruleset.
I discovered word-spacing might be a problem if relying on width to hide, the natural behaviour of inline blocks is to put 3-4px between the elements like the space in between words, the workaround to this is to correct the word-spacing on the wrapper
.segment-wrapper {
white-space: nowrap;
word-spacing: -4px;
}
then restore it normal for the actual content divs, same place as you would restore the normal wrapping behaviour
.centered_content {
width: 900px;
margin: 0px auto;
background: #fcf;
white-space: normal;
word-spacing: 0;
}
and last, apart from this was fun.. there's 2 effects in that new fiddle - uncomment and comment the other.. forgive me I was playing! :)
The meaning of float is to try to float to the right or left unless there is not room for it.
This means that you cannot ever float an element off the page.
If you need to keep the element off the page, you will need to use a different positioning mechanism like position: absolute.
It sounds like you're creating a horizontal one-page portfolio. I've recently been working on something similar.
Using your fiddle I've set the .segment class to
.segment {width:90%;height:90%;position:absolute;}
and then offset each left positioning further off the screen
#home {background-color:red;left:5%;}
#work {background-color:yellow;left:105%;}
#portfolio {background-color:green;left:205%;}
#contact {background-color:blue;left:305%;}
http://jsfiddle.net/9xGPb/2/
I also added some jQuery logic to switch views for the divs.
I'm still not entirely sure which segments you want to start off the page but this jsfiddle uses positioning to shove the #two div off to the right: http://jsfiddle.net/EdAZP/1/
Which part of your example did you want to start off the page?
Did you try to just hide the other elements and toggle them with some javascript (jQuery is much easier)?
http://api.jquery.com/toggle/