CSS - Scroll Bars? Only Visible When Needed.

Hi,
I am using following css to apply vertical scrollbars in some tables:
"clear: both;
/*overflow: auto;*/
overflow-x: hidden;
overflow-y: auto;
height: 164px;
padding-left: 0px; /*changed_v5*/
padding-top: 0px; /*changed_v5*/
width: 100%;

border-bottom: 1px solid #A5B9D1;
scrollbar-base-color: #EAEEF4;
scrollbar-arrow-color: #506286;
scrollbar-DarkShadow-Color: #506286;
vertical-align: top;"

it seem to be working absolutely fine in IE,safari and firefox but not in Netscape.
Can anyone help me regarding this???
Is there any single style which cud work all the 3 browsers mentioned above

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?

Hey everyone,

I am having a really hard time creating a layout using divs with a sticky footer that is able to resize correctly. In the past I often used tables for my layouts (i know, naughty me) so i was mainly relying on some tutorials to get as far as I have. In general everything looks good at a high enough resolution, however once things are resized the footer starts to act weird, and the page can end up with up to 3 vertical scroll bars. As well the divs start to overlap each other.

If anyone has any ideas as to something i can try it would be greatly appreciated.

the page is www.spacehindu.com/archive.php


and the css for the page is as follows:
Code:

* {
	margin: 0;
}
html, body {
	height: 100%;
	padding:0;
	background-color:#000;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;   
	font-size: 13px;
	padding: 0;           
	margin: 0; 
	letter-spacing: 0.5px;

	}

.wrapper{
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width:100%;
	margin: 0 auto -30px; 
	}						
			
			

h1{
font-family: calibri, arial, helvetica;
font-size: 22px; letterspacing: 0.5px;
color: #fff;
text-transform: lowercase; 
display: inline; 
padding-bottom: 10px;
}
h2{
display: inline;
font-family: calibri, arial, helvetica;
font-size: 15px; 
letterspacing: 5px;
color: #758a95;
font-weight: lighter; 
}
h3{
display: inline;
text-transform: lowercase; 
font-size: 17px; letterspacing: 1px;
color: #fff;
}
h4{
display: inline;
text-transform: lowercase; 
font-size: 13px; letterspacing: 8px;
color: #758a95;
}

a:link, a:visited {
			font-family: arial, calibri, helvetica;
color: #fff;
text-decoration: none;
}
a:hover {
background-color: #374254;
color: #fff; 
text-decoration: none;
}

p {
letter-spacing: 0.5px;
font: Arial, Helvetica, sans-serif #b6bec6;
}

.nav{
	width:400px;
	height:95%;
	float:left;
	background-color:#000;
	min-height:600px;
}
.navImg{
	position:relative;
	top:30%;
}
.content{
	margin-left:400px;
	height:95%;
	background-color:#000;


}
	.archive{
	position:relative;
	left:50px;
	top:10%;

			}

.footer, .push {
	height: 30px;
	background: #12151f; 
	font-family: calibri, arial; 
	font-size: 12px; 
	color: #8f97a4;
	text-align: center;
	clear: both;
}

#dropdown{
background-color:#374254;
color:#CEDBEA;
border: 0px solid;
}
#dropdown .selected {
background-color: #CEDBEA;
color: #000;
border: #000 1px solid;
}

#dropdown .unselected {
background-color: #000;
color: #374254;
}

.fieldset {background-color:#000;
			border: solid 0;
}
.label{font-family: calibri, arial; font-size: 12px; 
letter-spacing: 0.5px;
}
.textarea {
	background: #374254; 
margin: 5px;
border: solid 0 #fff;
color: #cedbea;
font-family: calibri, arial; font-size: 13px;
width: 200px;
}
.message {background: #374254; 
border: solid 0 #fff;
color: #cedbea;
font-family: calibri, arial; font-size: 13px;
border-radius:  10px;

}
.submit {background: #374254;
border: solid 0; 
color: #cedbea;
}

and if it is any help, this is the tutorial i used as my base layout for the divs http://ryanfait.com/resources/footer-stick-to-bottom-of-page/


*EDIT* So i was able to fix the multiple scrollbars by removing "overflow:auto" from a few of the divs. My content div still seems to overlap the footer though. This is especially noticeable if you do a search for "a". a whole bunch of results will appear and the footer will get lost beneath is. Does anyone have any ideas as to how to easily fix this?

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 everybody,

This may actually be a very easy thing to do with CSS, but with me being a newbie who learned what CSS stands for 2 days ago, it's become a huge headache. I've tried googling and looking at some sample code but all my attempts have failed. This is pretty much my last hope. Please help!

Basically, I've been trying to place two different background images at two different specific locations, one of them at left-center, and the other one at right-center. I also need them to be able to move/slide as the user scrolls up and down so that they remain visible at all times.

What I have at the moment is a single background image positioned at left-center, and it does not slide.

My current code looks like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>The Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<META name="description" content="Welcome to my personal website.">
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" bgcolor="#000000" text="333366" scroll="yes" style="background-image: url('devbg-left.jpg'); background-repeat: no-repeat; background-position: left center">

<div align="center"></div>
</body>
</html>

What I desperately need is one more image placed on the right side, and both of them to be able to slide.

I would appreciate all kinds of help. Thank you so much.

All the best,

Yucel

If you look at this web site
http://www.mobilvox.com/

