0

Any help is much appreciated!

Alright, after searching for several hours/days through forum posts and tutorials, I haven't managed to find any solution for my 2 problems :( . Time to post... I'm fairly new to div only layouts as well as list items, so bear with me... I might as well get to the point.

I've written out a fairly complex div only layout (in my mind) and can't seem to solve 2 problems.

1) I have a div named "content" positioned absolute... that holds

On the left: A menu and a picture under it (I've floated the Left Spacer, Middle List, and Right Spacer all to the left with the product image under it).

On the right: A big picture that I will later use as an AJAX div (this is aligned to the right because I can't find a way to fit the product image under the first few divs unless I align this right).

Problem: I've attempted to set the entire div to a fixed width, however, this div takes up the entire width of the browser like it was 100%... making the 2 divs appear completely on opposite sides of the screen with a large blank space in the middle.

2) The list that I have set in the middle float for the above problem. in Mozilla FireFox the margin/padding looks fine, but in IE there is some extra padding below (I think) or above every list item so that the list is alot larger then the space provided for it... which throws everything off.

If anyone has any ideas.. please, please, let me know what your thinking. This is the code as it stands so far (I know CSS is greater than doing it per item, but I want to get it working before I split the CSS up into a seperate document).

This is the whole document uncut...

<!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=iso-8859-1" />
<title>Screen Works Online - ONE-STOP CUSTOM CORPORATE APPAREL &amp; PROMOTIONAL PRODUCTS SOURCE</title>

<style type="text/css">
body 
{
	margin:0 auto;
	padding:0;
	background-image: url(..//images/screenworks-background.jpg);
	background-repeat: repeat;
	background-position: center;
}

div#wrapper
{
	margin:0;
	padding:0;
	width:975;
	text-align:center;
}
li
{
	margin-bottom:0;
	margin-top:0;
	padding:0;
}
</style>

<script type="text/javascript">
<!--
if(document.images)
{
  var image_array = new Array();
	
  // path to the directory with images
  var path = '/images/';

  // enumeration of the "active" images
  image_array[0] = path + "navHome_off.jpg";
  image_array[1] = path + "navAboutUs_off.jpg";
  image_array[2] = path + "navContactUs_off.jpg";
  image_array[3] = path + "navLinks_off.jpg";
  image_array[4] = path + "item_screenprinting_off.jpg";
  image_array[5] = path + "item_embroidery_off.jpg";
  image_array[6] = path + "item_hats_custom_off.jpg";
  image_array[7] = path + "item_cut_custom_off.jpg";
  image_array[8] = path + "item_knitted_off.jpg";
  image_array[9] = path + "item_fibre_off.jpg";
  image_array[10] = path + "item_graphic_off.jpg";
  image_array[11] = path + "item_dye_custom_off.jpg";
  image_array[12] = path + "item_package_off.jpg";
  image_array[13] = path + "item_decal_off.jpg";

  var preload_image = new Array ();
 
  for(var i=0; i<image_array.length; i++)
  {
    preload_image[i]= new Image();
    preload_image[i].src = image_array[i];
  }
}

function rollover(name, filename)
{
  var fullpath = '/images/' + filename;
  document.images[name].src = fullpath;
}
//-->
</script>
</head>

<body>
<!-- wrapper -->
<div id="wrapper" style="text-align:center">

<!-- header -->
	<div id="header"><img src="/images/header.jpg" width="975" height="141" border="0" alt="" /></div>

<!-- navigation -->
	<div id="navigation"
		><img src="/images/navLeftFill.jpg" width="380" height="18" border="0" alt="" /
		><a href="#"
			onmouseover="rollover('navHome','navHome_on.jpg')"
			onmouseout="rollover('navHome','navHome_off.jpg')"
			><img src="/images/navHome_off.jpg" name="navHome" width="154" height="18" border="0" alt="" /
		></a
		><a href="#"
			onmouseover="rollover('navAboutUs','navAboutUs_on.jpg')"
			onmouseout="rollover('navAboutUs','navAboutUs_off.jpg')"
			><img src="/images/navAboutUs_off.jpg" name="navAboutUs" width="145" height="18" border="0" alt="" /
		></a
		><a href="#"
			onmouseover="rollover('navContactUs','navContactUs_on.jpg')"
			onmouseout="rollover('navContactUs','navContactUs_off.jpg')"
			><img src="/images/navContactUs_off.jpg" name="navContactUs" width="175" height="18" border="0" alt="" /
		></a
		><a href="#"
			onmouseover="rollover('navLinks','navLinks_on.jpg')"
			onmouseout="rollover('navLinks','navLinks_off.jpg')"
			><img src="/images/navLinks_off.jpg" name="navLinks" width="121" height="18" border="0" alt="" /
		></a
	></div>

<!-- content -->
	<div id="content" style="width:975; height:394; position:relative; text-align:center"
		><div id="productleftfill" style="float:left"
			><img src="/images/menu_left_fill.jpg" width="22" height="266" border="0" alt="" /
		></div
		><div id="menuitems" style="float:left"
			><ul id="menu" style="margin:0 0 0 0; padding:0; list-style:none; text-indent:0; line-height:0"
				><li
					><img src="/images/menu_top_fill.jpg" width="174" height="17" border="0" /
				></li
				><li
					><a href="#"
						onmouseover="mopen('m1'); rollover('menuScreen','item_screenprinting_on.jpg')"
						onmouseout="mclosetime(); rollover('menuScreen','item_screenprinting_off.jpg')"
						><img src="/images/item_screenprinting_off.jpg" name="menuScreen" width="174" height="22" border="0" /
					></a
				></li
				><li
					><a href="#"
						onmouseover="mopen('m2'); rollover('menuEmbroidery','item_embroidery_on.jpg')"
						onmouseout="mclosetime(); rollover('menuEmbroidery','item_embroidery_off.jpg')"
						><img src="/images/item_embroidery_off.jpg" name="menuEmbroidery" width="174" height="24" border="0" /
					></a
				></li
				><li
					><a href="#"
						onmouseover="mopen('m3'); rollover('menuHats','item_hats_custom_on.jpg')"
						onmouseout="mclosetime(); rollover('menuHats','item_hats_custom_off.jpg')"
						><img src="/images/item_hats_custom_off.jpg" name="menuHats" width="174" height="24" border="0" /
					></a
				></li
				><li
					><a href="#"
						onmouseover="mopen('m4'); rollover('menuCut','item_cut_custom_on.jpg')"
						onmouseout="mclosetime(); rollover('menuCut','item_cut_custom_off.jpg')"
						><img src="/images/item_cut_custom_off.jpg" name="menuCut" width="174" height="24" border="0" /
					></a
				></li
				><li
					><a href="#"
						onmouseover="mopen('m5'); rollover('menuKnitted','item_knitted_on.jpg')"
						onmouseout="mclosetime(); rollover('menuKnitted','item_knitted_off.jpg')"
						><img src="/images/item_knitted_off.jpg" name="menuKnitted" width="174" height="24" border="0" /
					></a
				></li
				><li
					><a href="#"
						onmouseover="mopen('m6'); rollover('menuFibre','item_fibre_on.jpg')"
						onmouseout="mclosetime(); rollover('menuFibre','item_fibre_off.jpg')"
						><img src="/images/item_fibre_off.jpg" name="menuFibre" width="174" height="24" border="0" /
					></a
				></li
				><li
					><a href="#"
						onmouseover="mopen('m7'); rollover('menuGraphic','item_graphic_on.jpg')"
						onmouseout="mclosetime(); rollover('menuGraphic','item_graphic_off.jpg')"
						><img src="/images/item_graphic_off.jpg" name="menuGraphic" width="174" height="24" border="0" /
					></a
				></li
				><li
					><a href="#"
						onmouseover="mopen('m8'); rollover('menuDye','item_dye_custom_on.jpg')"
						onmouseout="mclosetime(); rollover('menuDye','item_dye_custom_off.jpg')"
						><img src="/images/item_dye_custom_off.jpg" name="menuDye" width="174" height="24" border="0" /
					></a
				></li
				><li
					><a href="#"
						onmouseover="mopen('m9'); rollover('menuPackage','item_package_on.jpg')"
						onmouseout="mclosetime(); rollover('menuPackage','item_package_off.jpg')"
						><img src="/images/item_package_off.jpg" name="menuPackage" width="174" height="24" border="0" /
					></a
				></li
				><li
					><a href="#"
						onmouseover="mopen('m10'); rollover('menuDecal','item_decal_on.jpg')"
						onmouseout="mclosetime(); rollover('menuDecal','item_decal_off.jpg')"
						><img src="/images/item_decal_off.jpg" name="menuDecal" width="174" height="23" border="0" /
					></a
				></li
				><li
					><img src="/images/menuBottom_fill.jpg" width="174" height="12" border="0" /
				></li
			></ul
		></div
		><div id="rightfill" style="float:left;"
			><img src="/images/menu_right_fill.jpg" width="12" height="266" border="0" alt="" /
		></div
		><div id="ajaxframe" style="float:right; width:767; height:394"
			><img src="/images/ajaxFrame_Index.jpg" width="767" height="394" border="0" alt="" /
		></div
		><div id="productfill" style="clear:left; text-align:left; width:208; height:128;"
			><img src="/images/product_left_fill.jpg" width="15" height="128" border="0" alt="" /
			><img style="position:absolute" src="/images/product_inner_off.jpg" width="193" height="128" border="0" alt="" /
		></div
	></div>

<!-- footer -->
	<div id="footertop"
		><img src="/images/footerTop_fill.jpg" name="footerTop" width="975" height="8" border="0" alt="" /
	></div>
	<div id="footermiddle"
		><img src="/images/footerLeft_fill.jpg" name="footerLeft" width="73" height="170" border="0" alt="" /
		><img src="/images/footerMiddle.jpg" name="footerMiddle" width="836" height="170" border="0" alt="" /
		><img src="/images/footerRight_fill.jpg" name="footerRight" width="66" height="170" border="0" alt="" /
	></div>
	<div id="footerbottom"
		><img src="/images/footerBottom.jpg" name="footerBottom" width="975" height="37" border="0" alt="" /
	></div>
</div>

</body>
</html>

I understand this is alot of code to just take in and work with, but if you have the time, I would GREATLY appreciate anything you put into it.

1
Contributor
2
Replies
3
Views
9 Years
Discussion Span
Last Post by PsychicTide
0

If you want, I can put up a temp site so you can actually look at the problem, but I can't leave it up for very long. Let me know... I'm actively watching this post just in case.

0

Alright, After talking with a buddy of mine I managed to figure out what was wrong on both accounts.

As for the div being on both sides of the screen instead of in the middle and together.... I simply took out the "position: relative" and added "margin:0 auto;".

And for the <ul>, I found that my image pre-load javascript was throwing off my entire list margin for IE7. Instead I've added a sprite mapping version of a similar script. I also added a Reset StyleSheet above my script type to zero out any changes between browsers... in case your wondering http://developer.yahoo.com/yui/reset/.

Hopefully by some crazy chance this will help someone else out... until then...

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.