CSS - Ie7 Only Problem With Scroll Bars

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 have a few questions, and hopefully this will set me for the rest of the day, so I don't have to bother you guys, at least untill tomorrow afternoon.

1. I have a question about scroll-bars, how are they implemented to be translucient?

2. How can I make <DIV>'s auto-stretch to whatever is in them?

3. How can I get it so that the text doesnt go to the very edge of the <DIV> so that it doesn't touch the border, (and look like crap)?

4. Is there any way to take an XML RSS feed and input it directly into any web page (just though I'd throw that one in there so I didn't have to start another thread).

Thanks,
-Sam

I've defined three classes in this page but now I can't scroll down to the end of the page. the vertical scroll bars are missing. why is that?

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 am an art student, and I'm trying to construct my own portfolio site. I am, however, new to CSS, so I dont really know what I'm doing. I'm using Dreamweaver CS3.

I'm using a fixed 2 column template, with header and footer, and the left column as the side bar. Within the right column, I'm trying to make a scrollbar hovering near the top of the div, with clickable thumbnails of my work. Once the thumbnails are clicked on, a larger version of the image takes up the rest of the column.

Does anyone have any idea how to accomplsh this? Even my web design teacher's stumped with this one. I thought about using frames, but thats html...

hi, i am trying to paint the scrollbar with the following
BODY {
scrollbar-face-color: #4E5455;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #999999;
scrollbar-3dlight-color: #999999;
scrollbar-arrow-color: #993300;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
margin:0;
padding:0;
color:#333333;
font: 12px arial, verdana, helvetica, sans-serif;
}

but it doesn't do anything. it's still the default ie scroll bar. does anyone know why?

Hi,
I own a Web Hosting company, though despite my knowledge of CSS coding, I cannot for the life of me find out what CSS script is causing a problem on my site.

If you visit my site, dim-wit.com, you'll see that there is a horizontal bar at the bottom of the page. I can't get rid of it. If you can help, any suggestions would be welcome.

Thanks in advance.

So i just wrapped up some initial styling for a personal website i'm working on, http://www.sociospatial.com/

Looks fine in firefox. Has some minor issues in chrome/webkit, which I'll iron out later. Haven't dared to load it up in IE yet. In Opera, though, I'm having a problem that I don't know where to start.

So without having to paste alot of code, I have a wrapper div and a footer div, just so that I can have the footer hug either the bottom of the viewport or the bottom of the page, whichever is lower. I also wanted some background elements to the page, but I wanted them to hug the bottom as well (load up the page in firefox and resize to viewport to see), so I ended up with something like this:

Code:

<div id="footer">
  <span id="left-bg"></span>
  <span id="right-bg"></span>
</div>

and the styling for these is something like (I can post the actual/more if need be)
Code:

div#footer {
  position: relative;
  height: 25px;
  width: 100%;
}

span#left-bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 400px;
  height: 600px;
  background: transparent url(some-url.png) no-repeat 0 0;
  z-index: -1;
}

span#left-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 400px;
  height: 600px;
  background: transparent url(some-url.png) no-repeat -400px 0;
  z-index: -1;
}

in firefox/webkit at least, these function as i want, so I have 2 spans that spill up through the top of the containing footer div, but still hides behind normal content. If my wrapper content is minimal, it appropriately hugs the bottom of the viewport and i don't have any vertical scrollbar. If I have a lot of content in the wrapper, I have a vertical scrollbar, but the footer and the spillout background elements are all waiting for me at the bottom of the page.

in opera (9), the two spans hug the bottom of the (initial) viewport as I would hope, but I *do* have a vertical scrollbar (even when the content in the wrapper does not necessitate it), and scrolling down reveals that I have a *huge* amount of space that's just empty body background below the footer. This empty space seems vaguely correlated with the "height" values of the spans (the lower the height value, the smaller the empty black background space under the footer), and the vertical scrollbar goes away completely under one of these conditions:
a) i add "overflow:hidden" to the div#footer styling (but of course this stops the span elements from spilling through the top)
b) using the W3-dev opera tools, if I disable both spans
c) after I disable both spans, I enable only one or the other (if I just disable one after both have been enabled, the vertical scrollbar stays, so I have to disable both first).

