|
CSS - Overflow-y Is Always Scrollbar
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? Similar TutorialsI 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) 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 My CSS works in IE and Mozilla but not Netscape or Opera I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there). Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately? Here are the related parts of my CSS: /* CSS styles */ BODY { font-family : Verdana, Arial, Helvetica, sans-serif ; font-size : 10pt; background : Black; color : White; margin: 0; padding: 0; border-width: 0; overflow: hidden; } HTML { overflow: hidden; } #LeftNavDIV { position:relative; width:185px; height:100%; float:left; padding:2px 0px 0px 0px; margin:0px 0px 0px 0px; border:1px solid white; overflow:auto; } #ContentDIV { position:relative; height:100%; width:75%; float:right; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; border:0px dashed #336699; overflow:auto; } Hi there, I have set up some scollbar colours for IE. I have some scrollable divs that are using the css, but the main scrollbar to the right of the browser does not have the css applied to it. This is my css: PHP Code: scrollbar-arrow-color: #ffffff; scrollbar-3dlight-color: #d4e5ab; scrollbar-darkshadow-color: #517107; scrollbar-face-color: #719e07; scrollbar-highlight-color: #add450; Any ideas why that is? Is it possible to use css + javascript to create a scrollbar with only an arrow for scrolling down and another arrow for scrolling up and nothing else like default windows? If you can provide some links, i will appreciate. thanks colored scrollbars for the following css isn't working anyone know why?
Code: /*
style sheet (C) 2004 by Dr3am Designs, made by Dude
*/
body { background: #000000; scrollbar-face-color: #000000; scrollbar-highlight-color: #000000; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #D8DFE7; scrollbar-track-color: #000000; scrollbar-darkshadow-color: #000000; margin: 0px; padding: 0px; border: 0px; text-align: left; color: #D8DFE7; font-family: Verdana, Arial, Helvetica; font-size: 7pt; }
hr { background-color: #000000; color: #D8DFE7; height: 1px; border-width: 0px; }
a:link,a:active,a:visited { color: #D8DFE7; text-decoration: none }
a:hover { text-decoration: underline; color: #D8DFE7; }
li,ul { list-style-type: square; background-image: none; list-style-position: inside; color: #D8DFE7; }
input { background: #D8DFE7; color: #000000; font: normal 11px Verdana, Arial, Helvetica, sans-serif; border: 1px solid #666666; border-style: outset; text-align: center; text-indent: 2px; }
textarea, select { background: #D8DFE7; color: #000000; font: normal 11px Verdana, Arial, Helvetica, sans-serif; border: 1px solid #666666; border-style: outset; text-align: center; text-indent: 2px; }
form { margin: 0px; padding: 0px; }
td { background-color: #000000; color: #D8DFE7; font-family: Verdana,Arial,Helvetica; font-size: 7pt; }
img { border: 0px; }
now strangely it is working he http://www.dr3amdesigns.com/contact.php for the textarea scrollbar, but not for the page itself or the main page http://www.dr3amdesigns.com/ - any help, please? Hi guys, Currently, the only CSS I know of to edit the scrollbar is Code:
<style type="text/css">
body {
scrollbar-face-color: #9B9A9A;
scrollbar-shadow-color: #171717;
scrollbar-highlight-color: #171717;
scrollbar-3dlight-color: #171717;
scrollbar-darkshadow-color: #171717;
scrollbar-track-color: #171717C;
scrollbar-arrow-color: #171717;
}
</style>
</head>
However, I want a little more customization. Basically, the only thing I want to show is the actual bar in the middle that scrolls up and down. Nothing else. So, what I want to do is make everything else the normal color of the page, and make the bar in the middle a light color. The only problem is, the function scrollbar-face-color edits the bar itself, AND the arrow boxes above and below it. Is there are a more specific function to edit just the bar only? Thanks. Hi, Why does the following not change my scrollbar colours? PHP Code: body { font: 14px Arial, sans-serif; color: #18387B; background: #687BA3; margin-top: 5px; margin-left: 5px; SCROLLBAR-FACE-COLOR: #FF9900; SCROLLBAR-HIGHLIGHT-COLOR: #FF9900; SCROLLBAR-SHADOW-COLOR: #999999; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #666666; } I'm trying to get the content on this site http://www.jarretporter.com/thaiorchid to expand down the page, and not under the footer. However, when there is little to no content, as currently on the Menu page, I would like for the footer to stay glued to the bottom of the page. If you'll view the Home and Contact pages you'll see what I'm referring to. Here's the code: Code:
html, body{
margin:0;
padding:0;
height:100%;
}
body{
background: #000000 url('imgs/bg-tile.jpg') repeat-x 0px 0px;
color: #cdbc8d;
font-family: georgia;
font-size: 1em;
text-align: center;
}
#container{
position: relative;
margin: 0px auto;
padding: 0px;
width: 100%;
height: auto !important;
height: 100%;
min-height: 100%;
}
#header{
position: relative;
margin: auto;
width: 800px;
height: 145px;
background: url('imgs/orchid2.png') no-repeat top center;
clear: all;
}
#nav-glow{
margin: auto;
padding: 0px;
width: 800px;
height: 100px;
background: url('imgs/glow.png') no-repeat center 5px;
text-align: center;
clear: all;
}
#nav{
margin: 0px auto;
padding: 0px;
width: 100%;
height: 55px;
text-align: center;
}
#nav ul{
margin: 0px auto;
padding: 0px;
width: 600px;
height: 55px;
list-style-type: none;
}
#nav ul li{
margin: 0px;
padding: 0px;
float: left;
}
#nav ul li a{
padding: 0px;
width: 150px;
height: 50px;
float: left;
}
#content{
position: relative;
margin: auto;
padding: 0px 0px 50px 0px;
width: 500px;
font-family: georgia;
font-size: 1em;
color: #ae9e72;
text-align: left;
line-height: 1.5em;
clear: all;
}
#footer{
position: absolute;
bottom: 0 !important;
bottom: 0px;
margin: 0px;
padding: 20px 0px;
width: 100%;
color: #cdbc8d;
background: #fff url('imgs/foot-tile.jpg') repeat-x 0px 0px;
font-family: verdana;
font-size: .78em;
text-align: center;
}
Here's the gist of the layout: Code: <div id="container"> <div id="header"> </div><!-- end header --> <div id="nav-glow"> <div id="nav"> </div><!-- end nav --> </div><!-- end nav-glow --> <div id="content"> </div><!-- end content --> <div id="footer"> </div><!-- end foot --> </div><!-- end container --> I've searched the web hi and low yet I have not found any answers. I am using an iframe (it's a love-hate relationship) for my website. I have my index page loaded up with a flash .swf which influences the iframe to switch pages when the user clicks on any of the provided links. *PROBLEM* One of my links consists of a blogger- formulated with 'cryptic blogger code' which I have no intention on learning- just working around. However, no matter how hard I try and mess around with the blogger page's html code, I cannot get rid of the x-axis scrollbar- it appears when it is not needed at all and I am unsure of doing anymore messing around for fear of messing up the code. I've also tried adjusting the actual iframe script but still no results. Please- if any html/css demi-gods/goddesses can help me get rid the the iframe's horizontal scrollbar BUT keep the vertical one, you'll be my best friend :P Here are the websites: (ps- tell me what you think- and it isnt finished) URL <- actual site URL <- blogger page (you can see where i've tried to edit it but still no results) -Jason (i posted this in the html section hoping some html guys would help me- but it was a dud ) In the html below (see also http://www.creatief-denken.be/opl47k.html) I have in IE a horizontal scrollbar and a vertical scrollbar. In the #contentRight div I use the command "overflow: auto" in order to let the text scroll vertically. I want to get rid of the horziontal scrollbar but I don't want to use the command "overflow-x: none" and "overflow-y: auto", because then the vertically scrolling disappears completely on a MAC (OSX). I have tried already in many ways (change the width of the div's) to let the horizontal scrollbar disappear but it doesn't work. Is there an easy way to get rid of this horizontalscrollbar? This is the HTML: Code: <html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<style type="text/css"><!--
.tekst { color: #4c5ea1; font: 11px Arial, Helvetica, sans-serif, Arial, Helvetica, sans-serif; text-align: justify; margin-top: 0px; line-height: 16px;}
#contentRight {position:relative; width:490px; top:-10px; right:0px; z-index:100; voice-family: "\"}\""; voice-family:inherit; width:505px; margin-left: 20px;}
/* Again, "be nice to Opera 5". *//*#contentRight {width:450px;}*/
#contentRight p {width:420px; font:12px/16px arial, helvetica, saborder-left-width: 10px; margin: 0px 0px 10px 0; padding-right:0px; padding-left:0px;}
#contentRight img{ border-bottom-style: solid; border-bottom-color: #9DEFC7;border-right-style: solid; border-right-color: #9DEFC7; border-left: 15px; border-left-style: solid; border-left-color: #9DEFC7; border-top-style: solid; border-top-color: #9DEFC7; }
#contentRight div { font-size: 11px/16px arial, helvetica, sans-serif; height: 335px; overflow: auto; width: 465px; }
H1 { color: #0C0F7E; font-weight: 400; font-size: 32px; font-family: Arial; text-align: left; text-decoration: none; line-height: 32px; margin-bottom: -5px;margin-left: 0px;}
-->
</style>
</head>
<body bgcolor="white" text="black">
<table border="0" bordercolor="red" width="100%" height="100%" align="center">
<tr height="100%">
<td align="center" height="100%" valign="top">
<table width="680" border="0" align="center" cellpadding="0" cellspacing="0">
<tr height="435">
<td colspan="3" height="435" width="510" bgcolor="#9DEFC7">
<div id="contentRight"><br>
<div class="tekst">
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
<br><br>
bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>
bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br></p>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Hello every one, Am sameer pandurangi and new to web development. I wanted to create a css for SCROLLBAR with rounded corners . Actually i dont know if there is any such property for this in scroll bar. Am able to change the color through css but am not getting the rounded corners for that. So i hope there is someone out there with some good idea. Thanks in advance. Hi guys, I'd like to find out if there is any way to change the color of the scrollbar in a listbox using the css. And also, is there a way to change the width of the scrollbar as well? Thanks in advance. How can I fix to have scroll bar in IE? It does have scrollbar in FF. It's mostly the main div. Any help? CSS Code: Original - CSS Code div#logo { position: absolute; top: 10pt; left: 20pt; width: 150pt; height: 150pt; /*border-width: medium; border: blue 4px dashed;*/ } div#news { font-family: verdana, arial, helvetica, sans-serif; font-size:10pt; position: absolute; top: 160pt; left: 20pt; width:150pt; height: 200pt; /*border-width: medium; border: red 4px dashed;*/ } div#main { font-family: verdana, arial, helvetica, sans-serif; font-size:10pt; position: absolute; top: 160pt; left: 180pt; width: 500pt; /*border-width: medium; border: green 4px dashed;*/ } /* navigation BEGIN */ div#topBar { font-family: verdana, arial, helvetica, sans-serif; font-size:10pt; position: absolute; top: 10pt; left: 180pt; width:500pt; height: 150pt; /*border-width: medium; border: magenta 4px dashed;*/ } @media screen { div#topBar { position: fixed; } * html { overflow-y: hidden; } * html body { font-family: verdana, arial, helvetica, sans-serif; overflow-y: auto; height: 95%; padding: 0 0.05em 0 0.1em; /* top right bottom left*/ } * html div#topBar { position: absolute; } } /* navigation END */
hi, http://cyrusnetworkslive.com/products.php?sub_category_id=ph100ce10&brand_id=mo1 How can I get rid of vertical scrollbar, I want only the horizantal one. I am doing something like the in my css. Code:
<style type="text/css">
div
{
background-color:#FFFFFF;
width:950px;
overflow: auto
}
</style>
Hi, I'm having a problem with FF & scrollbar when I center my page. When the page is smaller then the window, the scrollbar in FF is complete hiden, not disabled like in IE. Let's say I have two pages, page1 don't need scrolling and page2 does. So, when I jump from page1 (no scrolling) to page2 (scrolling) my page will shift to the left when the scrollbar apears. Is there a way to always display the scrollbar like in IE --- display but disable, when need it enable. Thank you! I'm fairly new to CSS, and have been using it to add styles to a personal profile page on another website. I noticed recently that in any pages I've used scrollbar codes, the word "scrollbar" would occasionally change to "AdMchaa" and then change back in a few days. I was always on the same computer and same IE 6 browser when I noticed this, with the same settings as far as I can tell. I figured it was a site glitch until I noticed it just now on a website I've just started working on - it even happened in an example where I'd used ampersand codes for the brackets so the code would display on the page, and again in textareas - <style type="text/css"> body { AdMchaa-face-color: COLOR; AdMchaa-highlight-color: COLOR; AdMchaa-3dlight-color: COLOR; AdMchaa-darkshadow-color: COLOR; AdMchaa-shadow-color: COLOR; AdMchaa-arrow-color: COLOR; AdMchaa-track-color: COLOR; } </style> Yesterday the codes read fine and worked. Any info on this would be greatly appreciated! I have a div absolutely sized with a wrapper div sized to take up 100% of both the width & height of the afore-mentioned div. The wrapper div has it overflow set to auto. Inside is several divs & anchors making up a tree. In the CSS the anchors have hover effects that only alters the background color. Everything seems fine, but the scrollbar flickers on each anchor mouseover. This only happens in IE. It seems that IE wants to recalculate the overflow on each mouseover. Has anyone had similar results? Or any suggestions to solving this irritating effect? Hi guys I've this code, it looks fine in IE (damn..) but it does not look in Firefox Code:
body {
scrollbar-track-color: #D8AFAF;
scrollbar-face-color: #660000;
scrollbar-highlight-color: #927373;
scrollbar-3dlight-color: #663333;
scrollbar-shadow-color: #660000;
scrollbar-darkshadow-color: #660000;
scrollbar-arrow-color: #FF0000;
}
What's wrong ? - my Firefox version (1.0.1) - the css code ? thanks |
|||||||