Learn VBA & Macros in 1 Week!

CSS - Xhtml And Css Scrollbar Color

Full Excel VBA Course - Beginner to Expert

Xhtml And Css Scrollbar Color	View Content

What is this? XHTML don't like the css scrollbar styles... CSS scrollbars is only supported in IE 5.5++. I'm using IE 6.0...

try it in IE 5.5...see if it works...

Code:

body	{
	background-color: #a7b1ae;
	background-image:url('../images/bg.gif');
	margin-left: 30px;
	margin-right: 30px;
	margin-top: 0px;
	margin-bottom: 0px;
	scrollbar-face-color: #96A096; 
	scrollbar-shadow-color: #96A096; 
	scrollbar-highlight-color: #96A096; 
	scrollbar-3dlight-color: #9AB6C4; 
	scrollbar-darkshadow-color: #20253A; 
	scrollbar-track-color: #738278; 
	scrollbar-arrow-color: #000000;
}

I include this in a .html XHTML file with:

Code:

<link rel="stylesheet" type="text/css" href="sub/deworks.css" />

ok... here is the whole XHTML file named sc.html:

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" xml:lang="en" lang="en">
<head>
	<title>css scrollbars</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="sub/deworks.css" />
</head>
<body>
<p>hello</p>
<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 />
</body>
</html>

now the scrollbar css doesn't work... but if i remove the
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

It works perfectly! hmmm how strange... is w3s XHTML .dtd files ****ed up? or doesn't XHTML support css scrollbars?

please help...

-meself

Full Excel VBA Course - Beginner to Expert

Ie6 Xhtml Horizontal Scrollbar On Div. Bug?

Similar Tutorials

View Content

OK, I've been pulling my hair out here. I've been googling around for a couple days now trying to find some solution to this....

I have been crunched by what I think is a nasty little bug within IE6 when running with a DocType of XHTML 1.0 Transitional.

Observe he
http://www.drcwbt.com/codetests/scrolltest.htm

My problem:
The horizontal scrollbar. It's nasty. I need to get rid of that puppy. Only happens on IE6 AND when running XHTML DocType.

My attempted (and failed) solutions: My Googles led me to what looked like a similar bug in IE 5 Mac. Unfortunately, those solutions don't help me here Addition of MS only "overflow-x:hidden" property. While this does get rid of the scrollbar, it also chops off the rightmost edge of the content within the DIV.

Problems With Css : Scrollbar Color And Left Margins

Similar Tutorials

View Content

Hello, I am having a real problem with my template at URL ; when I preview the template it looks great but once i save it and publish it, the scrollbar doesn't appear lilac and the left margins on my posts are too close to the left. I really don't know how to arrange this, I am new to html and of course a newbie to css. So here I include the code and if someone can give me some help i will be really grateful.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><meta name="author" content="SOUL" />
<meta name="dc.language" content="en" />
<meta name="copyright" content="This work is licensed under a
Creative Commons License. " />
<meta name="description" content="Looking back to the times of cotton fields, coffee engines... and chivalry" />
<meta name="keywords" content="SLAVE,SLAVERY,DOMINANT,DOMINANCE,EROTICA,INTERRACIAL" />

<title><$BlogPageTitle$></title>

<$BlogMetaData$>

<style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: URL
Date: 26 Feb 2004
----------------------------------------------- */

body {scrollbar-base-color: #cc99ff;
background-color: #f5ecff;}

blockquote, p, h1, h3, .blogpost {font-family: "Trebuchet MS", arial, sans-serif;
font-size: normal; color: black;}

.outerborder {background-color: #f5ecff;
width: 285px;}
.menuheader {font-family: "Harrington", "Trebuchet MS", arial;
background-color: #e7d1fd;
color: black;
font-size: 18px;
font-weight: bold;
text-align: center;
border-color: #7d00be;
border-width: 1px;
border-style: dashed;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 3px;}

.menutext {background-color: #f5ecff;
font-size: 16px;
padding-top: 5px;
padding-left: 10px;}

h2 {font-family: "Harrington","Trebuchet MS", arial;}

.dateheader {background-color: #e7d1fd;
color: black;
text-align: left;
border-bottom: 1px dashed #7d00be;
border-top: 1px solid #7d00be;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 3px;}
.postinfo {font-style: italic;
font-weight: bold;
color: black;}

.contentcell {background-color: white;
width: 100%;
border-color: #7d00be;
border-style: solid;
border-right-width: 1px;
border-left-width: 1px;
border-bottom-width: 1px;
border-top-width: 0px;}

a:link {color: #7d00be;
text-decoration: none;}

a:visited {color: mediumpurple;
text-decoration: none;}

a:active {color: #cc66ff;
text-decoration: none;}

a:hover {background-color: #cc99ff;
color: black;
text-decoration: none;}
a img {
border-width:0;
}
.blogpost {margin-left: 15px;
margin-right: 10px;}

blockquote {padding: 5px;
font-size: smaller;
border-color: #cc99ff;
border-width: 1px;
border-style: dashed;}

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #fff;
padding-bottom:1.5em;
}
.comment-link {
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.comment-link {
margin-left:.6em;
}
.post a {
font-weight:bold;
}
#comments h4 {
margin:1em 0;
font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#774;
}
#comments-block dt {
margin:.5em 0;
}
#comments-block dd {
margin:.25em 0 0;
}
#comments-block dd.comment-timestamp {
margin:-.25em 0 2em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
</style>
</head>

