CSS - 3 Small Css Issues W/ My Layout

i've supplied 2 pics, one IE and one FF.
in the dark grey box, the pic and text are positioned diff in either
browser, try as i may i cannot get it to be the same.

my css: (i've highlighted the css relevant to the dark grey box)
Code:

/*<![CDATA[*/
body
{
  text-align:center;
  margin:0;
  padding:0;
}
#top
{
  margin:10px 0;
}
#container
{
  margin:0 auto;
  width:721px;
  text-align:left;
}
 #pic
{
  float:left;
  width:50px;
  margin:10px 10px 10px 10px;
  text-align:center;
  border:3px solid #999999;
}
#pic a
{
  border:0;
} 
#header
{
  height:64px;
}
#top_nav
{
  margin:0px 0;
  padding:0;
  background-image:url('images/navbar.gif');
  height:22px;
}
#top_nav li
{
  position:relative;
  left:-40px;
  top:3px;
  float:left;
  list-style-type:none;
  font-family:arial;
  font-size:12px;
}
#top_nav li a
{
  display:block;
  width:120px;
  border-right:1px solid #666666;
  text-align:center;
  text-decoration:none;
  color:#333333;
}
#top_nav li a:visited
{
  text-decoration:none;
  color:#333333;
}
#top_nav li a:hover
{
  text-decoration:none;
  color:#620024;
}
#main
{
  margin:10px 0;
  padding:0px;
}
#front_image
{
  margin:0px 0 10px;
  width:450px;
  float:left;
  height:190px;
  background-image:url('images/front.jpg');
}
 #main_content
{
  margin:0px 0 10px;
  width:450px;
  float:left;
  background-color:#333333;
}
#main_content_text
{
  float:left;
  margin:0;
  text-align:center;
  color:#FFFFFF;
} 
#main_menu
{
  margin-left:465px;
  background-color: #620024;
  color:#FFFFFF;
  font-family:arial;
  font-size:12px;
}
#main_menu ul
{
  margin-left:20px;
  margin-top:0;
  padding-left:0;
}
#main_menu li
{
  list-style-image:url(images/news_sub_header.gif);
  list-style-type: circle;
  font-family:arial;
  font-size:12px;
  margin-left:0;
  padding-left:0;
}
#main_menu li a
{
  text-align:center;
  text-decoration:none;
  color:#FFFFFF;
  margin-left:0;
  padding-left:0;
}
#main_menu li a:visited
{
  text-decoration:none;
  color:#FFFFFF;
}
#main_menu li a:hover
{
  text-decoration:none;
  color:#FFFFFF;
}
#footer
{
  background-image:url('images/navbar.gif');
  height:22px;
  font-family:arial;
  font-size:10px;
}
#footer li
{
  position:relative;
  left:100px;
  top:4px;
  float:left;
  list-style-type:none;
  font-family:arial;
}
#footer li a
{
  display:block;
  width:80px;
  border-right:1px solid #666666;
  border-left:1px solid #666666;
  text-align:center;
  text-decoration:none;
  color:#333333;
}
#footer li a:visited
{
  text-decoration:none;
  color:#333333;
}
#footer li a:hover
{
  text-decoration:none;
  color:#620024;
}
.clearer {clear:both;}
/*]]>*/

My Page: (i've highlighted what's relevant to the dark grey box)
Code:

<div id="container">
	<div id="top">
		<div id="header">
		  <img src="images/logo.gif" alt=""/>
		</div>
		<div id="top_nav">
		<ul>
		  <li><a href="#">Home</a></li>
		  <li><a href="#">About Us</a></li>
		  <li><a href="#">Products</a></li>
		  <li><a href="#">Contact Us</a></li>
		  <li><a href="#">International</a></li>
		</ul>
		</div>
		<div class="clearer"></div>
	</div>

	<div id="main">
		<div id="front_image">
			
		</div>
		<div id="main_menu">
			&nbsp;<img src="images/news_header.gif" alt="" />&nbsp;News<br />
				&nbsp;<img src="images/news_sub_header.gif" alt="" />&nbsp;<?
					if ( !empty($_GET[viewyear]) ) {
						$LookupYear = $_GET[viewyear];
					} else {
						$LookupYear = date('Y');
					}
					$FirstDayYear = mktime(0,0,0,1,1,$LookupYear);
					$LastDayYear = mktime(23,59,59,12,31,$LookupYear);
				
					$arrExtras = array('ORDER BY Date DESC');
					if ($view!='viewall'){
						$arrExtras[] = 'LIMIT 5';
					}
					$arrWhere = array('Enabled='=>'Y', 'Date>='=>$FirstDayYear, 'Date<='=>$LastDayYear);
					$RS =& FetchRecords($connection,'News', $arrWhere,$arrExtras);
				
					if (mysql_num_rows($RS)>0){
						while($News_row = mysql_fetch_array($RS) ) {
							echo '<span class="headline">'.stripslashes($News_row['Headline']).'</span><br />';
							$prview = substr(Extract_Html_DB($News_row['Content']),0,100);
							echo '<span class="preview">'.$prview.'...</span><br>';
							
							//echo "$News_row[PDF] --$News_row[PDFname]--";
							if($News_row['PDF'] == 1 && $News_row['PDFname'] != "")
							{
								echo '<a href="./images/uploads/pdf/'.$News_row['PDFname'].'" target="_balnk">read more >></a><br /><br />';
							}
							else
							{
								echo '<a href="articles.php?newsid='.$News_row['NewsID'].'">read more >></a><br /><br />';
							}
							
						}
					} else {
						echo 'There are no articles available for this year.<br /><br />';
					}
				?>
			&nbsp;<img src="images/news_header.gif" alt="" />&nbsp;View By Year
				<?
				
					$arrWhere = array('Enabled='=>'Y');
					$arrExtras = array('ORDER BY Date ASC');
					$RS_A =& FetchRecords($connection,'News', $arrWhere,$arrExtras);
				
					if (mysql_num_rows($RS_A)){
						$News_row = mysql_fetch_array($RS_A);
						$FromYear = date('Y', $News_row['Date']);
					} else {
						$FromYear = date('Y');
					}
				
					echo '<ul>';
					for ($i=date('Y'); $i>=$FromYear; $i--) {
						echo "<li><a href=\"news.php?viewyear=$i\">$i</a></li>";
					}
					echo '</ul>';
				?>
		</div>
		 <div id="main_content">
			<div id="main_content_text">
				<?//PRODUCTS!!
				
					$arrWhere = array('Enabled='=>'Y', 'Featured='=>'Y');
					$arrExtras = array();
					$RS = NULL;
					$RS =& FetchRecords($connection,'Products', $arrWhere,$arrExtras);
				
					if (mysql_num_rows($RS)>0){
						$Exit = 0;
						$c = 1;
						while(($Products_row = mysql_fetch_array($RS)) && $Exit==0) {
							echo "\n";
							if (!empty($Products_row['SummaryImage_smll'])){
								echo '<div id="pic"><a href="p_details.php?productid='.$Products_row['ProductID'].'"><img style="border:0;" src="'.$image_upload_url_dir.'products/'.$Products_row['SummaryImage_smll'].'" alt=""/></a></div><p>'.stripslashes($Products_row['Name']).''.substr(Extract_Html_DB($Products_row['Content']),0,0).'<br /><a href="p_details.php?productid='.$Products_row['ProductID'].'">see details >></a></p>';
							}
							echo "\n";
							if ($c==$ProductItemsPerPage){
								$Exit =1;
							}
							$c++;
						}
					}
				?>
			</div>
		</div> 
		
		<div class="clearer"></div>
	</div>
	<div id="footer">
		<ul>
			  <li><a href="#">Home</a></li>
			  <li><a href="#">About Us</a></li>
			  <li><a href="#">Products</a></li>
			  <li><a href="#">Contact Us</a></li>
			  <li><a href="#">International</a></li>
		</ul>
	</div>
</div>

link to the page:
www.betabastion.co.za/test/index.php

thanks
Shem

Hi,

Please check out this site:

Triangle Solutions

In FF the layout is how it is meant to be

In IE the the main body title images - is further down than the nav image

Also adding the text onto the LOGO graphic has pushed the above images further down in IE but not in FF

It validates with W3C

So basically I am a little stuck as to the reason.

Any help appreciated

Thanks E

Hello everyone. I have been struggling with a new site design for a couple of weeks now. My code is a mess, and my brain hurts. I am not a pro, I think I just know enough to eventually get things the way I want them.

Instead of posting my code witch is a huge cluster of a mess. I am going to post an image of what I was actually able to accomplish (when it was working). I need to know the correct way of doing what is in that picture. See I get it all correct and looking the way I want, but as soon as I ad more content It all goes wacky on me. Things don't align. next thing you know your using top: -2000px; to get your divs on the right to go into the correct spot. Please help.

So the header on the site works fine. It is in its own container, and sits at the top nicely and never moves or goes wacky. Its everything below the navigation menu that goes crazy on me probably because I am not positioning them correctly in the css.

I basically need to know the correct way to make multiple content boxes on the left and right side. They are not all going to be the same size. Whenever I add another box on the left or right side I don't want to have to struggle to get everything else aligned properly again. They should be in a container div so I can center the whole thing into the middle of the page.

The image.
Code:

timeforfun.net/newdesign_help.jpg

Hope you could understand.

my layouts not acted as it sould be...or atleast haw i want it to, the url is urls block, gay.

the errors are the tops of the boxes shoud be rounded aswell as the bottom and the main menu and the login box sould be seperated. im using javascript aswell as css to make the corners rounded but i dont think thats where the problem i think its the css.

here are the main style pages:
ffs thats annoying cant show url's

ok never mind the files are to big to post.

I am building my portfolio page and as I was tinkering, I seemed to have messed up my layout and I can't seem to get it back.

If you follow this link you'll notice that about 2/3rd's of the way down on the right hand side there is an image inside a blue rectangle. I want that image to be beside the large purple rectangle on the left hand side.

Both div's are floating left and right respectively and there should be plenty of room for them to be beside on another...

Does anyone know why they are mis-aligned?

Thanks.

P.S. The CSS is inside the HTML file so just view source to see how it all works.

Can someone tell me what's going on with my css lsyout.

http://www3.sympatico.ca/timarney/temp/layout.htm

This is the first time I doing layout with CSS-P so I don't know all the in and outs yet.

The first thing I notice is that in ie... scrollbars apear when there is no need for them.

In Opera the left nav streches well past the area for the main content. Any tips on how to fix/improve this sort of layout would be much apreciated.

Here's the code...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>--</title>
<style type="text/css">
body, html{
	height:100%;
	margin:0px;
	padding:0px;
	text-align:center;
	background:#E0E0E0;
}

#container,#header{
	width:760px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
}
	
