CSS - Css Table Centering Solution

Hi,

Im having a problem centering a DIV table exactly how i want it too.

I want to be use the DIV table so that it will be only a few pixel away from the top.. so lets say 80px from the top and being centered horizontaly, so that it will display the samething for both 1024x768 & 800x600.

ps: the DIV table needs to be aligned to the right so that the image will appear on the right in both 1024x768 & 800x600

I have included/attached a image to kinda give a better idea.

Seems like I'm always trying to get something to render correctly in IE but this time it's firefox that is acting ornery.

There's not much to the page I'm working on. The table (#schoolstable) should be centered in the #mainbody div.

Works in ie, fails in firefox.

Here's my css:

Code:

/* = Default Layout
-----------------------------------------------------------------------------*/

/* Remove padding and margin */
* {
  	margin: 0;
	padding: 0;
}

/* Remove border around linked images */
img {
	border: 0;
}

body {
	text-align: center;
	min-width: 800px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}



/* = Basic Layout and Typography
-----------------------------------------------------------------------------*/

h1 {
	margin: 8px 0;
}

h2 {
	margin: 8px 0;
}

p {
	margin: 4px 0;
}

ul {
	margin: 8px 0;
}

li {
	font-size:14px;
}

form {
	margin: 8px 0;
}



/* =Advanced Layout and Typography by Area
-----------------------------------------------------------------------------*/

#wrapper {
	width:760px;
	margin: 0 auto;
	text-align: center;
}

#masthead {
	width:760px;
	margin: 0;
	background: url(../images/indexheader.jpg) no-repeat center;
	height: 270px;
}

#mainbody{
	width:760px;
	margin: 0;
	text-align: center;
}



/* = Basic Links
-----------------------------------------------------------------------------*/

a, a:visited {
	color: #000000;
	background-color: #EEEEEE;
	width: 150px;
	line-height: 18px;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	display: block;
}

a:hover, a:visited:hover {
	color: #FFFFFF;
	width: 150px;
	text-decoration: none;
	background-color:#00FF33;
}





/* = Advanced Links
-----------------------------------------------------------------------------*/

.c0000FF a, .c0000FF a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c0000FF a:hover, .c0000FF a:visited:hover {
	color: #FF6600;
	width: 150px;
	text-decoration: none;
	background-color: #0000FF;
}


.c990000 a, .c990000 a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c990000 a:hover, .c990000 a:visited:hover {
	color: #FFCC00;
	width: 150px;
	text-decoration: none;
	background-color: #990000;
}


.cCC6600 a, .cCC6600 a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.cCC6600 a:hover, .cCC6600 a:visited:hover {
	color: #FFFFFF;
	width: 150px;
	text-decoration: none;
	background-color: #CC6600;
}


.c3366CC a, .c3366CC a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c3366CC a:hover, .c3366CC a:visited:hover {
	color: #FFCC33;
	width: 150px;
	text-decoration: none;
	background-color: #3366CC;
}


.c333366 a, .c333366 a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c333366 a:hover, .c333366 a:visited:hover {
	color: #CCCC99;
	width: 150px;
	text-decoration: none;
	background-color: #333366;
}



/* = Basic Lists
-----------------------------------------------------------------------------*/

ul {
	list-style-position: inside;	
	list-style-type: none;
}

ul li {
}



/* = Advanced Lists
-----------------------------------------------------------------------------*/

.schoollist {
	text-align: center;
}

.schoollist li {
	line-height: 16px;
	padding: 1px 1px;
	width: 150px;
}



/* = Tables
-----------------------------------------------------------------------------*/

table {
	border-spacing: 0;
	border-collapse: collapse;
	padding: 0;
	margin: 8px 0;
}

tr {
	padding: 0;
	margin: 0;
}

td {
	padding: 0;
	margin: 0;
}



/* = Advanced Tables
-----------------------------------------------------------------------------*/

#schoolstable {
}

#schoolstable tr {
}

