CSS - Is There Any Point Using Css Positioning?

I've done a lot of reading to recently learn css, but this one stumps me:

I have put the one background image in the center of the page so that it looks better than being crammed in the upper left, and to keep a nice layout regardless of screen resolution. so now i want to add a text element that fits into the right place relative to the background, not the page.

can i set a point (such as top-center) that all margins will be based on, besides the top and left of the browser page?

the non css version of the page (with lots of tables) is at www.stipepainting.com. looking at that might clarify my question a bit.

thx in advance

Not sure where to put this because it involves php, dhtml, css and layers?

But anyway I'll give it a shot here. I have a problem that I can't seem to tackle.

Basically what I need is:
I need to set a number of layers on an absolute position from a relative point, the topleft corner of an image of a map (that has no fixed position from the top of the page because the amount of content from the top before the image of the map can change because it is a dynamically generated page).

I have: An image of a map and in a mysql table a number of sets of xy coordinates (in pixels) from the top-left corner on that image to some points on the map. (Unfortunately I can't show you the pages, but I'll try to be as clear as posssible)

Trying to accomplish: A map somewhere on a page and query from a database a set of x-y-coordinates of different points, that correspond to top left corner of that map. On the exact x-y coordinates I want to display a small image of a crosshair, so that a number of points are indicated on the map with crosshairs. The points on the map (read: sets of x-y coordinates) can differ.

Solution (I thought): Use layers using the <div> tag. So I use a layer to specify the location of the map. Then I query the table for all the x-y coordinates of the poins on the map and create a layer for every set of x-y coordinates. Here's the code ($cat and $de are taken from an URL):
PHP Code:
//get xy coordinates of primary position
$locbase = mysql_query("SELECT lb_xcoord, lb_ycoord FROM locbases WHERE lb_cat_id = $cat AND lb_ad_id = $de ");
$locbasered = mysql_fetch_array($locbase);
$xred = $locbasered["lb_xcoord"];
$yred = $locbasered["lb_ycoord"];
//get xy coordinates of other positions on the same map
$locotherbases = mysql_query("SELECT lb_xcoord, lb_ycoord FROM nuke_zc_locbases WHERE lb_cat_id = $cat AND lb_ad_id <> $de ");
 
//position the map at coordinates 0-0
echo "<div id=\"Layer1\" style=\"position:relative; left:0; top:0; z-index:0;\"><IMG SRC=\"$img\" border=\"0\"></div>";
 
//position the primary position on the map in a layer on top of the map layer
echo "<div id=\"Layer2\" style=\"position:relative; left:$xred; top:$yred; z-index:1;\"><IMG SRC=\"http://192.168.1.11/sites/test/crosshair.gif\" border=\"0\"></div>";
 
//create a loop and for each loop create a layer with based on the set of x-y coordinates and display a crosshair image in that layer
$k = 3 ;
while( $locothers = mysql_fetch_array( $locotherbases ) ) {
$xgrey = $locothers["lb_xcoord"];
$ygrey = $locothers["lb_ycoord"];
echo "<div id=\"Layer$k\" style=\"position:relative; left:$xgrey; top:$ygrey; z-index:$k\"><IMG SRC=\"http://192.168.1.11/sites/test/crosshair.gif\" border=\"0\" ></div>"; 
$k++ ;
} 




Problem 1: This all works (except for problem 2, described later) when the position statements in the tag are set to absolute. Then it will display correctly in the left hand corner and all crosshairs are positioned correctly. The thing is that I want it embedded in another page, so that it is displayed below some content that is also dynamically generated (so I can't set position to absolute, because I don't know where the content before the map stops) So I have to set it to relative and then all the divs are displayed relative to the previous tag. Since the tags are dynamically generated through a while loop, the crosshairs will all move down a blank line.

Problem 2: The layers do not stack exactly as planned, first because the images of the crosshairs are displayed under the map (but the z-index builds up correctly doesn't it?) he weird thing is that when I put the <div> tag of the map image after the looped and primary crosshair div-tags, then the crosshairs are all displayed on top of the map. To my knowledge the z-index should work regardless of where the code is , no?)

Anyone any idea how to do this?
(or would I have to display the map and crosshairs in an <iframe>within the dynamically generated page)


Thanks for any feedback!
Cheers,
Gurt

I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values):

It needs to be sticked to fit after content of 4 column DIV's like it is in example.

http://www.split.info/dev/less-content/
http://www.split.info/dev/more-content/

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF;  top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966;  position: absolute;  top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="contentPane">Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
	</div>
	<div id="leftPane">Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
	</div>
	<div id="rightPane">Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
	</div>
	<div id="rightPane2">Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
	</div>