#container{
	height:100%;
	min-height:100%;
	background: #FFFFFF;
}

#header{
	height:155px;
	background:#A9A99F;
}

#leftnav{
	height:100%;
	background: #F5F5F5;
	width:150px;
	float: left;
}

#main{
	text-align: left;
	vertical-align: top;

}
</style>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="leftnav">left hand nav</div><div id="main">main</div>
</div>
</body>
</html>

So I'm not sure if this issue has been posted, I perused the forums and couldn't find it, so here it is.

I'm having an issue getting my <div> layers, and CSS to render properly in IE7. The layout appears correct in both FireFox 3, and Safari.

Here is my CSS:


Code:

@charset "utf-8";
/* CSS Document */


body {background-image:url(images/bgStrips_02.jpg);
	  background-repeat:repeat-x;
	  background-attachment:scroll;
	  background-position:0 0;
	  position:relative;
	  }
	  
	  
#apDiv1 {
	position:relative;
	width:950px;
	height:1%;
	margin:0 auto;
	background-attachment:scroll;
	padding:0;
}



#contentContainer {
	position:absolute;
	margin:0 auto;
	padding:0;
	width:950px;
	height:1%;
	top:94px;
}

#contentBG {position:relative;
			background-attachment:scroll;
			padding:0;
			margin:0 auto;
			}
	  
