CSS - Aligning Buttons

www.devwebsites.com/index.php is my site. in order to view this problem you must register at www.devwebsites.com/register.php
Once you do go back to the home page and you will see the ul out of the login box. Any help is greatly appreciated. Tell me what I should do to fix it please.

CSS LINK

http://www.devwebsites.com/estilos.css

Hello all!
Should'nt this class center justify the table. It's left aligning all class='sql' tables and I can't figure why??
TABLE.sql { border: 0 solid #9999FF; align: center; font-color: black; text-align:left; font-weight: bold; }

Hi guys,

I'm having some serious problems in IE with my site I'm working on here http://www.q-net.net.au/~benvangrootel/fvd/index.html

the main problem is the amount of space in between the head banner and the content underneath and also the links under the images on the right - they aren't aligned properly compared to how they look in mozilla. I have no idea how to fix this, is there any quick fix?

css is here

Code:

	/* Layout Crap */
	body {
		text-align:center;
		background-image: url(bg.jpg);
		background-repeat: repeat-x;
		
		}
	
	#frame {
		width:697px;
		margin-right:auto;
		margin-left:auto;
		margin-top:10px;
		padding:0px;
		text-align:left;
		background-image: url(left_bg.gif);
		background-repeat: repeat-y;
		}
		
	#contentleft {
		width:175px;
		padding:0px;
		float:left;
		background:#fff;

		}
	
	#contentcenter {
		width:550px;
		padding:0px;
		float:left;
		
		background-image: url(left_bg.gif);
		background-repeat: repeat-y;
		}
	
	#contentright {
		width:147px;
		padding:0px;
		float:left;

		background-image: url(right_bg.gif);
		background-repeat: repeat-y;
		}
	#contentright_container {
		margin-left: 19px;
		margin-top: 70px;
	}	
	
	#contentright_container_nodule {
		font-family: arial;
		margin-bottom: 10px;
		margin-left: 3px;
		
	}	

	#contentright_container_nodule li{
		list-style-type: square;
		color: #EDAE00;
		line-height: 12px;
		margin-left: 14px;

		}
	
		
	#contentright_container_nodule a{
		color: #2A2A2A;
		font-size: 8pt;
		padding-right: 30px;
		
		}
	#contentright_container_nodule a:hover{
		color: #EDAE00;
		font-size: 8pt;
	
		}
			
	#contentheader {
		width: 697px;
		height: 74px;
		background-image: url(head_bg.gif);
		background-repeat: no-repeat;
		}

	#contentheader img {
		top: 10px;
		left: 74px;
		position: relative;
		}
	#contentcontainercontainerlol {
		top: 100px;
		left: 12px;
		position: relative;
	
		}
	
	#contentcontainer {
		background-image: url(content_container_bg.jpg);
		background-repeat: no-repeat;
	
		}	
	#contentcontainer h1 {
		color: #EDAE00;
		font-family: arial;
		font-size: 17px;
		padding-top: 17px;
		margin-left: 15px;
		margin-bottom: -8px;

		}
	#contentcontainer p {
		color: #afafaf;
		font-family: arial;
		font-size: 13px;
		padding-left: 20px;
		padding-right: 26px;
		line-height: 20px;
		
		}
		

	#footer {
		position: relative;
		margin: 0;
		padding: 0;
		clear: both;
		background: url(footer.gif)  no-repeat top left;
		background-repeat: no-repeat;
		width: 697px;
		height: 35px;
  		text-align:center;
		font-size: 7pt;
		font-family: arial;
		color: #CFCFCF;
		}
	#footer a {
		color: #CFCFCF;
	}


		
/* Menu Crap */
#navContainer {
top: 37px;
right: 60px;
position: relative;
}


#nav {
 width: 409px;
 height: 20px;
 background: url(image.jpg);
 margin: 10px auto; padding: 0;
 position: relative;
}
#nav li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}

#nav li, #nav a {height: 20px; display: block;}

#home {left: 0; width: 44px;}
#profile {left: 45px; width: 61px;}
#operations {left: 105px; width: 87px;}
#services {left: 192px; width: 68px;}
#customers {left: 260px; width: 85px;}
#contact {left: 345px; width: 72px;}