</div>
<div id="headwide">
	<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>

Content from above 4 column div's need to push footer DIV below (after them)!

Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns).

Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer...

So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx!

Echo

G'day all,

I am hoping some here can help me with a problem I am having with positioning.

I have a content div with dynamically generated text, next I have a side-bar div that i'd ideally like to centre vertically but this seems to be bad practice so my other thought, if possible would be to have the side-bar position itself relative, x position from top with the dynamic text to wrap around the side-bar div.

What I have currently is:
Code:

<div id="main-content">
  <div class="side-bar">
    <div class="side-bar_header">Content Header</div>
    <div class="side-bar_content">
      <ul>
        <li>Side-bar info</li>
      </ul></div>
  </div>
{dynamic_content_tag}
</div>

Code:

#main-content {
	height: auto;
	width: 630px;
}
.side-bar {
	background-color: #CCC;
	float: left;
	width: 180px;
	position: relative;
	top: 50%;
	margin-right: 10px;
	margin-bottom: 20px;
}
.side-bar_header {
	background-color: #666;
	text-align: center;
	padding: 5px;
}
.side-bar_content {
	padding-left: 5px;
}

Any help would be much appreciated.

can somebody help me align this UL to the bottom right of this table. i put valign="bottom" and align="right" but it didn't work, i tried to put padding and margins in the CSS to move it over and it just won't work. any help would be greatly appreciated.

HTML Code:

<table id="products_page" border="0" cellpadding="0" cellspacing="0" width="800">
<tr id="upper_nav" height="198">
<td valign="bottom">
<ul class="navlist">
<li> <a href="index.html">Home</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="contact_us.html">Shipping Information</a></li>
<li><a href="contact_us.html">Return Policy</a></li>
<li style="border-right:none;"><a href="showcart.cfm">ViewCart</a></li>
</ul>
</td>
</tr>
</table>


Code:

.navlist li {
font-size: 12px;
font-family: Helvetica, Times, serif;
display: inline;
list-style-type: none;
padding: 0px 10px;
border-right: 1px solid black;
float: left;
position: relative;
}

#upper_nav {
background-image:url('http://lonepineprairiepillows.com/Cart/cw3/Assets/cart_images/base_page.jpg');
background-repeat: no-repeat;
}

I wasn't sure how to title this problem as I'm not sure exactly what it is. I've only been learning CSS over the last few days and transformed an old site as I went.

learnware .com . au/css/index .htm

The page displays fine in IE7 and FF but in IE6 the left menu moves over and sits just over the top of the left hand edge of the green area in the middle.

I'm not sure what code to post or which area to focus on. I'm hoping someone can assist me with what I should be looking at.

I've spent all night looking at forums, etc trying to figure out where the problem lies but I can't even get that far!

(Sorry if I've disobeyed any forum rules)

CSS is very new to me so if someone can help me with my problem i would very much appreciate it.

I am using a background image that is 1024 x 768px. I have positioned this using...

Code:

body
{
background-color:#000000;
background-image:url('images/homebg.jpg');
background-repeat:no-repeat;
background-position:center top;
} 

As i am new to css i am using tables to position my content over the top of the background image. If the browser is adjusted in size the content appears to be going over the edge of the background image instead of staying with in it.

is there any way i can lock the 2 (background image and content) in position so that when the browser is made smaller or the site is viewed in different resolutions it will remain together without the content going over the edge of the background.

Or am i doing this wrong. I have read about wrappers and such but i don't really understand them.

An example of what i am trying to achieve is at www.blue-leaf.co.uk

Ok. I have a container div in which all of my content for the whole site will be. Inside that I have a header and under it a nav bar on the left. I want to add content to the right of the nav bar but at the same height. If I try to add stuff it goes below. I tried float: left, absolute positioning, and negative margins but none worked since the nav bar then extends over the shrunken conatiner div. Any help on how to make the nav bar and other content side by side would be much appreciated! thanks!

I need help laying out my page, and I can't seem to get this CSS stuff right.

My page has a logo at the top left, a menu at the top right. Below the logo on the left, I have an image. To the right of that I have another image. The bottom of those two images need to line up.

Below those 2 images, I have 3 smaller images I want to display from left to right. I tried to set up DIV blocks, and used CSS to position them. When it lays out on my page, and I scrunch the brower small, the images on the right side overlap and cover the images on the left. Also, the images on the bottom extend below the bottom of the browser, but I don't get a scroll bar to see them.

I am told tables are not the way to do it anymore. I am not a web developer, so I need some help, pretty please.

I am having some problems getting this to perform properly.

I want this to look like this:
http://img108.imageshack.us/img108/8540/newestdesign5qd.jpg

But it is displaying like this:
http://img119.imageshack.us/img119/8716/problem1qk.jpg


Could you guys tell me what is causing that, and maybe any other touch ups in the code I should do. I will gladly list anyone that helps out in the site credits.

BTW, HTML in Next Post, the post was too long with it.

Here is the CSS:
Code:

ul{
	display: inline;
	list-style-type: none;
	}
li{
	display: inline;
	list-style-type: none;
	}
	
BODY {
	background: #104080 url(http://www.digitalsupremacy.com/forums/ds_01/alt_index/bg.gif) repeat-x;
	color: #000000;
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	
}

a:link {
	font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvectica, sans-serif;
	color: #a4a4a4;
	font-weight: bold;
}

a:visited {
	font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvectica, sans-serif;
	color: #a4a4a4;
	font-weight: bold;
}

#wrapper {
	width: 740px;
	color: #FFFFFF;
	background: url(images/sidebar_all.jpg) repeat-y;
}

