CSS - Problem Centering Divs......after I Used Absolute Positioning

I am working on a site laid out with divs. I am having trouble with one in particular: shopping basket div.

If you go to
http://www.refinethetaste.com/html/

At the header section you will see a shopping basket right on top of the logo. I want it stand on the navigation section but I want it float to right. I have tried several different things with its positioning, I just cant get it right.

Ok, ive got the footer bar that should be at the bottom of content, in FF it displays perfect, but in IE it disappers http://fasttracksites.com/new%20layout/

heres the css
Code:

html, body {height: 100%;}
body {
	background: #beb185 url('images/bggrad.gif');
	background-attachment: fixed;
	font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #000;
	padding: 0px;
	margin: 0px;
	text-align: left;
}

/*==============================
	Layout 
==============================*/
div#container {
	background: #fff;
	width: 961px;
	height: 100%;
	margin: 0px;
	padding: 0px;
	text-align: left;
	float: left;
	z-index: 1;
}
div#page {
	height: 100%;
	float: left;
	z-index: 2;
}
#left-col {
	background: #121212 url('images/leftcolgrad.jpg');
	color: #fff;
	width: 190px;
	min-height: 100%;
	height: 100%;
	padding: 0px 5px 0px 5px;
	border-right: 10px solid #13496e;
	float: left;
	z-index: 3;
}

#right-col {
	color: #000;
	width: 750px;
	height: 100%;
	padding: 0px;
	border-right: 1px solid #121212;
	float: right;
	z-index: 4;
}

div#header {
	background: #fff;
	width: 740px;
	height: 78px;
	margin: 0px;
	padding: 0px 5px;
	text-align: left;
	float: left;
	z-index: 5;
}

div#content {
	background: #fff;
	width: 740px;
	padding: 0px 5px 0px 5px;
	float: left;
	clear: both;
	z-index: 6;
}

div#footer {
	position: absolute;
	bottom: 0px;
	background: #000 url('images/footergrad.jpg');
	width: 740px;
	height: 180px;
	padding: 0px 5px 0px 5px;
	float: left;
	/*clear: both;*/
	z-index: 7;
}

im creating ajax auto complete text box

but my div tag does not appear correctly in IE7
(ok on firefox) appearing behind the textbox

IE7 screen shot URL

Firefox screen shot URL


codes are

HTML

Code:

            <tr>
                <td align="left">PHONE BRAND</td>
                <td>:</td>
                <td>
                    <div class="au_cm_loc">
                        <asp:TextBox ID="txtBrand" runat="server" CssClass="textbox"></asp:TextBox>
                        <div id="pnlBrand" class="au_cm_pnl"></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td align="left">PHONE MODEL</td>
                <td>:</td>
                <td>
                    <div class="au_cm_loc">
                        <asp:TextBox ID="txtModel" runat="server" CssClass="textbox"></asp:TextBox>
                        <div id="pnlModel" onmouseout="autoComplete.closeSuggestionPanel(event, this)" class="au_cm_pnl"></div>
                    </div>
                </td>
            </tr>

CSS

Code:

.au_cm_loc
{
	text-align:left;
	position:relative;
}

.au_cm_pnl
{
	position:absolute;
	top:25px;
	left:0px;
	border:1px solid #39AAE4;
	width:204px;
	max-height:50px;
	overflow-x: hidden; 
	overflow-y: auto; 
	visibility:hidden;
	background-color:#FEFEFE;
	z-index:500;
}

.au_cm_pnl a
{
	display:block;
	padding:5px 0px;
	width:95%;
	margin:-7px 0px;
	color:Blue;
	text-decoration:none;
	padding-left:5%;
	background-image:url(../Images/textbox_bg.jpg);
}

.au_cm_pnl a:hover
{
	background-image:url(../Images/button_bg.jpg);
	color:#FFFFFF;
}

please help me to fix this problem

thank you

chathura

I am trying to make a layout with a background image with 3 content boxes layered on top of it. The first two boxes are position correctly. They are offset top, left and top, right respectively. The third box should be positioned bottom, left but for some reason it isn't working. The left offset is working correctly, but instead of positioning itself off of the bottom of the container div, it positions itself that much above the viewport. If I set the bottom property to negative something, it acts like a top offset. While this is a workaround, it does not provide acceptable functionality. Anyone have any ideas? I've had two friends who are both seasoned web developers look at this and they were both stumped. I can post images of what it looks like and what it should look like if desired. Both of these code sections are php generating the html and css respectively.

html:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title><?=$title?></title>
		<link rel="stylesheet" type="text/css" href="./themes/<?=$theme?>/css/main.php" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#bottom_ccw").attr({ scrollTop: $("#bottom_ccw").attr("scrollHeight") });
			});
		</script>
	</head>
	<body>
		<div id="wrapper">
			<div id="inner_wrapper">
				<div id="background"></div>
				<div id="left_bw">
					<div class="top_b">
						<div class="border_tl"></div>
						<div id="l_border_t"></div>
						<div class="border_tr"></div>
					</div>
					<div>
						<div id="l_border_l"></div>
						<div id="l_border_r"></div>
					</div>
					<div class="bot_b">
						<div class="border_bl"></div>
						<div id="l_border_b"></div>
						<div class="border_br"></div>
					</div>
				</div>
				<div id="left_ccw">
					<div id="cc1">
						<?for($i=0;$i<500;$i++):?>1	<?endfor;?>
					</div>
				</div>
				<div id="right_bw">
					<div class="top_b">
						<div class="border_tl"></div>
						<div id="r_border_t"></div>
						<div class="border_tr"></div>
					</div>
					<div>
						<div id="r_border_l"></div>
						<div id="r_border_r"></div>
					</div>
					<div class="bot_b">
						<div class="border_bl"></div>
						<div id="r_border_b"></div>
						<div class="border_br"></div>
					</div>
				</div>
				<div id="right_ccw">
					<div id="cc2">
						<?for($i=0;$i<1200;$i++):?>2	<?endfor;?>
					</div>
				</div>
				<div id="bottom_bw">
					<div class="top_b">
						<div class="border_tl"></div>
						<div id="b_border_t"></div>
						<div class="border_tr"></div>
					</div>
					<div>
						<div id="b_border_l"></div>
						<div id="b_border_r"></div>
					</div>
					<div class="bot_b">
						<div class="border_bl"></div>
						<div id="b_border_b"></div>
						<div class="border_br"></div>
					</div>
				</div>
				<div id="bottom_ccw">
					<div id="cc3">
						<?for($i=0;$i<200;$i++):?>3	<?endfor;?>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

css:
css Code:
Original - css Code <? header("Content-type: text/css"); ?> <? //Left content box width. $lcbw = 300; //Left content box height. $lcbh = 443; //Left content box horizontal offset. $lcbho = 100; //Left content box vertical offset. $lcbvo = 55; //Right content box width. $rcbw = 550; //Right content box height. $rcbh = 550; //Right content box horizontal offset. $rcbho = 100; //Right content box vertical offset. $rcbvo = 55; //Bottom content box width. $bcbw = 300; //Bottom content box height. $bcbh = 100; //Bottom content box horizontal offset. $bcbho = 100; //Bottom content box vertical offset. $bcbvo = 0; ?> /* Equalize the padding and margin for all elements across all browsers. */ * { padding: 0px; margin: 0px; } /* Generic top section for a content box. */ .top_b { clear: right; } /* Generic bottom section for a content box. */ .bot_b { clear: left; } /* Top left corner of a border. */ .border_tl { float: left; background: url('../images/main/border_tl.png'); width: 26px; height: 25px; } /* Top right corner of a border. */ .border_tr { float: left; background: url('../images/main/border_tr.png'); width: 26px; height: 25px; } /* Bottom left corner of a border. */ .border_bl { float: left; background: url('../images/main/border_bl.png'); width: 26px; height: 25px; } /* Bottom right corner of a border. */ .border_br { float: left; background: url('../images/main/border_br.png'); width: 26px; height: 25px; } /* Main site wrapper. */ #wrapper { margin: auto; width: 1057px; padding-top: 5px; } /* Main site inner wrapper. */ #inner_wrapper { position: relative; } /* The background element. */ #background { background: url('../images/main/background.png'); width: 1057px; height: 679px; position: absolute; z-index: 1; } /* Left content box borders wrapper. */ #left_bw { position: absolute; z-index: 2; top: <?=$lcbvo?>px; left: <?=$lcbho?>px; width: <?=$lcbw?>px; height: <?=$lcbh?>px; } /* Left content box top border. */ #l_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($lcbw-52)?>px; height: 14px; } /* Left content box left border. */ #l_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($lcbh-50)?>px; } /* Left content box right border. */ #l_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($lcbh-50)?>px; } /* Left content box bottom border. */ #l_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($lcbw-52)?>px; height: 14px; } /* Left content container wrapper. */ #left_ccw { position: absolute; z-index: 3; top: <?=($lcbvo+14)?>px; left: <?=($lcbho+14)?>px; width: <?=($lcbw-28)?>px; height: <?=($lcbh-28)?>px; overflow: hidden; } /* Left content container. */ #cc1 { padding: 5px; } /* Right content box borders wrapper. */ #right_bw { position: absolute; z-index: 2; top: <?=$rcbvo?>px; right: <?=$rcbho?>px; width: <?=$rcbw?>px; height: <?=$rcbh?>px; } /* Right content box top border. */ #r_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($rcbw-52)?>px; height: 14px; } /* Right content box left border. */ #r_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($rcbh-50)?>px; } /* Right content box right border. */ #r_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($rcbh-50)?>px; } /* Right content box bottom border. */ #r_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($rcbw-52)?>px; height: 14px; } /* Right content container wrapper. */ #right_ccw { position: absolute; z-index: 3; top: <?=($rcbvo+14)?>px; right: <?=($rcbho+14)?>px; width: <?=($rcbw-28)?>px; height: <?=($rcbh-28)?>px; overflow: hidden; } /* Right content container. */ #cc2 { padding: 5px; } /* Bottom content box borders wrapper. */ #bottom_bw { position: absolute; z-index: 2; bottom: <?=$bcbvo?>px; left: <?=$bcbho?>px; width: <?=$bcbw?>px; height: <?=$bcbh?>px; } /* Bottom content box top border. */ #b_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($bcbw-52)?>px; height: 14px; } /* Bottom content box left border. */ #b_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($bcbh-50)?>px; } /* Bottom content box right border. */ #b_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($bcbh-50)?>px; } /* Bottom content box bottom border. */ #b_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($bcbw-52)?>px; height: 14px; } /* Bottom content container wrapper. */ #bottom_ccw { position: absolute; z-index: 3; bottom: <?=($bcbvo+14)?>px; left: <?=($bcbho+14)?>px; width: <?=($bcbw-28)?>px; height: <?=($bcbh-28)?>px; overflow-x: hidden; overflow-y: scroll; } /* Bottom content container. */ #cc3 { padding: 5px; }

  

  


 <? header("Content-type: text/css"); ?>


 <?


     //Left content box width.


     $lcbw = 300;


     //Left content box height.


     $lcbh = 443;


     //Left content box horizontal offset.


     $lcbho = 100;


     //Left content box vertical offset.


     $lcbvo = 55;


     


     //Right content box width.


     $rcbw = 550;


     //Right content box height.


     $rcbh = 550;


     //Right content box horizontal offset.


     $rcbho = 100;


     //Right content box vertical offset.


     $rcbvo = 55;


     


     //Bottom content box width.


     $bcbw = 300;


     //Bottom content box height.


     $bcbh = 100;


     //Bottom content box horizontal offset.


     $bcbho = 100;


     //Bottom content box vertical offset.


     $bcbvo = 0;


 ?>


  


 /* Equalize the padding and margin for all elements across all browsers. */


 * {


     padding: 0px;


     margin: 0px;


 }


  


 /* Generic top section for a content box. */


 .top_b {


             clear: right;


         }


  


 /* Generic bottom section for a content box. */


 .bot_b {


             clear: left;


         }


  


 /* Top left corner of a border. */


 .border_tl {


                 float: left;


                 background: url('../images/main/border_tl.png');


                 width: 26px;


                 height: 25px;


             }


  


 /* Top right corner of a border. */


 .border_tr {


                 float: left;


                 background: url('../images/main/border_tr.png');


                 width: 26px;


                 height: 25px;


             }


  


 /* Bottom left corner of a border. */


 .border_bl {


                 float: left;


                 background: url('../images/main/border_bl.png');


                 width: 26px;


                 height: 25px;


             }


  


 /* Bottom right corner of a border. */


 .border_br {


                 float: left;


                 background: url('../images/main/border_br.png');


                 width: 26px;


                 height: 25px;


             }


  


 /* Main site wrapper. */


 #wrapper {


             margin: auto;


             width: 1057px;


             padding-top: 5px;


         }


  


 /* Main site inner wrapper. */


 #inner_wrapper {


             position: relative;


         }


  


 /* The background element. */


 #background {


                 background: url('../images/main/background.png');


                 width: 1057px;


                 height: 679px;


                 position: absolute;


                 z-index: 1;


             }


  


 /* Left content box borders wrapper. */


 #left_bw {


                 position: absolute;


                 z-index: 2;


                 top: <?=$lcbvo?>px;


                 left: <?=$lcbho?>px;


                 width: <?=$lcbw?>px;


                 height: <?=$lcbh?>px;


             }


  


 /* Left content box top border. */


 #l_border_t {


                 float: left;


                 background: url('../images/main/border_top.png');


                 width: <?=($lcbw-52)?>px;


                 height: 14px;


             }


  


 /* Left content box left border. */


 #l_border_l {


                 float: left;


                 background: url('../images/main/border_left.png');


                 width: 14px;


                 height: <?=($lcbh-50)?>px;


             }


  


 /* Left content box right border. */


 #l_border_r {


                 float: right;


                 background: url('../images/main/border_right.png');


                 width: 14px;


                 height: <?=($lcbh-50)?>px;


             }


  


 /* Left content box bottom border. */


 #l_border_b {


                     margin-top: 11px;


                     float: left;


                     background: url('../images/main/border_bottom.png');


                     width: <?=($lcbw-52)?>px;


                     height: 14px;


                 }


  


 /* Left content container wrapper. */


 #left_ccw {


                 position: absolute;


                 z-index: 3;


                 top: <?=($lcbvo+14)?>px;


                 left: <?=($lcbho+14)?>px;


                 width: <?=($lcbw-28)?>px;


                 height: <?=($lcbh-28)?>px;


                 overflow: hidden;


             }


  


 /* Left content container. */


 #cc1 {


             padding: 5px;


         }


  


 /* Right content box borders wrapper. */


 #right_bw {


                 position: absolute;


                 z-index: 2;


                 top: <?=$rcbvo?>px;


                 right: <?=$rcbho?>px;


                 width: <?=$rcbw?>px;


                 height: <?=$rcbh?>px;


             }


  


 /* Right content box top border. */


 #r_border_t {


                 float: left;


                 background: url('../images/main/border_top.png');


                 width: <?=($rcbw-52)?>px;


                 height: 14px;


             }


  


 /* Right content box left border. */


 #r_border_l {


                 float: left;


                 background: url('../images/main/border_left.png');


                 width: 14px;


                 height: <?=($rcbh-50)?>px;


             }


  


 /* Right content box right border. */


 #r_border_r {


                 float: right;


                 background: url('../images/main/border_right.png');


                 width: 14px;


                 height: <?=($rcbh-50)?>px;


             }


  


 /* Right content box bottom border. */


 #r_border_b {


                     margin-top: 11px;


                     float: left;


                     background: url('../images/main/border_bottom.png');


                     width: <?=($rcbw-52)?>px;


                     height: 14px;


                 }


  


 /* Right content container wrapper. */


 #right_ccw {


                 position: absolute;


                 z-index: 3;


                 top: <?=($rcbvo+14)?>px;


                 right: <?=($rcbho+14)?>px;


                 width: <?=($rcbw-28)?>px;


                 height: <?=($rcbh-28)?>px;


                 overflow: hidden;


             }


  


 /* Right content container. */


 #cc2 {


             padding: 5px;


         }


  


 /* Bottom content box borders wrapper. */


 #bottom_bw {


                 position: absolute;


                 z-index: 2;


                 bottom: <?=$bcbvo?>px;


                 left: <?=$bcbho?>px;


                 width: <?=$bcbw?>px;


                 height: <?=$bcbh?>px;


             }


  


 /* Bottom content box top border. */


 #b_border_t {


                 float: left;


                 background: url('../images/main/border_top.png');


                 width: <?=($bcbw-52)?>px;


                 height: 14px;


             }


  


 /* Bottom content box left border. */


 #b_border_l {


                 float: left;


                 background: url('../images/main/border_left.png');


                 width: 14px;


                 height: <?=($bcbh-50)?>px;


             }


  


 /* Bottom content box right border. */


 #b_border_r {


                 float: right;


                 background: url('../images/main/border_right.png');


                 width: 14px;


                 height: <?=($bcbh-50)?>px;


             }


  


 /* Bottom content box bottom border. */


 #b_border_b {


                     margin-top: 11px;


                     float: left;


                     background: url('../images/main/border_bottom.png');


                     width: <?=($bcbw-52)?>px;


                     height: 14px;


                 }


  


 /* Bottom content container wrapper. */


 #bottom_ccw {


                 position: absolute;


                 z-index: 3;


                 bottom: <?=($bcbvo+14)?>px;


                 left: <?=($bcbho+14)?>px;


                 width: <?=($bcbw-28)?>px;


                 height: <?=($bcbh-28)?>px;


                 overflow-x: hidden;


                 overflow-y: scroll;


             }


  


 /* Bottom content container. */


 #cc3 {


             padding: 5px;


         } 