p	 {color:#9BF8FF;
	  font-family:verdana;
	  font-size;9px;
	  font-weight:bold;
	  }

Here are screenshots in the 3 browsers i tested them in:

Safari Screenshot

FireFox Screenshot


IE 7 ScreenShot
Any help is GREATLY appreciated!

Hey all, I hope someone can help me out here. Been trying to figure this out and having trouble. Complete newbie and learning how to code css on the fly. My Current website is http://wgic.cloudaccess.net . What I want is to have a logo and space for menu bar to be where a header would usually go, side by side. I would like their height to be bigger too, but anytime i seem to change the height it either does nothing or sends everything else going amuck. Also, i want the container to be the widths specified, but expandable and viewable on any resolution (which i currently think i have unless i mux with the code trying to accomplish the above. Below is the code i curently have. Any help is greatly appreciated.


Code:

* {
      	padding: 0;
      	margin: 0;
}

img {
      	border: 0;
}

html, body {
     	font-family: Arial, Helvetica, sans-serif;
     	line-height: 1.3em;	
	margin: 0;
     	padding: 0;
     	font-size: 13px;
     	color: #0F0F0F;
	height: 100%;
	background-image:url('../images/body_bg.jpg');
 	background-repeat:no-repeat;
 	background-position:right top;
}

a:link, a:visited {
     	text-decoration: underline;
    	font-weight: normal;
     	color: #000;
     	outline: none;
     	text-align: left;
}
 
.float {  
     	float: left;  
}
  
.clear {  
    	clear: both;  
}
  
.overall {
     	background-color: #fff;    
}
 
div.center {
     	text-align: center;
     	margin: 0px auto 0 auto;
     	padding: 0;
     	width: 950px;
}

#container {
	position:relative;
     	margin:0 auto;
	width:960px;
	height: auto !important;
	height: 100%;
	min-height:100%;
     	text-align: left;
}

#top_logo {
     	text-align: center;
     	height: 98% 10px no-repeat;
	width:250px;
}

#header {
     	text-align: center;
     	height: 98% 10px no-repeat;
	width:700px;
}

#content {
     	width: 598px;
     	text-align: left;
     	padding: 5px;
}

#sidebar_left {
     	text-align: center;
     	width: 165px;
     	padding: 5px;
}

#sidebar_right {  
     	text-align: center;
     	width: 165px;  
     	padding: 5px;
}

#footer {
	position:absolute;
	width:100%;
	bottom:0; 
     	text-align:center;
     	padding: 5px;
}

Index.php file

Code:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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" 
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>
	<jdoc:include type="head" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/wgic3/css/template.css" type="text/css" />
</head>

<body>
	<div id="container">
		<div id="top_logo"> <jdoc:include type="modules" name="logo" /> </div>
		<div id="header"> <jdoc:include type="modules" name ="top" /> </div>
		<div id="sidebar_left" class="float"> <jdoc:include type="modules" name="left" /> </div>
		<div id="content" class="float"> <jdoc:include type="component" /> </div>
		<div id="sidebar_right" class="float"> <jdoc:include type="modules" name="right" /> </div>
		<div id="footer" class="clear"> <jdoc:include type="modules" name="footer" /> </div>
	</div>
</body>

</html>

It seems like I must be getting close to what I want. This page displays almost perfectly in Firefox and IE8, as well as most browsers, but not in older IE and Safari.

hangemhightaxidermy.com/construction_slides2.htm

