CSS - Clicking To Right Of Central Content Div Selects All?! (ff)

Hello,

I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left.

See here

see how it got below ?

It is XHTML validated and CSS is fine too (some background color warnings).

Plz help me to make central column go up. Thanks.

Here's a quicky before the weekend (FINALLY!!!)...

Is there a way to detect if a user clicks on a bullet (or the entire LI tag)? I have this list, but I would like the browser to react differently when clicking on the LI text vs. the LI bullet icon.

I've read about putting the icon in background and then moving the text, and this seems to work except for a bug concerning text wrapping... so please don't suggest that...

I might be dreaming here... but the forums are usually very resourceful so why not!!

Thanx a ton.
Olografix

I've got this odd border appearing around my link when I click on it and after it's been clicked on until I click elsewhere on the page (or if I click on it again to fold accordion). I'm not sure whether this falls under CSS or JavaScript as it's an accordion list through jQuery.

I've tried adding border: none; and that did nothing. Any help greatly appreciated!

Hi there!

I'm having troubles with link formatting on my website.

They sidebar links display fine until the user clicks on one of them. After that, when returning to the original page, the links display "too short" as if they are no longer displaying as block elements.

Here's some of the relevant HMTL:

Code:

<ul class="sidelinks">
   <li><a href="http://www.mozilla.com/en-US/firefox/" title="Firefox download page">Firefox Browser</a></li>
   <li><a href="http://www.zonealarm.com/store/content/company/products/znalm/freeDownload.jsp" title="ZoneAlarm download page">ZoneAlarm Firewall</a></li>
   <li><a href="http://www.safer-networking.org/" title="Spybot download page">Spybot Search and Destroy</a></li>
   <li><a href="http://www.lavasoftusa.com/products/ad_aware_free.php">Adaware</a></li>
   <li><a href="http://www.avast.com/eng/download-avast-home.html" title="Avast download page">Avast Antivirus</a></li>
</ul>

And here is the CSS:

Code:

.sidelinks li a {
color:#f90;
border-bottom:1px dotted #666;
display:block;
text-decoration:none;
width:80%;
padding:8px 6px;
margin:0;
}

.sidelinks a:visited {
color:#f90;
border-bottom:1px dotted #666;
display:block;
text-decoration:none;
width:15%;
padding:8px 6px;
margin:0;
}

.sidelinks a:hover {
color:#fff;
background:#f90;
}

.sidelinks li {
font:110% Arial;
margin:0;
}

ul {
margin:0;
}

#sidebar ul, #bestofdthek ul {
list-style-type:none;
}

Can anyone help? Thanks so much for looking!

Gary

Hi there,

I have a content glider script, but I have added it to a wrapper with a background image.

The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath....

If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read.

Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide?

This is my CSS:

PHP Code:
.glidecontentwrapper{
position: relative; /* Do not change this value */

height: 230px; /* Set height to be able to contain height of largest content shown*/

overflow: hidden;
}
/*
    Total wrapper width: 350px+5px+5px=360px
    Or width of wrapper div itself plus any left and right CSS border and padding
    Adjust related containers below according to comments
*/


.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
background: white;
visibility: hidden;
width: 330px;
}
/*
 Total glidecontent width: 330px+10px+10px=350px
    Or width of wrapper div itself (not counting wrapper border/padding)
*/

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
width: 360px;
margin-top: 6px;
text-align: center; /*How to align pagination links: "left", "center", or "right"
background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
} 





Any help would be great!
Thanks.

Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so:

Code:

.statusDiv {
	clear: both
	background-image: url(../png/disclosure_triangles/blue_block.png);
	height: 20px;
	margin-bottom: 1px;
	}

This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel.

Does anyone know of a way to control the inter-div spacing when "clear" is defined?

Thanks

Ken


---------------------------------------------------------------
Original post
---------------------------------------------------------------
I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems.

The first row renders perfectly but the text of subsequent rows overlaps the text of first row.

Here's the html:
Code:

<div id="contentBlock" class="bodyText">
	<div class='statusDiv'>
		<div class='disclosureCollapsed'></div>
		<div class="disclosureDivLabel">New</div>
	</div>
	<div class='statusDiv'>
		<div class='disclosureCollapsed'></div>
		<div class="disclosureDivLabel">Open</div>
	</div>
</div>

And here's the CSS:
Code:

#contentBlock {
	position: absolute;
	top: 130px;
	left: 200px;
	height: 101%;   /* Hack to force vertical scroll bars */
	right: 280px;
	min-width: 400px;
	visibility: visible;
	display: block;
	}