#schoolstable td {
}



/* = Forms
-----------------------------------------------------------------------------*/

fieldset {
}



/* = Advanced Forms
-----------------------------------------------------------------------------*/

I know this is probably soooo not kosher, but this is where I'm at ...

I have a star rating graphic that I got off the web that uses an HTML list, turned horizontally, to get the stars to light up when you hover over them. It took me ages to get it working, to customize it to my website's colors, and now it all works great. The only problem is I need it to appear centered in a table column, and no matter what I do with the css code I can't make it happen.

I know I should probably be using divs and all, but I tried that, and ultimately decided tables is easier for this purpose.

Anyway, if someone can forgive my sloppy, amateur ways and tell me how I can get this f-ing thing to center in my table column I would much appreciate it.

Here's the css code:

Code:

/* star rating */

.star * {
float: right;
padding:0px;
margin:0px;
list-style:none;
}
 
ul.rating{
background:url(images/star8.jpg) bottom;
height:21px;
width:115px;
overflow:hidden;
position:relative;
}
 
ul.rating li{
display:inline
}
 
.rating a {
display:block;
width:23px;
height:21px;
float:right;
text-indent:-9999px;
position:relative;
}
 
.rating a:hover {
background:url(images/star8.jpg) center;
width:115px;
margin-left:-92px;
position:static;
}
 
.rating a:active {
background-position:top;
}

and here's the HTML code (in php format):

Oops - won't let me send code because it contains URLs. Either way, it's a straight up table with three columns.

Cheers.

Julian

i use external stylesheet which is shown below. i have tried using <h1> which is set to center, ive tried using <p class="center"> and it still does not center. it only centers when i use the <center> tag...what gives? its fine in netscape, opera, and ie.....

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ranid Photo Gallery</title>
<link rel="stylesheet" type="text/css"
href="stylesheet1.css" />
</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#0000ff" vlink="#0000ff">

<div style="position: absolute; left: 10px; top: 200px; width: 740px; background-color: transperant; padding: 0px;">
<h1>Ranid Frog Photos</h1>

<p class="center"><table width=70% border=1 cellspacing=0 cellpadding=0>
<tr><td width=30%><h4><a href="images/raurora1.jpg"><img src="images/raurora1.jpg" width=100 height=100></a></h4><h4>Rana aurora aurora; Vancouver Island, Canada</td>
<td width=30%><h4><a href="images/raurora2.jpg"><img src="images/raurora2.jpg" width=100 height=100></a></h4><h4>Rana aurora aurora; Vancouver Island, Canada</td>
<td width=30%><h4><a href="images/.jpg"></a></h4><h4></td></tr>

</table></p>

<h5>:<a href="gallery.html">Back to the Gallery</a>:</h5>

</body>
</html>

My style sheet
Code:

  body {
    color: #000000;
    background-color: #ffffff;
    font-family: Georgia, "Times New Roman",
          Times, serif; 
}
}
  h1 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 30px }
  h2 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 25px }
