Offset div / positioning problem in IE

I've posted this problem in another thread but it was a sub question. Anyway, the problem I'm having is positioning a div over all other divs. I've managed to get it to work perfectly fine on Firefox and Chrome the way I wanted. The problem is usually when it comes to internet explorer. I just want the image or div placed on the right side of the site but changing the properties always has the same result, internet explorer places is far beyond where it's suppose to be. I'll add images, the code, and the live site below. Any help would be appreciated.
Chrome View:
Firefox View:
*IE View (Wrong):
Website: http://emergencyclean-up.com
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Emergency Clean Up Homepage</title>
<style type="text/css">
body {
          background-color: #333333;
#entireSite #sidebar #spacer {
          height: 300px;
          width: 350px;
#entireSite #sidebar #newsletter {
          background-image: url(../Images/NewsLetterBackground.png);
          height: 165px;
          width: 350px;
          color: #FFF;
</style>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('../Images/Buttons/buttonOver_01.gif','../Images/WaterDamageOver .png','../Images/FireDamageOver.png','../Images/MoldRemediationOver.png','../Images/SootRe movalOver.png','../Images/OdorControlOver.png','../Images/facebook-logoOver.png','../Image s/yelp-logoOver.png','../Images/LinkedIn_logoOver.png','../Images/twitter-logoOver.png')">

<div style="width:100%;">
<div style="width:900px; margin-left:auto; margin-right:auto;">
<div style="width:100%; float:left;background-color:#333333;">

<div id="navbarArea">

<div align="center">
<div id="navbar">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><strong><a href="index.html">Home Page</a> </strong></li>
    <li><strong><a href="About Us.html">About Us</a></strong></li>
    <li><strong><a href="Services.html">Services</a> </strong></li>
    <li><strong><a href="Testimonials.html">Testimonials</a></strong></li>
    <li><strong><a href="Contact Us.html">Contact us</a></strong></li>
    <li><strong><a href="Special Offers.html">Special Offers</a></strong></li>
</ul>
</div></div>

</div>


<div id="entireSite">

<div id= "sidebar">

<div id= "spacer">
</div>


<div id= "newsletter">
<center><font size="5">Subscribe to Our Newsletter</font></center>
<form action="subscriptionform.php" method="post" id="Newsletter">
<table width="100%" border="0" cellpadding="3">
<tr>
    <td>Name:</td>
    <td><input name="News Letter Name" type="text" size="30" maxlength="40" /></td>
</tr>
<tr>
    <td>Email:</td>
    <td><input name="News Letter Email" type="text" size="30" maxlength="40" /></td>
</tr>
<tr>
    <td>Zip Code:</td>
    <td><input name=" News Letter Postal Code" type="text" size="10" maxlength="12" /></td>
</tr>
</table>
<center><input name="Subscribe" type="Submit" id="Subscribe" /></center>
</form>
</div>

</div>


<div id= "maintext">

<div id= "titlebar">
<br />
</div>

<br />
<center><img src="../Images/Logo.png" width="500" height="160" alt="Logo" />
<br />
<br />
<center>Choose from one our various services offered here at Emergency Clean-up.</center>
<br />
<table width="100%" border="0" cellpadding="0">
<tr>
    <td><center><a href="Water Damage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('WD','','../Images/WaterDamageOver.png',1)"><img src="../Images/WaterDamage.png" alt="Water Damage" name="WD" width="75" height="75" border="0" id="WD" /></a>
    <br />
    Water Damage</center></td>
    <td><center><a href="Fire Damage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FD','','../Images/FireDamageOver.png',1)"><img src="../Images/FireDamage.png" alt="Fire Damage" name="FD" width="75" height="75" border="0" id="FD" /></a>
    <br />
    Fire Damage</center></td>
    <td><center><a href="Mold Remediation.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('MR','','../Images/MoldRemediationOver.png',1)"><img src="../Images/MoldRemediation.png" alt="Mold Remediation" name="MR" width="75" height="75" border="0" id="MR" /></a>
    <br />
    Mold Remediation</center></td>
    <td><center><a href="Soot Removal.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SR','','../Images/SootRemovalOver.png',1)"><img src="../Images/SootRemoval.png" alt="Soot Removal" name="SR" width="75" height="75" border="0" id="SR" /></a>
    <br />
    Soot Removal</center></td>
    <td><center><a href="Odor Control.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('OC','','../Images/OdorControlOver.png',1)"><img src="../Images/OdorControl.png" alt="Odor Control" name="OC" width="75" height="75" border="0" id="OC" /></a>
    <br />
    Odor Control</center></td>
</tr>
</table>
<br />
<center> For more services please click <a href="Services.html">here</a>. </center>
</div>


<div id= "bottombar">
<img src="../Images/bottomBar.png" width="900" height="25" alt="bottombar" /></div>


<div id= "hotlinks">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FB','','../Images/facebook-logoOver.png',1)"><img src="../Images/facebook-logo.png" alt="Facebook" name="FB" width="25" height="25" border="0" id="FB" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('YP','','../Images/yelp-logoOver.png',1)"><img src="../Images/yelp-logo.png" alt="Yelp" name="YP" width="25" height="25" border="0" id="YP" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TR','','../Images/twitter-logoOver.png',1)"><img src="../Images/twitter-logo.png" alt="Twitter" name="TR" width="25" height="25" border="0" id="TR" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('LI','','../Images/LinkedIn_logoOver.png',1)"><img src="../Images/LinkedIn_logo.png" alt="Linked In" name="LI" width="25" height="25" border="0" id="LI" / align="left"></a>
</div>


<div id= "copyright">
<br />
<p align="right">Content copyright 2012. EMERGENCYCLEAN-UP.COM. All rights reserved.</p>
</div>

</div>

<div id="containerEmergency"><img src="../Images/emergency contact.png" width="220" height="220" />
</div>
</div>
</div>
</div>

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

I often find that differences between FF and IE often boil down to errors in closing page element tags... like not closing <div> or <script> tags. So first validate and fix any of those issues:
http://validator.w3.org/
a number of those 35 errors relate to closing tags.
Then to review z-indexing (stacking order) from an older post:
Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:
The actual display of a positioned element will depend on whether or not it's parent element also has a declared position or not.
z-indexing ONLY works with elements that have a declared position.
Using a declared position like absolute tells and browser to take that element out of the natural flow and do something different with it. So you've got the browser parsing in order from top to bottom, then throwing in some elements that are completely out of the flow.... they can be very hard to control, because there are special rules that apply to elements with declared positions.
The least understood of those rules is what I call the "Parent Rule". Giving an element a declared position like relative or absolute can have huge differences in how that element is actually displayed depending on whether or not the PARENT of that element also has a declared position.
So a div which is position:absolute for example will display one way if it's parent also has a declared position and it will display in a completely different manner if it's parent does NOT have a declared position... to review:
If a div's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.
So be sure to give a declared position to both the parent and the child <div>.
Neglecting to follow this rule is the main reason why the use of declared positioning fails.
And just one more point, almost never is it necessary to use a declared position, and that method certainly should not be used for general page layout.
But if and when a special situation comes up that you really do need z-indexing... then of course you will also have to use a declared position. Understanding the "Parent Rule" will make working with z-indexing and declared positions much easier and more successful.
Best wishes,
Adninjastrator