.statusDiv {
	clear: both
	background-image: url(../png/disclosure_triangles/blue_block.png);
	height: 20px;
	margin-bottom: 1px;
	}

.disclosureCollapsed {
	background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
	display: block;
	text-align: right;
	/*position: absolute;*/
	float: left;
	top: 0px;
	left: 0px;
	width: 18px;
	height: 20px;
	}

.disclosureCollapsed:hover {
	cursor: pointer;
	}

How would I make the text in each subsequent row (statusDiv) line up?

Thanks for any help

Ken

http://www.hybridillusions.com/wordpress/?m=200712

Still working on it, but something caught me and I'm clueless. See, I'm still learning Tableless CSS, and well... I'm not sure how to have it so that the content doesn't run over the footer like that. As it should be more like...

http://www.hybridillusions.com/wordpress/

For CSS reference, here is where the css file is located:
http://www.hybridillusions.com/wordpress/wp-content/themes/simplistic/style.css

Thanks in advance!

my css :

Code:

#contentright {
		width:171px;
		padding:0px;
		float:left;
		background:#fff;
		}

I am new to useing css for layout and am running into a problem where if I do

Code:

<div id="contenteight">

some text

</div>

then try to do it again


Code:

<div id="contenteight">

some more text

</div>

it doesn't place the new text on the right, but rather at the bottom left.

also my while page is inside of
Code:

	#frame {
		width:823px;
		margin-right:auto;
		margin-left:auto;
		margin-top:10px;
		padding:0px;
		text-align:left;
		}

any help

thanks

Hi,

I'm knocking up a new site and I'd like to place the content first in the source code, followed by the nav code etc.

The design of the site goes: header -> main content -> footer.

The navigation will sit in the header above the main content.
all the nav links etc. are text and will be resizable by the user as that is good accessibility practice. This means the header can change height as the font expands.

So my question is...

I see how I could put the header and nav last in the soiurce code and then position it absolutely, and position the main content etc. under it. but how do I do this when the height of the header can vary if the user alters the text size etc.?


any tips ladies and gentlemen?

I am working form a template that I am modifying a website and the the content is working fine in Chrome, Safari, and FF, but the part of the sidebar shows up in IE7 and no other content. Any asssitance will be appreciated. I tried different hacks with no luck. I got errors for unscrollable content but I don't believe that is it because I tried all "fixes"

Code:

/* begin Page */
www.justgreek.com/questions.html 

body
{
	margin: 0 auto;
	padding: 0;
	background-color: #D08C35;
	background-image: url('images/Page-BgTexture.jpg');
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: top left;
}

#art-main
{
	position: relative;
	width: 100%;
	left: 0;
	top: 0;
}

#art-page-background-glare
{
	position: absolute;
	width: 100%;
	height: 630px;
	left: 0;
	top: 0;
}

#art-page-background-glare-image
{
	background-image: url('images/Page-BgGlare.png');
	background-repeat: no-repeat;
	height: 630px;
	width: 817px;
	margin: 0;
}

html:first-child #art-page-background-glare
{
	border: 1px solid transparent; /* Opera fix */
}


#art-page-background-gradient
{
	position: absolute;
	background-image: url('images/Page-BgGradient.jpg');
	background-repeat: repeat-x;
	top:0;
	width:100%;
	height: 900px;
	
}