#home a:hover {background: transparent url(image.jpg) 0 -20px no-repeat;}
#profile a:hover {background: transparent url(image.jpg) -44px -20px no-repeat;}
#operations a:hover {background: transparent url(image.jpg) -105px -20px no-repeat;}
#services a:hover {background: transparent url(image.jpg) -192px -20px no-repeat;}
#customers a:hover {background: transparent url(image.jpg) -260px -20px no-repeat;}
#contact a:hover {background: transparent url(image.jpg) -345px -20px no-repeat;}

thanks in advance

http://206.169.23.2/index3.htm
http://206.169.23.2/style3.css

The two columns are as far apart from each other as they can be. I want them to centered, and next to each other. How can this be done?

I used float:right; and float:left for starters but I can not get the columns any closer to each other.

Any help is greatly appreciated,
- mike

HI there

I am wondering if anyone can help with a css issue I am strugging to resolve.

The url is simplyroomsandsuites co uk (forward slash) blog

You can see where the footer image is floating left.. I have tried to float it centrally but it disappears.

Thanks for any help.



.footerArea {float: left; display: inline; width: 950px; background: url(/images/main_area_bottom_curve.png) top left no-repeat; padding: 30px 0 20px 0;}

i seem to be having trouble aligning two css layers

i have a border and then content within in (content is images) i would like to align another layer in here to the middle left. can this be done?

also the HTML is wrapping around the image, any way i can stop this?
as the images should be along the bottom below the image.

the link and data are as follows:
http://wakefieldfhs.co.uk/stu/users/njacques/9

and one last thing i just noticed while testing all this, its not displaying the footer and ending data
(this only occurs on my server, not on my test server. :S
Code:

(
                                layout->doExifBorder();
				echo("EXIF INO HERE");

				$layout->endBorder();
				$layout->endBorder();

		

		 footer();  // for future refernce footer.inc include the end div's!!
		 ?>)

(this would equate to: )
Code:

<div class='t-exif'><div class='b-exif'><div class='l-exif'><div class='r-exif'><div class='bl-exif'><div class='br-exif'><div class='tl-exif'><div class='tr-exif'>EXIF INO HERE</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div>

<div class="footer" align="center">

 <a href='about.php'>about</a> | disclaimer | privacy | terms of use<br></div>
</div>
</body>
</body>
</html>

I have been trying to get Son of Suckerfish dropdown menus to work in IE for me for the longest time... I just can't get it to align how I want it to when I add my own "tab" effect.

Code:

	<ul id="nav">

		<li id="main1" class="mainMenu"><a href="./index.php">Home</a></li>
		
		<li id="main2" class="mainMenu"><a href="./about.php">About Us</a></li>

		<li id="main3" class="mainMenu"><a href="./calendar.php">Calendar</a></li>

		<li id="main4" class="mainMenu"><a href="./college.php">College&nbsp;Students</a>
			<ul>
				<li><a href="./studentNews.php">News</a></li>
				<li><a href="./studentLeaders.php">Student Leaders</a></li>
				<li><a href="./sundaySupper.php">Sunday Supper</a></li>
				<li><a href="./serventEvents.php">Servant Events</a></li>
				<li><a href="./gallery2/main.php?g2_itemId=40">Fall Retreat</a></li>
			</ul>
		</li>
		
		<li id="main5" class="mainMenu"><a href="./family.php">Family&nbsp;Ministry</a>
			<ul>
				<li><a href="./family.php">Overview</a></li>
				<li><a href="./fmSchedule.php">Schedule</a></li>
				<li><a href="./fmActivities.php">Activities</a></li>
				<li><a href="./gallery2/main.php?g2_itemId=53">Photos</a></li>
				<li><a href="./fmYouCanHelp.php">You Can Help</a></li>
				<li><a href="./fmCoordination.php">Education Coordination Team</a></li>
			</ul>
		</li>
		
		<li id="main6" class="mainMenu"><a href="./serving.php">Ways&nbsp;to&nbsp;Serve</a></li>
		
		<li id="main7" class="mainMenu"><a href="./giving.php">Ways&nbsp;to&nbsp;Give</a>
			<ul>
				<li><a href="./giving.php">Financial Home</a></li>
				<li><a href="https://www.eservicepayments.com/cgi-bin/specialwebapp.vps?appid=40a27221f816144b21e9f2e0d81891b8a68820b814b79fc6caf83c6a4fcf06b22f288aa4a34f  a442a76b20a4eb1041b012267f0823e0ef99aeca1bf9c914f523">Make A Gift Online</a></li>
				<li><a href="./eft.php">Electronic Fund Transfer</a></li>
				<li><a href="./matching.php">Matching Gifts</a></li>
				<li><a href="./meijer.php">Meijer Community Rewards</a></li>
				<li><a href="./givingTools.php">Tools for Giving</a></li>
				<li><a href="./endowment.php">Endowment Fund</a></li>
			</ul>
		</li>
		
		<li id="main8" class="mainMenu"><a href="./contact.php">Contact Us</a></li>
		


	</ul>

That's the HTML

Code:

#nav {
	float: left;
	list-style: none;
	line-height: 1;
	font-size: 16px;
	padding: 0;
	margin: 0 0 0.5em 0.6em;
}