h3 
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 20px }
h4 
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 15px }
h5 
{ 
padding: 0px;
FONT-WEIGHT: normal;
text-align: center;
font-size: 12px }
h6 
{
line-height: 1pt ;
FONT-WEIGHT: normal;
text-align: center;
font-size: 9px }
p {
FONT-WEIGHT: normal;
text-align: left;
FONT-WEIGHT: normal;
    color: #000000;
font-size: 12px }
hr {color: #7d7c7c }
.right {text-align: right }
.center {text-align: center } 
.left {text-align: left } 
.uppercase {text-transform: uppercase}
.lowercase {text-transform: lowercase}
.capitalize {text-transform: capitalize}
A:visited {
	COLOR: #802CFF; TEXT-DECORATION: underline
}
A:link {
	COLOR: #2C31FF; TEXT-DECORATION: none
}
A:hover {
	COLOR: #719FFE; TEXT-DECORATION: underline
}
A:active {
	COLOR: #2C31FF; TEXT-DECORATION: underline
}

any ideas?

What is the best solution for enabling IE 6 and below to be able to display PNG 24 images correctly? I've seen several workarounds on the Web and wondered which one that most people are using?

Is there any way to remove tabindex from inline? I have tables in a form that are dynamically made with a php function I wrote. My problem is I cant specify tabindex in the loop because form elements in different tables will have identical index's. Any help is always appreciated.

Recently I started making my very first doctype=strict page and am trying to make it act the same way in IE and Firefox. After much time spent in research and experimentation I ditched tables in favor of DIVs cause 100% tends to be either too wide or too tall. The only good solution I could find is using javascript to calculate widths and heights. This is fine since the entire page is one big ajax playground.

So anyway, research says this is cause width/height percentages don't take padding and borders into consideration. Let's say I set an outer div to 100 pixels wide. Then I give it a 2 pixel padding on the left and right side. Then I give it a 1 pixel border on the left and right side. Then I add another DIV inside this container and set it to 100% width. For some reason, both IE and Firefox feels the need to calculate this as 106 pixels wide instead of 100 pixels. I'm not sure if the HTML standard says this has to be true, but I can find no justification for such a practice. I understand that they prefer that the 100 pixels apply to only the content - that padding and borders increase the width of the object. But I don't see why objects that are inside of that container would try to stretch wider than the content width.

I say all the above just in case there's something I'm missing and somebody would like to correct me.

So now for my question. Other than using javascript, is there a way to make sure that objects inside the container have the width of the container's content width rather than the container's actual width. Any answers must apply to the height as well, since I understand that there is a somewhat unreliable behavior (in my testing) where a DIV automatically takes up as much width as is available.

No, i'm not pregnant, nor can i be (male and all), but here's my question...

I've got a menu from bullets, and i did this:

Code:

#nav-menu li:first-child {
border: none;
}

Naturally, it looks perfect in Firefox, but IE6 ignores it.

Please note, i'm extremly new to CSS, asin.. just started saturday lol... but i'm a quick learner!

Anyone know of a work around that'll hide the border in ie6?

Thanks!

Hi,

I am struggling to find a solution for a drop down menu over a week in this site: http://tinyurl.com/47apbad

In firefox it looks good but not in IE6 and IE7, can someone help me to find a solution?

Code:

