|
CSS - Dynamic Scrollable Areas Almost Right In Ie
I'm creating an area that will have code snippets in it, I want it to scroll horizontally (wrapping may make the code inaccurate in some languages), but vertically I want the height of the area to grow dynamically. An example can be seen on this page:
http://scratchprojects.com/2006/02/sample_article_tic_tac_toe_p02.php The problem is, in IE, if there is a horizontal scroll bar, it doesn't make quite enough room, so you have to scroll vertically as well. Shrink your browser window so the code snippet at the bottom of the page doesn't fit and you'll see the two scrollbars appear. In Firefox and Opera, just the horizontal scrollbar shows up. Here's the basics of the code: Code: <div class="code">
<pre class="codeblock">Private Sub menuAboutTTT_Click(ByVal sender _
As System.Object, ByVal e As System.EventArgs) Handles menuAboutTTT.Click
MessageBox.Show("Tic-Tac-Toe v1.0" & vbCrLf & _
"See how this and other programs work at" & _
vbCrLf & "http://www.scratchprojects.com")
End Sub ' menuAboutTTT_Click</pre>
</div>
Here's the style sheet: Code: .code {
text-align: center;
margin: 15px;
}
.codeblock {
text-align: left;
background: #fff;
border: 1px;
border-style: inset;
width: 99%;
height: auto;
overflow: auto;
}
Any help would be appreciated. Thanks. Similar TutorialsI'm having trouble getting the height to be the same for two divs. One is a big content area (left) and the other is a vertical menu (right) that is created dynamically with PHP. I need the bottom of both divs to line up UNLESS there is a lot of content in the left div that makes the left side taller. (So, if there's not much text in the left content area, it should go ahead and line up with the bottom of the menu.) Is this possible? I'm stumped. Any help would be greatly appreciated! Thank you. Code: #content {width: 750px;height: 100%;position: relative;margin: 10px 25px 0 25px;}
/*BEGIN LOCATION PAGES MINIMUM HEIGHT STYLES*/
/* for Mozilla/Safari/Opera */
*>.boxContent {padding-top: 900px;min-height: 1px;}
*>#locDoctors, .locInfoMap {margin-top: -900px;}
/* for IE, with IE5/Mac backslash filter \*/
* html .boxContent {height: 900px;}
/* end filter */
/*END LOCATION PAGES MINIMUM HEIGHT STYLES*/
/*BEGIN LOCATION BOX*/
#locationBox {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 614px;height:810px;position: relative;background-position: bottom;background-color: #DDF0F2;}
#locationBox .boxTop {background-image: url(../images/location/pgTopLocation.gif);background-repeat: no-repeat;width: 100%;height: 20px;}
#locationBox .locInfoMap {width: 100%;height: 408px;background-image: url(../images/location/mapLarge.gif);background-repeat: no-repeat;background-position: top right;}
#locationBox .boxBot {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 100%;height: 15px;}
/*END LOCATION BOX*/
/*LOCATION MENU START*/
#locationMenu {width: 136px;position: absolute;z-index: 10;right: 0px;}
#locMenuList {margin: 0;padding: 0;font-size: 9px;list-style: none;}
#locMenuList li {margin: 0;padding: 0;display: inline;}
#locMenuList li.main {height: 30px;height /**/: 30px;/* for IE5/Win only */ }
#locMenuList li.sub {height: 20px;height /**/: 20px;/* for IE5/Win only */ }
#locMenuList li a {text-decoration: none;color: #FFFFFF;}
#locMenuList li.locHead {display: block;margin: 0;padding: 10px 9px 9px;font-weight: 900;color: #FFFFFF;}
...
/*LOCATION MENU END*/
Code: <div id="content"><!--CONTENT SECTION START-->
PHP MENU IS CREATED HERE...
<div id="locationBox"><!--OPEN BOX-->
<div class="boxTop"></div>
<div class="boxContent">
<div class="locInfoMap">
MAIN CONTENT GOES HERE...
</div>
</div>
</div><!--CLOSE BOX-->
</div><!--CONTENT SECTION END-->
what I am wanting to do is have a reverse of this so that all the areas i contain within a given <div class="printerOnly"></div> is not shown on the screen but is ready to be printed, when the print button is pressed of course. and all the other areas are not printed. is this possible ? Code:
<style type="text/css">
@media all {
.page-break { display: none; }
}
@media print
{
.page-break { display: block; page-break-befo always; }
}
@media print {
div.screenOnly { display: none; }
}
@media print {
div.noborder { border-width: 0px; border-style: none; }
}
</style>
<div class="screenOnly">
this shows on the screen
</div>
<div>this is printed</div>
Ok, I've read over and over my CSS and everything seems perfect. In my HTML editor, the CSS is working, but when it gets the the internet, the content goes berserk. Here are the parts of the code that are not responding: CSS #content { width:610px; margin-left:0px; position:absolute; left:128px; top:156px; padding:25px; height: 838px; } HTML <div id="content"> (too long for post, please veiw source at website) </div> And the link to the website Image example here. Text different behavior Why is is that the text drops down in different area of the div. The div is set a specific size but the text drops down where ever it wants. I have not added ant <br> tags just srtaight text and it still drops down where ever. Why does the text not go all the way to the end of the div anyway? Hi I've got 4 divs that are of the exact same size. I need them to all occupy the same real estate on a page. three of them will always be hidden and only one is visible at a time, this is controled by javascript. My question is what kind of positioning tricks do I have to do in order to make these 4 identical sized divs occupy the same space. I tried relative positioning like this div1{ position:relative; top:0; left:0; height:200px;} div2{ position:relative; top:-200; left:0;height:200px;} div3{ position:relative; top:-400; left:0;height:200px;} div4{ position:relative; top:-600; left:0;height:200px;} This only moved the contents of each div up to the desired location, however, it did not move the actual div itself, so I'm left with the reserved 600px high worth of empty space Please help So, here is the basic gist of what I'm attempting to achieve... Two main fixed-width columns: the one on the left containing my latest blog entry and the one on the right containing a menu of thumbnails. I want the menu column on the right to stop at the height of the left column and use a vertical scroll bar when the thumbnail content is too large to fit. I don't want to use a fixed height for the div containing the thumbnail menu because I want its height to reflect the height of the blog entry on the left. I started out with this tutorial but I don't think it's necessary for my purposes, or even necessarily a good starting point for this type of functionality. TLDR: It currently looks like this, and I want it to look like this. Any ideas? Hello all, I'm designing an element on the page that will be masked (i.e., overflow:hidden). I want it to scroll vertically (if done with the scroll wheel or trackpad) but not display a scrollbar. Any ideas? Any help at all would be greatly appreciated. Thanks so much I need two scrollable div inside a table. Please help. Details: The div contains a table that should force it to show the scrollbars. This table inside the div has specific width(1180px). The div on the other hand should have its width set to 100%. As to why i'm using a table for the layout, i'm using a masterpage that uses table. Attempt #1 i set the div width to 1180px. This showed the scrollbar. But i don't want the users to be stuck to this if they have bigger resolution. Attempt #2 i added position: absolute; --> there are scrollbars but the 2 divs are overlapping HTML: Code:
<html>
<head>
<style>
.container
{
border: 2px solid red;
overflow: scroll;
width: 100%;
position: absolute;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<td>
<div class=container>
<table border style="width: 1800px;">
<tr>
<tr>
<td width=200> January </td>
<td width=200> February </td>
<td width=200> March </td>
<td width=200> Apr </td>
<td width=200> May </td>
<td width=200> January </td>
<td width=200> February </td>
<td width=200> March </td>
<td width=200> Apr </td>
<td width=200> May </td>
<td width=200> January </td>
<td width=200> February </td>
<td width=200> March </td>
<td width=200> Apr </td>
<td width=200> May </td>
</tr>
</table>
</div>
<div class=container>
<table border style="width: 1800px;">
<tr>
<tr>
<td width=200> aaaa</td>
<td width=200> bbbb </td>
<td width=200> cccc</td>
<td width=200> ddd</td>
<td width=200> eee</td>
<td width=200> fff</td>
<td width=200> ggg</td>
<td width=200> hhh</td>
<td width=200> iii</td>
<td width=200> jjj</td>
<td width=200> kkk</td>
<td width=200> lll</td>
<td width=200> mmm</td>
<td width=200> nn</td>
<td width=200> ppp</td>
</tr>
</table>
</div>
</td>
</tr></table>
</body>
</html>
I am trying to work out if its possible to have a div with overflow-x but have the height to whatever the height of the content is. Obviously the content won't have a fixed height for me to just set it. At the moment ive just got: <div style="display:block; overflow-x:auto;"> Lots of content here </div> Is this possible? Thanks My ultimate goal: I have some content contained in a scrolling div (overflow:auto). If I hover over one of the links contained within this scrolling div, I would like to get a Netflix-style popup to come up. I want it to overlap over top of the scrolling div. My current attempts have resulted only in the popup content opening within the scrolling div, and making the scrollable region larger. This is not very good as if the user attempts to scroll too see the content they are no longer hovering over the link and the content disappears. Thus, I want the popup to happen outside of the confines of the scrolling div. My test: I have created a test to get down to the basics. In example 1, the blue div overlaps the green one. The green div remains 400px but the blue div overlaps it extends beyond it to 800px. In example 2, I add overflow:auto to the outer (green) div. In this scenario, the outer green div gets enlarged to 800px, only 400 of which is visible, and the rest hidden in the scrollable area. The inner blue div does not overlap the scrollable region so that the full 800px is visible. What I would like to see is for the green div to stay at 400px but have the blue div cover up the scroll bar and overlap the confines of the scrollable region. Is this at all possible? Any help is appreciated. I don't necessarily have to use divs.. anything I can use to get the job done would be great. Example 1: <html><body> <div style="background:green;height:200px;width:400px;z-index:0;position:absolute;"> <div style="background:blue;height:100px;width:800px;z-index:1;position:absolute;"></div> </div> </body></html> Example 2: <html><body> <div style="background:green;height:200px;width:400px;z-index:0;position:absolute;overflow:auto;"> <div style="background:blue;height:100px;width:800px;z-index:1;position:absolute;"></div> </div> </body></html> Hi All, I have a skeleton css site here http://www.10eight-design.co.uk/temp/layout_test_float.htm You'll notice that there is a LR scroll bar at the bottom of the scrollable div. Is there a way to remove this? That's all. Rob I've been wanting to solve a table problem I've had for a long time. I want a scrollable table without needing to specify specific px widths for the headers and the table cells. I've been told there is no solution to this. What I've done is duplicate the table. I create a div, give absolute positioning to both tables, show the headers of table1 then use visibility:hidden height:0.01em on subsequent rows. I position the duplicate table - table2 1.8em (1 row) below table1. (I think something could be done with z-index too, and if someone wants to demonstrate I'd be happy to see it). This table has the same data, but skips the headers. Some work is also done to make room for the scrollbar. Here's a sample: http://restoredirect.com/test.html You'll notice I'm close, but just a little off. Can someone help me to get it right? While not ideal, I think this may help many people. Also, if someone does have a more ideal approach please speak up and let me know! Hi. I'm having a funny problem where using 100% height makes the content div scrollable, even when there's no actual content in it. I am trying to make my content div be 100% height of the window size, so I have the following css: Code:
html, body
{
background: #FFFFFF;
margin: 0px;
padding: 0px;
height: 100%;
font-family: Trebuchet MS, Helvetica, sans-serif;
}
#wrapper
{
background: #FFFFFF;
position: relative;
width: 100%;
height: 100%;
margin: 0px auto;
}
#header
{
background-image: url("images/h-bg.png");
background-repeat: repeat-x;
margin: 0px auto;
padding: 0px;
width: 960px;
height: 107px;
}
#header .logo
{
margin-left: 10px;
}
#header .bg_l
{
float: left;
}
#header .bg_r
{
float: right;
}
#nav
{
background-image: url("images/n-bg.png");
position: relative;
margin: 0px;
width: 100%;
height: 143px;
text-align: center;
}
#nav a
{
float: left;
outline-style: none;
width: 240px;
height: 156px;
}
#nav_btn_wrapper
{
width: 960px;
margin: 0px auto;
}
#content
{
position: relative;
background-image: url("images/c-bg.png");
background-repeat: repeat-y;
width: 930px;
height: 100%;
margin: 10px auto 0px auto;
padding: 10px 15px 0px 15px;
font-size: 12pt;
}
As you can see I have height: 100% in every parent element from container up. Without the height set to 100%, the container div just cuts off, which is bad because I'm using a glowy background on it, and it just cuts off abruptly. I have used this method before on another design, but it worked only cos the wrapper and the container were both white, so when the container chopped off, the wrapper would continue, and it would look seemless. See www.landmarkmeds.com to see the problem in action. I have tried to remove the margin on the content div, but that only moved it up a bit. Also, looking at it in firebug, it reports the height as the correct value, and even shows the ruler down to the bottom of the browser window. Why then it allows me to scroll I don't know! I'm sure it's something stupid I've missed, but please help! *edit* Happy new year everybody, and hopefully with more peace then last year. I need some help with this. How can I set a block element, like a div, locked inside an area which have scrollbars? When the content scrolls horizontally the block should not move. I did try many things now for a few days, but I can't get it to work. Thanks hello all, i recently tried to implement a layout which fills the available screenspace, with the main content area as scrolling box. I thought i succeeded, because firefox shown no problem, but when looked in IE, IE is very slow to render it, making it just unusable. I've been looking for a way around ,but i'm out of luck so far, so i thought i'd seek advise on this forum. Maybe you can tip me in the right direction ! An image is worth a thousand words, so please have a look at the attached image, it summarizes the screen structure. As you can see, the only scrollable area is the center orange zone : "viewport". thank you for your time and help ! Alexandre http://cheers-sendai.com/fluidframe.htm has a great and simple example of 3 cols (OK, 2 cols in the middle section makes "4 cols"), header and sticky footer, where the middle col has overflow:auto so it can be scrolled. GREAT example, I think (due to the use of bg colors, etc.). The left/right/width values of the divs are manipulated so that the middle section runs from 10% to 90% and the left/right divs fill in accordingly. I'd like to be able to set, for example, the left and right divs to be 150 px wide (NO percentages!) and have the middle section stretch between them (regardless of viewport width) and be able to be scrolled, too. The problem I see is that most examples use percentages. I can set the left div to be a fixed width, then set the middle section left coord. to be, say, 150px, but then I need to set its width to stretch to "150 to the left of the right side of the viewport" and I don't know how to do this. Thanks. hi every one... How can I display static headers in a table, so that headers remain visible while user scrolls the table body? This is not working in IE 7 any working example please 2. iam having a column which holds data around some 100 to 200 characters... by default i want to display some 50 characters and rest of the characters can be viewed by moving the column... if this is possible let me know how to do it with some sample code......i dont know much about CSS 3. One more problem iam facing is with the number of columns displayed in the table. I have to display around 15 to 20 columns in a table... with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page) I need a fixed table width and height and also fixed column width and height..... Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns) |
|||||||