CSS - Trouble Combining Css And Js Objects

Join Date: May 2008
Posts: 2

Firefox bug combining absolute and fixed positioning
Hey helpful people.

I am designing a site which has a floating toolbar (position: fixed) with popup menus. The popup menus are using nested lists and position: absolute to display.
JavaScript is dealing with the transition.

The problem is that in firefox alone the fixed toolbar jumps when the popup menus show and hide. Removing either position: fixed or the offset (bottom: 27px) removes this problem. However these need to be present in the design.

Anyone know a workaround? (webpage and css below)

Code:

<div class="toolbar_O">
  <div class="toolbar_I">
    <!-- top page info -->
    <div class="pageInformation cf">
      <!-- Page Status Info Start -->
      <div class="pageStatus">
        <h4 class="statusLabel">Status: </h4>
        <span class="status">Live</span> </div>
      <!-- Page Status Info End -->
      <div class="RHS cf">
        <div class="toolbarMenu">
          <ul>
            <li class="publicationDates"><a href="#" title="Publication dates">Publication dates<span class="moreArrow"><span class="wai">^</span></span>
              <!--[if gte IE 7]><!--></a><!--<![endif]-->
              <ul class="popup">
                <li>
                  <form>
                    <p>
                      <label for="email" class="expiryDate">Set expiry date</label>
                    </p>
                    <input type="text" class="inputTextbox" name="expiryDate" id="expiryDate"/>
                    <p>
                      <label for="email" class="liveDate">Set live date</label>
                    </p>
                    <input type="text" class="inputTextbox" name="liveDate" id="liveDate"/>
                  </form>
                </li>
              </ul>
            </li>
            <li class="dateAction"><a href="#" title="Last published">Last published 29/01/08<span class="moreArrow"><span class="wai">^</span></span>
              <!--[if gte IE 7]><!--></a><!--<![endif]-->
              <ul class="popup">
                <li>
                  <p class="cf"><span class="label">Author:</span><span class="value">Anne Light</span></p>
                  <p class="cf"><span class="label">Approver:</span><span class="value">John Smith</span></p>
                  <p class="cf"><span class="label">Review date:</span><span class="value">21/06/07</span></p>
                </li>
              </ul>
            </li>
            <li class="versions"><a href="#" title="Other versions">Other versions (#)<span class="moreArrow"><span class="wai">^</span></span>
              <!--[if gte IE 7]><!--></a><!--<![endif]-->
             <ul class="popup">
                <li>
                  <p>Ann Light's version sent for approval on 24/12/07 at 10.03am</p>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- bottom user functions -->
    <div class="userFunctions cf">
      <!--Left Hand Side Buttons Start -->
      <div class="btnLHS"> <a id="#" class="btnHelp" title="Help" href="#">Help</a>
        <div class="toolbarMenu pageActions">
          <ul>
            <li class="otherPageActions"><a href="#" title="Other page actions">Other page actions<span class="moreArrow"><span class="wai">^</span></span>
              <!--[if gte IE 7]><!--></a><!--<![endif]-->
              <ul class="popup">
                <li>
                  <ol>
                    <li><a href="pa001a_delete_page.html" class="lbOn modal:{width:450}" title="Delete page">Delete this page</a></li>
                    <li><a href="pa002_set_date.html" class="lbOn" title="Set date">Set publication/expiry date</a></li>
                    <li><a href="pa003_page_permissions.html" class="lbOn modal:{width:450}" title="See page permissions">See page permissions</a></li>
                    <li><a href="pa004_add_subpage.html" class="lbOn" title="Create sub page">Create sub page</a></li>
                    <li><a href="pa005_page_history.html" class="lbOn modal:{width:450}" title="See page history">See page history</a></li>
                    <li><a href="#">Preview</a></li>
                    <li><a href="link_1d.html" class="lbOn modal:{width:450}" title="Save a copy">Save a copy</a></li>
                  </ol>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <!-- Left Hand Side Buttons End -->
      <!-- Right Hand Side Buttons Start -->
      <div class="btnRHS"><a href="st016_page_notes.html" class="lbOn pageNotes" title="page notes">See page notes</a> <a id="#" class="btnReject" title="Do Not Approve" href="#"><span class="buttonText">Don't Approve</span></a> <a id="#" class="btnApprove" title="Approve" href="#"><span class="buttonText">Approve</span></a> </div>
      <!-- Right Hand Side Buttons End -->
    </div>
  </div>
</div>

Code:

div.toolbar_O { 
	background: #eaf1f9 url(../images/interface/toolbar_bg.gif) 0 0 repeat-x;
	border: 1px solid #3a8ea8;
	padding: 9px 0px;
	width: 729px;
	color: #0a3b3f;
	font-size: 0.9em;
	position: fixed;
	bottom: 20px;
	left: 100px;
	height: 82px;
	}
body.editMode div.toolbar_O {
	position: relative;
	left:0;
	bottom: 0;
	float:right;
}	
	
.toolbar_O .toolbar_I {
	border: 1px solid #073f58;
	background: url(../images/interface/toolbarinner_bg.gif) #54b4cc;
	margin: 0px 9px;
}


.toolbarMenu ul li a, 
.toolbarMenu ul li a:visited {
	font-weight: bold;
	color: #77aeb5;
	border: 1px solid #287e95;
	text-decoration: none;
	padding: 4px 5px 6px 5px;
	background: #e6f4f5;
	color: #0a3b3f !important;
	display: -moz-inline-box;
	display: inline-block;
	height: 13px;
}

.toolbarMenu ul {
	padding:0;
	margin:0;
	list-style-type: none;
	margin: 0;
}

.toolbarMenu ul li {
	float:left;
	position:relative;
	margin: 0 0 0 10px;
}
.toolbarMenu ul li ul li {
	margin: 0;
	font-size: 0.9em;
}
.toolbarMenu ul li ul {
	visibility: hidden;
	position:absolute;
	bottom: 27px;
	left:0;
	padding: 5px;
	background: #ebf6f8; 
	border: 1px solid #2e869c;
	margin: 0;
	z-index: 1000;
	font-size: 1em;
	text-align: left;
}

.toolbarMenu ul .moreArrow {
	display: -moz-inline-box;
	display: inline-block;
	padding: 6px 8px;
	width: 1px;
	margin-left: 10px;
	border-left: 1px solid #89abb7;
	background: url(../images/interface/morearrow.gif) 3px 0 no-repeat
}
.toolbarMenu ul li.open ul {
	visibility: visible;
	
}

.toolbarMenu ul li.versions.open ul {
	width: 250px;
}

div.toolbar_O .toolbarMenu ul li.open a {
	color: #4594A5 !important;
}
div.toolbar_O .toolbarMenu ul li.open .moreArrow{
	background: url(../images/interface/closearrow.gif) 3px 0 no-repeat;
}
/* top part of toolbar */
.toolbar_O .pageInformation {
	padding: 6px;
	height: 25px;
}
 
.toolbar_O .pageInformation .pageStatus {
	color: #FFF;
	font-size: 1.3em;
	width: 170px;
	float: left;
}
.toolbar_O .pageInformation .RHS {
	float: right;
}
h4.statusLabel {
	height: 100%;
	display: inline;
	text-transform: uppercase;
}
div.toolbar_O div.pageInformation .label, 
div.toolbar	_O div.userFunctions .label {
	width: 75px;
	float: left;
	text-align: left;
}
div.toolbar_O div.pageInformation .value, 
div.toolbar	_O div.userFunctions .value {
	font-weight: bold;
	text-align: left;
	float: right;
	vertical-align: top;
	width: 75px;
}
div.toolbar_O div.pageInformation .inputTextbox {
	width: 80%;
}

/* bootom part of toolbar */
.toolbar_O .userFunctions {
	padding: 8px 0;
	height: 25px;
}
div.toolbar_O div.userFunctions div.btnRHS {
	float: right;
	margin: 0px 10px 0px 0px;
}
div.toolbar_O div.userFunctions .btnLHS {
	float: left;
	margin: 0px 0px 0px 10px;
}
div.toolbar_O div.userFunctions div.btnLHS a.btnHelp, 
div.toolbar_O div.userFunctions div.btnLHS a.btnHelp:hover {
	padding: 5px 5px 5px 25px;
	margin: 1px 5px 0 0;
	background: #e6f4f5 url(../images/interface/icon_help.gif) 3px 3px no-repeat !important;
	float: left;
	border: 1px solid #287e95;
	text-decoration: none;
	font-weight: bold;
	color: #0a3b3f;
	height: 12px
	
}
.toolbarMenu.pageActions {
	float: left;
}
.toolbarMenu ol {
	margin: 0;
	padding: 0;
	width: 320px;
	height: 60px;
	list-style: none;
}
.toolbarMenu ol li,
.toolbarMenu ol li a {
	margin: 0;
	padding: 0;
	float: left;
	width: 150px;
	min-height: 8px;
	display: inline-block;
	border: none !important;
	color: #0a3b3f !important;
	font-size: 1.2em;
	background: none;
	}
div.toolbar_O div.toolbar_I a.pageNotes {
	font-weight: bold;
	color: #0a3b3f;
}
div.toolbar_O div.toolbar_I a.pageNotes:hover {
	color: #FFF;
}

/* approve/reject btns */
div.toolbar_O div.userFunctions div.btnRHS a.btnApprove,  
div.toolbar_O div.userFunctions div.btnRHS a.btnReject {
	border: 1px solid #287e95;
	border-bottom: 2px solid #06465f;
	border-right: 2px solid #06465f;
	text-decoration: none;
	height: 12px;
	padding: 5px 15px 5px 0;
	background: #fffeff url(../images/interface/icon_approve.gif) 95% 3px no-repeat;
	display: -moz-inline-box;
	display: inline-block;
	color: #0a3b3f;
}
div.toolbar_O div.userFunctions div.btnRHS a.btnApprove:hover,  
div.toolbar_O div.userFunctions div.btnRHS a.btnReject:hover {
	background-color: #135d82;
	border: 1px solid #FFF;
	border-bottom: 2px solid #06465f;
	border-right: 2px solid #06465f;
	color: #FFF;
}
div.toolbar_O div.userFunctions div.btnRHS a.btnReject {
	background: #fffeff url(../images/interface/icon_reject.gif) 95% 3px no-repeat;
}



li.otherPageActions ul,
li.otherPageActions ul li{
	margin: 0;
	padding: 0;
	list-style: none;
}

I need help trying to get two objects to sit next to each other so i have a navigation menu on the left and a content area on the right. I have created these but the object pushes the second object underneath it i dont want this to happen.
im new to css
#banner
{
background-color:red;
text-align:center;
border:solid black;
}
#rightcontent
{
float:right;
text-align:center;
border:solid black;
}
#leftcontent
{
margin:3px;
color:white;
background-color:black;
text-align:left;
border:solid black 1px;
float:left;
}
h2
{
text-align:center;
}
thats my code

Hello there.
I have an issue with css styling of objects only in Internet Explorer. I am using IE9 and i have tested the styling with other version and still i got the same result.
This is my problem.
I am using this css:
Code:

#map {
			margin:0 auto;
			padding:0;
			width:800px;
			height:461px;
			background:url(images/wrdmap_1.jpg) top left no-repeat #fff;
			font-family:arial, helvetica, sans-serif;
			font-size:8pt;
		}
 
		#map li {
			margin:0;
			padding:0;
			list-style:none;
		}
 
		#map li h10 {
			position:absolute;
			display:block;
   			background:url(images/blank.gif);
   			text-decoration:none;
			color:#000;
		}
 
		#map li h10 span { display:none; }
 
		#map li h10:hover span {
			position:relative;
			display:block;
			width:200px;
			left:10px;
			top:10px;
			border:1px solid #000;
			background:#fff;
			padding:5px;
 			filter:alpha(opacity=80);
			opacity:0.8;
  		}
 
		#map h10.senzshen {
			top:215px;
			left:555px;
			width:20px;
			height:20px;
			position:relative;
			z-index:0;
		}
 
		#map h10.slovenia {
			top:143px;
			left:385px;
			width:20px;
			height:20px;
			position:relative;
			z-index:0;
		}