Similar Messages

Centering ap div position problem

Hi people, I'm new to dreamweaver and have what seems to be a basic problem but one that I can't fix, even after looking on the forums and web.
My problem is when I go into design mode I can drag my "ap divs" around so they are in the centre of my screen (webpage) and nicely lined up, however once I test the website in any web-browser they are no longer centered and seem to reposition themselves at random. I've included some screen-shots so you can see what I mean.
Website in design view
Website in webbrowser
Here is my code so you can look at it and spot my mistakes.
<title>index</title>
</head>
<style type="text/css" >
body
background-image:url('background.png');
background-repeat:no-repeat;
background-position:50% -2%;
background-color:#D7D7D7;
</style>
<style type="text/css">
#apDiv1 {
          position:absolute;
          width:578px;
          height:57px;
          z-index:1;
          left: 535px;
          top: 1526px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
</style>
<style type="text/css">
#apDiv2 {
          position:absolute;
          width:937px;
          height:288px;
          z-index:1;
          left: 360px;
          top: 14px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
</style>
<div align="center" id="apDiv1">This page was created by me on 28th Decmber 2099. Updated - 29th December 2099. </div>
<div align="center" id="apDiv2"><img src="banner.png" width="928" height="284" /></div>
</html>
If you can see the solution to my problem or if there is another/better way of centering text/banners using ap divs, then please let me know. Thanks in advance.

The biggest mistake that those new to Dreamweaver make is using Absolutely Positioned <divs>.
Why, because in most instances they will 'restrict' your construction. By their nature being Absolutely Positioned they do NOT move away from the co-ordinates that you give them. What you are seeing is the background image moving, its an illusion.
I would never advise anyone to use AP positioning unless they have a great deal of experience in positioning.
One way to control AP <divs> is to surround them in a 'wrapper' <div> (see code below)
<div id="wrapper">
<div align="center" id="apDiv1">This page was created by me on 28th Decmber 2099. Updated - 29th December 2099. </div>
<div align="center" id="apDiv2"><img src="banner.png" width="928" height="284" /></div>
</div>
Then use css to make the wrappers position 'relative' and to center it horizontally using margin: 0 auto (see below)
#wrapper {
position: relative;
width: 578px;
margin: 0 auto;
Your AP <divs> will now take their co-ordinates from the top/left of the 'wrapper' <div>
So alter your left positioning to 0 in your apDiv1 and apDiv2 (see below)
#apDiv1 {
          position:absolute;
          width:578px;
          height:57px;
          z-index:1;
          left: 0;
          top: 1526px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
#apDiv2 {
          position:absolute;
          width:937px;
          height:288px;
          z-index:1;
          left: 0;
          top: 14px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
As the default position is left you don't really need to declare it but it does no harm if you do.

Footer DIV Positioning Problem in Safari

The website I am working on is giving me a huge headache!
Here's a link to a
sample
page
I have also attached the css. Things look okay in Firefox for
me... I'm on an iMac. The footer stays at the bottom of the page
and to the right as it should be. Safari on the other hand, places
the footer in a totally different location. I haven't checked it in
Internet Explorer OR on a PC yet, but I dread the problems I may be
faced with.
Any help would be appreciated as I am running out of
time.

Add clear: both; to your #footer css styles (see below)
#footer {
height: 50px;
text-align: right;
padding: 20px 100px 0px 0px;
color: #FFFFFF;
font: 11px/1.5em Georgia, "Times New Roman", Times, serif;
margin: 0px;
width: 980px;
position: relative;
float: left;
clear: both; /* ADD THIS */
OlDirty wrote:
> The website I am working on is giving me a huge
headache! Here's a link to a
>
http://php.wmsgroup.com/eofd6.org/administration.html
>
> I have also attached the css. Things look okay in
Firefox for me... I'm on an
> iMac. The footer stays at the bottom of the page and to
the right as it should
> be. Safari on the other hand, places the footer in a
totally different
> location. I haven't checked it in Internet Explorer OR
on a PC yet, but I dread
> the problems I may be faced with.
>
> Any help would be appreciated as I am running out of
time.
>
> /* Top Elements */
> * {
> margin: 0px;
> padding: 0px;
> }
> body {
> font: 12px/1.5em Arial, Helvetica, sans-serif;
> color: #FFFFFF;
> background: #000000;
> text-align: left;
> }
> p {
> padding-bottom: 12px;
> color: #000000;
> }
> ol { margin-left: 30px; }
>
> /* links */
> a, a:visited {
> color: #333333;
> background: inherit;
> text-decoration: underline;
> }
> a:hover {
> color: #333333;
> background: inherit;
> padding-bottom: 0;
> text-decoration: none;
> }
> a.gallery, a.gallery:visited {
> color: #FFFFFF;
> text-decoration: underline;
> }
> a.gallery:hover {
> color: #FFFFFF;
> text-decoration: none;
>
> /* headers */
> }
> #volunteer h1 {
> font: normal 18px Georgia, "Times New Roman", Times,
serif;
> color: #660000;
> padding-bottom: 10px;
> }
> #content h1 {
> font: normal 22px Georgia, "Times New Roman", Times,
serif;
> color: #650000;
> padding-bottom: 10px;
> }
> #gallery h1 {
> display: block;
> color: #FFFFFF;
> letter-spacing: -1px;
> padding-bottom: 10px;
> font: normal 20px Georgia, "Times New Roman", Times,
serif;
> }
> h2 {
> font: normal 18px Georgia, "Times New Roman", Times,
serif;
> padding-bottom: 4px;
> border-bottom: 1px dotted #650000;
> width: 300px;
>
> /* images */
> }
> .floatright {
> float: right;
> margin: 4px;
> border: 1px solid #CCCCCC;
> background: #EFEFEF;
> padding: 4px;
> }
> .floatleft {
> float: left;
> margin: 4px;
> border: 1px solid #CCCCCC;
> background: #EFEFEF;
> padding: 4px;
>
> /* form elements */
> }
> table {
> border-collapse: collapse;
> border: 1px solid #999999;
> margin-top: 3px;
> margin-bottom: 3px;
> }
>
> td, th {
> padding: 0.1em;
> border: 1px solid #CCCCCC;
> }
> form {
> margin:10px; padding: 0 5px;
> background: #F5F5F5;
> }
> label {
> display:block;
> font-weight:bold;
> margin:5px 0;
> }
> input {
> padding:2px;
> border:1px solid #eee;
> font: normal 1em Verdana, sans-serif;
> color:#777;
> }
> textarea {
> width:400px;
> padding:2px;
> font: normal 1em Verdana, sans-serif;
> border:1px solid #eee;
> height:100px;
> display:block;
> color:#000000;
> }
> input.button {
> font: bold 12px Arial, Sans-serif;
> height: 24px;
> margin: 0;
> padding: 2px 3px;
> color: #333;
> background: #e7e6e6 url(button.jpg) repeat-x;
> border: 1px solid #dadada;
> }
>
> /* search form */
> .searchform {
> background-color: transparent;
> border: none;
> margin: 0 5px 0 10px; padding: 5px 0 15px 0;
> width: 190px;
> }
> .searchform p { margin: 0; padding: 0; }
> .searchform input.textbox {
> width: 100px;
> color: #777;
> height: 18px;
> padding: 2px;
> border: 1px solid #E5E5E5;
> vertical-align: top;
> }
> .searchform input.button {
> width: 60px;
> height: 24px;
> padding: 2px 5px;
> vertical-align: top;
> }
>
> /********************************************
> LAYOUT
> ********************************************/
> #wrapper {
> margin: 20px auto 0px;
> width: 980px;
> position: relative;
>
> }
> #logo {
> float: left;
> height: 192px;
> width: 234px;
> position: relative;
> }
> #header {
> float: left;
> height: 192px;
> width: 745px;
> position: relative;
> }
> #content {
> width: 695px;
> background: #FFFFFF;
> color: #000000;
> float: right;
> position: relative;
> height: 100%;
> padding: 20px 30px 30px 20px;
> }
> #gallery {
> float: left;
> height: 200px;
> width: 116px;
> position: relative;
> background: url(images/photogallery.jpg) no-repeat;
> padding-top: 72px;
> padding-left: 12px;
> padding-right: 10px;
> }
> #training_photo {
> height: 197px;
> width: 234px;
> background: url(images/training_photo.jpg) no-repeat;
> position: relative;
> clear: left;
> float: left;
> }
> #volunteer {
> float: left;
> height: 170px;
> width: 214px;
> position: relative;
> background: url(images/volunteer.jpg) no-repeat;
> padding-top: 27px;
> padding-left: 20px;
> color: #333333;
> }
> #firetruck {
> float: left;
> height: 197px;
> width: 266px;
> position: relative;
> }
> #training {
> float: left;
> height: 197px;
> width: 245px;
> position: relative;
> }
>
> /* Navigation */
> #nav {
> float: left;
> height: 390px;
> width: 234px;
> background: #333333;
> position: relative;
> }
> #nav ul {
> float: left;
> list-style: none;
> width: 234px;
> padding: 0;
> height: 40px;
> display: inline;
> text-transform: uppercase;
> margin: 0 0 0 0px;
> }
> #nav ul li {
> display: inline;
> margin: 0;
> padding: 0;
> }
> #nav ul li a {
> display: block;
> float: left;
> width: 214px;
> color: #999999;
> text-transform: capitalize;
> text-decoration: none;
> font: normal 13px/38px Georgia, "Times New Roman",
Times, serif;
> margin: 0;
> padding-left: 20px;
> border-bottom: 1px solid #666666;
> }
> #nav ul li a:hover,
> #nav ul li a:active {
> color: #FFFFFF;
> }
> #nav ul li#current a {
> background: #DBDBDB url(nav-current.jpg) repeat-x;
>
> /* footer */
> }
> #footer {
> height: 50px;
> text-align: right;
> padding: 20px 100px 0px 0px;
> color: #FFFFFF;
> font: 11px/1.5em Georgia, "Times New Roman", Times,
serif;
> margin: 0px;
> width: 980px;
> position: relative;
> float: left;
>

Div position problem - Menu goes under fotter

Im makeing a page with a head, a body, and footer
The body has a menu to the right
When the conten of the body is smaller the menu, the footer overlay the menu.
How do i get footer to stay under both body and the body menu ?
http://home19.inet.tele.dk/jgom/semidan/index.html

Jesper:<br /><br />To really get into float clearing, there is a good article here -<br /><br />http://www.tjkdesign.com/articles/clearing-floats_and_block-formatting_context.asp<br /><br />-- <br />Murray<br />-------------<br />Adobe Community Expert (Dreamweaver)<br /><br /><br /><Jesper_Mø[email protected]> wrote in message <br />news:[email protected]..<br />> Thanks Kath<br />><br />> That one is now in my book maks<br />><br />> I know i have made that that once before... But i cud not remember the <br />> trick :-P<br />><br />> When you reply came in, i was searching the web to find the solution<br />> And have joust found somthing simulary at A list Apart --> <br />> <a href=http://www.alistapart.com/articles/multicolumnlayouts><br />><br />> Back to the drawingbord :-)<br />><br />> Love this forum and all the nice and skilld person in here (I hope the <br />> forum will live long after GoLive is dead)

Div layout problem

Hi - stuck on what I think should be a fairly basic layout problem:
I have 2 divs, equal widths but varying heights, one floated to the left and one to the right so that they appear next to eachother on the page. The one on the left contains varying amounts of text, the one on the right contains a flash player so never varies.
Where the text for the left div is long, I want it to start off next to the player, but then flow beneath it rather than continuing downwards at the same width as the div. If I remove the width of the left div, so that it reverts to the container width, the player div positions itself below it, so I can't work out how to get the effect.
Can anyone help?

Hi,
hope I understood in the right way: I used (translated from German DW) "modify table" and so I got one more row and two columns in your Main_Content. In one of the new columns I copied the image and beneath I took the text (you now can replace with image and text of your choice), like this:
If that's not a help for your question, please ask me again.
What concerns the width of the pictures, I would format them with PS or a similar program in the same wide.
Hans-G.

AP Div positioning

My problem is that I have 3 apDivs inside my table layout and
they do not move with the rest of the content on the page. The rest
of the table is set to center align so that it always stays in the
middle of the window when you resize it. The apDivs, however, do
not move and it seems that if I change the position to anything
other than absolute it has a negative effect. Does anyone know of a
solution to this problem?

Certainly. You need to understand how absolute positioning
works, though.
This may help you understand positioning a bit -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind of positioning (with
regard to
placement of elements on the page only)....
Position:absolute (or A/P elements)
This does several things -
1. It 'removes' the element from the flow of the code on
the page so that
it can no longer influence the size or position of any other
page element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from
the position of
its closest PARENT *positioned* element - in the
absence of any explicitly
positioned parent, this will default to the <body> tag,
which is always
positioned
at 0,0 in the browser viewport.
This means that it doesn't matter where in the HTML code the
layer's code
appears (between <body> and </body>), its
location on the screen will not
change (this assumes that you have not positioned the A/P
element within
a table or another A/P element, of course).
Furthermore, the space in
which
this element would have appeared were it not positioned
is not preserved
on the screen. In other words, absolutely positioned elements
don't take
up any space on the page. In fact, they FLOAT over the page.
Position:relative (or R/P elements)
In contrast to absolute positioning, a relatively positioned
page element is
*not* removed from the flow of the code on the page, so
it will use the
spot
where it would have appeared based on its position in
the code as its
zero point reference. If you then supply top, right,
bottom, or left
positions
to the style for this element, those values will be
used as offsets from
its
zero point.
This means that it DOES matter where in the code the
relatively positioned
element appears (, as it will be positioned in that location
(factoring in
the offsets) on the screen (this is true for any placement in
the code).
Furthermore, the space where this element would have
appeared is
preserved in the display, and can therefore affect the
placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
As with relative position, static positions also "go with
the flow". An
element with a static position cannot have values for
offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless
explicitly
positioned, all div elements default to static positioning.
Position:fixed
A page element with this style will not scroll as the page
content scrolls.
Support for this in elements other than page backgrounds is
quirky
There are several other things you need to know:
1. ANY page element can be positioned - paragraphs, tables,
images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that
if it is not
positioned or explicitly styled otherwise, a) it will always
begin on a new
line on the screen, and b) it will always force content to a
new line below
it, and c) it will always take up the entire width of its
container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of
other
elements
on the page. For example, a 'layer' placed over a hyperlink
will mask that
hyperlink.
You can see a good example of the essential difference
between absolute and
relative positioning here -
http://www.great-web-sights.com/g_layersdemo.asp
You can see a good demonstration of why using layers for a
page layout tool
is dangerous here -
http://www.great-web-sights.com/g_layer-overlap.asp
Now - to fix your problem, try this -
Change this -
</head>
to this -
<style type="text/css">

</style>
</head>
change this -
<body ...>
(the ellipsis represents any other attributes that might be
mentioned in the
body tag, and SHOULD NOT BE INCLUDED EXPLICITLY!)
to this -
<body ...>
<div id="wrapper">
and this -
</body>
to this -

</div>
</body>
and see if that helps.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"JonnyBoy333" <[email protected]> wrote in
message
news:[email protected]...
> My problem is that I have 3 apDivs inside my table
layout and they do not
> move
> with the rest of the content on the page. The rest of
the table is set to
> center align so that it always stays in the middle of
the window when you
> resize it. The apDivs, however, do not move and it seems
that if I change
> the
> position to anything other than absolute it has a
negative effect. Does
> anyone
> know of a solution to this problem?
>

Font Smoothing + Relative Positioning = Problem

Hello,
I ran across a strange inconsistency while designing a relative position based layout.
My page has two divs, both relative positioned for height. They do not overlap. The page renders excellent in Firefox 3.5, and not bad in Chrome (though a little different from FF). Safari however pushes my second div down too far.
I found that by disabling font smoothing (or rather switching it to anything besides "windows standard") fixes this issue. However there isn't even any actual text on the site, at all. There's 4 images, a couple input fields and a submit button.
I can post some of the code, or example screenshots of what's happening. I've tried a couple css hacks to target safari (without targeting chrome) with no success. Anybody have any advice?
Thanks,
Tom

Please disreard...
I got it figured out. I just moved the paragraph tag outside
of the table
and changed the position from bottom:50% to top:50%
once the <p> was moved out of the table, it's normal
position would be at
the very top. So, I moved it 50% down from the top using
relative
positioning. Being inside the table caused it to not work in
Gecko? I
wonder why?
"-D-" <[email protected]> wrote in message
news:f7fr0d$jb8$[email protected]..
> I'm using relative positioning for an <p> tag that
is positioned normally
> at the bottom of a table cell "valign="bottom".
>
> I set the paragraph tag to <p
>
style="position:relative;bottom:50%;text-align:center;line-height:1.6em;">
>
> so, the text will position itself 50% from the bottom
positioning. This
> works fine in IE, but Mozilla and Netscape still
position the text at the
> bottom of the table cell.
>
> Here is the test page to see what is happening:
>
http://www.dwayneepps.com/contact.aspx
>
> fill out the form and click send to see the problem.
>
> Thanks for any help.
>

Positioning problems develop with template

I have been developing a template or templates for a site in order to make child pages, there will be some variations in these pages but would like them to remain as similar as possible and use the same style sheet if possible. The overall page is simple and works OK but as the content variations solidify as does the css to accommodate it problems arise. It starts as a body, wrapper, header (includes logo, and navigation table) left col, right col and a footer. I wanted to be able to have more than 12 thumbs and keep the page at 600px height so a scroll bar was needed. I put an AP div in the left column the full width of the col and the height of four thumb frames and the problems start, The heading over it cannot scroll with the content so it must be outside the AP div. In a browser it drops under the table and its div. I went through all css rules for the assoc. divs zeroing margins & padding, but it didn't work so I nested this AP div in another the full side of the left col. while that worked I don't Know why it moved in the first place, or why all the margin zeroing for the #leftColumn a link, the #leftColumn and #content did nothing. Is the Nested AP divs the way to go, and should I go back and take out all the margin and padding changes that did nothing? the pages are athttp://www.thunderbirdtrading.ca/Test-1.dwt this is the page with the shift, and uses the first style sheet, the corrected page is Test-2 using the second sheet and the odd thing is that Test-3 views correctly using the third style sheet which doesn't have nested AP divs
http://www.thunderbirdtrading.ca/css/apparelHomeAP.css
http://www.thunderbirdtrading.ca/css/apparelHomeAPNest.css
http://www.thunderbirdtrading.ca/css/apparelItemsAP.css
I would like to be able to change the left column table to 3 4 & 6 row tables (they are library items) to make different pages, also the right column block of text in Test-1 and Test-2 for the two column table in Test-3, is it advisable or possible to write css rules for different content appearing in the same div? That is one template making many templates by changing library items all using the same style sheet? Are there guidelines as to when to attach a second sheet?
Thanks hope someone can shed a little light.
CH

Using APDivsions as your primary layout method is going to drive you crazy.
http://apptools.com/examples/pagelayout101.php
Try changing top value to provide some extra room between your logo and scrolling division:
#apDivLeftCol {
    position:absolute;
    width:240px;
    height:405px;
    z-index:8;
   top: 250px;
    overflow: auto;
    left: 0;
    text-align: center;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

Ap Div Tag Problem

OK so this is my first wbesite in dreamweaver so and i ran into a problem....i made a AP div tag but i can get it where i want it.....my backrground is center in the website and i put my nav links in a AP div tag so i could then put them in a certain area where i wanted.(i think is the only way i know hjow to do this) Well how can i get them centered left and right in the website but the top and bottom i want to place by hand???? they are where they need to be when i preview it in the browser but in the dreamweaver file they are down and to the right......i had to keep messing with it and previewin it until it showed up where i wanted it to in the browser. Im sure i have a setting worng either in my CSS or html.... Please help!

First rule of web design is to stop thinking like a graphic or print designer. Web pages need to be flexible to perform well on different devices, browsers, user settings, screen and text sizes. And web designers have almost no control over these user-centric variables.
The second rule of web design, you cannot precisely position text or other elements on top of big background image and expect it to stick. It just doesn't work.
http://alt-web.com/Backgrounds.shtml
If your navigation bar requires a background, it should be separate from the page background. You'll need to use solid colors or create image slices for your nav bar in your graphics editor.
Third rule, use default CSS positioning (which is no positioning at all). Align objects with CSS margins, padding and floats.
Basic CSS Layout. (No APDivs used, no animals were harmed)
http://alt-web.com/TEMPLATES/Basic-1-col-fixed.html
Also read this tutorial:
Taking a Fireworks (or Photoshop) comp to a CSS based layout in DW
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
Good luck with your project!
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

CSS Logo position problem

Hello
I have been recently working on a web project. In the project I have a css file Thats suppose to position the logo image.
This is the css code:
/** LOGO */
#logo {
width: 830px;
height: 90px;
margin: 0 auto;
margin-top: 10px;
margin-left: 200px;
background: url(images/img04.jpg) no-repeat left top;
Margin-top moves the logo down and margin-left moves the logo in alignment. The problem is that when I view the
page on different screen sizes margin-left makes the logo image automatically move to the middle of the page.
Instead of staying in the required position.
Can any one help.
Thanks.