#art-page-background-gradient
{
	background-position: top left;
}


.cleared
{
	float: none;
	clear: both;
	margin: 0;
	padding: 0;
	border: none;
	font-size:1px;
}


form
{
	padding:0 !important;
	margin:0 !important;
}

table.position
{
	position: relative;
	width: 100%;
	table-layout: fixed;
}
/* end Page */

/* begin Box, Sheet */
.art-Sheet
{
	position:relative;
	z-index:0;
	margin:0 auto;
	width: 955px;
	min-width:55px;
	min-height:55px;
}

.art-Sheet-body
{
	position: relative;
	z-index: 1;
	padding: 4px;
}


.art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl
{
	width: 66px;
	height: 66px;
	background-image: url('images/Sheet-s.png');
}

.art-Sheet-tl
{
	top:0;
	left:0;
	clip: rect(auto, 33px, 33px, auto);
}

.art-Sheet-tr
{
	top: 0;
	right: 0;
	clip: rect(auto, auto, 33px, 33px);
}

.art-Sheet-bl
{
	bottom: 0;
	left: 0;
	clip: rect(33px, 33px, auto, auto);
}

.art-Sheet-br
{
	bottom: 0;
	right: 0;
	clip: rect(33px, auto, auto, 33px);
}

.art-Sheet-tc, .art-Sheet-bc
{
	left: 33px;
	right: 33px;
	height: 66px;
	background-image: url('images/Sheet-h.png');
}

.art-Sheet-tc
{
	top: 0;
	clip: rect(auto, auto, 33px, auto);
}

.art-Sheet-bc
{
	bottom: 0;
	clip: rect(33px, auto, auto, auto);
}

.art-Sheet-cr, .art-Sheet-cl
{
	top: 33px;
	bottom: 33px;
	width: 66px;
	background-image: url('images/Sheet-v.png');
}

.art-Sheet-cr
{
	right:0;
	clip: rect(auto, auto, auto, 33px);
}

.art-Sheet-cl
{
	left:0;
	clip: rect(auto, 33px, auto, auto);
}

.art-Sheet-cc
{
	position:absolute;
	z-index:-1;
	top: 33px;
	left: 33px;
	right: 33px;
	bottom: 33px;
	background-color: #FFFFFF;
}


.art-Sheet
{
	margin-top: 10px !important;
}

#art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
{
	min-width:955px;
}

/* end Box, Sheet */

/* begin Header */
div.art-Header
{
	margin: 0 auto;
	position: relative;
	z-index:0;
	width: 947px;
	height: 136px;
}

div.art-Header-png
{
	position: absolute;
	z-index:-2;
	top: 0;
	left: 0;
	width: 947px;
	height: 136px;
	background-image: url('images/Header.png');
	background-repeat: no-repeat;
	background-position: left top;
}

div.art-Header-jpeg
{
	position: absolute;
	z-index:-1;
	top: 0;
	left: 0;
	width: 947px;
	height: 136px;
	background-image: url('images/Header.jpg');
	background-repeat: no-repeat;
	background-position: center center;
}
/* end Header */

/* begin Menu */
/* menu structure */

.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
	text-align:left;
	text-decoration:none;
	outline:none;
	letter-spacing:normal;
	word-spacing:normal;
}

.art-menu, .art-menu ul
{
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
	display: block;
}

.art-menu li
{
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	float: left;
	position: relative;
	z-index: 5;
	background:none;
}

.art-menu li:hover
{
	z-index: 10000;
	white-space: normal;
}

.art-menu li li
{
	float: none;
}

.art-menu ul
{
	visibility: hidden;
	position: absolute;
	z-index: 10;
	left: 0;
	top: 0;
	background:none;
}

.art-menu li:hover>ul
{
	visibility: visible;
	top: 100%;
}

.art-menu li li:hover>ul
{
	top: 0;
	left: 100%;
}