/* -- top menu --*/
			
		#main-menu {
			width:980px;
			padding-top: 15px;
			padding-bottom: 10px;
		}

			#main-menu ul {
				list-style:none;
				padding:0px;
				margin-left:15px;
				font-size:15px;
				margin-bottom:0px;
				text-transform:uppercase;
			}

				#main-menu ul.sf-menu li {
					float:left;
					*width:80px;
					margin-left: 5px;
				}
			
					#main-menu ul.sf-menu li:hover {
						background-image:url(images/main-manu-bg-li.png);
						height:31px;
						background-repeat:repeat-x;
						display:block;
						color:#333333;
					}
			
						#main-menu ul.sf-menu li a{
							padding:5px 10px 0 10px;
							*padding:5px 8px 0 8px;
							color:#fff;
							height: 31px;
						}

							#main-menu ul.sf-menu li.current_page_item a {
								background-image:url(images/main-manu-bg-li.png);
								height:31px;
								background-repeat:repeat-x;
								display:block;
								color:#333333;
								padding-right: 10px;
								padding-left: 10px;
								font-weight:bold;
								margin-bottom:-5px;
								float:left;
								/*width: 80px;*/
							}
							
							#main-menu ul.sf-menu li.current_page_item a:hover {
								margin-top:0px;
							}
							
							#main-menu ul.sf-menu li.current_page_ancestor a {
								background-image:url(images/main-manu-bg-li.png);
								height:31px;
								background-repeat:repeat-x;
								display:block;
								color:#333333;
								padding-right:10px;
								padding-left:10px;
								font-weight:bold;
								margin-bottom:-5px;
							}
							
				#main-menu ul.sf-menu li ul {
					background:url(images/topnav_bg.gif);
					padding:0px 15px;
					margin:0px;
					margin-top:-7px;
					-moz-border-radius: 0 0 8px 8px;
				}
			
					#main-menu ul.sf-menu li li ul.children {	
						margin:0 0px 0 45px;
						background:url(images/topnav_bg.gif);
					}

							#main-menu ul.sf-menu li.current_page_ancestor li a {
								background-image:none;
								color:#fff;
								padding-left:0px;
								padding-left:0px;
								padding-top:10px;
								padding-bottom:0px;
								font-weight:normal;
							}
							
							#main-menu ul.sf-menu li.current_page_ancestor li:hover a {
								margin-bottom:1px;
							}

							#main-menu ul.sf-menu li.current_page_item li a {
								background-image:none;
								color:#fff;
								padding-left:0px;
								padding-left:0px;
								padding-top:10px;
								padding-bottom:0px;
								font-weight:normal;
							}

						#main-menu ul.sf-menu li li a {
							padding:0px 0px;
							padding-top:10px;
							padding-bottom:10px;
							margin:0px;
							height:auto;
							background:none;
						}
						
							#main-menu ul.sf-menu li li:hover {
								background:none;
								padding:0px;
								margin:0px;
								padding-bottom:4px;width:240px;
							}

							#main-menu ul.sf-menu li li a:hover {
								color:#a6b4bc;
								background:none;
								padding:0px;
								padding-top:10px;
								padding-bottom:12px;
								
							}
												
						#main-menu ul.sf-menu li li {
							padding:0px;
							margin:0px;
							background:none;
						}

Hi, all.
I am designing a shoppingcart for a business and I am hoping to have left column nav buttons that are css controled. Each link has a css background and borders.

My original plan was to have popup tabs using css. However, I cannot find any IE equivalent for the

Code:

-moz/webkit/o-transform:TranslateY() 

or similar property.

Any ideas?

Scenario:::
So I got < div > or < p > with < img > inside. < img > that has < float:left >, so that text nicely warps around the < img > along its right side. I also got my < p > with < border:1px solid #CC33CC >, as I have lets say five words within < p >, now my < p > element and its border wraps around text and does not take < img > into consideration and it will seem fine as normal flow has been broken as explained by CSS standard, but I want to make sure that this border of my < p > or < div > element warps around the < img > as well, so we fix it with < div > that has < clear:both > and style, just an empty element.

Question:::
I would like to illuminate insertion of empty element with < clear:both >, although it makes perfect sense to insert such styled empty element to fix the flow so that it will wrap the < img > as well. But I wonder if there is another method available.
It just feels redundant.

So the typical reason that I see people's images disappearing on hover has something to do with repositioning and substituting new images, etc.

My case is that my hover code changes the opacity, that's it, and only to about .4 at the very very most.

My solution works when slowly mousing over the image, however rapidly hovering/leaving the image causes the image do disappear for a period of time, as though the browser is re-requesting the image.

Maybe that's the case? I'm not an expert on CSS.

I can't seem to include a link due to some "akismetspam" phrase not being found?

Set margin:0px;

I have #sidebar on my website and within the sidebar which contains two smaller divs (Calender and Archive) inside it which are styled by #sidebar div

When I put these two divs in, Calender wasn't where I wanted it to be, at the very top of the sidebar. It was a few pixels lower.

To fix I went to #sidebar div and changed the top margin to -1px and now it's at the very top. Is this a sensible fix? I've checked in Chrome 2.0, Safari 4.0, Firefox 3.5 and IE 8 and it looks to be OK but there's a nagging feeling in my head that I shouldn't have needed to do this.

Here is the HTML:

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=utf-8" />
<title>Untitled Document</title>

<link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="wrapper">
  <div id="header">Content for  id "header" Goes Here</div>

