|
CSS - Overflow-x:scroll, But Standards Compliant, And No Scrollbar When Under Width?
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 Similar TutorialsHi- I need to know if IE 5, IE 6 or IE7 are considered standards-compliant and do any of them support fully CS2 and strict standards? Thanks in advance- S Hi, I'm working on my first standards compliant site, so I'm a bit of a novice with the CSS required. You can view a test page I have set up at: 67.207.72.2/test_styles.htm (forum rules won't let me include this as a url) The css file for this page is at: 67.207.72.2/css/test_styles.css My issue is that the right column stops short- I'd like the background color to continue down the length of the page. To try to do this, I set the wrapping div on this section (#main_content) of the page with the appropriate background-color. IE displays the page the way I want it to appear, but FF, Safari, and Chrome all do not. I know this means I'm doing it wrong, but I don't know what to change. I've also tried using an image for a background for the #main_content div, and to set a height: 100% property for the column, but neither of those worked. Can anyone point me in the right direction? Thanks for your time. Hey everyone, I'm making a photo gallery for a client. What I need is the overflow-x to be hidden, and overflow-y to be visible, but even when i set overflow-y to be visible, it appears with a scrollbar. My code is below... 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#galleryContainer{
position:absolute;
height:140px;
background-image:url(/images/galleryBack.png);
background-repeat:no-repeat;
width: 536px;
}
#galleryShow{
position:absolute;
width:478px;
height:113px;
margin-left:28px;
margin-top:14px;
overflow:hidden;
}
#galleryView{
position:absolute;
width:10000px;
}
.galThumb{
float:left;
height:113px;
width: 152px;
z-index:60;
text-align:center;
}
#leftArrow{
position:absolute;
top:52px;
left:7px;
}
#rightArrow{
position:absolute;
top:53px;
left:506px;
}
.galleryArrow{
width:23px;
height:37px;
z-index:40;
}
</style>
<script src="/js/scriptaculous-js-1.8.3/lib/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous-js-1.8.3/src/scriptaculous.js" type="text/javascript"></script>
<script language="javascript">
galleryLocation = 2;
function slideGallery(gallMove,gallIncrement){
new Effect.Scale('thumbImg' + galleryLocation, 70);
new Effect.Scale('galleryThumb' + galleryLocation, 94);
galleryLocation = galleryLocation + gallIncrement;
/*adjust center*/
new Effect.Move('galleryView', { x: gallMove, y: 0});
new Effect.Move('galleryThumb' + galleryLocation, { x: 0, y: -20});
new Effect.Scale('thumbImg' + galleryLocation, 150);
new Effect.Scale('galleryThumb' + galleryLocation, 114);
}
function adjustCenter(){
new Effect.Scale('galleryThumb2', 114);
new Effect.Scale('thumbImg2', 150);
}
</script>
</head>
<body onload="adjustCenter()">
<div id="galleryContainer">
<div id="leftArrow" class="galleryArrow" onclick="slideGallery(163,-1)"></div>
<div id="galleryShow">
<div id="galleryView">
<?php
for($i=1;$i<=14;$i++){
echo "
<div id='galleryThumb" . $i ."' class='galThumb'>
<img src='/images/cupcakeThumbs/galleryThumbs/" . $i . ".JPG' id='thumbImg" . $i . "'/>
</div>
";
}
?>
</div>
</div>
<div id="rightArrow" class="galleryArrow" onclick="slideGallery(-163,1);"></div>
</div>
</body>
</html>
Thoughts? I have a division containing an object for which I would like scrollbars to appear when (and only when) needed... to do this I have set "overflow: auto" ... and it works as desired -- everywhere except Internet Explorer for Windows... in that browser the scrollbars always appear no matter how small the object. the relevant segment: <div style="float:left; margin-top:1em; width:220; height: 220; overflow:auto;"> <object style=" overflow:auto;" data="/danceFeed.php?$getString" type="text/html" width=220 height=219 ;> Set your location defaults to display local events automatically</a> </object> </div> I have also tried "overflow:hidden" & "overflow: visible" (in both places); omitting it in the object; adding "overflow:hidden" to the page body (as recommended by at least one "bug site") and trying variations on the size of the object relative to the containing div. No luck. The border of the object is clearly visible, so when the object is smaller than the available space, the (unneeded) scrollbar extends well below the bottom of the object... any ideas for a work around? (sorry posted to wrong forum) 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? 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! 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. When you first load the page, you get the impression that there isn't much, if anything to scroll down to. But if you try anyway, the long scrollbar button quickly collapses, revealing that indeed there is much more to scroll down to. Why is this? The page is three tables with about 7 rows each. And OF COURSE this works perfectly in Mozilla browsers. 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 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. 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 How do you change the width of a scrollbar inn a CSS script? Also changing the height of the "up/down" buttons. It always amazes me how Microsoft can mess something up that was working before. Take the following example, a table cell set to a specific width, containing a div, width set to 100% of its containing block element (the table cell). Overflow:auto is applied to the div and content is placed in the cell that cannot be wrapped. See the code that follows: html4strict Code: Original - html4strict Code <table width="200px" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 200px;"> <div style="width: 100%; overflow: auto;"> <p style="white-space: nowrap;">Content that should not be wrapped.</p> </div> </td> </tr> </table>
One would expect to have the table cell display with a width of 200 pixels and scrollbars will be displayed for the un-wrappable content. IE7 does not do that. It widens the cells width to accommodate the content. FF follows this perfectly. To fix this, one has to set the div to the same width as the table cell, like so: html4strict Code: Original - html4strict Code <table width="200px" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="width: 200px;"> <div style="width: 200px; overflow: auto;"> <p style="white-space: nowrap;">Content that should not be wrapped.</p> </div> </td> </tr> </table>
Only then, IE7 will correctly display it. Just something to keep in mind when working with percentage widths. I cant get the side menu (colored in red at the moment...will eventually be white like the rest) to overflow: auto with 100% height....i know that you need a fixed with for overflow and the only solution i could find (havent tried it tho) was to use javascript to get the window dimensions but i am trying to avoid using javascript. heres the code: <b>The Page:</b> Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>
TEST PAGE
</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" type="text/css" href="stylesheets/default.css">
</head>
<body>
<div id="content">
<div id="logo">
<img src="/Images/owlstreelogo.jpg" height="100px" width="300px" alt="Welcome to Owl's Tree">
</div>
<div id="quicknav" style="height: 25px; background-image: url('/Images/quicknavbackdrop.jpg');">
<div id="quicknavtext" style="position: relative; top: 4px; margin-left: 25px; font-weight: bold; text-align: center;">
<a href="index.html">Home</a>
<a href="">Profiles</a>
<a href="">Chat</a>
<a href="">Forums</a>
<a href="">Messages</a>
<a href="">Extras</a>
<a href="">Tickets</a>
<a href="">Suggestions</a>
</div>
</div>
<div id="sidemenu" style="height: 405px; width: 200px; background-color: #FF0000; overflow: auto;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</body>
</html>
<b>The CSS</b> Code:
body {
background-image: url('/Images/grassbackdrop.jpg');
}
a:link {
color: #7E5C14;
text-decoration: none;
}
a:visited {
color: #7E5C14;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #00FF00;
text-decoration: underline overline;
}
div#content {
height: 100%;
width: 100%;
background-color: #FFFFFF;
}
I know that most of the css is in the page and not the external css but thats because i was modifying it heavily to see what would work and what wouldnt. The problem is the fixed width on the side menu as it wont be consistent across different screen resolutions. any help would be much appreciated as i dont want to continue work on this page until i can figure this problem out. Hey all, up until recently I have used the various styles and hacks using :after or clear:both; to rectify and force divs to clear. However knowing that these methods won't validate and aren't strictly proper, I've decided to ditch all those methods and try to sort floated divs out correctly. Here is the culprit; Code: <div style="height:144px; margin-bottom:10px;"> <div style="height:110px; padding:0px 0px 5px 0px;"> <div style="width:80px; height:110px; float:left;"> <div><!-- DYNAMIC IMAGE --></div> </div> <div style="width:655px; height:110px; float:left;"> <div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC TEXT --></div> <div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC TEXT --></div> <div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC TEXT --></div> <div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC DESCRIPTION --></div> </div> </div> <div style="height:29px; background-color:#D8D8D8;"> <div style="padding:7px 0px 0px 10px; margin:0px 5px 0px 0px; float:left;"><!-- DYNAMIC TEXT --></div> <div style="padding:7px 0px 0px 10px; float:left;"><!-- DYNAMIC TEXT --></div> <div style="padding:3px; float:right;"><!-- DYNAMIC TEXT --></div> </div> </div> The problem is with the contents of <!-- DYNAMIC DESCRIPTION -->. This is user entered through a HTML editor in their admin console. This can have line breaks etc. and therein is where my problem lies. I have restricted the showing of the "Description" text to 175 chars. Meaning, and providing the user enters more than 175 chars before a line break, it would rarely go on to a new line when displayed in the above page. However if a user added multiple line breaks the content would still display overlaying the bottom, and final div. Now I understand I could remove line breaks etc before rendering, but I would like not to have to do that, I would rather the "Description" div stretch to accomodate the text however it presents itself than run the risk of one day having "leaking" overlaying content. I tried the width:100%; overflow:auto; but this results in scrollbars. I don't want to use hidden either because again it rendered badly. I've also used clear:both; on the final div with no joy. Is there anything that can be done? I'm sure there is, maybe I just can't see the wood for the trees at the moment. Any suggestions would be hugely appreciated. Thanks in advance. |
|||||||