.art-menu:after, .art-menu ul:after
{
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
}
.art-menu, .art-menu ul
{
	min-height: 0;
}

.art-menu ul
{
	background-image: url(images/spacer.gif);
	padding: 10px 30px 30px 30px;
	margin: -10px 0 0 -30px;
}

.art-menu ul ul
{
	padding: 30px 30px 30px 10px;
	margin: -30px 0 0 -10px;
}





/* menu structure */

.art-menu
{
	padding: 4px 2px 0px 2px;
}

.art-nav
{
	position: relative;
	height: 29px;
	z-index: 100;
}

.art-nav .l, .art-nav .r
{
	position: absolute;
	z-index: -1;
	top: 0;
	height: 29px;
	background-image: url('images/nav.png');
}

.art-nav .l
{
	left: 0;
	right:0px;
}

.art-nav .r
{
	right: 0;
	width: 947px;
	clip: rect(auto, auto, auto, 947px);
}


/* end Menu */

/* begin MenuItem */
.art-menu ul li
{
	clear: both;
}

.art-menu a
{
	position:relative;
	display: block;
	overflow:hidden;
	height: 25px;
	cursor: pointer;
	text-decoration: none;
	margin-right: 4px;
	margin-left: 4px;
}


.art-menu a .r, .art-menu a .l
{
	position:absolute;
	display: block;
	top:0;
	z-index:-1;
	height: 75px;
	background-image: url('images/MenuItem.png');
}

.art-menu a .l
{
	left:0;
	right:11px;
}

.art-menu a .r
{
	width:422px;
	right:0;
	clip: rect(auto, auto, auto, 411px);
}

.art-menu a .t 
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
	color: #DEDEDE;
	padding: 0 2px;
	margin: 0 11px;
	line-height: 25px;
	text-align: center;
}

.art-menu a:hover .l, .art-menu a:hover .r
{
	top:-25px;
}

.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
	top:-25px;
}

.art-menu li:hover a .l, .art-menu li:hover a .r
{
	top:-25px;
}
.art-menu a:hover .t
{
	color: #F0F0F0;
}

.art-menu li:hover a .t
{
	color: #F0F0F0;
}

.art-menu li:hover>a .t
{
	color: #F0F0F0;
}


.art-menu a.active .l, .art-menu a.active .r
{
	top: -50px;
}

.art-menu a.active .t
{
	color: #000000;
}


/* end MenuItem */

/* begin MenuSubItem */
.art-menu ul a
{
	display:block;
	text-align: center;
	white-space: nowrap;
	height: 20px;
	width: 180px;
	overflow:hidden;
	line-height: 20px;
	margin-right: auto;


	background-image: url('images/subitem-bg.png');
	background-position: left top;
	background-repeat: repeat-x;
	border-width: 0px;
	border-style: solid;
}

.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
	display: inline;
	float: none;
	margin: inherit;
	padding: inherit;
	background-image: none;
	text-align: inherit;
	text-decoration: inherit;
}

.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
	text-align: left;
	text-indent: 12px;
	text-decoration: none;
	line-height: 20px;
	color: #000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}

.art-menu ul ul a
{
	margin-left: auto;
}

.art-menu ul li a:hover
{
	color: #3B3B3B;
	background-position: 0 -20px;
}

.art-menu ul li:hover>a
{
	color: #3B3B3B;
	background-position: 0 -20px;
}

.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
	color: #3B3B3B;
}

.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
	color: #3B3B3B;
}


/* end MenuSubItem */

/* begin ContentLayout */
div.art-content
{
	width:709px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: auto;
	margin-right auto;
}
.art-contentLayout
{
	position: absolute;
	top: 156px;
	margin-bottom: 6px;
	width: 947px;
}
/* end ContentLayout */

/* begin Box, Block */
.art-Block
{
	position:relative;
	z-index:0;
	margin:0 auto;
	min-width:15px;
	min-height:15px;
}

