CSS - Table Formatting

OK, I have a table I'd like to format with CSS. No problem. I have an external stylesheet that I link to for the rest of my site. I figured I'd add the CSS there and be good to go.

Nope. When I link to the external stylesheet, everything else on my page is formatted correctly, except the table. It's like the table isn't grabbing the CSS information. (Example 1)

When I take the CSS and put it in the header of the page, it works fine (same exact CSS, the only difference is where it's referenced). (Example 2)

Hello -

I am attempting to create a table of values that will have a relative style sheet that will contain a circle background image and number relative to said value.

The numbers are only being added for during the creation of requirements to reference the values. The current procedure is to create the HTML, then take a screenshot of it, and manually in a photo editor (or visio) to go in and add the numbers. (So, if we have to add another value, I have to go back in and manually update the numbers and shift everything around). I figure this would be a MUCH better way, since I can just change the visibility on the style sheet and 'poof' the numbers are all gone :-), and when I need to do a screen shot, 'wham' their back again :-D.


Here is an example of what I ideally want to achieve (created w/ Visio):
Ideal Table Look

However, here is what I am currently experiancing


Here's the style sheet that I'm using
Code:

<style type="text/css">
  div.number {  visibility:visble; 
	position: relative; 
	width: 20px; 
	height: 20px; 
	z-index: 2; 
	left: 5px;
	bottom: 35px; 
	text-align: center; 
	text-vertical-align: center;
	font-family: arial; 
	font-size: 8pt; 
	background-image: url(circle.gif); 
	background-repeat: no-repeat; 
	background-position:0px -1px
	background:none; 
	border-style:none; 
	border-width:none; 
	}
</style>

- All of the number/circles are shifted (which isn't a major problem I can probably solve the location issue myself), but the more important item that's giving me problems is the re-formatting of my Table. I would like to have the image/numbers 'hover' outside of the table cells.

Any help would be greatly appreciated.

Thanks in Advance.
Dave

hi all,
need one help from you..

i have to format a div tag which is generated dynamically..
if there are only 4-5 lines consists in that div it works fine, but the lines go out of bound it takes scroll bar

overflow:auto;
overflow-x:hidden;
height:200px;

in mozzila it works fine as the scroll bar comes inside the div tag... but in internet explorer .. the scroll bar goes out of the div tag..

can anybody help me...

I am running amuck! know this should be basic, but Firefox and IE both handle the <h1> tags differently:

1) IE seems to put equal whitespace above and below the element
2) Firefox seems to put less whitespace AFTER the <h1> tag.

Anyway to smooth this out so it displays close to similiar?

My gratitude ahead of time...

Yes, this is actually a CSS question, despite me providing HTML code...

I'm at my wit's end with IE. In the code below, "outer" is losing all formatting--background color, border, you name it, it's gone. html4strict Code:
Original - html4strict Code <div id="outer" style="width: 410px;"> <div id="left" style="float: left; width: 200px;"><p>stuff</p></div> <div id="right" style="float: right; width: 200px;"><p>stuff</p></div> <div style="clear:both; font-size: 0; height: 0; width: 0;">&nbps;</div> </div>

  

 <div id="outer" style="width: 410px;">


   <div id="left" style="float: left; width: 200px;"><p>stuff</p></div>


   <div id="right" style="float: right; width: 200px;"><p>stuff</p></div>


   <div style="clear:both; font-size: 0; height: 0; width: 0;">&nbps;</div>


 </div> 

My stylesheet is set up just fine (works fine in Firefox), so I assume this is one of those weird float bugs in IE. The thing is, it was rendering fine until I added another <div> in an entirely different location. Yes, it's all formatted correctly and validates XHTML 1.0 strict.

Am I missing something, or is a known bug that I can't find documented, or does anyone have a suggestion for an alternate approach? Thanks all!

Hi all,

I am in the process of writing a news script in php, i want to display the articles in a downward way, using divs.. I am having a problem in IE & firefox where the image flows out of the bounds of the div and overlaps in the following div whereas I actually want the div to contain the image so the next div will start below.. I can fix this in a number of ways in firefox (display: table; not sure if its right but it works), but nothing I try seems to work in IE, is there a correct way of doing this that will worth in both browsers?

I have included the red border to demonstrate how it is overlapping over the other div..

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=iso-8859-1"><title>GenerationQ - News</title>

<style type="text/css">
div.spotlight {
	text-align: left;
	border: solid 10px red;
}

div.spotlight * {
	margin: 0 auto;
	border: 0;
	padding: 0;
}

div.spotlight img {
	float: left;
}

div.spotlight p.title { 
	text-align: left;
	font-size: 12px;
	font-weight: bold;
	padding-bottom: 12px;
}

div.spotlight p { 
	font-size: 12px;
}