and this html code:
Code:

<ul id="map">
	<li><h10 class="senzshen"><span><b>Shenzshen</b><br>
Primer pisano za kontaktot msn, skype lnikoj ova ona.</span></h10></li>
<!--[if !IE]> -->
<!-- <![endif]-->
 
	<li><h10 class="slovenia"><span><b>Slovenia</b><br>
Primer pisano za kontaktot msn, skype lnikoj ova ona. <a href="#">Proba</a></span></h10></li>
</ul>

to produce world map with 2 dots which on hover will show tooltips with information's. however this code works good with firefox and chrome and the dots are displayed on the exact position as i need but when browsing the web page with internet explorer the dots are displayed outside the map on wrong position.
is there any way i can fix this?
Thanks in advance.
Best wishes Svarc.

Suppose I have a DIV element that is set to, say, 750 by 750 px, and I want another, smaller, DIV element positioned in it (over it?). Suppose the second DIV element while smaller, does not have set dimensions. How do I center it horizontally within (over?) the first, larger DIV?

IF I where to use tables I might do this:
Code:

<table align="center">
	<tr>
		<td align="center" valign="middle">
			<img>
		</td>
	</tr>
</table>

Or another table, not an image...

But I don't want to use tables...

Hello,

I'm brand new to this CSS business, so please be gentle!