i'm not quite sure what exactly is going on here, nor really what issue I'm trying to track down (I don't know what to enter for a google search, for example) - I'm kind of new at this. Anyone have any clues to contribute? I'll add more information if needed.

I think this is more of a css problem than php thats why its here

I can get percentage bars to work without text on them, but not with text, the bar is either pushed below the text, or the text is pushed onto 3-4 lines, depending on how wide the bar is

So far i have:

The php
PHP Code:
 $poke[] = '<div class="percentage">
        <span style="position:relative;">'.$text.' ('.round($per, 2).'%)</span>
        <div class="perc" style="width:'.$per.'%;"></div>
    </div>'."\n"; 





the css
Code:

.percentage {
	background-color:#800000;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #000;
	height:15px;
	font-size:10px;
	z-index:2;
}

.perc {
	visibility:visible;
	height:15px;
	z-index:3;
	background-color:#000; 
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

This is how it looks with that code

I've seen the link that Kravitz has linked to http://www.dynamicsitesolutions.com...mage_switching/ and while helpful, I think I'm becoming more confused. Part of the problem is that in those examples (and even there I'm getting confused over which example is supposed to be the one to use) the images are assumed to be the same width, so the property is set for 120px. But my images are different widths. Now I can make the rollovers work by for example:

Code:

.item1 a {
background-image : url(menuoffa.jpg);
float:left;
height:28px;
width:103px;
}

.item1 a:hover {
background-image : url(menuona.jpg);
float:left;
height:28px;
width:103px;
}

and then using html in the following way:
Code:

<div class="item1"><a href="pagelink.htm"></a></div>

My problem is that I can't center the items relative to the page If I were going to use 'tables' to do this, then I'd put all the items in one centered cell, but the whole point is not to use tables so what am I doing wrong?!?! Probably more like, what am I doing right, but anyway... And I've tried reading up on going the horizontal unordered list way http://www.webreference.com/program...ists/index.html but I'm using images instead of text so same problems still

OMG I'm going insane

hello. i am having some trouble, my page has a scroll bar at the bottom but there is nothing there to scroll. It is only a centimeter or so but still aint good!! It is just background...yet i have not idea why, can anyone please help...

I have pasted two stylesheets that im using there is also a text one but i doubt that is the prob!!

Code:

body {
	margin:0px;
	padding:0px;
	font-family: Georgia;
	color:#333;
	background-color:#FFFFD2;
	}
h1 {
	margin:0px 0px 15px 0px;
	padding:0px;
	font-size:28px;
	line-height:28px;
	font-weight:900;
		color:#ccc;
	}
p {
	font:11px/20px Georgia;
	margin:0px 0px 16px 0px;
	padding:0px;
	}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}

a {
	color:#ffffd2;
	font-size:13px;
	text-decoration:none;
	/*font-weight:600;*/
	font: Georgia;
	}
a:link {color:#ffffd2;}
a:visited {color:#ffffd2;}
a:hover {background-color:#A4AA54;}

a.blue {
	color:#0000CC;
	font-size:11px;
	text-decoration:none;
	font-weight:600;
	font: Georgia;
	}
a.blue:link {color:#0000CC;}
a.blue:visited {color:#0000FF;}
a.blue:hover {background-color:#eee;}
#logodiv {
	position:absolute;
	top:6px;
	left:14px;
	width:91px;
	height:126px;
	background-image: url(../images/logo/gglogoweb.gif);
	background-position: 1% 2px;
	background-repeat:no-repeat;
	visibility: visible;
	z-index:1;
}
#slogandiv {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:137px;
	background-color:#A4AA54;
	visibility: visible;
	z-index:0;

/* This is a fix for IE% */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:137px;
	width:100%; /* the correct height */
	}
/* "be nice to Opera 5" */
body>#slogandiv {height:137px; width:100%;}

#MenuBar {
	position:absolute;
	top: 136px;
	left:0px;
	width:100%;
	height:32px;
	padding-bottom:2px;
	background-color:#667138;
	border-bottom:0px solid #A4AA54;
	line-height:17px;
	z-index:1;
	/* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:32px;
	}
/* Again, "be nice to Opera 5". */
body>#MenuBar {width:100%; height:32px;}

#Content {
	position:absolute;
	top: 175px;
	left: 185px;
	width: 81%;
	padding:15px;
	border: 0px solid #000000;
	background-color:#ffffd2;
	z-index:0;
	}
body>#Content {width:81%;}
	
		
#Menu {
	position:absolute;
	top: 166px;
	left:0px;
	width:150px;
	padding:10px;
	background-color:#667138;
	border-right:2px solid #A4AA54;
	border-top:0px solid #A4AA54;
	line-height:17px;
	/* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:150px;
	}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}

and the other
Code:

/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
  
/*Style for the background-bar
.clBar{position:absolute;  width:10; padding-right:10; height:10; background-color:#667138; layer-background-color:yellow; visibility:hidden}

/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding-top:3px; font-family:georgia; font-size:12px; font-weight:bold; text-align:center; }
.clLevel0{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel0over{background-color:#A4AA54; layer-background-color:#A4AA54; color:#ffffd2;; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#667138; layer-background-color:#667138}

/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:georgia; font-size:11px; text-align:center;}
.clLevel1{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel1over{background-color:#A4AA43; layer-background-color:#A4AA54; color:#ffffd2; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#A4AA54; layer-background-color:#A4AA54}

/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold; text-align:center;}
.clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:#667138; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}/* CSS Document */

i can paste the php file too if needed but it iwll have to be in another post because im running out of spce in this one!!

If anyone can help that would be really appreciated!

Thanks very much

RF

Hi Guys i want to add a scroll bar to my User Tab so that i scroll for more users ,This is the code for the User Tab of the script i am using

Top User Code
<div id="an_box_topmember">
<div class="an_btm_header"><span><strong>Top User</strong></span></div>
<div class="an_btm_content">
<ul>

Scroll Bar Code
<div style="width: 190px; height: 190px; overflow: auto; padding: 5px">
</div>


Where will i add the scroll bar code,Thanks all comments are welcome

seems to work in IE but not firefox... how do i get around this and make it work for both?

well ive used this code snippet in a lot of pages and its worked. but this page is giving me trouble.

my problem is the colors on the scroll bar itself not changing to what i tell it to. instead its, 'stock'

heres the site, go to the rumors sections:

www.mikeberlucchi.com

heres the code:

Code:

<td align="right">
			   <DIV 
            style=' 
            color: #000000; 
            background-color: #867878; 
            border: solid 0px black; 
            width: 300px; 
            height: 250px; 
            overflow: auto; 
            scrollbar-face-color: #C3D6DA;
            scrollbar-shadow-color: #3D5054;
            scrollbar-highlight-color: #C3D6DA;
            scrollbar-3dlight-color: #3D5054;
            scrollbar-darkshadow-color: #85989C;
            scrollbar-track-color: #95A6AA;
            scrollbar-arrow-color: #FFD6DA;
            '>

any input would be awesome, thanks

I know almost nothing about css, but i was using other codes to try and make something i wanted... .. Yea, well it didn't work out. heh.

I want to have a scroll box within an image. Like in video games where when you read something a scroll pops up, and you can scroll the text but the image doesnt move or anything.


This was the code i was trying to change.. It is for myspace, it puts all of the comments in a scroll box. But i dont need to it for that, i want to put regualr text in it.
Code:

<style type="text/css"> 
td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;} 
td.text td.text table {background-color:transparent!important} 
td.text td.text table td {font-size:13} 
td.text td.text table table br {display:inline;} 
td.text td.text table b, td.text td.text table table td {font-size:8pt} 
td.text td.text table table td {padding:2;} 
td.text td.text {height:0} 
td.text td.text table table table, td.text td.text table br, .rid br, td.text 
td.text table .orangetext15, td.text td.text .redlink, td.text td.text  span.btext {display:none;} 
</style> 

</td></tr></table></td></tr></table><br> 




<table class="rid"> 
<tr><td><table style="display:none"> 
<tr><td><table><tr><td> 

<style type="text/css"> 
td.text td.text table table table, 
td.text td.text table br, 
td.text td.text table .orangetext15, 
td.text td.text .redlink, .rid br, 
td.text td.text span.btext {display:none;} 
table[id*="Friends"] {display:none;} 
td.text td.text table td, td.text td.text table {height:0; padding:0; border:0;} 
td.text td.text table {background-color:transparent!important;} 
td.text td.text table td {font-size:10;} 
td.text td.text {height:0;} 
.r4wr table table table {width:auto!important} 
td.text td.text table b, td.text td.text table table td {font-size:10pt;} 
l{note: comment padding fix;} 
td.text td.text table table td {padding:3px;} 
td.text td.text table table br {display:inline;} 
l{note: scrollable comments;} 
.rid {display:block; width:433px; height:462px; overflow:auto;} 
</style> 
</td></tr></table></td></tr></table> 
</div><br> 
<div class="rid"> 
<table style="display:none"><tr><td><table><tr><td>

The image i want to place it in is 380 by 466 pixels..

Er... any broken rules i apologize for.. Uhm, thanks..


-woe

I would like to have the content section of my page have only a vertical scroll bar, an no horizontal one. How can I make content wrap if it goes over horizontaly, but scroll if it goes out of bounds verticaly?