CSS - Removing Inhertied Styles From Nested Elements

Hello all.

I've got a layout with three columns. The first column contains the navigation and the second two are variable content. All the columns can be any length, and consist of any number of divs; each div is a bordered block of variable-sized content.

The problem is if I want to float an image around some text in the second or third column. Since the image is floating, its container doesn't extend fully, and the image overlaps the border and the block below it. However, if I put a "clear: both" spacer within the block, then the container clears elements in the left or right columns, and extends way too far down!

What I really need is a way to just clear a single level of nesting, but "clear" seems to be pretty much all or nothing.

I've also tried the pseudoclass :after trick to extend the box, but that didn't appear to do any good. It just added the content inside the border of each block, but doesn't enclose the image at all.

I hope somebody has suggestions - I actually haven't found anything about this problem, but perhaps I'm just looking for the wrong terms. It seems like a fairly fundamental thing to do...

Thanks!

Hello all,

I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly.

The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements.

Code:

		#wrapper-body ul.staff-list{
			list-style-type:none;
			padding-top:10px;
			position:relative;
		}
	
		#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
	
			#wrapper-body ul.staff-list li{
				float:left;
				width:230px;
				position:relative;
				padding:8px 0 8px 15px;
				z-index:1;
			}
			#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
			#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
			#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
			#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
				#wrapper-body ul.staff-list li p{
					padding:0 0 9px 0;
					margin-left:91px;
				}
	
				#wrapper-body ul.staff-list li small{
					padding:0 0 5px 0;
					margin-left:91px;
				}
		
				#wrapper-body ul.staff-list-clerks li span{
					color:#A6302B;
					display:block;
					float:left;
				}
		
				#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
				#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
				#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
		
		
				#wrapper-body ul.staff-list li div.staff-list-detail{
					display:none;
					background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
					padding-bottom:3px;
					margin-top:-15px;
					left:4px;
					z-index:10;
					top:15px;
					position:absolute;
				}

				#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }

				#wrapper-body ul.staff-list li:hover div.staff-list-detail{
					display:block;
}

An image of what is happening below:


Thanks for reading!

I'd like to seperate blocks of text with a horazontal rule. I'd like it to be dashed. So, I've come up with this:
Quote:
hr
{
border: none 0;
border-top: 1px dashed #000;
width:98%;
height: 1px
}

However, although this works well in IE, it Firefox there is too much space between the HR and the text block under it. In other words, the text above the HR comes right up to the line, but the text under the line, there is a larger gap. Any way to close the gap?

Any ideas?

Hello -- new to this forum. My questions concerns a problem I've run into many times. I'm trying to be CSS-moral and use style sheets as much as possible, or a least place properties in the Header. But here's what I run into. Many times I find it necessary to have different properties for the same tag within the Body.

Currently, I use CSS to create the Menu items at the top of each web page, an Unordered List, using the "li" tags. Ok, but I just discovered that by using a new CSS statement, I can use custom bullets in the Body's li tag: list-style-image : url(bullet.gif) . Cool!!! So, I went about making a little dog bone .gif and used it for my bullet graphic halfway down the page. Voila! It worked. Voila! I suddenly have dog bones in my menu (which I don't want !), which also use the li tag.

I only know two workarounds. 1) is to go back to the BAD practice of using the taboo in-line style="images/dogbone.gif" in each li within the body and NOT put the statement in the Header style section or 2) at least try to use CSS in the header by making a class like li.bone { list-style-image : bone} and then repeat class="bone" for each li in the body, which is only slightly shorter than just putting in the style="xxx" in the first place.

So, how do we handle using different style properties for the same tag within the body?

Perplexed,
Mike

Unfortunately I am not very experienced and I am trying to edit some coding that has been done for me.

The code is as follows

<div title="[[TITLE]]" style='background-image: url ([bg]); padding: 5%; width:90%; height:100%; padding-left: 6%; padding-right: 6%; background-size: 100% 100%; '>

Now what happens is the words I type in this box are beautifully laid out because of the padding...

The images placed in the box should stretch border to border - but obviously don't because of the padding....

Can anyone please tell me what I can change to give my text padding but images with no padding?

Thanks so much

Hi, I am having trouble setting up different link styles in my site.

My code is:

Code:

.menu {
	font-family: Helvetica;
	font-size: 18px;
	color: #FFFFFF;
	
}

a.menu:link {
	color : #FFFFFF;
	text-decoration : none;
}

a.menu:visited {
	color : #FFFFFF;
	text-decoration : none;
}

a.menu:hover {
	color : #FFFFFF;
	text-decoration : underline;
}