I'm trying to place my AP Div objects inside a table so that their positions are relative to the edges of the table, rather than relative to the edges of the browser window.

I'm guessing I need to somehow put the code for the table around the code for the AP Div objects, but I can't work out how it's supposed to look. Any guidance would be much appreciated.

Thanks!

Please realize this question is coming from a new CSSer.

I would like to have the text I have in the content area wrap around the box on the right. So when I type more content, the bottom portion will extend below the box. The box will always stay at the top.

can someone help me do this?

My page

By the way, I know it doesn't render properly in FireFox - I was going to ask about that later.

I used the CSS Tricks dot com guide to make my menu bar items equidistant from one another and it works perfectly in Chrome, Firefox and IE8.... but not IE7 (or IE8 Compatibility Mode). BTW the guide example works fine in IE7 but I'm doing something only ever so slightly different. I really don't have a clue what to do, so would appreciate some help.

Here's the relevant CSS code I'm using:

Quote:
#content {
width:1000px;
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
padding:0;
padding-top:230px;
}

/* Menu */

#menu {
height:40px;
padding:0;
padding-left:40px;
padding-right:40px;
display:block;
}

#menu a {
margin:0;
padding:0;
display:block;
float:left;
}

#menu a span {
position:relative;
display:block;
z-index:-1;
}

