I'm on a site where you are allowed to customize a profile, but you can only touch the css.
I've managed okay but I have a problem with the scrollbar here. It is going out of boundaries because it is in a div box with border radius on.
How could i fix this? to either make it smaller or pushed away from the side. just as long as it doesnt go out of the div border.
Sorry for no jsfiddle.
It looks as though you have a container element, with an inner element that holds your icons. You cannot clip the scrollbar corners, but there are a few things you can try to fix this visually.
Firstly, for the container element, you need to make sure that you have set its CSS 'overflow-y' property to 'scroll':
.container {
overflow-y: scroll;
}
Then, you can try getting rid of the border radius altogether by doing this:
.container {
border-radius: 0;
overflow-y: scroll;
}
Or, you can adjust the 'border-radius' and increase the 'border' to give the appearance that the scrollbar is properly nested inside of the container and no longer going outside of its bounds:
.container {
border: 7px solid black;
border-radius: 10px;
overflow-y: scroll;
}
I've written a Codepen example for you.
Related
I'm experiencing a very strange behavior in which a an element with overflow: hidden, white-space: nowrap, and a width: 50% forces its containing element to expand to fit all the text even though it is constrained by the width declaration (and not actually visible). Setting a specific width on the container or using overflow: hidden also does nothing to help. Setting an absolute value as width for the element in question however, fixes the problem, but i do not want to use absolute values.
Example: http://jsbin.com/loxuz/3 (Yellow box should only be 50% of grey box, but is expanding to fit all of the text in the blue box, even though that is restricted in width.)
Does anyone see anything obviously wrong here? Should the containing elements have a width, and could it have anything to do with the fact that I'm using percentages? I don’t feel that could be the case as the width should be inherited from containers upwards, right? And not be dictated form text elements downwards. The only explanation I can find is that white-space: nowrap is causing this. Removing this gives the container the right width, but also causes wrapping of the text, which I don’t want.
Does anyone know a solution to this, or have any insight? :)
A quick workaround for the issue with fieldsets not respecting the specified width is to add a min-width: 0 to the element:
i.e.
fieldset {
min-width: 0;
}
Is this what you want? DEMO: http://jsbin.com/tifefase/1/. You should remove max-width: 50% from span and write width: 50% for #second div. This is the answer you are looking for if you want to use fieldset.
#second {
width:50%;
border:yellow 1px solid;
}
span {
overflow:hidden;
white-space:nowrap;
outline:blue 1px solid;
display:block;
}
But if you use div instead of fieldset, You can carry on with your current values. SEE THE NEW DEMO with div being used instead of fieldset.
#second {
width:50%;
}
#third {
width:100%;
border:yellow 1px solid;
}
This is giving me such a headache i just have to ask. I never seem to have trouble with C# or Java or SQL or JS as I have with CSS, and i spend too much time trying to figure things out.
I have a table div and some row and cell divs inside it. And i just want to make table div to be of exact height.
My current style:
div .table
{
width: 410px;
height: 410px;
max-height: 410px;
display: table;
border-spacing: 10px;
border-style:dotted;
border-width:medium;
overflow: visible;
}
What else do I have to do to make div exactly 410 px high?
I tried wrapping it in a outer div (with blue borders in picture with specific height and display:block) but table div does not seem to notice it. I added a div with clear:both at the bottom, sometimes it helps but not today...
It appears that:
display:table;
will force the element to expand to fill the width of the content. Even if you set "overflow" to be hidden.
Here's a fiddle with some examples:
http://jsfiddle.net/dRLfv/
I think you'll need to do a regular "display:block" and then set overflow appropriately. That would probably require you to adjust some of your other styles for the table/form elements inside but that should be double and I'm sure others will be happy to help.
I hope that helps!
Cheers!
I have boiled down my problem to a pretty simple single file with the CSS included in a <style> tag.
The problem is:
I have a floating right column with a transparent background to show some text and pictures. This works fine, as expected.
Now I want to position a "Site designed by.... " block just above the footer.
I want to use an absolute positioned div for this, which is positioned relative to the containing #content div, which must get the position:relative property to achieve this.
When I set this property, the floating right column disappears, and seems to be hidden behind the background image of the #content block.
I cannot find an explanation for this. A workaround would be to position it relative to the footer (in that case the #footer div would get the position:relative property).
But I just would like to understand what goes wrong here and why the floating column is hidden. See the links for the layouts without and with the relative positioned content div.
Understandably, in the case of no relative positioning, the text is positioned relative to the browser in the bottom left corner.
http://websites.drsklaus.nl/relativeproblem/index_withoutrelative.html
http://websites.drsklaus.nl/relativeproblem/index_withrelative.html
You were almost there! Heres a little help to finish it.
#main {
width: 1005px;
margin: 20px auto; /* shorthand margin for x and y axis */
border: solid black 1px;
/* Added background to main instead so it still covers the full background */
background-image: url('grey-repeating-background-4.jpg');
}
#content {
position: relative;
min-height: 500px;
/* made the padding here margin, made it slightly bigger to accomedate the right column */
margin: 5px 370px 5px 5px; /* Margin right should be as wide as the right column+extra space */
}
The reason for your right column to hide behind the content is that before you put position:relative; on it it is in normal flow, not 'positioned' and so z-index priority is really just by DOM order. Positioning it just made it a whole lot more important; obscuring the right column.
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.
This is really weird. When this page is viewed in FF, it gets a white stripe on top which is part of body - I know because I use red border technique to see the elements.
Any ideas why?
http://www.codecookery.com/allbestimages/index.php?main_page=home
try adding:
#main-page-body-wrapper{
height: 0px;
}
or set the background color to black. I checked it out in chrome and firefox. Used firebug and the chrome inspect element tool. This is not the body that is creating the white space but the #main-page-body-wrapper element.
The problem is that your #slideshow element is positioned absolutely. This removes it from the normal page flow and therefore your #main-page-body-wrapper is essentially empty and just sitting at the top of the page.
I suggest you avoid absolute positioning unless you're really, really sure you need it. I'd recommend making a few changes. First of all get rid of the absolute positioning:
#slideshow {
height: 541px; /* Height of the slideshow */
position: relative;
/* Remove width, left, top and margins from here */
}
position: relative; in the above block sets the current position as the starting point for any child elements that are absolutely positioned (such as your slideshow images). If this doesn't make sense then check out:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
You don't need width: 100% on divs and other block-level elements because that is the default so remove that:
#main-page-body-wrapper {
/* Remove width from here */
text-align: center; /* IE6 centering Part 1 */
}
#main-page-inside-wrapper {
margin: 0 auto;
overflow: hidden;
padding: 10px 0 0;
width: 1000px; /* Width of the slideshow */
text-align: left; /* IE6 centering Part 2 */
}
I don't see why you should need #content-wrapper inside #main-page-inside-wrapper - it doesn't look like it's doing anything. You should try to keep your HTML as simple as possible to avoid mess and confusion; You only really need 2 divs to do cross-browser centering like you're doing so I'd get rid of #content-wrapper if I were you.
This is by no means a complete solution but should help you get to where you're going. Good luck!
The solution was to set padding/margin to 0.