css issues

Any reason you have everything in a fixed position? This prevents these elements from moving at all on the page.

that's usually the point of having them fixed.

ASKER

LZ1,

Being the css newb that I am, i thought they had to be setup this way.

ibew. They don't have to be set up that way, but there is nothing wrong with fixing elements, if you ahve a pre-determined location for everything.

I see. I remember working on your site yesterday too.
You want everything centered and scrollable right? As well as your DIVs showing?

your div is showing up, it's the picture that isn't showing up. Am looking into it more.

actually, it is showing up. the scroll bar isn't working though.

Are you disabling the scroll bar in any of your scripts?

May I ask what was wrong with the other solution from yesterday?
https://www.experts-exchange.com/questions/25874136/Spacing-issues-with-IE-and-Firefox.html?cid=1131&anchorAnswerId=30751579#a30751579
Just so I know.

ASKER

LZ1,

Yes you helped yesterday but got me interested in making things a bit simpler.

I used coordinates for everything thinking if I fixed them the IDs, that the site would layout exactly where the coordinates were.

ASKER

@ CCSOflag . no I dont think so.

@ LZ1. solution was good. I am now trying to learn more about how to do the same with CSS from the ground up.

I see.
Simplicity makes life easier, however it doesn't always happen that way. If your going the CSS route, I would definitely start here:
http://www.w3schools.com/css/default.asp

Your background is back in your right DIV and your footer is visible again.

<!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>Untitled Document</title>
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
background:none repeat scroll 0 0 transparent;
border:0 none;
font-size:100%;
margin:0;
outline:0 none;
padding:0;
}
body {
line-height:1;
}
ol, ul {
list-style:none outside none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:none;
}
:focus {
outline:0 none;
}
ins {
text-decoration:none;
}
del {
text-decoration:line-through;
}
table {
border-collapse:collapse;
border-spacing:0;
margin:0;
}
</style>
<style> 
body {
	width:100%;
	height:100%;
	background:url("http://www.itphilly.com/test/keenans/images//bg.jpg") repeat-x scroll left 0px #FFFFFF;
}
#wrapper {
	clear: both;
	width: 1000px;
	margin:0px auto;
}
#header {
	width: 100%;
	height: 182px;
}
#header img { 
	float:left;
	position:relative}
#header #nav {
	float: left;
	position: relative;
	width: 757px;
	height: 33px;
	margin-top: 77px;
}
#sidebar {
	float: left;
	height: 553px;
	width: 224px;	
}
#content {
	height:850px;
	width:757px;
}
#RightSide {
        height: 1000px;
        width: 18px;
        margin: 0px;
        padding: 0px;
        background-image: url(http://www.itphilly.com/test/keenans/images/sideRight.gif);
		float:right;
}

#footer {
	float: left;
	width: 1000px;
	position: relative;
	text-align:center;
}
</style>
</head>

<body>
<div id="wrapper"> 
	  <div id="RightSide"></div>
<div id="header"> <img src="http://www.itphilly.com/test/keenans/images//logo.gif" width="224" height="182" />
   	  <div id="nav"> 
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="757" height="33" id="FlashID" title="top Navigation">
     <param name="movie" value="http://www.itphilly.com/test/keenans/images//media/topNav2.swf" />
     <param name="quality" value="high" />
     <param name="wmode" value="opaque" />
     <param name="swfversion" value="7.0.70.0" />
     <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
     <param name="expressinstall" value="Scripts/expressInstall.swf" />
     <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
     <!--[if !IE]>-->
     <object type="application/x-shockwave-flash" data="http://www.itphilly.com/test/keenans/images//media/topNav2.swf" width="757" height="33">
       <!--<![endif]-->
       <param name="quality" value="high" />
       <param name="wmode" value="opaque" />
       <param name="swfversion" value="7.0.70.0" />
       <param name="expressinstall" value="Scripts/expressInstall.swf" />
       <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
       <div>
         <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
         <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/http://www.itphilly.com/test/keenans/images//shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
       </div>
       <!--[if !IE]>-->
     </object>
     <!--<![endif]-->
   </object>
    </div><!--end nav-->
  </div><!--end header-->

<div id="sidebar">  
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="224" height="553" id="FlashID2" title="side Navigation">
     <param name="movie" value="http://www.itphilly.com/test/keenans/images//media/sideNav3.swf" />
     <param name="quality" value="high" />
     <param name="wmode" value="opaque" />
     <param name="swfversion" value="7.0.70.0" />
     <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
     <param name="expressinstall" value="Scripts/expressInstall.swf" />
     <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
     <!--[if !IE]>-->
     <object type="application/x-shockwave-flash" data="http://www.itphilly.com/test/keenans/images//media/sideNav3.swf" width="224" height="553">
       <!--<![endif]-->
       <param name="quality" value="high" />
       <param name="wmode" value="opaque" />
       <param name="swfversion" value="7.0.70.0" />
       <param name="expressinstall" value="Scripts/expressInstall.swf" />
       <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
       <div>
         <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
         <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/http://www.itphilly.com/test/keenans/images//shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
       </div>
       <!--[if !IE]>-->
     </object>
     <!--<![endif]-->
   </object>
<img name="beer" src="http://www.itphilly.com/test/keenans/images//beer.gif" width="224" height="265" border="0" id="beer" alt="beer" />
</div><!--end sidebar-->
<div id="content"> 
content 

</div><!--end content-->


	<div id="footer"> 
	All of the bottom stuff goes here 
	</div><!--end footer-->
</div><!--end wrapper-->
</body>
</html>

Open in new window

ASKER

What did you change? I guess I am confused as to why if I have the exact coordinates set to fixed positions in the CSS why it doesnt display that way....

ibew, your page is bigger than a single window of a browser unless someone has very high resolution. Because of your fixed positioning is prevents it from scrolling because fixed means it is relative to the browser window. IF you change your positioning to absolute, I think it will achieve what you want.

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial