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 & 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.