<div id="navcontainer">
	<ul id="navlist">
		<li id="active"><a href="#" id="current">Link1</a></li>
		<li><a href="#">Link2</a></li>
		<li><a href="#">Link3</a></li>
		<li><a href="#">Link4</a></li>
		<li><a href="#">Link5</a></li>
	</ul>
</div>
 
<div id="content">jkjk</div> 

<div id="sidebar">

		<div id="calender"><h3>Calender</h3>
        	<p>fjkfjdklfjkljfsk</p></div>
            
         <div id="active"><h3>Archive</h3>
         <p>fjdkfjkfjk</p></div>   

</div>
  

 
<div id="footer">Content for  id "footer" Goes Here</div>
</div>
</body>
</html>

And here is the main.css:

Code:

@charset "utf-8";

/* Main style */

body { padding: 0; margin: 0; background-color: #000; text-align: center; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }

.wrapper {
	text-align: left;
	margin: 0 auto;
	width: 750px;
}

/* Header */

#header {
	background-color: #996666;
	margin-top: 35px;
	margin-bottom: 5px;
	height: 90px;
	padding: 0;
	border: solid 1px #F00;
}

/* Nav Bar */

div#navcontainer {
	background-color: #996666;
	border: 1px solid #F00;
	margin-bottom: 5px;
}

div#navcontainer ul {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000;
	text-align: center;
	margin: 0;
	padding-bottom: 5px;
	padding-top: 5px;
}

div#navcontainer ul li {
	display: inline;
	margin-left: -4px;
}

div#navcontainer ul li a
{
	padding: 5px 10px 5px 10px;
	color: #000;
	text-decoration: none;
}

div#navcontainer ul li a:hover
{
	color: #FFF;
}

#active a {
}

/* Main Content */

#content {
	background-color: #996666;
	float: right;
	width: 500px;
	border: 1px solid #F00;
	margin-bottom: 5px;
}

/* Sidebar Styles */

#sidebar {
	background-color: #996666;
	float: left;
	width: 243px;
	border: 1px solid #F00;
}


/* The Divs that house Calender and Archive */

#sidebar div {
	background-color: #800040;
}

/* The 'Calender' and 'Archive' text */

#sidebar div h3 {
	background-color: #FF0;
	font-size: 85%;
	text-align: center;
	text-decoration: underline;
	margin-top: -1px;	  /* Remove this line and the calender 'box' should drop a few pixels from the top */
	
}



/* Footer */


#footer {
	background-color: #996666;
	border: 1px solid #f00;
	clear: both;
	padding: 0;
	margin: 0;
}

If someone could take a look that would be great. I've commented it up for you so you should be able to find the divs easily.

The code has been verified. I'm not a great web designer by any stretch of the imagination. I'm learning as I go along so hopefully someone with more knowledge can help me out.

I have googled it and searched through this forum as well. And found pretty much the same advice. However it does not appear to work for me.

My CSS file has the following:
Code:

body {
padding: 0;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #000000;
font-size: 12px;
line-height: 15px;
text-align: center;
}

.largeLink{
	font-size: 14px;
}
.bodyTextSm{
	font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;}


div#pageContainer{
margin-top: 5px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
...

and my php file contains:
Code:

<body bgcolor="#000000" onLoad="MM_preloadImages('/images/TopNav_r1_c1_f2_online_movies.gif','/images/TopNav_r2_c3_f2_online_movies.gif','/images/TopNav_r2_c4_f2_online_movies.gif','/images/TopNav_r2_c5_f2_online_movies.gif','/images/TopNav_r2_c6_f2_online_movies.gif')">
<?php include_once("GoogleAnalytics.php") ?>
<!--The following section is an HTML table which reassembles the sliced image in a browser.-->
<!--Copy the table section including the opening and closing table tags, and paste the data where-->
<!--you want the reassembled image to appear in the destination document. -->
<div id="pageContainer">
...

And I am not getting the page to center. What gives?