a:link {
	color : #FFFFFF;
	text-decoration : underline;
}

a:visited {
	color : #FFFFFF;
	text-decoration : underline;
}

a:hover {
	color : #FFFFFF;
	font-weight : bold;
	text-decoration : underline;
}

From what I've read this should setup a default style for all links to follow, as well as define an alternate link style for anything in the menu class.

So when I use the following code:

<div class="menu"><I>01</I> &nbsp; <a href="">HOME</a></div>

.. I would have thought the link would follow the style for .menu

But it doesn't. It takes the style of the default links as well.

How do I properly setup an alternate link style??

Hi, I remember reading that there is a css attribute for removing all browser-specific formatting from an element, for example forms, H tags and divs (which are pre-formatted differently in ie and firefox) but I can't recall what it was! Does anyone know how this is achieved as I find it very laborious when creating stylesheets to have to remember to reset all of these elements' formats.

- before anyone says it, I know I could set up a generic, cross-browser-ready stylesheet for use with all my sites, and this is a system I already employ, I am simply concerned with saving bytesize and achieveing smaller stylesheets that are more easy to work with.

I remember it was something like this:
instead of:
form{
margin:0px;
padding:0px;
}

I'm sure you can do something like:
form{
preformatting:none;
}

Does anyone know what I'm talking about? Or did I dream it?...

cheers in advance

Basically, what i'm trying to work out is if the following is possible.

Code:

.mainBodyColor {
background-color : #FFFFFF ;
color: #000000;
}

.mainBodyFont10pt {
font-size: 10pt;
<mainBodyColor>
}

.mainBodyFont14pt {
font-size: 14pt;
<mainBodyColor>
}

where <mainBodyColor> is a nested call to the style in some way.

etc etc etc

How do i go about nesting/including the mainBodyColor styling within the mainBodyFont10pt style?

I know that the following doesn't work

Code:

<font class="mainBodyFont10pt" class="mainBodyColor ">
Some text to go in here</font>

What I'm trying to do is have in one place the colour and include it into many styles, so if i want to change the colour scheme of the site i just have to change it in one spot and i know that the whole site will change.

Thanks in advance.

Newbie question...I've always struggled with getting my links to show up right (hover styles, visited styles, etc.)

In this case, I want my links to show up without an underline normally, but with an underline when hovered over. When they're visited, I don't want there to be any difference. I want them to show up normally.

Right now I've got

Code:

.leftnavtext A:link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: none;
}
.leftnavtext A:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: underline;
}
.leftnavtext A:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration: none;
}
.leftnavtext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
}

And when I hover over a visited link, it doesn't get underlined. Any idea why? Thanks.

This is the website I am working on:
http://www.rookscommunications.com/projects/naturalne/index.html

Everything is working fine, except the footer. When I view it in FireFox, I'm all set, but most likely most people will be using IE and that's where the problem is.

Any thoughts on the bug? I've tied many different things.

ALSO...
to kill two birds with one stone. Could you peek at my javascript for random images...every now and then it selects a blank image and that's no good.

Many Thanks

I have a page that I'm building as a prototype for a working medical exam GUI. I'm using Dreamweaver and it's pretty ugly. Is there anywhere I can download some styles that will bring this site to life? Maybe OSX or Vista-looking stuff?

I've read up, and have always used a bit of CSS. I'm redoing my site, and noticed something different between Mozilla and IE.

Personally, I'd ditch IE, but 98% of my viewers use it, so I can't. Basically, in IE, the following works:

Code:

P
{
	color: black;
	font-size: 10pt;
	font-family:tahoma;
}

myown
{
	color: blue;
	font-size: 10pt;
	font-family: Tahoma;
}

<myown>This is my text</myown>

When I run it in IE though, it basically ignores the self-defined tag, and requires me to use a pre-defined keyword. I don't want to use "P", b/c it carries the html<P> tag characteristics... a new line in this case.

Thanks.

I have a header.inc and a css style sheet that are called to each page of a website via php. In the style sheet there are two styles that I would like to change depending on the section of the website.

For example:
in the style sheet
css id "subnav" has background: #E8EDF5 and
cssi id "subtitle" has background #E8EDF5

however in each major section of the website I would like to change the background colors of the divs that have id "subnav" and "subtitle".

Is there type of php statement that I could place at the top of my website pages that would allow me to specify the colors of these two css ids?

Hope I have made this clear.

Hi, I have an issue where my css loads fine with Safari and Firefox. However, I have no styling when it comes to any versions of IE. I have listed the code below. Any help would be greatly appreciated. (There is a bit of php, but css is not loaded through it).