#menu-row {
margin: -40px 0 0 150px;
padding: 0;
height: 40px;
}
#menu-row div {
width: 33.3%;
float: left;
}
#menu-row div a {
float: right;
}

#menu .home {
background: url(images/menu-home.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}

#menu .science {
background: url(images/menu-science.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}

#menu .radio {
background: url(images/menu-radio.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}

#menu .club {
background: url(images/menu-club.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}


and HTML

Quote:
<div id="content">
<div id="menu">
<a href="#" class="home"><span>Home</span></a>
<div id="menu-row">
<div><a href="#" class="science"><span>Science</span></a></div>
<div><a href="#" class="radio"><span>Radio</span></a></div>
<div><a href="#" class="club"><span>Club</span></a></div>
</div> <!--/movers-row -->

</div> <!--/menu -->


All the links in the menu-row div are shifted up vertically from the first link in IE7 and I don't know why?

Hello,

In CSS is there a way to tell an object to extend the full height and width of its parameters without specifying height and using absolute positioning?

Thanks,

Andy

Hi, I'm new here and hope someone can help! I wasn't sure whether to post this in the CSS or Flash forum; it's a problem caused by Flash which I suspect needs some clever CSS to resolve.

My new website is carolineofbrunswick (dot) co (dot) uk. As you can see, there's a ton of blank space off to the right of the pages, and I can't figure out how to get rid of it.