I would like to eliminate the brown space above the sliding photos, but can't figure out how to do it. After trying all sorts of padding and margin changes, I've decided we can live with it if necessary. The space entered the picture when I used a table to align two unordered lists in a row (one for the text bullets, one for the sliding photos). Before that I just had the sliding photo unordered list and there was no extra brown space.

If you view the landscape tab you will see what it looks like with both lists and no table. yikes!

My bigger problem is that this whole middle section is shifting far to the right in IE7, IE6, and Safari. I have looked into haslayout stuff, but honestly I'm an old self-taught web dev mom just getting back into design for a family member after being out for 10 years. There's a lot of new stuff!! Fun, but frustrating. Don't laugh too hard looking at my css. I have been using the W3 validators to help, but maybe an experienced person can see my issue. My brain/eyes are kind of glazed over at this point.

I am having issues with my index page not showing correctly in IE. It works properly in all other browsers I have tested. Below the banner area the register, login, and members areas should go across the page but in IE they go down the page as if there is only one column. I need them to go across the page as they do in all other browsers. Any help would be greatly appreciated. Below is the CSS code and HTML code. The site this is for is www.mycookfamily.info.

CSS Code:
Code:

* { padding: 0; margin: 0; outline: 0; }

body { font-size: 12px; font-family: Arial, "Trebuchet MS", sans-serif; color:#565656; background:#212121; left bottom repeat-x; }

.index_box {
	margin:0 0 20px 0;
	background: #E1F7FA;
	padding:0 0 5px 0;
	-webkit-border-radius: 8px; 
	-moz-border-radius: 8px;
}

a { color: #565656; text-decoration: underline; }
a:hover { text-decoration:none ; }

.cl, .clear { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }

.shell { width:960px; margin:0 auto; position:relative; }

h2 { padding-bottom:4px; background:url(images/h2.gif) left bottom repeat-x; margin-bottom:9px; font-family: "Trebuchet MS", Arial, Sans-Serif; font-size:27px; color:#272728; }

h3 { color:#fff; font-size:20px; padding-bottom:10px; }

h5 { font-size:10px; color:#4062b7; font-weight:normal; padding-bottom:2px; }
h5 a { color:#4062b7; text-decoration:none; }
h5 a:hover { color:#4062b7; text-decoration:underline; }

.button { font-size:11px; color:#2a2b22; font-weight:bold; text-decoration:none; }
.button span { font-size:11px; color:#2a2b22; font-weight:bold; cursor:pointer; }

/*
	Header
*/

#header { background:url(images/header.jpg) left top repeat-x; height:75px; }

#logo { float:left; width:201px; height:75px; text-align:left; }
#logo a { float:left; width:201px; height:75px; font-size:0; line-height:0; text-indent:-4000px; background:url(images/logo.png); }

/* Navigation */
#navigation { float:right; padding-top:5px; background:url(images/navigation-separator.jpg) right 1px no-repeat; }
#navigation ul { list-style:none; padding-right:1px; }
#navigation ul li { float:left; padding-left:1px; background:url(images/navigation-separator.jpg) left 1px no-repeat; }
#navigation ul li a { float:left; padding:0 16px 0 15px; height:64px; line-height:64px; font-weight:bold; font-size:13px; color:#272727; text-decoration:none; }
/* #navigation ul li a:hover, */
#navigation ul li a.active { background:url(images/navigation-active.gif); color:#fff; }
#navigation ul li a span { float:left; }



/* 
	Intro
*/

#intro { background:url(images/intro.gif) left top repeat-x; height:418px; padding-top:22px; }

#intro .slider-holder { width:960px; height:353px; position:relative; overflow:hidden; }

#intro .slider-holder ul,
.jcarousel-clip { list-style:none; width:960px; height:353px; position:relative; overflow:hidden; }
#intro .slider-holder ul li { float:left; position:relative; width:960px; height:353px; list-style:none; }
#intro .slider-holder .offer-image { position:absolute; top:0; left:0; }
#intro .slider-holder .offer-image img { border:1px solid #a7a0a0; }
#intro .slider-holder .offer-data { position:absolute; top:1px; right:1px; height:317px; width:230px; background:url(images/semi-transparent.png); padding:34px 20px 0 25px; }
#intro .slider-holder .offer-data .entry { height:212px;}
#intro .slider-holder .offer-data p {
	color:#FFF;
	font-weight: bold;
	line-height:18px;
	padding-bottom:18px;
	text-align:justify;
}
#intro .slider-holder .offer-data p a {
	color:#C90;
	font-weight: bold;
}

#intro .slider-holder .offer-data .buttons { padding-right:4px; }

#intro .slider-holder .offer-data .buttons .button,
#intro .slider-holder .offer-data .buttons .button span { height:29px; line-height:29px; float:left; }
#intro .slider-holder .offer-data .buttons .button { float:right; background:url(images/intro-button.jpg) left top repeat-x; border:1px solid #434340; padding:0 8px; }
#intro .slider-holder .offer-data .buttons .button span { background:url(images/intro-button-span.jpg) left top no-repeat; padding-left:7px; }

#intro .slider-navigation { height:24px; background:url(images/intro-shadow.jpg) left top no-repeat; padding-top:36px; }
#intro .slider-navigation ul { list-style:none; margin-left:420px; }
#intro .slider-navigation ul li { float:left; }
#intro .slider-navigation ul li a { background:url(images/slider-navigation-normal.jpg); width:19px; height:20px; display:block; font-size:0; line-height:0; text-indent:-4000px; text-decoration:none; }
#intro .slider-navigation ul li a.active,
#intro .slider-navigation ul li a:hover { background:url(images/slider-navigation-active.jpg); }

/* 
	Main
*/

#main { background:#f8f8f8 url(images/main.jpg) left top repeat-x; }
#main .shell { width: 900px; margin-left:auto; margin-right:auto; padding:25px 0; }

#main p { padding-bottom:10px; line-height:17px; }
.box-first { float:left; width:250px; padding:0 19px 0 0; }
.box-center { float:left; width:250px; padding:0 19px 0 0; }
.last-box { float:left; width:300px; padding:0 19px 0 0; }

.box .entry { height:217px; padding-left:2px; }

.box .big-image { padding:4px 0 10px 0; }
.box .big-image img { border:2px solid #fff; }

.box .buttons .button,
.box .buttons .button span { background:url(images/main-button.jpg) repeat-x; height:29px; line-height:29px; float:right; display:inline; border:1px solid #bfbebe; padding:0 8px; }
.box .buttons .button span { float:left; border:0; background:url(images/main-button-span.jpg) left top no-repeat; padding:0 0 0 7px; }

#main .news { }
#main .news ul { list-style:none; }
#main .news ul li { border-bottom:1px dotted #e8d0d2; padding-bottom:7px; margin-bottom:15px; }
#main .news ul li.last { border-bottom:0; padding-bottom:0; margin-bottom:0; }
#main .news ul li .post-image { float:left; width:76px; padding:3px 22px 0 0; }
#main .news ul li .post-image img { border:2px solid #fff; }
#main .news ul li .post-data { float:left; width:203px; }
#main .news ul li .post-data p { color:#413f3f; line-height:18px; padding-bottom:0; }
#main .news ul li .post-data a { color:#4062b7; }

.bullet-list ul { list-style:none; padding-top:1px; }
.bullet-list ul li { line-height:12px; background:url(images/ul-bullet.gif) left 5px no-repeat; padding:0 0 14px 10px; }
.bullet-list ul li a { color:#4062b7; }
/*
	Footer
*/

#footer { background:url(images/footer.jpg) left top repeat-x; color:#b3adad; padding:24px 4px; font-size:10px; }
#footer a { color:#b3adad; text-decoration:none; }
#footer a:hover { text-decoration:underline; }

#footer .footer-navigation { }
#footer .footer-navigation ul { list-style:none; }
#footer .footer-navigation ul li { float:left; padding-right:8px; margin-right:8px; border-right:1px solid #b3adad; height:10px; line-height:10px; }
#footer .footer-navigation ul li.last { padding-right:0; margin-right:0; border-right:0;  }
#footer .footer-navigation ul li a { }

#footer .right { float:right; font-family:Verdana, Arial, Sans-Serif; }
#footer .right a { color:#dad7d7; font-weight:bold; text-decoration:underline; }
#footer .right a:hover { text-decoration:none; }

Index Page:
Code:

<?php
if (isloggedin()) forward('pg/dashboard/');
?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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>My Cook Family</title>
	<link rel="stylesheet" href="mod/xuum/css/style.css" type="text/css" media="all" />
	
	<script type="text/javascript" src="mod/xuum/js/jquery-1.4.2.min.js"></script>
	
	<script type="text/javascript" src="mod/xuum/js/jquery.jcarousel.js"></script>
	
	<!-- Cufon -->
	<script type="text/javascript" src="mod/xuum/js/cufon-yui.js"></script>
	
	<script type="text/javascript" src="mod/xuum/js/MyriadPro.font.js"></script>
	<script type="text/javascript" src="mod/xuum/js/ArialBold.font.js"></script>
	
	
	<script type="text/javascript" src="mod/xuum/js/jquery-func.js"></script>
	<link rel="shortcut icon" type="image/x-icon" href="mod/xuum/css/images/favicon.ico" />
<link href="css/style2.css" rel="stylesheet" type="text/css" />
</head>
<body>

	<style>
.messages {
	background:#ccffcc;
	color:#000000;
	padding:3px 10px 3px 10px;
	z-index: 8000;
	margin:0;
	position:fixed;
	top:30px;
	width:969px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border:4px solid #00CC00;
	cursor: pointer;
}
.messages_error {
	border:4px solid #D3322A;
	background:#F7DAD8;
	color:#000000;
	padding:3px 10px 3px 10px;
	z-index: 8000;
	margin:0;
	position:fixed;
	top:30px;
	width:969px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	cursor: pointer;
}
.closeMessages {
	float:right;
	margin-top:17px;
}
.closeMessages a {
	color:#666666;
	cursor: pointer;
	text-decoration: none;
	font-size: 80%;
}
.closeMessages a:hover {
	color:black;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
	$('.messages').animate({opacity: 1.0}, 1000);
	$('.messages').animate({opacity: 1.0}, 1000);
	$('.messages').fadeOut('slow');

	$('span.closeMessages a').click(function () {
		$(".messages").stop();
		$('.messages').fadeOut('slow');
	return false;
	});

	$('div.messages').click(function () {
		$(".messages").stop();
		$('.messages').fadeOut('slow');
	return false;
	});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
	$('.messages_error').animate({opacity: 1.0}, 1000);
	$('.messages_error').animate({opacity: 1.0}, 1000);
	$('.messages_error').fadeOut('slow');

	$('span.closeMessages a').click(function () {
		$(".messages_error").stop();
		$('.messages_error').fadeOut('slow');
	return false;
	});

	$('div.messages').click(function () {
		$(".messages").stop();
		$('.messages').fadeOut('slow');
	return false;
	});
});
</script>
	
	

<?php $messages = system_messages();	
	$message = $messages['messages'];
	
	if(count($message) > 0){ 
		echo '<div class="messages">';
		echo '<span class="closeMessages"><a href="#">click to dismiss</a></span>';
			foreach($message as $message1)
					{
					echo '<p>';
					echo $message1;
					echo '</p>';
					}
		echo '</div>';
	}

	$errors = register_error();
	$error = $errors['errors'];
	if(count($error) > 0){ 
		echo '<div class="messages_error">';
		echo '<span class="closeMessages"><a href="#">click to dismiss</a></span>';
			foreach($error as $error1)
					{
					echo '<p>';
					echo $error1;
					echo '</p>';
					}
		echo '</div>';
	}


////////////////////////////////////////////////////////////////////////////////////////////////
?>

<!-- Header -->
<div id="header">
	<div class="shell">
		<!-- Logo -->
		<h1 id="logo"><a href="">My Cook Family</a></h1>
		<!-- /Logo -->
		
		<!-- Navigation -->
		<div id="navigation">
			<ul>
				<li><a href="" class="active">HOME</a></li>
				
				<li><a href="pg/expages/read/Terms/">TERMS</a></li>
				<li><a href="pg/expages/read/Privacy/">PRIVACY</a></li>
				<li><a href="#">ABOUT</a></li>
			</ul>
		</div>
		<!-- /Navigation -->
	</div>
</div>
<!-- /Header -->

<!-- Intro -->
<div id="intro">
	<div class="shell">
		<!-- Slider Holder -->
		<div class="slider-holder">
			<ul>
				<!-- Offer -->
				<li>
					<div class="offer-image">
						<img src="mod/xuum/css/images/offer-image-1.jpg" alt="" />
					</div>
					<div class="offer-data">
						<h3>Wedding Reception</h3>
						
						<div class="entry">
							<p>Steffany & Rodney's Wedding Reception will be held Sunday, August 7th, 2011 at 1:00PM. We are asking that people do not bring gifts. If you would like to donate to our honeymoon fund, please <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5S9F6GTNXNL6J" target="_new">click here</a>.</p>
							<p><strong>If you are a member of the family, please take time to register on this site. We have created this site as a safe, secure, and private area for us to socialize.</strong></p>
						</div>
						
						
					</div>
				</li>
				<!-- /Offer -->
				
				<!-- Offer -->
				<li>
					<div class="offer-image">
						<img src="mod/xuum/css/images/offer-image-2.jpg" alt="" />
					</div>
					<div class="offer-data">
						<h3>Descendants of the Mayflower</h3>
						
						<div class="entry">
							<p> The Pilgrims were a group of English people who came to America seeking religious freedom during the reign of King James I.   They planned to make the crossing to America in two ships, the Speedwell and Mayflower. However, after many problems the Speedwell was forced to return to England where the group was reorganized. In their second attempt to cross the Atlantic, they boarded the Mayflower in September 1620 bound for the New World.						</p>
						</div>
						
						
					</div>
				</li>
				<!-- /Offer -->
				
				<!-- Offer -->
				<li>
					<div class="offer-image">
						<img src="mod/xuum/css/images/offer-image-3.jpg" alt="" />
					</div>
					<div class="offer-data">
						<h3>Purchase of Nantucket Island</h3>
						
						<div class="entry">
							<p> The history of Nantucket's settlement by the English did not begin in earnest until 1659, when Thomas Mayhew sold his interest to a group of investors, led by Tristram Coffin, "for the sum of thirty Pounds...and also two beaver hats". The "nine original purchasers" were Tristram Coffin, Peter Coffin, Thomas Macy, Christopher Hussey, Richard Swain, Thomas Barnard, Stephen Greenleafe, John Swain and William Pike. </p>
						</div>
						
						
					</div>
				</li>
				<!-- /Offer -->
				
				<!-- Offer -->
				<li>
					<div class="offer-image">
						<img src="mod/xuum/css/images/offer-image-4.jpg" alt="" />
					</div>
					<div class="offer-data">
						<h3>Whaling in New Bedford, MA</h3>
						
						<div class="entry">
							<p> American whaling's origins were in New England.   Whale oil was vital in illuminating homes and businesses throughout the world in the 19th century, and served as a dependable lubricant for the machines powering the Industrial Revolution.						  Whaling became important for a number of New England towns, particularly Nantucket and New Bedford, MASS. Vast fortunes were made, and culture of these communities was greatly affected.</p>
						</div>
						
						
					</div>
				</li>
				<!-- /Offer -->
				
				<!-- Offer -->
				<li>
					<div class="offer-image">
						<img src="mod/xuum/css/images/offer-image-5.jpg" alt="" />
					</div>
					<div class="offer-data">
						<h3>Family Tradition - Panning for Gold</h3>
						
						<div class="entry">
							<p>In memory of Grumpy (a.k.a. Nugget Bill); coined for  the tradition of gold panning becoming such a big part of the Cook Family. Panning is now enjoyed by all generations of the Cook Family, with Glenn keeping the hobby alive as a part of his normal routine...</p>
						</div>
						
						
					</div>
				</li>
				<!-- /Offer -->
			</ul>
		</div>
		<!-- /Slider Holder -->
		<!-- Slider Navigation -->
		<div class="slider-navigation">
			<ul>
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
			</ul>
		</div>
		<!-- /Slider Navigation -->
	</div>
</div>
<!-- /Intro -->
<!-- Main -->
<div id="main">
	<div class="shell">
		<!-- Box -->
		<div class="box-first">
		<center>
        <h2>Login</h2>
			</center>

			<div class="buttons">
				<center>
<div id="welcome-box" class="buttons">
<div id="login-box" class="buttons">
<?php
									$form_body = 
									"
										<p>
										<label>"
										.elgg_echo('username')
										."<br />"
										.elgg_view
										(
											'input/text'
											,array
											(
												'internalname' => 'username'
												,'class' => 'login-textarea'
											)
										)
										."</label><br />
									";
									$form_body .=
										"<label>"
										.elgg_echo('password')
										."<br />" 
										.elgg_view
										(
											'input/password'
											,array
											(
												'internalname' => 'password'
												,'class' => 'login-textarea'
											)
										)
										."</label><br />
									";
									$form_body .=
										elgg_view
										(
											 'input/submit'
											,array
											(
												'value' => elgg_echo('login')
											)
										)
										."</p>
									";
									echo elgg_view
									(
										'input/form'
										,array
										(
											 'body' => $form_body
											,'action' => ""
											.$vars['url']
											."action/login"
										)
									);
									?>

</center>
			</div>
			
			
		</div>
		<!-- /Box -->
		<!-- Box -->
		<div class="box-center">
		<center>
        <h2>Newest Members</h2>
			</center>
			<div class="entry">
				<!-- News -->	
				<div class="news">
					<ul>
						<li>
							          <?php
$users_max = 25;
        $onlyWithAvatar = "no";
if(empty($onlyWithAvatar) || $onlyWithAvatar == "no")
  {$users = get_entities('user','',null,null,$users_max,0);} 
else 
  {$users = get_entities_from_metadata('icontime', '', 'user', '', 0, $users_max);}
           $wallIconSize = "small";
shuffle($users);
foreach($users as $user){

echo elgg_view("profile/icon",array('entity' => $user, 'size' => 'small', 'override' => 'true'));

} ?>

						</li>
					</ul>
				</div>
				<!-- /News -->
			</div>
			
			
		</div>
		<!-- /Box -->
		<!-- Box -->
		<div class="box last-box">
		<center>
        <h2>Sign Up</h2>
			</center>
			<center>
							
								<div id="register-box">
								<?php
								////////////////////////////////////////////////////////////////
								$form_body  = "<p><label>" . elgg_echo('name') . "<br />" . elgg_view('input/text' , array('internalname' => 'name', 'class' => "general-textarea", 'value' => $name)) . "</label><br />";
								$form_body .= "<label>" . elgg_echo('email') . "<br />" . elgg_view('input/text' , array('internalname' => 'email', 'class' => "general-textarea", 'value' => $email)) . "</label><br />";
								$form_body .= "<label>" . elgg_echo('username') . "<br />" . elgg_view('input/text' , array('internalname' => 'username', 'class' => "general-textarea", 'value' => $username)) . "</label><br />";
								$form_body .= "<label>" . elgg_echo('password') . "<br />" . elgg_view('input/password' , array('internalname' => 'password', 'class' => "general-textarea")) . "</label><br />";
								$form_body .= "<label>" . elgg_echo('passwordagain') . "<br />" . elgg_view('input/password' , array('internalname' => 'password2', 'class' => "general-textarea")) . "</label><br />";
								$form_body .= elgg_view('register/extend');
								$form_body .= elgg_view('input/captcha');
								if ($admin_option) {
									$form_body .= elgg_view('input/checkboxes', array('internalname' => "admin", 'options' => array(elgg_echo('admin_option'))));
								}
								$form_body .= elgg_view('input/hidden', array('internalname' => 'friend_guid', 'value' => $vars['friend_guid']));
								$form_body .= elgg_view('input/hidden', array('internalname' => 'invitecode', 'value' => $vars['invitecode']));
								$form_body .= elgg_view('input/hidden', array('internalname' => 'action', 'value' => 'register'));
								$form_body .= elgg_view('input/submit', array('internalname' => 'submit', 'value' => elgg_echo('register'))) . "</p>";
								?>
								<div id="register-box">
								<h2>
								<?php
								//echo elgg_echo('register');
								?>
								</h2>
								<?php
								////////////////////////////////////////////////////////////////
								echo elgg_view
								(
									'input/form'
									,array
									(
										'body' => $form_body
										,'action' => "{$vars['url']}action/register"
									)
								);
								?>
								
								
							</div><!-- div id="welcome-box" -->
							
							</center>
			
			
		</div>
		<!-- /Box -->
		<div class="cl">&nbsp;</div>
	</div>
</div>
<!-- /Main -->

<!-- Footer -->
<div id="footer">
	<div class="shell">
		<!-- Mini Nav --> 
		<div class="footer-navigation">
		  <ul>
			  <li><a href="<?php echo $vars['url']; ?>" class="active">HOME</a></li>
				
			  <li><a href="<?php echo $vars['url']; ?>pg/expages/read/Terms/">TERMS</a></li>
			  <li><a href="<?php echo $vars['url']; ?>pg/expages/read/Privacy/">PRIVACY</a></li>
			  <li><a href="#">ABOUT</a></li>
			</ul> 
    </div> 
		<!-- /Mini Nav --> 
		
		<!-- Copyrights --> 
		<p class="right"> 
			Copyright 2011 | MyCookFamily.info 
		</p> 
		<!-- /Copyrights --> 

		<div class="cl">&nbsp;</div> 
	</div>
</div>
										 
<!-- /Footer -->
</body>
</html>

I am experiencing some random CSS layout issues. When I VPN into my work and view the website the layout will sometimes break. However when I refresh the page this will fix it most of the time for that page only. If I browse to another page and come back to the original page, it is broken again. This only happens when I am not on the internal network.

When I am on the internal network the entire site looks fine and works like it is suppose to. Anyone know of any neat tricks to solve this kind of problem? It is mainly the CSS background-images that are being placed 10 or so pixels from where they belong.

Website: www.devthor.net/sara/index.php
CSS:
www.devthor.net/sara/css/fineart.css

Ok, here is the problem. It is a pretty basic site so I wasn't expecting many problems (well, maybe I should have, they always seem to crop up), and everything lays out properly except my menu bar. The goal is to have the text sit on top of the image, and the white bar that appears on mouse-over to appear on top of the image (preferably within 1 px accuracy so that the brown border still remains untouched by the opacity, picky, yeah, but I like the look better).

So I was going to start playing with CSS hacks to get the positioning exactly right on all the browsers when I noticed something. Firefox on OS X and Firefox on a PC displayed the menu in a different location. I believe that this has to do with the default font sizes on the respective platform. But as a side effect, it messes up my absolute positioning efforts on the menu since the different sized text takes up different amounts of space.

So I then attempted to go back to relative spacing since the font size would become a mute point if the page auto adjusts, however for some reason with the <dl><dd><dt><li> menu style I use, the text I place inside the menu div does not cause the div bounding box to expand. Thus relative positioning ends up placing the menu div inside the top image div. (More accurately it places the text from the menu div inside the image box while the actual div bounding box seems to have a height of 0, and thus is invisible.

Basically I am looking preferable for a fix to the relative positioning issue. If a fix cannot be found for this, maybe just a fix for the font size messing up my layout issue.

I am at the end of my means for figuring it out having spent the last 2 days searching for a solution. So any help would be tremendously appreciated.

Thanks in advance,
Devthor

P.S. Sorry for the novel length post. I just figured some background as to what I have tried might be helpful.

Hi All,

It's been quite some time since I've posted in this forum!

I have a couple of mixed issues that I was hoping for some brain power on:

All question pertain to minor (or large) problems with the following website: Bertelsen.ca
There is a gap between the top of my content div and the header (literally #header and #content), I cannot, for the life of me, figure out what is causing it. Even tricks like "* {margin:0px, padding:0px;}" aren't working. It's probably some ridiculous block level element that pushes something else down or applies padding in a manner that it shouldn't. In IE the bullets for my lists at the very bottom do not show up.
If anyone can think of what's causing this I'd love to hear about it.

Cheers,

BEB

Hi all,

I am trying to basically have a centre column of data on my page. Within this centre column, I am trying to place a header and footer. The CSS is working quite well with the exception that the header and footer seem to be shorter than the width of the main column. In other words, there seems to be a margin on the right and left side between the end of the footer/header and main column. I am not sure what is going on as I have made the widths the same. I am sure I am over-seeing something small. I was following the example found http://www.pmob.co.uk/temp/1colcentred.htm

Code:

html{height:100%;} 

body {
	padding:0;
	margin:0;
	height:100%;
	background-color: #98AFC7;
	color: #000000;
}
#outer{
	min-height:100%;
	width:800px;
	background:pink;
	color: #000000;
	margin:auto;
	text-align:left;
	position:relative;
}

* html #outer{height:100%} 
#header {
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	background:blue;
	left:-1px;
	width:800px;
	height:40px;
		overflow:hidden;
	color: #000000;
	z-index:100;
	//margin-left:6px;
	//margin-right:6px;
}
#footer {
	position:absolute;
	bottom:0;
	left:0;
	background:green;
	height:40px;
	border-top:1px solid #000;
	width:800px;
	//margin-left:1%;
	//margin-right:1%;
}
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/


<body>
<div id="outer">
	<div id="header">Header</div>
	<p>middle</p>

	<p>middle</p>
	<div id="clearfooter"></div>
	<div id="footer">Footer</div>
</div>
</body>
</html>