you can see when the screen is smaller than what they designed for the scrollbars come into the window and it scrolls.

I've been using the code below, and I can't seem to get the same behavoir.

Code:

 <style type="text/css">
  /*<![CDATA[*/



  html, body {
    margin: 0;
    padding: 0;
	background-color:#000033;
	
    }
    
  body {
    font: 100%/1.25 verdana, arial, sans-serif;
    color: black;
    background-color: #eef;
	overflow: auto;
    }
    
  p {
    font-size: 1em;
    margin-bottom: 0;
    }
    
  p + p {
    text-indent: 1em;
    margin-top: 0;
    }
       
#header {
    color: #000000;
    background-color: #fff;
    overflow: auto; /*encloses float children
                      see http://garyblue.port5.com/webdev/floatdemo.html
                      */
    text-align: center;
    }

#header ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    
#headermenu1 {
    float: left;
    text-align: right;
    margin-left: 2px;
    display: inline;  /*this is a fix for IE's doubled
                        float margin bug*/
    }
    
#headermenu2 {
    float: right;
    text-align: left;
    margin-right: 100px;
    display: inline; /*same as above*/
    }

#global {
	margin:0 auto;
	width:500px;
	text-align: left;
}

can someone point out the problem.

- Thanks -

Kris

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

Hi,

Why doesn't my vertical nav display in IE?
http://www.sabahseaside.com/sti/testindex.php
Code:

<div id="wrap"> 
<?php include 'banner.php'; ?> 
<div id="right">
		 <div class="prop"></div>
		 <div id="menu">
	<ul id="navmenu">
		<li><a href="facilities.php">Facilities</a></li>
		<li><a href="otherinfo.php">Map & Info</a></li>
		<li><a href="tours.php">Tours</a></li>
		<li><a href="otherprops.php">Other Properties</a></li>
		<li><a href="links.php">Links</a></li>
		<li id="bottom"><a href="contact.php">Contact</a></li>
	</ul>
</div>
<div class="clear"></div>
</div>
<div id="main">

http://www.sabahseaside.com/sti/layout.css

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

I'll admit right off - I don't know much about CSS.

I have a page that displays the event logs on my servers. If I display the whole message of each event it will take up way too much space. I'd like to have it so that if you move your mouse over the message like of the event, a "window" pops up (without navigating away from the page they are on) with the whole message.

I know my viewers are going to be using IE 6.1.

I've looked through here and on google for it, and I think I'm just looking in the wrong place.

Thanks.

Hi,

I am pulling my hair out why the images are not visible on this page
http://www.zahnarzt-oberland.de/Gmunden/Inhalte/test.htm

It is based on this CSS gallery:
http://www.cssplay.co.uk/menu/slide_show.html

thank you in advance
Raggi

Hi,
On the page http://simplyfocusing.net/LitSoc/ I have been trying to get CSS rollovers working.

I use code similar to this

For CSS
Code:

.nav {
	width:172px;
	height:32px;
}
td#nhome {
	background-image:url(nav-home.gif);
	background-repeat:no-repeat;
	cursor:pointer;
}
td#nhome img {
	visibility:hidden;
}
td#nhome:hover img {
	visibility:visible;
}

For HTML
Code:

<td id="nhome" class="nav"><a href="index.htm"><img src="index_files/nav-home-over.gif" alt="" /></a></td>

But the rollovers arent exactly working with IE. Works perfectly in FireFox 1. Also there seems to be some problem with the top right corner in IE. I can correct it by setting height to 0px in .shadowtopcorn but then it screws up FireFox.

Any suggestions on what I should do?

Thanks a lot

Hello, I'm learning CSS and need some help in solving a simple issue. I have a basic set of 6 thumbnails and I would like a drop shadow background image for each (just experimenting with bckgr images; I know this can be done with CSS).

Code:

<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	background-color: #bbb;
}
.wrapper {
	height: 400px;
	width: 744px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10%;
	background-image: url(images/glowBg.jpg);
	background-repeat: no-repeat;
}
.imageHolder {
	height: 400px;
	width: 600px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(images/galleryBg.jpg);
	background-repeat: repeat;
}
.imageHolder img {
	border: 1px solid #999;
	margin-top: 50px;
	margin-right: 45px;
	margin-left: 45px;
	background-image: url(drop.gif);
	background-repeat: no-repeat;
	margin-bottom: 30px;
}
.imageHolder img:hover {
	border: 1px solid #F00;
	margin-top: 50px;
	margin-right: 45px;
	margin-left: 45px;
	margin-bottom: 30px;
	background-image: url(drop.gif);
	background-repeat: no-repeat;
}
-->
</style></head>

<body>
<div class="wrapper">
  <div class="imageHolder"><img src="images/gallery/1th.jpg" width="100" height="100" /><img src="images/gallery/2th.jpg" width="100" height="100" /><img src="images/gallery/3th.jpg" width="100" height="100" /><img src="images/gallery/4th.jpg" width="100" height="100" /><img src="images/gallery/5th.jpg" width="100" height="100" /><img src="images/gallery/6th.jpg" width="100" height="100" /></div>
</div>
</body>
</html>

My problem is that drop.gif for the img tags is not showing up. It is in the same directory as the .html. If you go to http://mydomain/drop.gif it appears, and if you use it for background image of .imageHolder it appears as well so the image/path isn't messed up. I'm beating my head against the wall to get this little thing working. Please help! =D