.art-Block-body
{
	position: relative;
	z-index: 1;
	padding: 7px;
}
	

.art-Block-tr, .art-Block-tl, .art-Block-br, .art-Block-bl
{
	width: 14px;
	height: 14px;
	background-image: url('images/Block-s.png');
}

.art-Block-tl
{
	top:0;
	left:0;
	clip: rect(auto, 7px, 7px, auto);
}

.art-Block-tr
{
	top: 0;
	right: 0;
	clip: rect(auto, auto, 7px, 7px);
}

.art-Block-bl
{
	bottom: 0;
	left: 0;
	clip: rect(7px, 7px, auto, auto);
}

.art-Block-br
{
	bottom: 0;
	right: 0;
	clip: rect(7px, auto, auto, 7px);
}

.art-Block-tc, .art-Block-bc
{
	left: 7px;
	right: 7px;
	height: 115px;
	background-image: url('images/Block-h.png');
}

.art-Block-tc
{
	top: 0;
	clip: rect(auto, auto, 7px, auto);
}

.art-Block-bc
{
	bottom: 0;
	clip: rect(7px, auto, auto, auto);
}

.art-Block-cr, .art-Block-cl
{
	top: 7px;
	bottom: 7px;
	width: 1px;
	background-image: url('images/Block-v.png');
}

.art-Block-cr
{
	right:0;
	clip: rect(auto, auto, auto, 7px);
}

.art-Block-cl
{
	left:0;
	clip: rect(auto, 7px, auto, auto);
}

.art-Block-cc
{
	position:absolute;
	z-index:-1;
	top: 7px;
	left: 7px;
	right: 7px;
	bottom: 7px;
	background-color: #F8EFE2;
}


.art-Block
{
	margin: 7px;
}

/* end Box, Block */

/* begin BlockHeader */
.art-BlockHeader
{
	position:relative;
	z-index:0;
	height: 30px;
	padding: 0 7px;
	margin-bottom: 7px;
}

.art-BlockHeader .t
{
	height: 30px;
	color: #000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
	white-space : nowrap;
	padding: 0 6px;
	line-height: 30px;	
}

.art-BlockHeader .l, .art-BlockHeader .r
{
	display:block;
	position:absolute;
	z-index:-1;
	height: 30px;
	background-image: url('images/BlockHeader.png');
}

.art-BlockHeader .l
{
	left:0;
	right:6px;
}

.art-BlockHeader .r
{ 
	width:947px;
	right:0;
	clip: rect(auto, auto, auto, 941px);
}





.art-header-tag-icon
{
    height: 30px;
	background-position:left top;
	background-image: url('images/BlockHeaderIcon.png');
	padding:0 0 0 12px;
	background-repeat: no-repeat;
	min-height: 12px;
	margin: 0 0 0 5px;
}


/* end BlockHeader */

/* begin Box, BlockContent */
.art-BlockContent
{
	position:relative;
	z-index:0;
	margin:0 auto;
	min-width:1px;
	min-height:1px;
	background-color: #FFFFFF;
}

.art-BlockContent-body
{
	position: relative;
	z-index: 1;
	padding: 8px;
}