Code:

<?php require_once("php/includes/sitewide.php"); ?>
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<?php keywords(); ?>
<?php description(); ?>
<link href="css/sitestyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
	<ul>
		<li class="active"><a href="<?php echo $link1; ?>"><?php echo $namelink1; ?></a></li>
		<li><a href="<?php echo $link2; ?>"><?php echo $namelink2; ?></a></li>
		<li><a href="<?php echo $link3; ?>"><?php echo $namelink3; ?></a></li>
		<li><a href="<?php echo $link4; ?>"><?php echo $namelink4; ?></a></li>
		<li><a href="<?php echo $link5; ?>"><?php echo $namelink5; ?></a></li>
		<li><a href="<?php echo $link6; ?>"><?php echo $namelink6; ?></a></li>
		<li><a href="<?php echo $link7; ?>"><?php echo $namelink7; ?></a></li>
	</ul>
</div>
<!-- end #menu -->
<div id="header">
	<h1><a href="<?php echo $link1; ?>"><?php echo $site_title; ?></a></h1>
	<h2 style="color: #FFFFFF;"><?php echo $statement; ?></h2>
</div>
<!-- end #header -->
<div id="page">
	<div id="content">
		<div class="post hr">
			<h1>Welcome to <em>Site Title</em></h1>
			<img src="images/building_1.jpg" alt="" width="120" height="120" class="left" />
			<p><strong>SiteTitle</strong>performs home inspections that exceed the standards of the American Society of Home Inspectors. After accompanying us during the inspection, reading the inspection report, the client will know more about the home they are planning to purchase and quite often will know more about the condition of the house than the seller!*</p>
		</div>
		<div class="post">
			<h2>Home Inspections</h2>
			<p><strong>Home Inspections</strong> are a necessity for homebuyers in South Carolina when purchasing a new or existing Home.*Potential homebuyers MUST be knowledgeable and informed of any and all problems that may exist prior to closing. The challenge is to find a qualified home inspector with the experience and knowledge of performing a thorough and comprehensive inspection of the property that the buyer can trust and can rely on the accuracy of the inspection.</p>
		  <h3>Join Us</h3>
			<p>Join the hundreds of satisfied clients who have retained us to help them with their real estate transactions.</p>
			<blockquote>
			  <p><?php quotes(); ?> </p>
			</blockquote>
		</div>
	</div>
	<!-- end #content -->
	<div id="sidebar">
		<div id="updates" class="orangebox">
			<h2><?php echo $header1; ?></h2>
				<ul>
					<li><a href="<?php echo $inspectlink_1; ?>"><?php echo $inspectname_1; ?></a></li>
					<li><a href="<?php echo $inspectlink_2; ?>"><?php echo $inspectname_2; ?></a></li>
					<li><a href="<?php echo $inspectlink_3; ?>"><?php echo $inspectname_3; ?></a></li>
					<li><a href="<?php echo $inspectlink_4; ?>"><?php echo $inspectname_4; ?></a></li>
					<li><a href="<?php echo $inspectlink_5; ?>"><?php echo $inspectname_5; ?></a></li>
					<li><a href="<?php echo $inspectlink_6; ?>"><?php echo $inspectname_6; ?></a></li>
					<li><a href="<?php echo $inspectlink_7; ?>"><?php echo $inspectname_7; ?></a></li>
				</ul>
			<h2><?php echo $header2 ?></h2>
				<ul>
					<li><a href="<?php echo $categorylink_1; ?>"><?php echo $categoryname_1; ?></a></li>
					<li><a href="<?php echo $categorylink_2; ?>"><?php echo $categoryname_2; ?></a></li>
					<li><a href="<?php echo $categorylink_3; ?>"><?php echo $categoryname_3; ?></a></li>
					<li><a href="<?php echo $categorylink_4; ?>"><?php echo $categoryname_4; ?></a></li>
					<li><a href="<?php echo $categorylink_5; ?>"><?php echo $categoryname_5; ?></a></li>
					<li><a href="<?php echo $categorylink_6; ?>"><?php echo $categoryname_6; ?></a></li>
					<li><a href="<?php echo $categorylink_7; ?>"><?php echo $categoryname_7; ?></a></li>
				</ul>
		</div>
	</div>
	<!-- end #sidebar -->
	<div style="clear: both;">&nbsp;</div>
</div>
<!-- end #page -->
<div id="footer">
	<p id="legal"><?php echo COPYRIGHT; ?></p>
</div>
<!-- end #footer -->
<?php analytics(); ?>
</body>
</html>