It's caused by the Flash objects in the right-hand column. Changing the width attributes on those Flash objects just causes them to not appear at all, though the blank space still exists.

Can anyone help?

Cliff

This is my css file : BODY { font: 11px geneva, verdana, arial, sans-serif; color: #89A1BD; }
TH{ font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; }
A:active { font: 11px geneva, verdana, arial, sans-serif; color: #00000; text-decoration: none; }
A:hover { font: 11px geneva, verdana, arial, sans-serif; color: #0000FF; text-decoration: underline overline; }
A:link { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration: none; }
A:visited { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration:none; }

#poll{ ;border-style : solid ;border-color : #004f9d ;border-width : 2px}
#poll tr td dt{font-family: Small Fonts;font-style : normal ;font-size : 7pt; font-weight :bold }

select, input, textarea { font: 10px geneva, verdana, arial, sans-serif; color: #3D3D3D; }
.pn-top {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-title {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-title:link { color:#FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none}
.pn-title:active { color:#FFFFFF; FONT-SIZE: 11px;FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none}
.pn-title:hover { color:#0000FF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-title:visited { color:#CC0000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}

.pn-link {BACKGROUND: none; COLOR: #0000000; FONT-SIZE: 11px; FONT-WEIGHT: normal; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-link:link { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none}
.pn-link:active { color:#FFFFFF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none}
.pn-link:hover { color:#0000FF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: underline overline}
.pn-link:visited { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none}


.date {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif; TEXT-DECORATION: none}

body {
SCROLLBAR-FACE-COLOR: #B7C6E5; SCROLLBAR-HIGHLIGHT-COLOR: #D3DCEF; SCROLLBAR-SHADOW-COLOR: #738FCC; SCROLLBAR-3DLIGHT-COLOR: #E9EEF8; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #E5EBF4; SCROLLBAR-DARKSHADOW-COLOR: #4870AA;
; background-color: D8E0E9
}
FONT { font: 11px geneva, verdana, arial, sans-serif; color: #0000000; }
TD { font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; ; top: 20pt; clip: rect( )}



And my text is just normal black en when i go over it , it will turn blue it always works perfect if theres no link specified ex. when "href" is empty then it works but if its links.html and that page exitst then it stays black when i go over it , i've tried much changes in my css sheet but it doensn't seems to work

OK, I thought I was so smart. Working on a site that is 100% CSS AND Priority 3 WAI compliant, and thought I had it - it looked good on PC IE, Mozilla and Safari...only to be shot down by Mac IE 5.5, which I know is a bit of a black sheep in terms of CSS. Can those of you with knowledge of such things take a look at:

http://www.getbrightstar.com/v2/

And let me know why Mac IE 5.5 wouldn't float the columns correctly? The tricky part is that *I* don't have a mac and can't find an IE 5.5 emulator online like safari, but my client DOES have one and she uses IE 5.5, so it would be best if I could get it right the first time...I don't want to use my client for compatibility testing.

Thanks,
-Daniel

In the header section design, I have three parts. Menu; upper left, gallery; lower left and Logo right. So in my stylesheet, I created three parts. The problem I am having is logo is not centered as in the design (check the attachment). I could not figure why not. Looking for suggestions.

http://www.refinethetaste.com/AT/

Hey there.

A friend of mine was giving me a hand with the coding for http://myspace.com/457343540 but unfortunately I can't get in contact with him atm, so I thought I'd as here.

As you can see in the link provided, firefox display the margins I want, but IE throws them off a bit. I've tried a few different things, but after a couple hours I've given up trying on my own lol.

Another issue is the page is obviously stretching off the page (?idk) as the scroll bar goes off the side.

Code:

<style>
{ Music Player Properties } 
.i {display:none;}
table table td.text div object {position:absolute; top:1140px; left:50%; margin-left:-30px;}
table table td.text div object object {position:static; margin-left:0px;}
	
	
{ Background Properties } 
table, tr, td { background-color:transparent; border:none; border-width:0;} 

body { 
background-color:000000; 	background-attachment:scroll;	background-position:top center;   background-repeat:no-repeat;   background-image: url(http://bnesfinest.net/tomm/myspace/tioc/bg.jpg); 
border-top-width:0px; border-bottom-width:0px; border-left-width:0px; border-right-width:0px; border-color:none; border-style:solid; padding-left:0px; padding-right:0px;} 

.samohtlogo{
position:absolute; width: 100px; top: 20px; left: 20px; text-align: left; z-index: 10;}


.menu{ 
       width: 959px;  height: 136px;  position: absolute; top: 591px; z-index: 2; overflow: visible; margin-left: -480px; left: 50%;}

.header {
	width: 959px; 	height: 422px;	position: absolute;	top: 169px; margin-left: -480px; z-index: 0;	overflow: visible;	left: 50%;}
	   
.memberstop {
	width: 959px; 	height: 403px;	position: absolute;	top: 727px;	margin-left: -480px; z-index: 0;	overflow: visible;	left: 50%;}

.thealbum{ 
       width: 422px;  height: auto;  position: absolute;  top: 1130px;  z-index: 2;  overflow: visible;  margin-left: -480px;  left: 50%;}
	   
.musicbg{ 
       width: 541px; height: auto;  position: absolute;  top: 1130px;  z-index: 0;  overflow: visible;   margin-left: -62px;  left: 50%;}
	
.shows{ 
       width: 959px; height: auto; position: absolute;  top: 1513px;  z-index: 0;  overflow: visible;   margin-left: -480px;  left: 50%;}

.reverbshows{ 
width: 959px; height: auto; position: absolute; top: 1550px;  z-index: 2; overflow: visible; margin-left: -445px; left: 50%;}
	   
.featvideo{ 
width: 959px; height: auto; position: absolute; top: 1535px; z-index: 2; overflow: visible; margin-left: -50px; left: 50%;}
	   
.R { Div Counter Acts }
.friendSpace div { overflow:visible !important;   height:auto !important;   position:static !important;   background:none !important; }

.friendsComments div { overflow:visible !important;   height:auto !important;   position:static !important;   width:auto !important;   background:none !important; }	
	

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td{ 
background-color: !important; text-align: left; vertical-align: top; overflow: visible !important; font-size: 11px !important; line-height: 12px !important; 
text-transform: none !important; text-align: justify; letter-spacing: 0px; color: e7e2c5!important; margin: 10px !important; padding: 20px 20px 12px 0px; 
border-bottom: 1px dotted dimgrey !important; border-color: 50433d!important; _line-height: 16px !important; } 


html body.bodyContent table tbody tr td table tbody tr td.text table.friendSpace tbody tr td.text table tbody tr td table tr td table tr td a{
	width:  110px !important;	overflow: hidden;	letter-spacing: 0px;	font-size:  10px !important;	line-height: 12px;	display:  block;	color:50433d!important;
	margin: 0 !important;	padding: 0 !important;	text-align: center !important;	margin-left: 1px !important;}


.friendSpace {
position: absolute !important;  z-index: 4 !important;  width: 800px !important;  margin-left: -320px;  _margin-left: -400px;  top: 0px !important;          margin-top: 1860px !important;
}




.friendsComments {
position: absolute !important;  z-index: 6 !important;   margin-left: -35px;  _ margin-left: -400px;  width: 833px !important;  top: 0px !important;  margin-top: 2755px !important;
}





.friendsComments a img {border: 3px; border-color: 50433d; border-style: solid;} 

.friendsComments table {width: 800px; align: justify;    position:relative;   left:0px;  }


.friendSpace a img {border: 4px; border-color: 50433d; border-style: solid;}
</style>

Code:

<div class="message">
  <table>
    <tr>
      <td>Hello World</td>
    </tr>
  </table>
</div>

Code:

div.message
{
   border: 1px solid #000000;
}

For some reason that does not produce a border around the div. Is there a reason why not?