.art-BlockContent-body
{
	color:#383838;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}

.art-BlockContent-body a:link
{
	color: #832121;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}

.art-BlockContent-body a:visited, .art-BlockContent-body a.visited
{
	color: #525252;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}

.art-BlockContent-body a:hover, .art-BlockContent-body a.hover
{
	color: #290A0A;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
}

.art-BlockContent-body ul
{
	list-style-type: none;
	color: #4A4A4A;
	margin:0;
	padding:0;
}

.art-BlockContent-body li
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
text-decoration: none;
}

.art-BlockContent-body ul li
{
	padding:0px 0 0px 13px;
	background-image: url('images/BlockContentBullets.png');
	background-repeat:no-repeat;
	margin:0.5em 0 0.5em 0;
	line-height:1.2em;
}

/* end Box, BlockContent */

/* begin Box, Post */
.art-Post
{
	position:absolute;
	z-index:0;
	margin:0 auto;
	min-width:706px;
	min-height:1px;
}

.art-Post-body
{
	position: absolute;
	z-index: 1;
	padding: 10px;
}



.art-Post
{
	margin: 7px;
}

/* Start images */
a img
{
	border: 0;
}

.art-article img, img.art-article
{
	border: solid 1px #C4C4C4;
	margin: 1em;
}

.art-metadata-icons img
{
	border: none;
	vertical-align: middle;
	margin: 2px;
}
/* Finish images */

/* Start tables */

.art-article table, table.art-article
{
	border-collapse: collapse;
	margin: 1px;
	width:auto;
}

.art-article table, table.art-article .art-article tr, .art-article th, .art-article td
{
	background-color:Transparent;
}

.art-article th, .art-article td
{
	padding: 2px;
	border: solid 1px #5C5C5C;
	vertical-align: top;
	text-align:left;
}

.art-article th
{
	text-align: center;
	vertical-align: middle;
	padding: 7px;
}

/* Finish tables */

pre
{
	overflow: auto;
	padding: 0.1em;
}

/* end Box, Post */

/* begin PostHeaderIcon */
.art-PostHeader
{
	text-decoration:none;
	margin: 0.2em 0;
	padding: 0;
	font-weight:normal;
	font-style:normal;
	letter-spacing:normal;
	word-spacing:normal;
	font-variant:normal;
	text-decoration:none;
	font-variant:normal;
	text-transform:none;
	text-align:left;
	text-indent:0;
	line-height:inherit;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
	color: #661919;
}

.art-PostHeader a, .art-PostHeader a:link, .art-PostHeader a:visited, .art-PostHeader a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
	margin:0;
	color: #661919;
}

/* end PostHeaderIcon */

/* begin PostHeader */
.art-PostHeader a:link
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
  color: #7A1F1F;
}

.art-PostHeader a:visited, .art-PostHeader a.visited
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
  color: #4D4D4D;
}

.art-PostHeader a:hover, .art-PostHeader a.hovered
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
  color: #BC2F2F;
}
/* end PostHeader */

/* begin PostContent */
/* Content Text Font & Color (Default) */
body
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
  color: #404040;
}


.art-PostContent p 
{
	margin: 0.5em 0;
}

.art-PostContent, .art-PostContent p
{
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	text-align: justify;
	color: #84561E;
}

.art-PostContent
{
  margin:0;
}


/* Start Content link style */
/*
The right order of link pseudo-classes: Link-Visited-Hover-Focus-Active.
http://www.w3schools.com/CSS/css_pseudo_classes.asp
http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/
*/
a
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
  color: #8F2424;
}

/* Adds special style to an unvisited link. */
a:link
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
  color: #8F2424;
}

/* Adds special style to a visited link. */
a:visited, a.visited
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
  color: #3B3B3B;
}

/* :hover - adds special style to an element when you mouse over it. */
a:hover, a.hover
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
  color: #BC2F2F;
}

/* Finish Content link style */

/* Resert some headings default style & links default style for links in headings*/
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
{
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
}


/* Start Content headings Fonts & Colors  */
h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 28px;
font-style: normal;
font-weight: bold;
text-align: left;
  color: #8F2424;
}

h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
  color: #BC2F2F;
}

h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
text-align: left;
  color: #595959;
}

h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-align: left;
  color: #A72A2A;
}

h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
text-align: left;
  color: #292929;
}

h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
text-align: left;
  color: #292929;
}
/* Finish Content headings Fonts & Colors  */
/* end PostContent */

/* begin PostBullets */
/* Start Content list */
ol, ul
{
	color: #404040;
	margin:1em 0 1em 2em;
	padding:0;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
}

li ol, li ul
{
	margin:0.5em 0 0.5em 2em;
	padding:0;
}

li 
{
	margin:0.2em 0;
	padding:0;
}