div.spotlight p.desc { 
	font-size: 12px;
	padding-bottom: 3px;
}

div.spotlight p.byline {
	font-size: 9px;
	padding-bottom: 20px;		
}

div.spotlight span.username {
	font-size: 11px;
}

div.spotlight span.publishdate {
	font-size: 10px;
}

div.section {
	text-align: left;
	border: solid 10px red;

}

div.section * {
	margin: 0 auto;
	border: 0;
	padding: 0;
}

div.section img {
	float: left;
}

div.section p.title { 
	text-align: left;
	font-size: 12px;
	font-weight: bold;
	padding-bottom: 12px;
}

div.section p { 
	font-size: 12px;
}

div.section p.desc { 
	font-size: 12px;
	padding-bottom: 3px;
}

div.section p.byline {
	font-size: 9px;
	padding-bottom: 20px;		
}

div.section span.username {
	font-size: 11px;
}

div.section span.publishdate {
	font-size: 10px;
}
</style></head><body>
<h3 align="left">News</h3><div class="spotlight">
<img src="be51273175be707e583f4c3591dd3c3d71564018.jpg" alt="">
<p class="title"><a href="http://localhost/mmm/viewarticle.php?article=This-a-test-article-of-Link-type-with-an-image%21-1">This a test article of Link type with an image!</a></p>
<p class="desc">This a test article of text type with an image!</p>
<p class="byline">by <span class="username">Administrator</span> on <span class="publishdate">2006-08-29</span></p>
</div>
<div class="section">
<p class="title"><a href="http://localhost/mmm/viewarticle.php?article=This-a-test-article-of-Link-type-without-an-image%21-1">This a test article of Link type without an image!</a></p>
<p class="desc">This a test article of Link type without an image!<span class="smallText"></span></p>
<p class="byline">by <span class="username">Administrator</span> on <span class="publishdate">2006-08-29</span></p>
</div>
</body></html>

I have included the image as an attachment for easy of testing the code above so you can see what I mean!

Hopefully someone could help?

thanks in advance,

regards // infin.

Hi,

Can anyone please help with formatting a list?