#logo_2 {
	float: left;
}

#logo_3 {
	float: right;
}

#logo_3 IMG {
	border: none;
	}

#ads {
		margin-left: 216px;
		margin-top: 0px;
		background-color: #FFFFFF;
		}

#sidebar {
	margin-top: 0;
	background: url(images/side_bg.gif) repeat-y;
	float: left;
	width: 187px;
	height: 100%;
	}
	
.content-title {
	background: url(images/content.jpg);
	width: 554px;
	float: right;
	height: 28px;
	}
	
.content-title-text {
    padding-left: 2px;
    margin-top: -7px;
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #7489b9;
    float:left;
    }

.content-title-text a:link {
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #7489b9;
    }

.content-title-text a:visited {
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #7489b9;
    }

.content-title-text a:hover {
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #a6c1ff;
    }
    
.postmetadata {
	background: url(images/content_2.jpg);
	width: 554px;
	height: 22px;
	float: right;
	}

.postmetadata-text {
	color: #bdc4d9;
	font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    margin-top: 1px;
    }

.post {
	font-family: verdana, arial, sans-serif;
    	font-size: 10px;
	color: #000000;
	float: right;
	
	}

.entry {
	margin-left: 187px;
	}

#footer {
 	margin-left: 187px;
	width: 554px;
}

.contentcol {
	width: 554px;
}

#sidebar_fix {
	background: url(images/side_bg.gif) repeat-y;
	height: 100%;
}

#left_bg {
	background: url(http://www.digitalsupremacy.com/forums/ds_01/alt_index/pagebg_l.gif) repeat-y;
	float:left;
}

#right_bg {
	background: url(http://www.digitalsupremacy.com/forums/ds_01/alt_index/pagebg_r.gif) repeat-y;
	float:right;
}

#sidebar ul li ul li {	
	color: #666666;
	list-style-type: square;
	list-style-image: none;
	}
	
.side_exp {
	background: url(images/side_bg.gif) repeat-y;
	}
	
.categories {
	float: left;
	margin: 0;
	}
	

Here is my CSS Code:

.container {
	margin-top: 0;
	width: 100%;
	\width: 100%;
	w\idth: 100%;
	border: 1px solid gray;
	
		}

.banner {
	background-color: rgb(213, 219, 225);
	top: 0px;
	left: 0px;
	width: 100%;
	left: 0;
	top: 0;
	position: relative;
		}

.content {
	margin-left: 200px;
	background-color: gray;
	height: 100%;
	left: 0;
	top: 0;
	position: relative;
	}

.sidebar-a {
	float: left;
	width: 200px;
	\width: 200px;
	w\idth: 200px;
	background-color: rgb(235, 235, 235);
	height: 100%;
	left: 0;
	top: 0;
	position: relative;
		}

.footer {
	clear: both;
	padding: 0;
	margin-top: 0;
	background-color: rgb(213, 219, 225);
		}

And it outputs...this . I was wondering how I get rid of the white spaces around the banner.

Thanks.

thanks for taking the time to read my question.

I have a div that I want to float right, but it is staying on the left side, and I can't figure out why.

HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Warren Persowich Humour Facilitator - Stand-Up Comedian Winnipeg Manitoba. Comedic entertainment performances laughter and insight. Fun professional development. A decade of stand-up experience." />
<meta name="keywords" content="Warren Persowich, Comedian, Comedic, Stand Up, Stand-Up, Comedy, Business, Winnipeg, Manitoba, Cancer, Entertainment, Funny, Hilarious, Interactive, Laughter, Psychology, Professional, Development" />
<meta name="Revisit-After" content="7 Days" />
<meta name="Robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ongXn98vPdWEemx2Lu5qZozNxw3CDdugXLIpK9XzOr4=" /> 
<title>2 Nations Female Hockey League:::::</title>
<script type="text/javascript" src="Javascript/coolmenu.js"></script>
<script type="text/javascript" src="Javascript/menu_items.js"></script>
<link rel="stylesheet" type="text/css" href="menu_styles.css">
<link rel="stylesheet" type="text/css" href="2NFHL.css">
</head>

<body>
<script type="text/javascript">var m1 = new COOLjsMenu("menu1", MENU_ITEMS)</script>
<div class="LogoDiv"><a href="Index.htm"><img class="Logo" src="Images/WOMENSHOCKEY CHOICE 1Small2.jpg" alt="Two Nations Female Hockey League"></a></div>
<div class="NavDiv">
<p class="TeamsNav">Teams: <a href="Team1">Coyotes</a> | <a href="Team2">Extreme</a> | <a href="Team3">Ice Cats</a> | <a href="Team4">Saints</a> | <a href="Team5">Mustangs</a> | <a href="Team6">Lightening</a> | <a href="Team7">On Edge</a></p>
</div>
<div class="ContentDiv">
<div class="prop"></div>
<div class="Welcome">
	<p class="FirstLine">Welcome to the Two Nations Female Hockey Leage web site.</p>
	<p>The Two Nations Female Hockey Leage is a Spring - Summer league that is comprised of female hockey teams hailing from both Canada and United States.</p>
	<p>To learn more about the Two Nations Female Hockey League, click <a href="AboutUs.htm">here</a> or use the About Us link in the navigation bar above.</p>
</div>
<div class="TNFHLTW">
	<p class="TNFHLTWP">This week in the TNFHL the Coyote's and On Edge faced off in Winnipeg, Manitoba. The teams skated to a 3 all tie.</p>
</div>
<div class="Banners">
	<div class="BannerCont"><img src="Images/ChampWeekend.gif" /></div>
	<div class="BannerCont"><img src="Images/ChampWeekend.gif" /></div>
</div>
<div class="clearprop"></div>
</div>
<div class="BottomNavDiv">
	<div class="BottomNavDivCont">
		<p class="BottomNavLinkP"><a href="Index.htm" class="BottomNavLink">Home</a> | <a href="Index.htm" class="BottomNavLink">About Us</a> | <a href="Index.htm" class="BottomNavLink">Philosophy</a> | <a href="Index.htm" class="BottomNavLink">Teams</a> | <a href="Index.htm" class="BottomNavLink">Standings</a> | <a href="Index.htm" class="BottomNavLink">Schedule</a> | <a href="Index.htm" class="BottomNavLink">Contact Us</a> | <a href="Index.htm" class="BottomNavLink">Links</a><p/>
	</div>
</div>
</body>
</html>

CSS:
Code:

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.LogoDiv {
/*background-image:url("Images/WOMENSHOCKEY CHOICE 1Small2.jpg");
background-repeat: no-repeat;
background-position: top left;*/
margin: 2px auto;
padding: 0px;
height: 87px;
width: 800px;
display: block;
}

img.Logo {
border: 0px;
}

.Banners {
float: right;
width: 300;
margin: 20px 20px 0px 0px;
padding: 0px;
background-color: red;
 /*clear: both;*/ 
}

.BannerCont {
width: 300;
height: 50px;
margin: 5px 0px 0px 0px;
padding: 5px 0px 0px 0px;
background-color:#362161;
}


.NavDiv {
background-image: url(Images/N2NavBar2.jpg);
background-repeat: repeat-x;
background-position: top left;
padding: 10px 0px 0px 0px;
margin: 0px 0px -13px 0px;
height: 80px;
width: 100%;
display: block;
}

.TeamsNav {
padding: 0px;
margin: 0px 0px 0px 400px;
font-size: 12px;
}

/*.prop and .clearprop are in here to create a min height of 400px*/
.prop {
height: 400px;
width: 1px;
float: right;
background-color: yellow;
}			 

.clearprop {
clear: both;
height: 1px;
overflow: hidden;
background-color: yellow;
}

.ContentDiv {
width: 800px;
/*height: 400px;*/
overflow: hidden;
background-image:url(Images/Background-Blue3.jpg);
background-repeat: no-repeat;
background-position: top left;
margin: 0px auto;
padding: 0px;
display: block;
position:static;
z-index: -1;
}