Here is the css.
Code:

@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}

body {
	background: #FFFFFF url(../images/img01.gif) repeat-x;
	text-align: justify;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #666666;
}

h1, h2, h3 {
	color: #333333;
}

h1, h2 {
	margin-bottom: 20px;
	font-weight: normal;
}

h1 {
	font-size: 197%;
}

h2 {
	font-size: 152%;
}

h3 {
	font-size: 100%;
}

p, ul, ol {
	margin-bottom: 20px;
	line-height: 1.8em;
}

ul, ol {
	margin-left: 3em;
}

blockquote {
	padding-left: 3em;
	background: url(../images/img08.gif) no-repeat;
	font-style: italic;
}

a:link {
	color: #1953A7;
}

a:active {
	color: #ED5C0C;
}

a:visited {
	color: #666666;
}

a:hover {
	text-decoration: none;
	color: #067600;
}

img {
	border: none;
}

img.left {
	float: left;
	margin: 0 20px 10px 0;
}

/* Menu */

#menu {
	width: 770px;
	height: 65px;
	margin: 0 auto;
	border-right: 1px solid #EDEBD5;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	width: 109px;
	height: 45px;
	padding: 20px 0 0 0;
	border-left: 1px solid #EDEBD5;
	text-transform: lowercase;
	text-decoration: none;
	text-align: center;
	font-size: 144%;
	color: #BABABA;
}

#menu a:hover {
	background: #F7F7F4;
}

#menu .active a {
	background: #F49A24;
	color: #FFFFFF;
}

/* Header */

#header {
	width: 770px;
	height: 170px;
	margin: 0 auto;
}

#header h1 {
	float: left;
	width: 220px;
	height: 100px;
	margin: 0;
	padding: 70px 0 0 0;
	background: url(../images/header_left.jpg) no-repeat;
	text-align: center;
	font-size: 36px;
}

#header h2 {
	float: right;
	width: 530px;
	height: 86px;
	margin: 0;
	background: url(../images/header_right.jpg) no-repeat;
	padding: 84px 20px 0 0;
	text-align: right;
}

#header a {
	text-transform: lowercase;
	text-decoration: none;
	font-style: italic;
	font-weight: normal;
	color: #FFFFFF;
}

/* Page */

#page {
	width: 770px;
	margin: 0 auto;
	padding: 20px 0;
}

/* Content */

#content {
	float: left;
	width: 550px;
	padding-top: 10px;
}

#submitButton:hover {

}
.submitButton {
  border-width: 1px;
  padding: 5px;
  border-style: solid;
  margin: 5px;
  border-color: #000000;
  color: inherit;
}
.input {
  border-width: 1px;
  padding: 5px;
  border-style: solid;
  margin: 5px;
  border-color: #000000;
  color: inherit;
}

.inputSmaller {
  border-width: 1px;
  padding: 5px;
  border-style: solid;
  margin: 5px;
  border-color: #000000;
  color: inherit;
}

.post {
	margin-bottom: 20px;
	padding: 0 20px;
}

.hr {
	border-bottom: 1px solid #EDEBD5;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 210px;
	padding: 5px;
	background: #EDEBD5;
}

#sidebar h2 {
	margin: 0;
	padding: 5px 15px;
	color: #FFFFFF;
}

#sidebar h3 {
	font-size: 85%;
	color: #FFFFFF;
}

#sidebar ul {
	margin: 0;
	padding: 15px;
	list-style: none;
}

#sidebar li {
}

#sidebar a {
	color: #FFFFFF;
}

.orangebox {
	background: url(../images/img05.gif) repeat-y;
}

.orangebox h2 {
	background: url(../images/img06.gif) repeat-y;
}

/* Footer */

#footer {
	clear: both;
	height: 100px;
	padding: 25px 0;
	background: #EDEBD5 url(../images/img04.gif) repeat-x;
}

#footer p {
	margin: 0;
	text-align: center;
	font-size: 77%;
}

#footer a {
	color: #666666;
}

Hi,

I'm trying to create a PDF of my site, and I want it to look EXACTLY like the site. Right now the links are coming out blue (instead of the color I've defined in my CSS), and the fonts are not displaying according to what I've defined in the CSS.

Someone once told me that I can overlay the pages with a transparent gif and that would preserve my original CSS definitions. But I can't get that to work. If I add a <div> to the html page, in an effort to overlay a transparent image over the entire page, and then I convert it to a PDF, then in the PDF the big transparent image just moves to the bottom, underneath the rest of the page.

Thanks to anyone who can maybe help.

Laura S.