In the simple list below, I would like;
1) The main list items should always be positioned at top 0px, left 90px of it's container (done)
2) Nested list items should be hidden (done)
3) The nested item that belongs to the "selected" list item, should be visible (done)
4) The nested item that belongs to the "selected" list item, should always be positioned at top 0, left 0 (I can't do this)
5) The main list items should be on top of the visible sub item (I can't do this, the sub item is always on top)

Many thanks for any pointers,

Cheers,
Mark

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>
<title>Untitled</title>
</head>

<body>
<style type="text/css">
#container{position:relative;height:100px;border:1px solid #000}
#container ul{list-style: none;padding: 0;margin: 0;position:absolute;top:0px;left:90px;width:100px;z-index:20;}
#container ul ul{display:none;}/* hide nested lists */
#container ul li{display:block;width:100px;background:red}
#container li.selected ul{display:block;} /* show nested list for item with selected class */
#container li.selected ul li{width:100px;position:absolute;top:0px;left:0px;background:yellow;z-index:10;}/* style nested item */
</style>

<div id="container"><div style="clear:both"></div>

<ul>	
<li class="selected">item 1
	<ul>
	<li>Nested item 1</li>
	</ul>
</li>
<li>item 2
	<ul>
	<li>Nested item 2</li>
	</ul>
</li>
<li>item 3
	<ul>
	<li>Nested item 3</li>
	</ul>
</li>

<div style="clear:both"></div>
</div>


</body>
</html>

I posted a question about this in the HTML forum but maybe there is a CSS solution to my problem. I have a table that is filled with names from a database. It is filled with a first, middle , and last name. I want these to be displayed on one line and not put onto two lines. I have been using the <pre> tag but it makes my <td>'s two tall for my liking(only in IE). Is there something I can do make sure the name is displayed on one line and make sure the td is only as tall as the font that is used? Here's a snippet of the code.

Code:

<td><pre><a href="ViewProfile.pl?StudentID=$studentID[$x]">$firstName[$x] $middleInitial[$x] lastName[$x]</a></pre></td>

I am trying to style the <hr> in the following peice of my page using css selectors. I have used, Code:

td div hr {...}

, but this affects other hr's outside of this menu. Is there a way to make this work without having to give the hr a class name?
Thanks.

Code:

<td width="140" bgcolor="#EFBE56" class="Menu_WhiteText_GoldBkgd"><div align="left">
                  <p class="side_menu_white"><br>
                    <a href="In-The-News.htm" style="color: white">in the news...</a> </p>
                  <p class="side_menu_white"> <a href="Press_Releases.htm" style="color: white">press releases</a> </p>
                  <p class="side_menu_white"><a href="Newsletter.htm" style="color: white">newsletter</a> </p>
                  <p class="side_menu_white"><a href="Multimedia.htm" style="color: white">multimedia </a></p>
                  <p class="side_menu_white"><a href="../About/annual_reports.htm" style="color: white">annual reports</a> </p>
                  <p class="side_menu_white"><a href="Contact.htm" style="color: white">contact media relations & communications</a> </p>
                  <hr>
                  <p><span class="Menu_WhiteText_GoldBkgd"> <a href="PhotoRelease-ConsentForm.pdf" target="_blank">consent form</a> </span> <span class="Body_Text2"><span class="Body_Text"><br>
                      <br>
                  </span></span></p>
              </div></td>

Hey guys, hit a problem with my div formatting in css. usig external style sheet with the two styles "header" and "regular". If i make the div class="regular" and then make the first line class="header" using the <a> tag without defining href (as it is not a link, and dont want it to be a paragraph). Then the content below the 1st line ends up superimposed over the 1st line. You understand what i mean? Hopefully this might be a common bug? Anyone know what is causing this? im using IE6.0 to check it for bugs. It is offline atm, as i am making it. but it can be made available if anyone needs to see it.

Code:

<div id="content" class="regular" style="top: 280px; background-color: F5DEB3; padding: 10px; padding-bottom: 0px;">
		<a class="header">About New Zealand</a>
		<p>New Zealand is one of the most unique places in the world to dive. Its rich, nutrient-dense waters provide a home to a <a href="constructionpage.html" class="interlink">multitude</a> of exotic and amazing <a href="constructionpage.html" class="intralink">creatures.</a>
		Whilst many of the tropical wonders are summer visistors to our shores, there is an abundance of life all year round.</p>
		</div>

Monkeewrench

p.s sorry the code window is stuffed, first time using it, lol

Ok, so I'm having some problems getting my site to look how I want. The formatting appears correctly in all browsers (I think) but in IE it's horribly messed up. This is my first site that I'm making just to learn some things and I don't know much CSS at all. I've tried reading up but am not sure how to properly use CSS to make this work cross browser capable. Basically, I want my text box search bar properly centered along with my logo and the "advanced search" and "preferences" links. I painted over some stuff for privacy heh. In FireFox, it looks like this ( http://img261.imageshack.us/img261/9625/ex1hu0.jpg ) but in IE, it looks like this ( http://img523.imageshack.us/img523/4631/ex2sm7.jpg ). So basically in IE the search bar and what not is aligned too high! How can I use CSS to make it looks like it does in FireFox, in all browsers!? I learn best by example so thanks much for any help!!!

My probably terrible code is as follows:
Code:

<table>
  <tr>
    <td valign="middle">
	<a href="/home"><img src="logo.jpg"></a>
    </td>

    <td valign="middle">
<form id="SearchBarForm" action="search.php" method="get">
	<input type="text" name="q" size="30" maxlength="150" value="'.($q).'" title="Search">

	<select name="FTS"> <!-- FTS = File Type Selections -->

	<option value ="File_Type">File Type</option>

	</select>
	<font size=-1><input type="submit" name="Submit" value="Search"></form></font>
    </td>
    <td nowrap>&nbsp;&nbsp;<a href=/advanced_search.phpf>Advanced Search</a><br>&nbsp;&nbsp;<a href=/preferences.php>Preferences</a>
    </td>
  </tr>
</table>

I'm working on a project where the client wants a table of data, and one column of data is money, such as "$1.23".

The client would like all the "$" aligned on the left side of the column and all the amounts aligned on the right side.

Now I could do something like:

Code:

<td>
  <div style="float:left">$</div>
  <div style="float:right">1.23</div>
<td>

(Obviously I'd change those to classes.)

That works, but it seems sloppy, so many extra divs for a tiny little formatting thing. I could also put the "$" into a background image, but then you lose something if you're using a screen reader.

I looked into doing something with :first-letter, but there's no way to say "everything else but the first letter float right" without wrapping the amount in a span or div, which still seems sloppy to me.

Is there another way to approach this, CSS or otherwise?

Hello all,
I'm trying to add digg stories to my site & want to format it with css. Digg says you can use CSS with the class names to customize the display. Havent use css before so I'm lost...if someone could hook me up with this I would sure appeciate it.
I would like to be able to format the links and text differently.

The code I want to use to add digg is:
Code:

<script language="JavaScript" src="(URL address blocked: See forum rules)/diggjs/front/tech_news/0" type="text/javascript"></script>

I'm going to put it in a frame so just on a blank page.

Thanx!

Hi,

Really new to this css stuff and i'm sure i'll get a beratting for asking such a simple question but here goes...

What i need is a cell with a linked word in it. Initial state is white background with blue text. On rollover i would like the whole cell to turn blue with white text.

I'm sure this is simple but just need a point in the right direction.

Thanks for any help

Tom