.TNFHLTW{
width: 212px;
overflow: hidden;
background-image:url(Images/TNFHLThisWeekShortNarrow.gif);
background-position: top left;
background-repeat: no-repeat;
margin: 50px 0px 0px 30px;
padding: 50px 0px 0px 0px;
}

.Welcome {
float: right;
margin: 10px 20px 0px 0px;
overflow: hidden;
width: 450px;
background-color: aqua;

}

.FirstLine {
font-size: 20px;
margin: 0px;
padding: 0px;
text-align: center;
}

.COC1 {
padding: 2px;
margin: 50px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}

.COC {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}

.OLHolder {
margin: 10px 0px 0px 30px;
padding: 2px;
float: left;
width: 700px;
}

.COCOL li {
margin-bottom: 10px;
}

.COCTitle {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-align: center;
font-weight: bold;
text-decoration: underline;
font-size:18px;
}

.LinkList li {
margin-top: 10px;
list-style-type:none;
}

p.TNFHLTWP {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 4px;
margin: -20px 0px 0px 0px;
font-size: 12px;
background-color: #ffffff;
}

.BottomNavDiv {
padding: 0px;
height: 72px;
width: 100%;
display: block;
border-top: 4px solid red;
margin: 0px;
height: 25px;
}

.BottomNavDivCont {
margin: 0px auto;
width: 800px;
overflow: hidden;
display: block;
height: 25px;
padding: 0px 0px 0px 20px;
}

/*.BottomNavDivCont ul li {
display: inline;
padding: 0px 10px 0px 0px;
font-size: 10px;
color: #ff0000;
margin: 0px;
}*/

.BottomNavLinkP {
font-size: 10px;
color: #ff0000;
display: block;
}

.BottomNavLink {
font-size: 10px;
color: #ff0000;
}

a.BottomNavLink:link{
text-decoration: none;
}
a.BottomNavLink:visited{}
a.BottomNavLink:hover{
text-decoration: underline;
}
a.BottomNavLink:active{}

p.TeamsNav a:link{
text-decoration: none;
color: #000099
}
p.TeamsNav a:visited{}
p.TeamsNav a:hover{
text-decoration: underline;
}
p.TeamsNav a:active{}

.LinkList li a:link {
text-decoration: none;
color: #000099;
}
.LinkList li a:visited {}
.LinkList li a:hover {
text-decoration: underline;
}
.LinkList li a:active {}

I put clear:both on .Banners but then it moves to the bottom under .prop I'd like .Banners to be under .Welcome

The page displays the same in FF and IE7, but in IE6 .Banners stretches across most of the .ContentDiv

help?

Hi bit of a newbie but confused by following code;

The images all display ok and the rounded gif work ok but I get a gap between the divs (highlighted below). Is it margins/paddings?

Pulling hair out!

Thanks,

Bill.

.child { width: 200px;
background-color:green;
background-image: url(unt.bmp) ;
}
.parent {margin: 0; padding: 0}
.bl1 {background: url(_round_bl.gif) bottom left no-repeat ;background-color: blue;width: 200px }

.br1 {background: url(_round_br.gif) bottom right no-repeat;}

.tl1 {background: url(_round_tl.gif) top left no-repeat;}

.tr1 {background: url(_round_tr.gif) top right no-repeat;}



</style>

</head>



<body>

<div class="parent">

<div class="child">
<div class="tl1">
<div class="tr1">
<h2>Hello </h2>
</div>
</div>
</div>
/* When displayed in browser the above is separated from the following by a gap of around 20 odd px */
<div class="bl1">
<div class="br1">
<h2>Hello</h2>
</div>
</div>

</div>

</body>

</html>

I'm using a JS/CSS calender script found at http://www.dynarch.com/projects/calendar/. It works great except for one thing.. it wont position correctly in IE (6 & 7).

I have a form with 20 text inputs strait down a page. As per instruction i place the following code just below my desired text input, say at tab index 12.
Code:

<script type="text/javascript">
Calendar.setup({
inputField     :    "this_fieled_name",   // id of the input field
ifFormat       :    "%Y-%m-%d",       // format of the input field
showsTime      :    true,
timeFormat     :    "24"
});
</script>

When the page and script run, in Firefox its perfect, but in IE, the calender places almost 200px high than desired near tab index 6.

My question is, how do i get IE to position as FF does?

Here are i think the two most important files that may need affecting. Both are stock from download.
http://www.empiresolutions.net/demo/calendar-setup.js
http://www.empiresolutions.net/demo/theme.css

Thanks much.

Cesar