<body>

<center>
<img border="0" src="http://www.passionatelove.net/title.JPG" width="385" height="300"><p id="description">
<font face="Antigoni"><$BlogDescription$></font></p>
<p id="description"> 
<font face="Banjoman Open Bold">
<a href="http://www.fastonlineusers.com"><script src=http://fastonlineusers.com/online.php?d=www.unmerciful-tara.blogspot.com></script> online</a></font>
</p>
<p> </p>
</center>
<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tr>

<td valign="top" width="100%">

<div class="contentcell">
<Blogger>
<BlogDateHeader><h2 class="dateheader"><font face="AucoinLight"><$BlogDateHeaderDate$></font></h2></BlogDateHeader>

<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<h3 class="post-title" align="center">
<a href="<$BlogItemUrl$>" title="external link">
<BlogItemUrl></BlogItemUrl>
<font size="4" face="AucoinLight"><$BlogItemTitle$> </font>
<BlogItemUrl></BlogItemUrl>
</a>
</h3>
</BlogItemTitle>

<div class="post-body">
<p style="margin-left: 6">
<font face="Georgia" size="3"> <$BlogItemBody$> </font>
</p>
</div>

<p class="post-footer">
<em><font face="Book Antiqua"> posted by <$BlogItemAuthorNickname$> at
</font> <a href="<$BlogItemPermalinkUrl$>" title="permanent link">
<font face="Book Antiqua"><$BlogItemDateTime$></font></a></em><font face="Book Antiqua">
</font>
<MainOrArchivePage><BlogItemCommentsEnabled>

<a class="comment-link" href="<$BlogItemPermalinkURL$>#comments">
<font face="Book Antiqua"><$BlogItemCommentCount$> comments</font></a><font face="Book Antiqua">
</font>
</BlogItemCommentsEnabled></MainOrArchivePage> <font face="Book Antiqua"><$BlogItemControl$>
</font>
</p>

</div>



<ItemPage>
<div id="comments">

<BlogItemCommentsEnabled><a name="comments"></a>
<h4><font size="2" face="Book Antiqua"><$BlogItemCommentCount$> Comments:</font></h4>
<dl id="comments-block">
<BlogItemComments>
<dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
<$BlogCommentAuthor$> said...
</dt>
<dd class="comment-body">

<p><$BlogCommentBody$></p>
</dd>
<dd class="comment-timestamp"><a href="#<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
</dl>
<p class="comment-timestamp">

<$BlogItemCreate$>
</p>
</BlogItemCommentsEnabled>
<p class="comment-timestamp">
<a href="<$BlogURL$>"><< Home</a>
</p>
</div>

</ItemPage>



</Blogger>
</div></div>

<br>
 </p>

</td>

<td valign="top" width="300">

<div class="outerborder">
<div class="menuheader"><font face="AucoinLight">Soul</font></div>
<p class="menutext">
<$BlogMemberProfile$></p>
<p class="menutext">
<font face="AucoinLight" size="3"> The Irreverent 1700's Governor's Wife</font></p>
<ul>
<p style="text-align: center">
<b><font size="2" color="#668844" face="Antigoni Light">*some adult content*</font></b></p>
<p style="text-align: right">
<a href="http://feeds.archive.org/validator/check.cgi?url=http://unmerciful-tara.blogspot.com/atom.xml">
<img src="http://www.passionatelove.net/valid-atom.png" alt="[Valid Atom]" title="Validate my Atom feed" width="88" height="31" /></a></p>
<p style="text-align: right">
<a href="http://www.bloglines.com/sub/http://unmerciful-tara.blogspot.com/">
<img src="http://www.passionatelove.net/sub_modern6.gif" border="0" alt="Subscribe with Bloglines" width="80" height="15" />
</a></p>

