CSS - Two List Styles Conflicting...

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

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?

Ok so what is the css substitute for the valign tag?

Thanks!

I need a way to apply a different style to IE6 and IE7/Firefox. The webpage renders as expected in IE7/Firefox but IE6 needs to be fixed. Here is a mockup of what I need to have:

Code:

.featdesc
 {
  margin-left: 10px;
  margin-top: 10px;
  width: 400px;
  text-align: justify;

  if (ie6)
     font-size: 11pt;

  else
     font-size: 10pt;
 
  color: #505050;
 }

Is there a way to accomplish this?

Hi for some reason some style are getting lost when ie is displaying the page i am developing, if somone could have a look that would be fantastic

edited links because question has been answered

Thanks everyone

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

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.

On the site I am starting, I am following the suckerfish style of using a ul/li menu. That works fine. A little position difference I have to figure out between IE and the real browsers but it does work. Problem I run into is when one of my pages includes a ul in the content. Using the css as is, that ul in content is displaying incorrectly. It should just go down the page but instead goes across the page. In the stylesheet, I tried making two li's, li.menu and li.info. That broke the menu but the content list worked. I tried adding .menu to various other components in the css but couldn't get both to work. I use php to include the code for the menu so I don't have to go to each page if I want to make a change.
Could someone give me a hand on making two the two li's work from a style sheet so that both the menu and the content work on that page. Here are the pages.
The web page:
http://www.cacct.com/new/faq.php
The stylesheet:
http://www.cacct.com/new/css/sitestyle.css
The menu code:
http://www.cacct.com/new/php/menu.html

This is the first page I built using other methods before changing to stylesheets: You can see what the content should look like.
http://www.cacct.com/new/faq.html

Thanks

tk

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 imagine this has to be one of the easiest questions, yet i have looked at tons of css table pages and cant find the answer.

All im trying to do is create different styles for my tables on my website for example:

Code:

<table class="table1">
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>

<table class="table2">
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>

table 1 would have the following:
black background
white text
underline text

table2 would have the following:
green background
black text
larger fonts

the above colors are just an example, but my question is how would i do my CSS to support this if i wanted it to look this way?

Thanks for any help.

Hi folks.

I am in the process of creating a feature in our Web application to allow users to create and manage a set of simple HTML email templates.

At the bottom of my editor screen I show a preview of the formatted email (with the text and HTML entered into a textarea field).

My problem is that when I output the preview to the Web page, it inherits all the styles from the parent page (for example an <h1> header has colors and special spacing, etc.). Is there a way to temporarily disable then re-enable the CSS styles defined in the header of the page so I can draw the "preview" with default browser CSS styles which will reflect more what an eMail program would look like?

I am not sure if this can be done. If it could, it would be awesome and save me from having to code a special preview page or iFrame for the email template.

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

I understand how to write a print.css style sheet, but I am unclear on how to use it. I want to have a link on my page that says "Printer Friendly Version" that displays the printer friendly version and lets them hit the print button on the browser to print it. I think this is the most common way to print a web page, right?

So I am displaying to the screen first and the printer if they hit the button. So how do I get the print.css formatting to display instead of the screen version? Obviously I want a single markup file for both purposes.