|
CSS - Overflow: Scroll Pushes Background To The Left
Similar TutorialsHello, I have a table with two columns and I want it a certain distance from the left side and right side. The distance on the left is a lot more than the right. I added a margin to it and it pushed it off the screen to cause a horizontal scroll. I tried putting a width on the table, but it wouldn't work for some reason and then tried a negative and positive margin on the right side with no avail. I am stuck. Any ideas on how to negate the pussing of a margin? when you put overflow: auto; into a div it adds a horizontal scroll bar in, is there a way using css and/or html to make it add a vertical scroll bar instead of a horizontal one so when the text got to the end of the div instead of extending the div it just adds a vertical scroll? Thanks in advance! I want a fixed height table, so I'm using overflow: scroll for the tbody. This works well in Firefox but does not work in Opera or IE. Does a solution exist to my problem? Aloha, Is there any way to make overflow: auto & overflow: scroll use the wheel mouse on mozilla / mozilla firefox ? Here's my design for any of you who might be confused about what i'm asking: http://ub3r.net/oxiserve/ . Thanks. love, mikey Here's my next IE challenge (or frustration). It deals with the overflow attribute. Overflow property was a challenge on my page since the page emulates position fixed for IE. The present scenario deals with the pre element. Sometimes the content in the pre container exceed the parent container's width. IE expands the parent containers width as a result. The workaround for this scenario relates to the overflow property and using a wrapper with the height set to 1% . Now, IE maintains the parent container width. Apparently, the wrapper ensures that IE renders hasLayout. I am not exactly sure why it works, but it has predictable results. The workaround involves wrapping a pre element in a div, WrapOverflow. Now, you could set the overflow auto attribute on the child pre element. Apparently, the wrapper ensures that IE renders hasLayout. I am not exactly sure why it works, but it has predictable results. Firefox has no need for the wrapper and still renders the page accurately with the superfluous code. The problem relates to IE rendering pre/wrapper with a smaller height. By controlling the horizontal expansion; the workaround has somehow constrained the height as well. The net effect is a vertical scroll bar, which is not ideal. Compare the scenario in both Firefox and IE; set the browser next to each other; notice the div.WrapOverflow pre container height. Screenshots are below and review the code for a full illustration. Yes, you must be thinking change overflow auto to overflow vertical. Let's not jump to a quick conclusion. Understanding what is going on here is important as well. The pre container's height should grow in IE, but the page's complexity and various hacks muddle the scenario. I have already spent a month on this scenario, but do not have the skill to decipher what various hacks impose on my layout. Let me know if you have any good ideas, explanations, or suggestions on this situation. http://neville.f2o.org/nifty_TEMP2.html Hello everyone, relatively new web developer seeking help! I'm working on a template that will eventually be used with Joomla, but right now I'm just concerned about getting the layout to work with just the HTML and CSS. I want to create a fixed frame around the webpage that expands and contracts to fit different resolutions and browser window resizing, and then have the content scroll inside of that frame. The frame is also comprised of transparent PNG's since the client wanted lots of art on the frame around the content. It mostly works in Firefox, and is a giant mess in IE at the moment. I'd like to get it working in the standards compliant browsers first and then figure out some hacks that I can use for IE. Hopefully I can do that.... Here is my HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Site Test</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <link rel="stylesheet" type="text/css" href="site_test.css" /> </HEAD> <BODY> <div id="wrapper"> <div id="frame_left"> </div><!--End frame_left--> <div id="logo"> </div><!--End logo--> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> etc, etc, </div><!--End content--> <div id="frame_right"> </div><!--End frame_right--> </div><!-- End wrapper --> </BODY> </HTML> Here is the CSS: Code: #wrapper {
margin: 0px;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
background-image: url(frame_middle.png);
background-repeat: repeat-x;
z-index: 10;
}
#frame_left {
margin: 0px;
background-color: transparent;
background-image: url(frame_left2.png);
background-repeat: no-repeat;
width: 224px;
height: 625px;
position: fixed;
left: 0px;
top:0px;
z-index:50;
}
#frame_right {
margin: 0px;
background-color: transparent;
background-image: url(frame_right2.png);
background-repeat: no-repeat;
width: 198px;
height: 625px;
position: fixed;
right: 0px;
top: 0px;
z-index: 25;
}
#logo {
margin: 0px;
background-color: transparent;
background-image: url(pink_logo2.png);
background-repeat: no-repeat;
width: 316px;
height: 125px;
position: fixed;
top: 0px;
left: 34.5%;
z-index: 75;
}
#content {
background-color:transparent;
position: fixed;
top: 145px;
bottom: 60px;
left: 160px;
right: 150px;
width: auto;
height: auto;
overflow: auto;
}
In FireFox everything works and the scroll bar pops up, but won't actually scroll anywhere, even though there is content off screen? Any thoughts? I am slightly concerned that this is just totally undoable, but then I look at some of the stuff on CSS Zen Garden and think that there must be a way to pull it off! Any help is very, very much appreciated. Title sounds a bit contradictory, I know, but please bear with me... I'm building a simple chat application with html, javascript php and mysql. The technical stuff (php/ajax etc) i'm absolutly fine with; what I'm struggling with is the CSS to make it behave how I want. I've got a prrof-of-concept page working 90% how I want, here http://chris.loyaltymatters.co.uk/chat-demo/ This works by having an outer div of position:relative and an inner div of position:absolute; bottom:0px so that as new content gets added to the bottom, older text goes up. So far so good....but I want a scroll bar so that I can scroll up to see previous comments. Giving the inner div a height value gives me a scroll bar, but the position remains at the top and new content gets hidden towards the bottom html: Code: <div id='container'> <div id='chatRoom'> </div> </div> css Code: #container {
width:500px;
height:500px;
margin:50px auto;
border:1px solid black;
position:relative;
overflow-y:scroll;
overflow-x:hidden;
}
#chatRoom {
position:absolute;
bottom:0px;
margin:5px;
width:100%;
}
To summarise, all I need now is a scroll bar so that I can scroll up many thanks in advance Hello folks, I've made a page where the user can change the style sheets by simply enabling/disabling them with a javascript. The page also contains 4 layers which are stacked on top of one another. I've came up against a problem that has me stumped! Basically if the user switches style sheets to a sheet that contains a smaller font-size, the currently visible Layer changes size which causes some of the text in the layer to be cut out of view. It also re-aligns the DIV contents to the left of the DIV instead of centered as it is set. I have tried playing around with overflow:visible and giving the layer a width to accomodate all text sizes, but I couldn't get it to work. Any ideas how I could get it to work? The only other idea I had was to reload the page but that isn't very elegant is it?! Any CSS experts know how it should be done? Best regards. I have a website im developing and I wanted to know how i would go about having a graphic element that floats on top of everything but if it goes outside the bounds of the window it wont introduce scroll bars. Reason: I have an image that i want to make quite long but its not important for the viewer to see the end of the image. I guess its a bit like a background image but on the top Thanks I've got the div below Code:
<style>
div
{
height: 100px;
position: absolute;
overflow-y: auto;
}
</style>
<div>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
Some text goes here<br>
</div>
This div is the width required to hold the text. Unfortunately once the scroll bar is added to the div it obscures the text. Is there a way to make the div expand horizontally that bit extra required by the scrollbar? I know i can put padding-right on the div. I'm looking for a way that will only expand if further if a scrollbar is needed. Hi, I've created a fixed width Div/CSS design for my forum, and while Firefox can handle excessively wide user-posted images, IE handles it badly and stretches the div that the image is in, breaking the layout. An example is he http://forums.hiveworldterra.co.uk/viewtopic.php?t=496 (currently with my CSS work around - not pretty) What I would like is a non-Javascript, CSS-based method (or very minimal that gives acceptable results when JS is off) of making the containing Div of the image scroll horizontally when the image is over 590px wide, but not show a vertical scroll bar and not show any scroll bars if the image is under 590px. Is that even possible? thanks for any suggestions IBBoard Hello people I'm trying to enable a scroll on a div with position absolute but with negative pixels on the left atribute. Something like this: .intro{ position:absolute; top:100px; left:-190px; } the div will start from the back and it's content won't be seen without a scroll.. I've tried with the overflow:auto; but it doesn't work.. i think it only works to the right and not to the left Can anyone help me ? By the way, whats the diference between these declarations on a css: .intro{ #intro{ intro{ I have a layer 'main' that contains two columns - one on the left called 'left', one on the right called 'right'. Both columns are layers themselves. 'main' has a background colour 'left' and 'right' have a fixed size background image which does not repeat. JavaScript determines the size of the window and then sets the height of these three layers exactly. This is supposed to be a minimum height to ensure the page is filled initially, however I have used the following code (explained later): Code:
if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
myHeight = document.documentElement.clientHeight;
}
else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myHeight = document.body.clientHeight;
}
// main height
var pageHeight = myHeight;
document.getElementById("main").style.height = pageHeight+"px";
// content height
var leftHeight = pageHeight - 233;
document.getElementById("left").style.height = leftHeight+"px";
document.getElementById("right").style.height = leftHeight+"px";
Content on 'right' may extend beyond the height of the page and therefore makes the page scroll. When the content in 'right' expands - it is hoped that the size of 'main' expands so that the background colour of this layer fills the space where the content overflows. Using the above JavaScript and this HTML - that works as desired in IE7. Code:
<div id="main" style="position: relative; margin: 0 auto; width: 680px; background: #E1E6EA; text-align: left; padding: 0; z-index: 2">
<div id="left" style="float: left; text-align: center; margin: 0; padding: 0; width: 198px; background: #E1E6EA; background-image: url('images/left.jpg'); background-repeat: no-repeat; z-index: 3">
blah
</div>
<div id="right" style="float: right; text-align: center; margin: 0; padding: 0; width: 482px; background: #E1E6EA; background-image: url('images/right.jpg'); background-repeat: repeat-x; z-index: 3; overflow: inherit">
badly coded extra bit to extend the layer
<br><br><br><br><br><br>
gfdgf
<br><br><br><br><br><br><br><br><br>
gfgf
<br><br><br><br>yhyuyuy
<br><br><br><br><br><br>
gfdgf
<br><br><br><br><br><br><br><br><br>
gfgf
<br><br><br><br>yhyuyuy
</div>
</div>
As the content of 'right' expands so does the background behind everything. HOWEVER - this only works in IE and not the other two test browsers: Safari and Firefox. To remedy this - I tried minHeight instead of height. The outcome of that - the background behind 'right' extends (because the background colour continues past the minHeight) but the background behind 'left' is just not shown and the background of 'main' does not extent. Therefore it has a background on the left hand side until the minHeight of 'main' then the left hand side has no background after that point. That's in Firefox and Safari. With this "solution" in IE - it goes a bit weird but since it doesn't even work right in the other two I ignore that for now. So - it either works in IE or not at all. Hence why I am currently using the code that at least works in a browser. Any suggestions to get it working in all? I currently have a PRE tag inside a DIV tag. The DIV tag has a limited size. Often a long line of text will stretch outside the PRE tag. I do not mind this horisontal overflow as the contents has more meaning when it is not wrapped. My problem is that this overflow text flows under the right hand navigation column on my site. I would like the PRE tag to be above everything else on my site. How can I do this? The overflow text seems to have no background, making it hard to read if it is over an image. Is there any way to get overflow text to have a brackground without expanding the PRE tag? Hello, I have a problem appearing only in IE8, but I don't seem to find the exact bug and solution. In this page http://www.cracowflats.com/index.php/search/show/id/181 there is a Details area (bottom left) where titles have a green background. For some reason this green background appears in other parts of the page. In other browsers, the whole page has a white background, as it should. 1) With this code in theme.css a {color:#62860b; } h3, h4 { color: #70af1d;} .color_title { background: #76a637;color:#fff;} .logo h1 a { color: #62860b !important;} it appers everywhere and the whole background of the page is green (should be white). 2) when I add an "overflow: hidden;" here .color_title { background: #76a637;color:#fff; overflow: hidden;} it gets better, as the main area is white. But I still have a lot of green on the footer (and tabs). If I could find out to which bug it refers, it would be easier to find a solution. Any hint would be appreciated! Thanks! Luca Hello, after a few hours I managed to identify the CSS element responsible for this problem. However so far I have no solution on how I could solve this problem. Basically the problem is very minor but still frustrating. I am using the following command to set a DIV element with transparent background; Code: filter: progid:DXImageTransform.Microsoft.gradient (gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000'); The DIV element becomes transparent. However the parent element - which is set with the CSS attribute overflow:hidden - is always displaying an extra pixel on the right of the container. This might not be clear at first, which is why I attached the following screen shot. (the light red line is the extra 1px I am referring to) If I remove the transparency CSS attribute for IE8 then this extra 1px will disappear. However that means loosing the wanted transparency. I have also developed the following example of the problem; Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
margin: 0px;
padding: 0px;
/*
* IE hack to center .content div (part1).
*/
*text-align: center;
}
div.content {
width:600px;
margin: 0px auto;
/*
* IE hack to center .content div (part2).
*/
*text-align: left;
}
div#a {
border-bottom: 1px solid grey;
border-top: 1px solid grey;
padding-bottom: 5px;
padding-top: 5px;
}
div#a div#b {
overflow: hidden;
height: 280px;
position:relative;
}
div#a div#b div#c {
position: absolute;
}
div#a div#b div#c img {
border: none;
display: block;
}
div#a div#b div#e {
background-color: red;
color: #fff;
position:absolute;
padding: 20px 10px;
width:260px;
height: 240px;
margin-left: 500px;
/* IE8 hack for background colour with alpha value */
filter: progid:DXImageTransform.Microsoft.gradient
(gradientype=0,startColorstr='#60ff0000', endColorstr='#60ff0000');
}
</style>
</head>
<body>
<h1>Test 5</h1>
<div id="a" class="content">
<div id="b">
<div id="c">
<img src="pic.png" />
</div>
<div id="e">
hello
</div>
</div>
</div>
</body>
</html>
Does anyone know what's causing the problem and how I can solve it. It is true that 1px might not sound much. But it still frustrates me knowing that it is there and the fact that on Firefox all works great. I have a list of things, and i would like it to change the entire background of the item scrolled over... I don't want it to be a link, just change the background of the div when it is scrolled over. Hi there! I'm trying to place an image that tiles on the left far side of the background and on the right hand side. This is so it will have columns down the sides. I'm not sure how to begin to do this... I know I could do with this tables, but I'm trying to do this without tables and pure CSS. Any thoughts? I wish I had an example to show.... Thanks! Nathan I have a style sheet with a property that allows me to repeat an image from left to right. I want to go the opposite way, from right to left. Can I do this? How? |
|||||||