Hi Thanks so much for the reply.
I want to add more information.
This is the css:
body {
    margin: 0;
    padding: 0;
    background: url(images/img01.jpg) repeat-x left top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #66665E;
h1, h2, h3 {
    margin: 0;
    text-transform: uppercase;
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    color: #0C95C9;
h1 { font-size: 44px; }
h2 { font-size: 18px; }
h3 { }
p, ul, ol {
    margin-top: 0;
    line-height: 240%;
    text-align: justify;
ul, ol { }
blockquote { }
a { color: #0C95C9; }
a:hover { text-decoration: none; }
a img {
    border: none;
img.left {
    float: left;
    margin: 7px 30px 0 0;
img.right {
    float: right;
    margin: 7px 0 0 30px;
hr { display: none; }
.list1 {
.list1 li {
    float: left;
    line-height: normal;
.list1 li img {
    margin: 0 30px 30px 0;
.list1 li.alt img {
    margin-right: 0;
#wrapper {
/* Header */
#header-wrapper {
#header {
    width: 920px;
    height: 45px;
    margin: 0 auto;
/* Menu */
#menu {
    float: left;
    width: 640px;
    height: 45px;
#menu ul {
    margin: 0;
    padding: 10px 0px 0px 5px;
    list-style: none;
    line-height: normal;
#menu li {
    display: block;
    float: left;
#menu a {
    display: block;
    float: left;
    margin-right: 3px;
    padding: 3px 25px 2px 25px;
    text-decoration: none;
    text-transform: capitalize;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
#menu a:hover { text-decoration: underline; }
#menu .current_page_item a {
    height: 20px;
    background: #FEC200 url(images/img02.jpg) repeat-x left top;
    color: #FFFFFF;
#menu .first {
    background: none;
/* Search */
#search {
    float: right;
    width: 250px;
    height: 45px;
#search form {
    float: right;
    margin: 0;
    padding: 12px 30px 0 0;
#search fieldset {
    margin: 0;
    padding: 0;
    border: none;
#search input {
    float: left;
    font: 12px Georgia, "Times New Roman", Times, serif;
    border: none;
#search-text {
    width: 135px;
    height: 18px;
    padding: 3px 0 0 5px;
    border: 1px solid #333333;
    background: #ECF9E4;
    color: #000000;
#search-submit {
    height: 25px;
    margin-left: 10px;
    padding: 1px 10px;
    background: #C0C0C0 url(images/bg_grey.jpg);
    color: #000000;
/* Page */
#page {
    width: 920px;
    margin: 0 auto;
#page-bgtop {
    padding-top: 30px;
    /** LOGO */
#logo {
    width: 920px;
    height: 90px;
    margin: 0 auto;
    background: url(images/img04.jpg) no-repeat left top;
#logo h1, #logo p {
    margin: 0px;
    line-height: normal;
    text-transform: lowercase;
    font-weight: normal;
    color: #FFFFFF;
#logo p {
    text-transform: lowercase;
    font-size: 10px;
#logo h1 {
    padding-top: 54px;
    font-size: 34px;
#logo a {
    text-decoration: none;
    color: #FFFFFF;
/* Content */
#content {
    float: center;
    width: 920px;
    height: 800px;
    padding-top: 0px;
    padding-right: 0px;
/* Post */
.post {
    background: url(images/img07.jpg) repeat-x left bottom;
    margin-bottom: 25px;
.post .title {
    height: 30px;
    color: #549900;
.post .title a {
    text-decoration: none;
    color: #585D60;
.post .date {
.post .meta {
    margin-top: -10px;
    padding: 2px 30px 2px 16px;
    background: url(images/img03.gif) no-repeat left 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 10px;
    color: #66665E;
.post .meta span {
    display: block;
    margin-top: -10px;
.post .meta a { }
.post .entry {
    padding: 10px 0;
.post .links {
    margin: 0 250px 0 0;
    padding: 0 0 0 0px;
.post .links .comments {
.post .links .permalink {
    padding-left: 17px;
/* Sidebar */
#sidebar {
    float: left;
    width: 177px;
    padding-left: 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #585D60;
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
#sidebar li {
    margin-bottom: 30px;
    padding: 0 0 10px 0px;
#sidebar li ul {
#sidebar li li {
    margin: 0;
    padding: 7px 10px 10px 7px;
    background: url(images/img07.jpg) repeat-x left bottom;
#sidebar p {
    margin: 0;
    padding: 0px 10px;
#sidebar h2 {
    height: 26px;
    margin: 0 0 10px 0px;
    padding: 12px 0 2px 7px;
    text-transform: capitalize;
    font-size: 18px;
    font-weight: normal;
    color: #464F54;
#sidebar p {
    line-height: 200%;
#sidebar a {
    text-align: left;
    text-decoration: none;
    font-weight: normal;
    color: #585D60;
/* Calendar */
#calendar {
#calendar caption {
    padding-bottom: 5px;
    font-weight: bold;
#calendar table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #24130F;
    border-left: 1px solid #24130F;
    border-right: 1px solid #24130F;
#calendar thead th {
    padding: 5px 0;
    text-align: center;
    border-top: 1px solid #24130F;
    border-left: 1px solid #24130F;
    background: #24130F;
#calendar tbody td {
    padding: 5px 0;
    text-align: center;
    border-top: 1px solid #24130F;
    border-left: 1px solid #24130F;
    border-bottom: 1px solid #24130F;
#calendar tfoot td {
    padding: 5px;
    border-left: 1px solid #24130F;
    border-bottom: 1px solid #24130F;
#calendar tfoot #next {
    border-top: 1px solid #24130F;
    text-align: right;
#calendar tfoot #prev {
    border-top: 1px solid #24130F;
#calendar .pad {
    border-bottom: 1px solid #24130F;
#calendar #today {
    background: #24130F;
/* Footer */
#footer {
    width: 920px;
    height: 49px;
    margin: 0 auto;
    padding-top: 50px;
#footer-bgcontent {
    margin: 0px;
    padding: 0px;
    height: 99px;
    background: #394144;
#footer p {
    margin: 0;
    text-align: center;
    line-height: normal;
    text-transform: uppercase;
    font-size: 10px;
    color: #FFFFFF;
#footer a {
    color: #E5FFC4;
This is the Mainpage:
<!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 http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Uimodo</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="../style/style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery/jquery-1.4.3.min.js"></script>
</head>
<body>
<div id="wrapper">
    <div id="logo">
</div>
<hr />
    
    <div id="header">
      <div id="menu">
        <ul>
          <li><a href="Vidmin.php" class="first">Home</a></li>
          <li><a href="Other.php">Other</a></li>
        </ul>
      </div>
      
      <div id="search">
        <form method="get" action="">
          <fieldset>
            <input type="button" id="search-submit" onclick="window.location.href='now.php'" value="UPLOAD NOW" />
          </fieldset>
        </form>
      </div>
      
</div>
    
    
    <div id="page">
    <div id="page-bgtop">
        <div id="content">
          <table width="920" border="0" align="center" cellpadding="4">
            <tr>
              <td height="42" valign="top"><table width="415" height="41" align="right">
                <tr>
                  <td width="215" height="35" align="center"> </td>
                  <td width="60" align="center"><a href="" target="_blank"><img src="../Logo/fblogo.png" alt="" width="34" height="33" /></a></td>
                  <td width="124"><a href="" target="_blank"><img src="../Logo/twitlogo.png" alt="" width="34" height="33" /></a></td>
                </tr>
              </table></td>
            </tr>
            <tr>
              <td height="72" valign="top" align="center"><table width="859" height="72" border="0">
                <tr>
                  <td width="293" height="49"><div align="center"><font size="5" color="#333333">Signup</font></div></td>
                  <td width="14"> </td>
                  <td width="296"><div align="center"><font size="5" color="#333333">Login</font></div></td>
                </tr>
                <tr>
                  <td height="17"><div align="center" id="register"></div></td>
                  <td> </td>
                  <td><div align="center" id="loginstatus"></div></td>
                </tr>
              </table></td>
            </tr>
            <tr>
              <td height="269" valign="top" align="center"><table width="908" height="291" border="0" align="center" cellpadding="3" bgcolor="#CCCCCC">
                <tr>
                  <td width="401" height="287" align="center" valign="top"><form id="register_form" method="post" action="">
                    <table width="300" height="291" >
                      <tr>
                        <td height="23" colspan="2"> </td>
                        </tr>
                      <tr>
                        <td width="85" height="36"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Username :</font> <br />
                          </div></td>
                        <td width="203"><input name="realname" id="realname" type="text" size="30" value='<?Php echo $profile['displayName'];?>'/></td>
                        </tr>
                      <tr>
                        <td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Email :</font> <br />
                          </div></td>
                        <td><div align="left">
                          <input name="email" id="email" type="text" size="30" value='<?Php echo $profile['email'];?>'/>
                          <input name="propic" id="propic" type="hidden" size="30" value='<?Php echo $profile['photo'];?>'/>
                          </div></td>
                        </tr>
                      <tr>
                        <td height="81"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Security :</font> <br />
                          </div></td>
                        <td><div align="center"><img src="CaptchaSecurityImages.php?width=150&height=40&characters=8" alt="captcha"/></div>
                          <p>
                            <input name="security_code" id="security_code" type="text" size="30" />
                            </p></td>
                        </tr>
                      <tr>
                        <td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Password:</font> <br />
                          </div></td>
                        <td><div align="left">
                          <input name="password" id="password" type="text" size="30" />
                          </div></td>
                        </tr>
                      <tr>
                        <td height="45"> </td>
                        <td><div align="left">
                          <input type='submit' name="submit" id="submit" value='Sign Up'/>
                          </div></td>
                        </tr>
                      </table>
                    </form></td>
                  <td width="6" align="center"></td>
                  <td width="475" align="center" valign="top"><form method='post' id='login_form'>
                    <table width="300" height="176" >
                      <tr>
                        <td height="19" colspan="2"> </td>
                        </tr>
                      <tr>
                        <td height="36"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif" >Email :</font> <br />
                          </div></td>
                        <td><div align="left">
                          <input name='emailenter' type='text' id='emailenter' size="25" />
                          </div></td>
                        </tr>
                      <tr>
                        <td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Password :</font> <br />
                          </div></td>
                        <td><div align="left">
                          <input name='passcode' type='password' id='passcode' maxlength='15' size="25" />
                          </div></td>
                        </tr>
                      <tr>
                        <td height="45"> </td>
                        <td><div align="left">
                          <input type='submit' name='submit' value='Login'/>
                          <a href="ForgotPassword.php">Forgot Password?</a></div></td>
                        </tr>
                      </table>
                    </form></td>
                </tr>
              </table></td>
            </tr>
            <tr>
              <td height="23" valign="top" align="center" > </td>
            </tr>
          </table>
</div>
        
        <div style="clear: both;"> </div>
    </div>
    </div>
    
    <div id="footer-bgcontent">
    <div id="footer">
        <p>Copyright (c) . </p></div>
    </div>
    
</div>
</body>
</html>
Please just focus on the logo div. It suddenly moves to the middle on different screen size etc. Hope you can help.

Css background-position problem

Hello, I get a problem with this style:
<style type="text/css" media="screen">
html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
body {
background-color:#ffffff;
background-image:url(images/myimage.jpg);
background-position: center bottom;
background-repeat:repeat-x;
</style>
In ie7 works fine, in firefox 2 the bottom position doesn't
work...
Any suggestion ?
Thanks
howdy

Hello, this is the page, simply copy and paste.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>test background</title>
<style type="text/css" media="screen">
html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
body {
background-color:#ffffff;
background-image:url(
http://img179.imageshack.us/img179/2401/backgroundkc8.jpg);
background-position: center bottom;
background-repeat:repeat-x;
#layer1{
text-align: center;
width: 300px;
margin-right: auto;
margin-left: auto;
border: 2px double #003333;
</style>
</head>
<body>
<div id="layer1">Lorem ipsum dolor sit amet,
consectetuer adipiscing
elit. Quisque cursus, justo a tincidunt volutpat, dui orci
feugiat
justo, at varius odio est quis turpis. Integer nisl enim,
condimentum
et, eleifend et, posuere quis, risus. Nam convallis. Integer
diam dui,
accumsan mattis, dignissim at, dictum rutrum, justo. Praesent
lacinia.
Cras a diam. Aenean quis elit. Duis mauris erat, aliquet nec,
malesuada
laoreet, aliquam sit amet, magna. Ut turpis metus,
sollicitudin ac,
fermentum non, pretium eu, augue. Nunc faucibus, leo eu
pharetra
ultrices, sem augue ultricies risus, at egestas velit lectus
ac velit.
Suspendisse pretium nibh dapibus turpis. Praesent felis mi,
vestibulum
eu, pellentesque et, consequat eu, ante. Nulla accumsan enim
et pede.
Suspendisse potenti.
Donec eget nulla. Proin et est. Integer volutpat, dolor
scelerisque
bibendum egestas, lacus dui venenatis odio, vitae varius
massa eros sit
amet ligula. Curabitur tellus. Curabitur ultricies volutpat
tellus. In
sodales. Duis cursus mi eu dui placerat porta. Mauris laoreet
turpis at
nunc. Vivamus volutpat, metus dignissim accumsan hendrerit,
turpis
turpis aliquet nulla, non viverra dui dui quis quam. Mauris
sem nunc,
laoreet in, elementum vitae, tempor a, libero. Cras ac turpis
sit amet
risus cursus ultrices. Sed id quam.
Nulla tortor ligula, adipiscing nec, ornare eu, gravida in,
justo. Sed
elementum vestibulum lectus. Mauris lectus mauris, convallis
nec,
posuere quis, lacinia at, felis. Vestibulum ante ipsum primis
in
faucibus orci luctus et ultrices posuere cubilia Curae;
Aenean cursus
quam eget dui. Maecenas sapien. Aenean pellentesque lobortis
mi. Quisque
tempor ipsum in libero. Pellentesque habitant morbi tristique
senectus
et netus et malesuada fames ac turpis egestas. Class aptent
taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos.
Quisque lacus tellus, ornare quis, euismod et, lacinia sed,
justo. Proin
auctor nisi sed tortor. Fusce in justo et nisl fermentum
vehicula.
Quisque urna felis, lacinia at, viverra in, fermentum ut,
lacus. Duis
tempus. Morbi bibendum libero vitae diam faucibus placerat.
Praesent eu sapien. Sed ut velit quis magna lobortis
malesuada.
Phasellus dignissim risus ac est. Pellentesque semper sem.
Donec porta
nulla nec quam. Pellentesque aliquet risus id quam. Proin
tincidunt erat
nec nunc. Praesent euismod fringilla ipsum. Donec ornare.
Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia
Curae; Sed leo.
Proin non nisi non neque porta tempus. Proin varius velit eu
sapien.
Pellentesque pulvinar arcu id ante. Nunc eu diam. Phasellus
euismod,
felis in scelerisque pharetra, diam augue eleifend mi, a
rutrum mauris
arcu nec orci. Proin sed erat. Pellentesque et libero.
Aliquam ante
velit, ultrices ut, fermentum ac, cursus ut, est. Etiam vitae
nisl ac
metus cursus viverra. Proin non felis. Donec massa. Nullam
quam lectus,
pulvinar eget, condimentum at, tristique in, quam. Proin
vehicula
elementum diam. Proin sapien. Praesent suscipit, lorem at
dapibus
fringilla, orci elit facilisis lacus, at dictum augue velit
quis enim.
Mauris eu mauris. Aliquam rhoncus fermentum pede. Vestibulum
gravida
vulputate mauris.
Pellentesque consectetuer. Cras tellus justo, iaculis vitae,
semper at,
scelerisque porta, tortor. Pellentesque at mi sed tellus
pellentesque
ultricies. In quis pede. Integer vel tortor at dui elementum
suscipit.
Praesent interdum posuere odio. Integer mollis mattis ipsum.
Duis id
metus ut nulla molestie sagittis. Suspendisse faucibus urna
vel metus.
Sed bibendum, dolor sit amet rhoncus rutrum, lorem turpis
pharetra
tortor, quis viverra neque lorem eget massa. Lorem ipsum
dolor sit amet,
consectetuer adipiscing elit. Suspendisse vestibulum arcu
vitae odio.
Fusce enim lacus, porttitor nec, scelerisque non, viverra eu,
enim. Sed
mauris. In hac habitasse platea dictumst. Duis porta mauris
quis orci.
Donec suscipit turpis eu dui egestas suscipit. Suspendisse
potenti. Cum
sociis natoque penatibus et magnis dis parturient montes,
nascetur
ridiculus mus. In hac habitasse platea dictumst.
Cras in arcu a mi iaculis ultricies. Pellentesque sed lorem
at sem
euismod blandit. Nullam pede lacus, interdum eu, aliquam a,
pretium vel,
sem. Pellentesque fringilla leo feugiat nibh. Cras non enim.
Donec
luctus ante vel diam. Mauris volutpat sapien eget nunc. Donec
nec lectus
nec leo iaculis fringilla. Sed felis magna, cursus et,
hendrerit sit
amet, pretium at, sapien. Vivamus ornare neque facilisis
arcu. Vivamus
nisi leo, varius ac, sodales ut, dapibus eget, eros.
</div>
</body>
</html>

Help with div positioning

I am an utter newbie when it comes to html and CS5. Since I happen to own a copy of CS5 I have been drafted to take a stab at a very basic website for a non-profit I work with. The site can be seen here www.kidscareco.com
I have searched all around this site and the web in general for an answer to my question and while I have found lots of information on absolute vs relative position and "clear", I haven't been able to cypher out a solution to my particular problem.
I am having trouble getting one particular div to stay where I want it. I'm entirely sure that it is my fault and thus am not angry at the div. I am hopeful that someone here can offer me a few lines of css code to get the errant div to stay where it should be. I am attaching the html and css for the page in question. The page is based on a template which I can post if it is somehow helpful but I believe that the code from the "index" page is sufficient.
The div in question is #meat. (content text is: Since 1990, Kids Care Clubs has empowered children to make a better world through hands-on service projects.We give parents, teachers and youth leaders the resources they need to involve kids in the good works that will mean a brighter future for all.) I would like for it to stay neatly under the spry menu, near the top of the page and for it to expand and contract both vertically and horizontally as the browser window is resized. I have tried several different "solutions" with little success except for restricting the width of the div to about 600px but that leaves a considerable amount of white space when the page is viewed full screen on a large monitor and it forces the text down the page in an unworkable way once the actual text within the div starts to get into the order of 1000 words or so. Suggestions and helpful critique are welcomed.
Thank you!
Mike Logan
@charset "UTF-8";
/* CSS Document */
html, body {
     width:97%;
#container {
     min-height: 1000px;
     width:100%;
     min-width:850px;
     border-color:#000;
     border: solid 2px;
     alignment-baseline:middle;
     margin:25px;
#header {
     float:left;
#collage {
     float:right;
     width:202px;
#menu {
     margin-top:20px;
     height:30px;
     float:left;
     clear:left;
#MenuBar1 {
     font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
     clear:inherit;
#meat {
     float:left;
     clear:left;
     /* [disabled]max-width:600px; */
     padding:20px;
     padding-left:40px;
     font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
#footer {
     clear:both;
     width:100%;
     height:auto;
   font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
<!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" xmlns:ice="http://ns.adobe.com/incontextediting">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Welcome to KIDS care Colorado.com!</title>



<link href="../kidscare_template.css" rel="stylesheet" type="text/css" />
<script src="../includes/ice/ice.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<img src="../graphics/Kidscarekidslogo.png" width="220" height="144" alt="logo" /><img src="../graphics/kidscare-name.png" width="395" height="79" alt="name" />
</div>
<div id="collage"><img src="../graphics/collage.png" width="200" height="949" alt="collage" /></div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li>
      <div align="center"><span id="MenuBar1"><a href="#">Home</a>
        </span>
      </div>
    </li>
    <li><span id="MenuBar1"><a href="#">Programs</a></span></li>
    <li><span id="MenuBar1"><a href="#">Volunteer</a></span></li>
    <li><span id="MenuBar1"><a href="#">Donate</a></span></li>
    <li><span id="MenuBar1"><a href="#">Contact Us</a></span></li>
</ul>
</div>

<div id="meat" ice:editable="*">
<div align="left">Content for id "meat" Goes Here</div>
</div>

<div id="footer">
<div align="center">
    <p> </p>
    <p>KIDS care Colorado,LLC • (720) 295-3396 • <a href="mailto:[email protected]">[email protected]</a></p>
    <p>PO Box 19442 • Boulder, CO 80308
    </p><p> </p>
</div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Hi Mike,
I'm going to suggest you start over with a pre-built CSS layout for this project. It's much simpler than building a page layout from scratch. Also, liquid layouts are very tricky to control. A fixed-width layout is much easier to work with. Here's a sample 2-column, fixed-width, centered layout to get you started.
http://alt-web.com/TEMPLATES/CSS-Basic-2-column-layout.shtml
Making your prototype page into a DW Template is just about the last step in your design process. After you are completely satisfied with how your protoype.html page looks and works in all browsers, then saveAs Template.
Best of luck with your project, and have fun!!
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

During a single axis move, why do my other axes offset their position?

When I move any one of the axes on my PCI-7344 card I get a positional offset on the other three. when I stop the move, the other three axes return to their approximate starting position after a couple of seconds. I am measuring this offset with an electronic indicator. This error occurs in MAX and in Labview. I have isolated the motor cables and verified shield and ground connections. Do you have any other suggestions on what to look for?

Thank you Evan, I already solved this problem. My analog ground had actually been tied to the digital ground through the Trust servo amps. Once I isolated these two grounds the symtoms disapeared.

Mixed Signal Graph, Selected Cursors, and Cursor Position Problems

I'm trying to work around an issue with a single multiplot cursor on a mixed-signal graph (doesn't work right, R&D bug report #100830) by grabbing the selected cursor x-position and updating that position across all four cursors, as seen below:
However, I'm having two problems.
One, the selected cursor is not always the actual selected cursor. Quite often, especially when selecting and dragging cursors 3 & 4 (indexed 2 & 3), the selected cursor shows up as 0 or 1.
Two, and the one I'm more concerned about, is the fact that the four cursors X-positions never completely line up. In every case, whichever cursor is deemed to be "selected", the other three will align to some point (the same for all three) that is offset from the actual value. Please note that the X-values in my demonstration are identical (1000 points from 0.001 to 1) so I don't see this as being some snap issue where the value is offsetting to the closest available on the other arrays.
I've attached my scratchpad demo.vi as an illustration.
Any help or insight is appreciated.
Thanks,
Mike Webster
Attachments:
demo.vi ‏47 KB

I believe I found where the issue resides at least and a workaround. This is a problem with XY graphs in general when trying to programmatically control the cursor position. Somehow, the software goes looking for the nearest point instead of the identical point and has some sort of issue with its search algorithm. Switching from attempting to match position to copying the cursor 'index' completely cleared up the problem I was having. In the particular application I'm working on, the four graphs have identically spaced data on the X-axis, so this solution should work fine for me.

Menu positioning problem when viewing in Internet explorer on a pc

Hi guys,
I have created a website for a football team and I am having problems with the menu. It looks fine in all browsers apart from Internet Explorer. The menu positioning is meant to be on the left hand side but shows far right on the screen when viewed in Internet Explorer. Does anyone know how I can resolve this issue?
http://www.stormersfc.co.uk
css sheet - http://www.stormersfc.co.uk/style.css
Hopefully someone can help.
Cheers,
Roy

Hummm....its difficult to tell. Youre using so many redundant css styles ie not needed.
Youre 'leftPan' <div> container is 140px in width but your ul (unordered list inside it is 244px wide?
Why set widths and heights when they are not needed. You have no idea what height the ul and li will be in other users browsers. A child element placed inside a parent container will stretch to the full width without specifying a width for the child element. The key to web deisgn is keeping all the maths 100% correct. If you so much as get anything out by even one px it could break the design.
#leftPan{
     margin-left: 90px;
     width: 140px;
#leftPan ul{
     width:244px;
     height:250px;
     background-position: 0 0;
     padding-top: 0px;
     padding-right: 0;
     padding-bottom: 0;
     padding-left: 0;
     margin-top: 1px;
     text-decoration: none;
I see no reason why your based structure ie the 'container', 'header', 'mainpic', sidebar1 and 'mainContent' should not work in all browsers. Now what you have inside those may be casuing the conflict. I would strip the page back to the base structure (check that it does work in all browsers) then begin to fill the containers, checking as you go.

Offset div / positioning problem in IE

Similar Messages

Maybe you are looking for