#nav ul {
	list-style: none;
	background: #006600;
	padding: 0;
	border: 1px solid #000;
}

#nav li.sfhover ul {
	left: 1em;
}

#nav a {
	display: block;
	color: white;
	text-decoration: none;
	padding: 0.25em;
	padding-right:0;
}

#nav ul a {
	display: block;
	width: 6em;
	color: white;
	text-decoration: none;
	background:none;
	border:none;
}

#nav li {
	float: left;
	padding: 0;
	width: 7em;
	height:auto;
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 13.9em;
	font-weight: normal;
	border: 1px solid #000;
}

#nav li li {
	padding-right: 1em;
	width: 13em;
}

#nav li ul a {
	width: 12em;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

#nav ul li:hover,  #nav li:hover, #nav ul li.sfhover, #nav li.sfhover {
	background: #009900;
}

/*  Width of the tabs */
#nav #main1 {
	width:3.4em;
}

#nav #main2 {
	width:4.6em;
}

#nav #main3 {
	width: 4.5em;
}

#nav #main4 {
	width:7.85em;
}

#nav #main5 {
	width:7em;
}

#nav #main6 {
	width:6.8em;
}

#nav #main7 {
	width:6.3em;
}

#nav #main8 {
	width:5.5em;
}

#nav li {
	margin-right: 3px;
	border: 1px solid #000;
	background: #006600;
	color: white;
	text-decoration:none;
}

#nav li ul li {
	border:none;
	background: #006600;
	color: white;
	text-decoration:none;
}

#nav li ul {
	border: 1px solid black;
}

#nav li:hover, #nav li.sfhover {
    position: static;
}

And that's the CSS


Just in case this will help, here's a link to a test page (just throw together so There is no content other than the menu)
http://www.martinlutherchapel.org/test.html

http://s125392025.websitehome.co.uk/layout.html

I'm making a layout, in this layout(as you can see), I have a SubNav and a main body part. Both of those sections, have a header image and a footer image.

Well, my body footer image isn't aligning directly with the main body. It's off by about 1 or 2px. I tried using: position:absolute; With a few different types of top, and bottom, but the picture only dissappears. I used the exact same line code for the footer image for the subnav, and it has aligned just fine. Here's the script if it matters. Could anyone help please?
PHP Code:
<!DOCTYPE html PUBLIC>
<html>
<head>
<title>2 Box Layout Test</title>

<style type="text/css" media="screen">
/* Here is the main CSS */
body { background: #FFFFFF; }
div { background: #FFFFFF; }
h5 { text-align:center; }
#mid, #left { top:120px; }
#midcontainer
{
width:400px;
margin:0 auto;
position:relative;
left:35px;
top:44px;
}
#midheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/head400.jpg) top left no-repeat;height:30px;z-index:-1; }
#midfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/foot400.jpg) top left no-repeat; height:30px; }
#leftheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/head200.jpg) top left no-repeat;height:30px; }
#leftfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/foot200.jpg) top left no-repeat;height:30px; }

#midbody, #topbody, #leftbody { border:1px solid black;background: #a3a3a3; }
p.top1 { text-align:center; }
p.midheadtxt
{
font-weight:bold;
text-align:center;
position: absolute;
top:-5px;
left:180px;
}
p.leftheadtxt
{
font-weight:bold;
text-align:center;
position: absolute;
top:-5px;
left:50px;
}
#leftcontainer
{
width:200px;
position:absolute;
left:5px;
top:150px;
}

</style>

</head>
<body>

<!--This is the main site header properties-->
<div id="top">
  <div id="topbody">
    <h5>Main Site Header</h5>
    <p class="top1">This is where the main image, and TopNav will go.</p>
  </div>
</div>

<!--This is where the main body text goes for the page-->
<div id="mid">
  <div id="midcontainer">
    <div id="midheader">
      <p class="midheadtxt">News</p>
    </div>
      <div id="midbody">
        <h5>Middle</h5>
        <p>This is where the main section of the site is located.</p>
      </div>
    <div id="midfoot">
    </div>
  </div>
</div>

<!--This is the subnav area-->
<div id="left">
  <div id="leftcontainer">
    <div id="leftheader">
      <p class="leftheadtxt">Sub-Navigation</p>
    </div>
      <div id="leftbody">
        <p>This is where the subnav is located.</p>
      </div>
    <div id="leftfoot">
    </div>
  </div>
</div>

</body>
</html> 

Perhaps someone could help me. I have spent hours trying to figure out what I am doing wrong. I am designing a page that has centered content with several DIV's that I want to be exactly the same width. The menu DIV does not have a margin, but the main text does. I cannot get the DIV's the same width in Firefox and IE 6.0. If it works in one, it wont work in the other. The link for the page is http://www.snc-cds.com/snctest.html

The CSS is at http://www.snc-cds.com/stylesheets/sncstyletesting.css

I have tried to use/figure out the box model hack, but I'm not sure if this is what it takes to fix it.

Thank you for any help,
Steve

I have a full css site that im in the mits of creating. It has 3 colums across in the main part of the site as you will see in the link below that some of my divs dont seem to be lining up w/ the top of the page...

http://www.pollutionpaintball.com/version3/dennis_wells.html

I have the first column that contains the thumbnails floating right with a margin-left of the navgition width and the profile div width.

Next I have the navigation floated left

Then I have the profile section in a div w/ a left - margin the size of the navigations width...

any pointers would help...

Hi all,
I am having trouble getting my third column to sit in place correctly. Here is the code:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0051)http://www.jonra.com/css-demos/css-layout-demo.html -->
<HTML><HEAD><TITLE>CSS layout using divs</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="" name=Keywords>
<META content="" name=Description>
<STYLE type="text/css" media="all">
  @import url( css/commonSite.css );		
</STYLE>

<META content="MSHTML 6.00.2900.2668" name=GENERATOR></HEAD>
<BODY>

<DIV class="panelS">
<DIV class="colOne"><IMG src="images/nav_sites.gif" align="right" alt="">
<DIV class="colTwo">
<DIV class="linkS">
<A href="http://homepages.com/" target="_parent">homepages.com</A> | 
<A href="http://homepages.com/" target="_parent">homepages.com</A> | 
<A href="http://homepages.com/" target="_parent">homepages.com</A> | 
<A href="http://homepages.com/" target="_parent">homepages.com</A>
</DIV>
<DIV class="colThree"></DIV>
</DIV>
</DIV>
</DIV>
</BODY></HTML>

Code:

.panelS
{
    BACKGROUND-COLOR: #adadad;
	WIDTH: 760px;
	position: absolute; 	
}
.colOne { 
	FONT-WEIGHT: bold; 
	FONT-SIZE: medium; 
	LEFT: 0px; 
	WIDTH: 85px; 
	COLOR: #ffffff;   
	HEIGHT: 21px;
	position:relative; 
}
.colTwo {
	FONT-SIZE: medium; 
	LEFT: 85px; 
	WIDTH: 475px;   
	HEIGHT: 21px;
	background-color:#FF6633;
	position:relative;		
}
.colThree { 
	FONT-SIZE: medium; 
	LEFT: 560px;  
	WIDTH: 200px; 
	COLOR: #ffffff;   
	HEIGHT: 21px;
	position:relative;
	background-color:#00CCCC;	 
}
.linkS
{
    FONT: bold 10px Verdana;
    COLOR: #fff;
    TEXT-ALIGN: right;
    TEXT-DECORATION: none
}
.linkS A:link
{
    FONT: bold 10px Verdana;
    COLOR: #fff;
    TEXT-ALIGN: right;
    TEXT-DECORATION: none
}
.linkS A:visited
{
    FONT: bold 10px Verdana;
    COLOR: #fff;
    TEXT-ALIGN: right;
    TEXT-DECORATION: none
}
.linkS A:hover
{
    FONT: bold 10px Verdana;    
	COLOR: #0055c3;
	TEXT-ALIGN: right;
    TEXT-DECORATION: underline
}

I was wanting all the columns side by side.
Any ideas where i might be going wrong?

Cheers

ive searched google throughout and im blank on how to do this

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">
*
{
	margin:0;
	padding:0;
}

div
{
	width:70%;
	margin:0 auto;
	height:20em;
	border:.4em solid black;
}
p
{
	border:.4em solid black;
	margin:0 auto;
	line-height:8em;
	display:inline;
	width:55%;
	height:8em;
}
span
{
	display:block;
	color:red;
	font-size:2em;
	width:60%;
	margin:0 auto;
	text-align:center;
}
</style>
</head>
<body>
<div>
	<p>
		<span>X</span>
	</p>
</div>
</body>
</html>

I need the outer box to be vertiacllly aligned within the viewport, the other boxes vertically aligned within each other. does that make sense? I thought u could do it with line-height but i can't get it working. fresh eyes?

Edit: New code there.

Whta's the best way to do this? I'm tryiong to avoid using tables. but i cant think of a more liquid way to do it...



.........key:value
someOtherKey:someOthervalue
...more keys:more values
...........k:v



(the periods are just placeholders for whitespace)

Thanks!

Hi,

I'm relatively new to CSS and while I'm aware that you should code for Firefox and fix for IE, I'm having problems with what I am sure is a very simple bit of coding.

The css is just a simple layout:

Code:

body {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : center;
background-image : url(../_images/grad_bkg.jpg);
color : #000000;
}

#wrapper {
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
padding : 15px 0 0 0;
width : 888px;
}

#header {
text-align : center;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 83px;
background-image : url(../_images/gbc_banner.jpg);
}

#navigation {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 25px;
background-image : url(../_images/menu.gif);
background-repeat : no-repeat;
}

#mainimage {
display:inline;
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 331px;
}

#divide {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 5px;
background-color : #000000;
}

#content {
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
}

#footer {
clear : both;
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
width : 888px;
height : 218px;
background-image : url(../_images/footer.jpg);
}

but in the mainimage div I am inserting the following table and it is not displaying correctly in FF:

Code:

    <table width="835" border="0" cellspacing="0" cellpadding="0"> 
      <tr> 
        <td width="215" height="270"><img src="_assets/_images/rangemaster_img_link.jpg" width="215" height="270" /></td> 
        <td width="190" height="270"><img src="_assets/_images/falcon_img_link.jpg" width="190" height="270" /></td> 
        <td width="232" height="331" rowspan="2"><img src="_assets/_images/aga_img_link.jpg" width="232" height="331" /></td> 
        <td width="198" height="331" rowspan="2"><img src="_assets/_images/rayburn_img_link.jpg" width="198" height="331" /></td> 
      </tr> 
      <tr> 
        <td colspan="2" height="61" bgcolor="#000000"><img src="_assets/_images/companion_txt.gif" width="405" height="61" /></td> 
      </tr> 
    </table>

s anyone able to give me a pointer?

Thanks....

I started out working out a page thinking this *should* do what I want and lo and behold it did work in IE6

http://www.fogcat.co.uk/example/test002.html

But when looking at Firefox it goes all odd. If you remove all the internal "imagediv" div from the "imagechunk" div it nearly works but doesn't algin the "link text" like IE.

I'm told that display:inline-block is not properly supported, which is probably the root of my problems.

What I want a set of divs down the page (the "imagedivs") Each div will contain

An image - but that image will be nested inside a div - it's returned that way from a php function. Images may be of varying height so I can't use pixel values at top margins or anything like that. A link to another page The link should be positioned to the right of the image and aligned vertically with the centre of the image.

This is one of those things that's a doddle with tables, but I'm
trying to train myself to think CSS.

What obvious thing am I over looking?

Code:

+--------------------------------------+
| +----------------+                   |
| | .............. |                   |     ---  <div>
| | :            : |                   |     ...  <img>
| | :            : |   Link here       |
| | :            : |                   |
| | .............. |                   |
| +----------------+                   |
+--------------------------------------+
   
+--------------------------------------+
| +----------------+                   |
| | .............. |                   |    
| | :            : |                   |    
| | :            : |   Link here       |
| | :            : |                   |
| | .............. |                   |
| +----------------+                   |
+--------------------------------------+