<p style="text-align: right"><script src="http://blogsnob.simpleads.net/ad/11824" type="text/javascript">blogsnob. show off your websites. http://blogsnob.simpleads.net</script></p>

</ul>

<div class="menuheader"><font face="AucoinLight">Ledger</font></div>
<p class="menutext">
<script type="text/javascript" src="<$BlogArchiveFileName$>"></script>
<h2 class="sidebar-title" style="text-align: right"><b>
<font size="2" face="Footlight MT Light">Previous Posts</font></b></h2>
<ul id="recently">
<BloggerPreviousItems>
<li>
<p style="text-align: right"><a

ETC. ETC.... (THE PROBLEM SEEMS TO BE ABOVE)

</body>
</html>

THANKS FOR YOUR HELP!

Css Scrollbar Colours .. Browser Scrollbar Not Using Css

Similar Tutorials

View Content

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?

Shorthand Font Definition Color Not Displaying Color.

Similar Tutorials

View Content

Here's the code: Code:

<html>
<head>
<title>Sample Font Shorthand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body		{ margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
div		{  }
table		{ width: 100% }
.sttable	{ background-color: #000080 }
tr		{  }
td		{ vertical-align: top }
.sttd		{ font: bold 12px Arial #FFFFFF }
</style>
</head>

<body>
<table class="sttable">
   <tr>
      <td class="sttd">Catalog&nbsp;>&nbsp;Categories</td>
      <td class="sttd">Cart&nbsp;Total:&nbsp;&nbsp;$&nbsp;0.00</td>
      <td class="sttd">Date</td>
   </tr>
</table>
</body>
</html>

Would someone please tell me why the color of the text isn't rendering white?

Color Scheme -- Different Color Teams

Similar Tutorials

View Content

I'm making a game that revolves around four teams. For developmental purposes, I made the team colors blue, red, green, and yellow. And now I'm at the stage where I'm designing a layout. The theme is set in the 1800's, and my first idea was to have a different color scheme for each team (in accordance with their team color,) but my layouts ended up having nothing to do with the 1800's -- just colors (I want to give a very real effect to this website.) So I tried making a universal layout with a sort of tea-stained, burnt edges, parchment look, with a black background, but I had trouble making it tile nicely (partly the burnt edges, partly the stains in the paper.) So this is where I am. I need help designing a layout! I can change the team colors to whatever, I have beginner/intermediate photoshop skills (though, I'm quite competent,) and all suggestions are warmly welcomed!

W3c Validator Warnings (color/bg Color...)

Similar Tutorials

View Content

hello,

about the well-known color warnings (and in the best interest of good accessibility practices) is setting "background-color: inherit" a proper solution? it supresses the errors, but does it solve the problem of having good contrast between different elements/the use of custom stylesheets?

i'm asking because i have a stylesheet with different classes for text which are used over different background-colors (from the parent elements). so unless i make a class for each possible application of these text styles, i don't see a way to specify a fixed background-color...

i hope i explained my issue properly...
thanks for any thoughts or suggestions on this

Css Scrollbar

Similar Tutorials

View Content

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

Scrollbar Help

Similar Tutorials

View Content

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?

Css For Scrollbar In A Listbox

Similar Tutorials

View Content

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 To Get Rid Of This Horizontal Scrollbar?

Similar Tutorials

View Content

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>

Rounded Scrollbar

Similar Tutorials

View Content

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.

Overflow-y Is Always Scrollbar

Similar Tutorials

View Content

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?

Div -no Scrollbar Show Up In Ie?

Similar Tutorials

View Content

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 */

  

  


 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 */

Iframe Css Scrollbar

Similar Tutorials

View Content

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.

How To Get Rid Of Vertical Scrollbar

Similar Tutorials

View Content

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>

Scrollbar Colours

Similar Tutorials

View Content

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;

}

Iframe Scrollbar Using Css

Similar Tutorials

View Content

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 )

100% Height W/out Scrollbar

Similar Tutorials

View Content

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

Css 3 (you Have No Color Set (or Color Is Set To Transparent) But You Have Set A Bac)

Similar Tutorials

View Content

Hi,
Im trying to validate with CSS 3, but am getting one warning, which I really want to get rid of:

Code:

body {
  color: #000000;
  background-color: #ffffff;
  font-family: sans-serif;
  font-size: 15px;
}
#header {
  clear: both;
}
#topmenu {
  width: 100%;
  height: 30px;
  color: #ffffff;
  background-color: #990000;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: normal;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 1px;
  clear: both;
}
#topmenu a {
  width: 150px;
  height: 28px;
  color: #ffffff;
  background-color: #990000;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #ffffff;
  padding-top: 2px;
  float: left;
}
#topmenu a:hover {
  width: 150px;
  color: #990000;
  background-color: #ffffff;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #990000;
  float: left;
}

#body {
  color: #000000;
  background-color: #ffffff;
  margin: 10px 0px 10px 0px;
  clear: both;
}
#footer {
  width: 100%;
  color: #000000;
  background-color: #ffffff;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
  border-top: 2px solid #990000;
  padding-top: 5px;
  clear: both;
}
#footer a {
  color: #990000;
  background-color: #ffffff;
  font-weight: normal;
  text-decoration: none;
}
#footer a:hover {
  color: #990000;
  background-color: #ffffff;
  font-weight: normal;
  text-decoration: underline;
}








#leftmenu {
  color: #000000;
  background-color: #ffffff;
  width: 19.5%;
  padding-right: 0.5%;
  float: left;
}
#contents {
  color: #000000;
  background-color: #ffffff;
  width: 58.5%;
  padding-left: 0.5%;
  padding-right: 0.5%;
  float: left;
}
#rightmenu {
  color: #000000;
  background-color: #ffffff;
  width: 19.5%;
  padding-left: 0.5%;
  float: right;
}




.contentbreaker {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 10px;
  clear: both;
}


.menubreaker {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 10px;
  clear: both;
}



.footerbreaker {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 2px;
  clear: both;
}


.menutoptitle {
  width: 100%;
  height: 26px;
  color: #ffffff;
  background-color: #990000;
  font-family: sans-serif;
  font-size: 19px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #ffffff;
  padding-top: 1px;
  padding-left: 1px;
  padding-right: 1px;
}
.contenttoptitle {
  width: 100%;
  height: 26px;
  color: #ffffff;
  background-color: #990000;
  font-family: sans-serif;
  font-size: 19px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #ffffff;
  padding-top: 1px;
  padding-left: 1px;
  padding-right: 1px;
}


.menu {
  width: 100%;
  color: #000000;
  background-color: #eeeeee;
  font-family: sans-serif;
  font-size: 15px;
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  float: left;
}
.menu a {
  width: 98%;
  height: 19px;
  color: #000000;
  background-color: #eeeeee;
  font-weight: normal;
  text-decoration: none;
  border-bottom: 1px solid #990000;
  padding-left: 2%;
  float: left;
}
.menu a:hover {
  width: 98%;
  height: 19px;
  color: #ffffff;
  background-color: #990000;
  font-weight: normal;
  text-decoration: none;
  border-bottom: 1px solid #990000;
  padding-left: 2%;
  float: left;
}




.menucontent {
  width: 96%;
  color: #000000;
  background-color: #eeeeee;
  font-family: sans-serif;
  font-size: 15px;
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  border-bottom: 1px solid #990000;
  padding-bottom: 5px;
  padding-left: 2%;
  padding-right: 2%;
  float: left;
}
.menucontent a {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: underline;
}
.menucontent a:hover {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: none;
}




.subcontentright {
  color: #000000;
  background-color: #ffffff;
  text-align: right;
}

.content {
  width: 98%;
  color: #000000;
  background-color: #eeeeee;
  font-family: sans-serif;
  font-size: 15px;
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  border-bottom: 1px solid #990000;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 5px;
  float: left;
}
.content a {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: none;
}
.content a:hover {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: underline;
}



.input {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 13px;
}


.menuformcontainer {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  clear: both;
}

.menuformsubcontainer {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  clear: both;
}

.menuformlabels {
  color: #000000;
  background-color: #ffffff;
  width: 50%;
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
}
.menuformfields {
  color: #000000;
  background-color: #ffffff;
  width: 48%;
  text-align: right;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-right: 2%;
  float: left;
}


.menuformsubmit {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  text-align: right;
  padding-top: 2px;
  padding-bottom: 2px;
  clear: both;
}

http://jigsaw.w3.org/css-validator/...ut+with_options

Please make sure you select CSS 3 and Warnings = ALL in order to see the 32 warnings...

Thanks!
Yours sincerely,
speedbooster!

Scrollable Element Without Scrollbar

Similar Tutorials

View Content

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