ul
{
	list-style-type: none;
}

ol
{
	list-style-position:inside;
	
}



.art-Post li
{
	padding:0px 0 0px 13px;
	line-height:1.2em;
}

.art-Post ol li, .art-Post ul ol li
{
	background: none;
	padding-left:0;
}

.art-Post ul li, .art-Post ol ul li 
{
	background-image: url('images/PostBullets.png');
	background-repeat:no-repeat;
	padding-left:13px;
}


/* Finish Content list */
/* end PostBullets */

/* begin PostQuote */
/* Start blockquote */
blockquote,
blockquote p,
.art-PostContent blockquote p
{
	color:#2E2E2E;
font-family: Arial, Helvetica, Sans-Serif;
font-style: italic;
font-weight: normal;
text-align: left;
}

blockquote,
.art-PostContent blockquote
{
		border:solid 1px #DD7878; 
		margin:10px 10px 10px 50px;
	padding:5px 5px 5px 41px;
	background-color:#EEBABA;
	background-image:url('images/PostQuote.png');
	background-position:left top;
	background-repeat:no-repeat;
}


/* Finish blockuote */
/* end PostQuote */

/* begin Button */
.art-button-wrapper .art-button
{
	display:inline-block;
	width: auto;
	outline:none;
	border:none;
	background:none;
	line-height:33px;
	margin:0 !important;
	padding:0 !important;
	overflow: visible;
	cursor: default;
	text-decoration: none !important;
	z-index:0;
}

.art-button-wrapper
{
	display:inline-block;
	position:relative;
	height: 33px;
	overflow:hidden;
	white-space: nowrap;
	width: auto;
	z-index:0;
}

.firefox2 .art-button-wrapper
{
	display:block;
	float:left;
}

.art-button-wrapper .art-button
{
	display:block;
	height: 33px;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
	white-space: nowrap;
	text-align: left;
	padding: 0 21px !important;
	line-height: 33px;
	text-decoration: none !important;
	color: #FAF3EA !important;
}

input, select
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}

.art-button-wrapper.hover .art-button, .art-button:hover
{
	color: #FBEFEF !important;
	text-decoration: none !important;
}

.art-button-wrapper.active .art-button
{
	color: #F2F2F2 !important;
}

.art-button-wrapper .l, .art-button-wrapper .r
{
	display:block;
	position:absolute;
	z-index:-1;
	height: 92px;
	background-image: url('images/Button.png');
}

.art-button-wrapper .l
{
	left:0;
	right:10px;
}

.art-button-wrapper .r
{
	width:409px;
	right:0;
	clip: rect(auto, auto, auto, 399px);
}

.art-button-wrapper.hover .l, .art-button-wrapper.hover .r
{
	top: -33px;
}

.art-button-wrapper.active .l, .art-button-wrapper.active .r
{
	top: -66px;
}


/* end Button */

/* begin Footer */
.art-Footer
{
	position:relative;
	z-index:0;
	overflow:hidden;
	width: 947px;
	margin: 5px auto 0px auto;
}

.art-Footer .art-Footer-inner
{
	height:1%;
	position: relative;
	z-index: 0;
	padding: 8px;
	text-align: center;
}

.art-Footer .art-Footer-background
{
	position:absolute;
	z-index:-1;
	background-repeat:no-repeat;
	background-image: url('images/Footer.png');
	width: 947px;
	height: 150px;
	bottom:0;
	left:0;
}


.art-Footer .art-Footer-text p
{
	margin: 0;
}

.art-Footer .art-Footer-text
{
	display:inline-block;
	color:#000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 11px;
}

