CSS - Different Styles For The Same Elements On One Page

Below is a sample of my CSS page, I'm having an issue with the floats that are commented out, they are affecting my th even though I haven't actually classed anything in my html... Any ideas?

<code>
/* CSS Document */

body {
margin: 0;
padding: 0;
background-color: #000;
color: white;
font-family: "Lucida Grande";
font-size: x-small;
}
table.outer {
border:1px solid #fff;
width: 178px;
}
/*.left {
float: left;
}
.right {
float: right;
}*/
table {
clear: right;
width: 700px;
line-height: 1.4em;
border-collapse: collapse;
border: 1px solid #000;
color: white;
background: #000;
font-family: "Lucida Grande";
font-size: x-small;
}</code>

Hi,

I've been trying to integrate my blog into my website to look exactly the same. I am using the same style sheet for my blog as for the rest of my website.

Somehow, my logo and fonts and pictures are all smaller on the blog than on the real site.


I did a 'view source' and then pasted that into a file called test.php and testing different changes to my css from that file so it doesn't affect the rest of my site. The code is very similar between my regular site pages and my blog pages because I copied much of the header stuff directly into my blog template. I am totally perplexed as to the incredible shrinking page element dilemma.

I'm not sure how much code to paste in here to get the best help. What do I need to provide you to help me troubleshoot?

Any ideas?

pe123

Hi.

I have a question about how to edit specific elements in a profile page.


Take this as an example;
worldwideweb.teenspot.com/profiles/Mumfie

Scroll down and look at the box named "Specifics".
Lets say I want to edit "Location" in that section from Norway to Sweden by using CSS. What is the procedure I should follow?
The page allows you to edit CSS in an advanced page editor.

Should I search up the source for that page and do some modification by pasting a new code?

Ok well the boss asked me to do a XHTML/CSS version of the website and get it up to snuff with web standards. Now I've done the coding to get the site to look the same in XHTML as it did before in HTML and tables... but there is one catch. I can't quite get my head around the easiest way to deal with captions underneath pictures. For example look at this page:

http://www.zeroonedesign.com/aboutus.html

Now in my version I haven't got the picture of the guys, or the "navigating our portfolio" bit.

Take a look at my version he

http://obelix.ca/zeroone/aboutus.html

I was thinking about creating little block divs and positioning them absolute on the page... but that doesn't seem like much of a solution as I could see the stylesheet growing considerably if there was a page with a lot of these pictures with captions. Any reccomendations? How do you guys do captions with pictures?

I'm working on a site with a div element with a fixed position, some 800 pixels from the left. The site is optimized for 1024x768. However, if a user with a resolution of 800x600 views the page, this div element will be missing, and the user won't be able to scroll over to see it. Is there some way I can get around this?

One idea would be to align the div on the right instead of the left, but I don't want a lot of whitespace between my content (on the left) and my div (on the right). I was hoping that I could specify a parent element with a relative position, and that position: fixed would reference the position of the parent element, but that only seems to work when the child div element is position:absolute, not position:fixed.

Thanks for any insight.

Hello,

Here's a link to a very short video (MOV format) showing the issue that I'm having. I'm guessing that it's CSS related. It seems like the screen update shouldn't be so obvious. The graphics involved are very small, as well.

What could be causing this?

Thanks for any help!

blendernewbies dot com slash tmp slash screen_update_issue dot mov

EDIT: well, it seems I can't post links! How am I supposed to accurately convey the issue without wasting people's time trying to describe it? Sigh. I will try to post the link in a written out format. I hope it doesn't violate anything doing it that way. The video is hosted on my own server and is about 800KB. 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!

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

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?

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

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

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