Sorry I tried to get the HTML to highlight too but it wouldn't work.

Screenshot of how it looks:
http://i34.photobucket.com/albums/d105/alphasynaptic/wrong.jpg

Screenshot of how it should look (done with my hacky workaround):
http://i34.photobucket.com/albums/d105/alphasynaptic/right.jpg

Hello, I have this arrow icon at the end of each <li> that is floated right. When the user clicks on it, he gets a dropdown list with options. I'm just having some trouble positioning it.

here is the screenshot of before and after the user clicks the arrow icon:


Here is the HTML that I am using to place it: Code:

<ol>
  <li><a class="control" href="javascript:toggleLayer('controlgroup01');">&nbsp;&nbsp;</a><a href="">System Executive Summary</a></li>
  <div class="controlgroup" id="controlgroup01">
    <a href="#">1</a><br />
    <a href="#">2</a><br />
    <a href="#">3</a><br />
    <a href="#">4</a><br />
  </div>
</ol>

I also tried encapsulating the <div> whithin the <li> in hopes that it would only affect that item like this: Code:

<ol>
  <li><a class="control" href="javascript:toggleLayer('controlgroup01');">&nbsp;&nbsp;</a><a href="">System Executive Summary</a>
    <div class="controlgroup" id="controlgroup01">
      <a href="#">1</a><br />
      <a href="#">2</a><br />
      <a href="#">3</a><br />
      <a href="#">4</a><br />
    </div>
  </li>
</ol>

Here is the CSS I am using to position the above <div> (which is invisible at first): Code:

.control
{
  float: right;
  border: 0px solid #000000;
  border-left: 1px dotted #cccccc;
  padding: 0px;
  padding-left: 8px;
  margin: 0px;
  margin-left: 8px;
  background-repeat: no-repeat;
  background-position: 100% 50%;
  text-decoration: none;
}

.controlgroup
{
  display: none;
  /* position: relative; */
  /* left: 70em; */
  border: 1px solid #fddc9a;
  background-color: #fff3ce;
  float: right;
}

.controlgroup a
{
  padding: 4px 4px 4px 24px;
  background-image: url(bulletarrow.bmp); /* Photoshop this into transparent GIF */
  background-repeat: no-repeat;
  background-position: 4px 50%;
}

I can't really use position: absolute; because depending on how the user resizes the browser, the box will be in a different place as it is supposed to be right justified, not left.

It can't be positioned the way it is b/c the items below it bump into it and get schootched over to the side. I wish there was some waay to do this. Does anybody know?

Thanks

Hi
I have an image positioned on my page with this

Code:

.notpos {
	overflow: visible;
	position: absolute;
	visibility: visible;
	z-index: auto;
	height: auto;
	width: auto;
	left: 170px;
	top: 20px;

}

The problem is when a different screen resolution is used the image moves .......... can anyone help please?

Why does GOOD VERSION, below, work perfectly, but the BAD VERSION fails (all browsers)?

The only difference is the order of TOPIMAGE and BOTTOMIMAGE in the 2nd IMAGEBUTTON.

How can I adjust my CSS so both versions work?

GOOD VERSION
Code:

<style> 
a.IMAGEBUTTON img.TOPIMAGE { z-index:1;  position:absolute;  }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; } 
a.IMAGEBUTTON img {width:150px; }
</style> 

<a class="IMAGEBUTTON" href="http://google.com" > 
<img class="TOPIMAGE" src="pics\pic2.jpg" /> 
<img class="BOTTOMIMAGE" src="pics\pic1.png" /> 
</a>

<a class="IMAGEBUTTON" href="http://google.com" > 
<img class="TOPIMAGE" src="pics\pic2.jpg" /> 
<img class="BOTTOMIMAGE" src="pics\pic1.png" /> 
</a>

BAD VERSION
Code:

<style> 
a.IMAGEBUTTON img.TOPIMAGE { z-index:1;  position:absolute;  }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; } 
a.IMAGEBUTTON img {width:150px; }
</style> 

<a class="IMAGEBUTTON" href="http://google.com" > 
<img class="TOPIMAGE" src="pics\pic2.jpg" /> 
<img class="BOTTOMIMAGE" src="pics\pic1.png" /> 
</a>

<a class="IMAGEBUTTON" href="http://google.com" > 
<img class="BOTTOMIMAGE" src="pics\pic1.png" /> 
<img class="TOPIMAGE" src="pics\pic2.jpg" /> 
</a>

THANKS

Hi all,

So i have been trying to get the divs with the content in to sit properly on IE6 they work correctly in firefox and ie 7 and 8.

Originally the text div and the news bar div were both moved far down the page. I removed the height setting on the text div and it moved it back into (about) the correct place.

But I cant figure out what is causing the news div to move, any advice would be greatly appreciated
Code:

<body>
<div id="main" style="position:absolute; width:850px; background-image:url(images/4560-background_midext_02.jpg); left:15%; z-index:1;">
<div id="topborder"><img src="images/4560-bkground_top.jpg" /></div>
	<?php include('components/Header.php'); ?>
	<div id="body" style="position:relative; left:10px; top:10px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
    <?php include('components/logodisplay.php'); ?>
******THIS DIV IS THE ONE WHICH IS MOVING******
	<div id="newsbanner" style="position:relative; left:10px; top:7px; z-index:1; display:block;">
	<script type="text/javascript">
	AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','560','height','60','title',		'newsbanner','src','flash/news','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/news' ); //end AC code
</script>
	<noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=	"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="560" height="60" title="newsbanner">
      <param name="movie" value="flash/news.swf" />
      <param name="quality" value="high" />
      <embed src="flash/news.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="560" height="60"></embed>
	  </object></noscript>
      </div>
        <div id="sponsorshipenquiries" style="position:relative; left:20px; top:20px; z-index:1; <?php echo $enquiry; ?> " >
            <img src="images/header_sponsorship.jpg" />
            <div id="text" style="top:10px; width:533px;">
                Sponsorship provides a prime opportunity for your company to enhance its visibility and corporate presence during the conference. In addition to the intrinsic benefits of each option, all sponsorships include the opportunity to present a paper, full recognition on all promotional materials as an official sponsor and complimentary delegate places. All sponsorships are sold on a first come first served basis. Options can be reserved for a period of 10 working days.<br /><br />
                <img src="images/header_sponsorshipoptions.jpg" />
                <br /><br />
                <img src="images/gr_platinum.jpg" />
                <br /><br />
                <img src="images/gr_gold.jpg" />
                <br /><br />
                <img src="images/gr_silver.jpg" />
                <br /><br />
                <img src="images/gr_bronze.jpg" />
    
            <span style="left:29px; top:2px;"><p>	For more information on becoming a sponsor of the conference please contact</p>
            <p>Matthew Moss<br />
            Conference director<br />
            Tel: +[44] (0)20 7625 0000<br />
            E-mail:mm@summittradeevents.com</p></span>
            </div>
            
            
       <div id="movedatfooter" style="position:relative; right:30px; top:170px;"><?php include('components/Footer.php'); ?></div>
     <div id="borderbottom" style="position:relative; top:170px; right:30px;"><img src="images/4560-bkground_bottom.jpg" /></div>
        </div>
        <div id="sponsorshiplistings" style="position:relative; left:20px; top:20px; z-index:1;
        	<?php echo $listing; ?>" >
            <img src="images/header_sponsorship.jpg" />
          <div id="text" style="top:10px; width:533px;">
                Sponsorship provides a prime opportunity for your company to enhance its visibility and corporate presence during the conference. In addition to the intrinsic benefits of each option, all sponsorships include the opportunity to present a paper, full recognition on all promotional materials as an official sponsor and complimentary delegate places. All sponsorships are sold on a first come first served basis. Options can be reserved for a period of 10 working days.
                <p>	For more information on becoming a sponsor of the conference please contact</p>
            <p>Matthew Moss<br />
            Conference director<br />
            Tel: +[44] (0)20 7625 0000<br />
            E-mail:mm@summittradeevents.com<br />
            <br />
            We would like to take this opportunity to thank the sponsors of TurkmenTel 2009 for their continued support.
                <br />
                <br />
                <img src="images/gr_platinumsponsor.jpg" />
                <br />
                <br />
                <?php
				$type = "platinum";
				include('components/logoviewer.php');
				?>
                <img src="images/gr_goldsponsor.jpg" />
                <br />
                <br />
                <?php
				$type = "gold";
				include('components/logoviewer.php');
				?>
                <img src="images/gr_silversponsors.jpg" />
                <br />
                <br />
                <?php
				$type = "silver";
				include('components/logoviewer.php');
				?>
                <img src="images/gr-bronzesponsors.jpg" />
                <br />
                <br />
                <?php
				$type = "bronze";
				include('components/logoviewer.php');
				?>          </p>
          </div>
       
       <div id="movedatfooter" style="position:relative; right:30px; top:15px;"><?php include('components/Footer.php'); ?></div>
     <div id="borderbottom" style="position:relative; top:4px; right:30px;"><img src="images/4560-bkground_bottom.jpg" /></div>
	</div></div>
   
</div>
</body>
</html>

I have no idea what the problem is here, ive tried fiddling with some of the positioning properties and nothing seems to have any effect.

So any help is greatly appreciated

Hi,

I've a problem designing with CSS.

This is the html code:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="structure-yellow.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main"> 
  
  <div id="headimage">test</div>
  
  <div id="greybar">test</div>
  
</div>
</center>
</body>
</html>

And the attached css file is:
Code:

div#main {
	border: solid #000000 1px;
	padding: 3px;
	width: 780px;
	margin: 0 auto 0 auto;
	}
	
#headimage {	
	vertical-align: middle;
	height: 100px;
	background: #FFFF00;
	}
	
#greybar {	
	position: relative;
	top: 3px;
	background: #CCCCCC;
	}

Since the headimage and the greybar are nested within the main div, the 3px padding of the "main" div should be respected, however it's not.

What I think is happenning is that the 3px padding of the main div is respected for the expected greybar position, and it is not updated after setting the "#greybar" position property on the CSS file.
How can I solve this problem?

I know that I could achieve the same effect adding a 3px white bottom border on the "#headimage" class, but I'm looking for more elegant solution based on block positioning.

Any ideas?

Thanks,

Caste

Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF.

hey guys

JonnoWalmsley.com is giving me grief. I have a nav bar which is position:absolute; bottom:0px (so stuk to the bottom of the screen at all times, with the appropriate z-index etc).

It works fine on FF, but IE seems to be starting from the center of the page, which effectively pushes the nav bar over to the right, and partially off the screen on smaller screens.

Code:

<div style="position:fixed; bottom:0px; background-color:#0a2a1a; width:899px;">...nav links...</div>

I need IE to render the same as FF, and start the nav panel from the left.

Any ideas?

IE Screenshot
FF Screenshot

I am trying to center a 760x580 DIV box in the center of the browser window (horizontally AND vertically) regardless of the user's screen size. Horizontal centering hasn't been a problem, but I can't figure out how to get the thing to center vertically.

Here is my code at the moment:

Code:

<html>
<head>
	<title>Center a DIV</title>
	<style type='text/css'>
		html {height:100%;}
		body {height:100%; margin:0; padding:0;}
		
		#content {
		  position: absolute;
		  right: 0;
		  left: 0;
		  width: 760px;
		  height: 580px;
		  margin: 0 auto;
		  overflow-x: hidden;
		  overflow-y: hidden;
		  background-image: url(grunge_paper.jpg);
		}		
				
		img {display: block;}
	</style>
</head>
<body bgcolor='black'>
<div id='content'>
	
</div>
</body>
</html>

It seems strange to me if I begin a page with: body{text-align: center} and a following div with a wrapper: #wrapper{position: absolute; top: 0px} that this would push everything to the left or the right depending on the browser.

It seems the logical thing to occur would be that the body tag would shift everything to the center and the wrapper would simply press up to the top of the screen.

My problem is fixed simply by changing the position to relative for the wrapper, but I'm curious why that's the case. Thanks.