.art-Footer .art-Footer-text a:link
{
	text-decoration: none;
	color: #DEAF73;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}

.art-Footer .art-Footer-text a:visited
{
	text-decoration: none;
	color: #333333;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}

.art-Footer .art-Footer-text a:hover
{
	text-decoration: none;
	color: #291C0A;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
}
/* end Footer */

/* begin PageFooter */
.art-page-footer, .art-page-footer a, .art-page-footer a:link, .art-page-footer a:visited, .art-page-footer a:hover
{
	font-family:Arial;
	font-size:10px;
	letter-spacing:normal;
	word-spacing:normal;
	font-style:normal;
	font-weight:normal;
	text-decoration:underline;
	color:#D69D51;
}

.art-page-footer
{
	margin:1em;
	text-align:center;
	text-decoration:none;
	color:#949494;
}
/* end PageFooter */

/* begin LayoutCell */


.art-contentLayout .art-sidebar1
{
	position: absolute;
	margin: 0;
	padding: 0;
	border: 0;
	left: 0;
	overflow: hidden;
	width: 236px;
}
/* end LayoutCell */

/* begin LayoutCell */
.art-contentLayout .art-content
{
	position: absolute;
	margin: 0;
	padding: 0;
	border: 0;
	right: 0;
	overflow: hidden;
	width: 709px;
}
.art-contentLayout .art-content-wide
{
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	overflow: hidden;
	width: 945px;
}


.ProductItem {
	border-color:#CCCCCC;
	border-style:solid;
	border-width:1;
	padding:5;
	padding-top:10;
	width:200px;

}

.ProductItem {

	font-size:11;
	width:200px;
	
}


.ProductItemClick {
	text-align:center;
	width:100%;
	cursor:pointer;
}


.ProductItemImage {
	text-align:center;
	width:200px;
	cursor:pointer;
	height:125px;
}

.ProductItemName {
	height:40;
	text-align:center;
	line-height:14px;
}

.ProductItemShortDesc {
	border-color:#857358;
	border-style:solid;
	border-width:1;

	background-image:url(Images/DescBG.png);
	color:#FFFFFF;
	height:35;
	padding:0;
	!padding:3;
	font-size:10px;
	line-height:12px;
}


/* end LayoutCell */

hi, I have a layour where the container is 100% high, and then I have a header and nav
then I have a #main and #bar divs (columns)
then #footer

I would like for the footer to stick to the bottom and the main, and bar expand to the bottom (even if there isn't enough text)

does this make sense, heres my css

PHP Code:
 html,body {
        height:100%;
        margin:0px;
        padding:0px;
        background: #eee;
    }
    
    #container {
        height:100%;
        margin: 0 auto;
        width: 720px;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        background: #f00;        
    }

    #header {
        height: 170px;
        background: #ff0 url('../images/header.gif');    
    }

    #nav {
        height: 25px;
        padding: 5px;
        background: #666;
    }

    #main {
        width: 400px;
        float: left;
        padding: 10px;
        background: #fff;
    }
    
    #bar {
        padding: 10px;
        margin-left: 420px;
        border-left: 1px solid #006;
        background: #fff;
    }

    #copy {
        height: 30px;
        background: #999;
        clear: both;
    } 

Hi all,

I'm not a n00b with CSS, but I'm no expert, either. I am making a test page at http://www.bartlett-family.net/test/

In IE, it looks pretty much like I WANT it to. In Mozilla and Opera, it looks all messed up( you'll see for yourself).

Basically, I would like the globe logo, the GFS image text, and the footer bar vertically lined up and centered (pretty much like it is right now in IE). However, I am obviously doing something wrong because it is not right in other, proper browsers.

I've been playing with it for a while and just can't figure it out. Any help would be most appreciated. TIA!

Chris

Can someone point me to a tutorial (or if it's easy enough, just show me here) where I can learn how to make a scrolling div? Ideally, one that looks like this (this would be on a black-backgrounded page):



Thanks!...

I'm revamping my personal webpage. (What I've done so far is at http://homepage.mac.com/johntstuart/mockup/ )

I've been told there is a way for JavaScript to replace the content of a DIV, when the user selects from the navigation.

Can anyone point me in the direction of this JavaScript? And any tutorials?