HTML and CSS RSS HTML and CSS RSS

Div width and list margin problem

Thread Solved

•
•
Join Date: Aug 2008
Posts: 66
Reputation: PsychicTide is an unknown quantity at this point 
Solved Threads: 7
PsychicTide's Avatar
PsychicTide PsychicTide is offline Offline
Junior Poster in Training

Div width and list margin problem

 
0
  #1
Aug 25th, 2008
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...
html Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Screen Works Online - ONE-STOP CUSTOM CORPORATE APPAREL &amp; PROMOTIONAL PRODUCTS SOURCE</title>
  6.  
  7. <style type="text/css">
  8. body 
  9. {
  10. 	margin:0 auto;
  11. 	padding:0;
  12. 	background-image: url(..//images/screenworks-background.jpg);
  13. 	background-repeat: repeat;
  14. 	background-position: center;
  15. }
  16.  
  17. div#wrapper
  18. {
  19. 	margin:0;
  20. 	padding:0;
  21. 	width:975;
  22. 	text-align:center;
  23. }
  24. li
  25. {
  26. 	margin-bottom:0;
  27. 	margin-top:0;
  28. 	padding:0;
  29. }
  30. </style>
  31.  
  32. <script type="text/javascript">
  33. <!--
  34. if(document.images)
  35. {
  36.   var image_array = new Array();
  37.  
  38.   // path to the directory with images
  39.   var path = '/images/';
  40.  
  41.   // enumeration of the "active" images
  42.   image_array[0] = path + "navHome_off.jpg";
  43.   image_array[1] = path + "navAboutUs_off.jpg";
  44.   image_array[2] = path + "navContactUs_off.jpg";
  45.   image_array[3] = path + "navLinks_off.jpg";
  46.   image_array[4] = path + "item_screenprinting_off.jpg";
  47.   image_array[5] = path + "item_embroidery_off.jpg";
  48.   image_array[6] = path + "item_hats_custom_off.jpg";
  49.   image_array[7] = path + "item_cut_custom_off.jpg";
  50.   image_array[8] = path + "item_knitted_off.jpg";
  51.   image_array[9] = path + "item_fibre_off.jpg";
  52.   image_array[10] = path + "item_graphic_off.jpg";
  53.   image_array[11] = path + "item_dye_custom_off.jpg";
  54.   image_array[12] = path + "item_package_off.jpg";
  55.   image_array[13] = path + "item_decal_off.jpg";
  56.  
  57.   var preload_image = new Array ();
  58.  
  59.   for(var i=0; i<image_array.length; i++)
  60.   {
  61.     preload_image[i]= new Image();
  62.     preload_image[i].src = image_array[i];
  63.   }
  64. }
  65.  
  66. function rollover(name, filename)
  67. {
  68.   var fullpath = '/images/' + filename;
  69.   document.images[name].src = fullpath;
  70. }
  71. //-->
  72. </script>
  73. </head>
  74.  
  75. <body>
  76. <!-- wrapper -->
  77. <div id="wrapper" style="text-align:center">
  78.  
  79. <!-- header -->
  80. 	<div id="header"><img src="/images/header.jpg" width="975" height="141" border="0" alt="" /></div>
  81.  
  82. <!-- navigation -->
  83. 	<div id="navigation"
  84. 		><img src="/images/navLeftFill.jpg" width="380" height="18" border="0" alt="" /
  85. 		><a href="#"
  86. 			onmouseover="rollover('navHome','navHome_on.jpg')"
  87. 			onmouseout="rollover('navHome','navHome_off.jpg')"
  88. 			><img src="/images/navHome_off.jpg" name="navHome" width="154" height="18" border="0" alt="" /
  89. 		></a
  90. 		><a href="#"
  91. 			onmouseover="rollover('navAboutUs','navAboutUs_on.jpg')"
  92. 			onmouseout="rollover('navAboutUs','navAboutUs_off.jpg')"
  93. 			><img src="/images/navAboutUs_off.jpg" name="navAboutUs" width="145" height="18" border="0" alt="" /
  94. 		></a
  95. 		><a href="#"
  96. 			onmouseover="rollover('navContactUs','navContactUs_on.jpg')"
  97. 			onmouseout="rollover('navContactUs','navContactUs_off.jpg')"
  98. 			><img src="/images/navContactUs_off.jpg" name="navContactUs" width="175" height="18" border="0" alt="" /
  99. 		></a
  100. 		><a href="#"
  101. 			onmouseover="rollover('navLinks','navLinks_on.jpg')"
  102. 			onmouseout="rollover('navLinks','navLinks_off.jpg')"
  103. 			><img src="/images/navLinks_off.jpg" name="navLinks" width="121" height="18" border="0" alt="" /
  104. 		></a
  105. 	></div>
  106.  
  107. <!-- content -->
  108. 	<div id="content" style="width:975; height:394; position:relative; text-align:center"
  109. 		><div id="productleftfill" style="float:left"
  110. 			><img src="/images/menu_left_fill.jpg" width="22" height="266" border="0" alt="" /
  111. 		></div
  112. 		><div id="menuitems" style="float:left"
  113. 			><ul id="menu" style="margin:0 0 0 0; padding:0; list-style:none; text-indent:0; line-height:0"
  114. 				><li
  115. 					><img src="/images/menu_top_fill.jpg" width="174" height="17" border="0" /
  116. 				></li
  117. 				><li
  118. 					><a href="#"
  119. 						onmouseover="mopen('m1'); rollover('menuScreen','item_screenprinting_on.jpg')"
  120. 						onmouseout="mclosetime(); rollover('menuScreen','item_screenprinting_off.jpg')"
  121. 						><img src="/images/item_screenprinting_off.jpg" name="menuScreen" width="174" height="22" border="0" /
  122. 					></a
  123. 				></li
  124. 				><li
  125. 					><a href="#"
  126. 						onmouseover="mopen('m2'); rollover('menuEmbroidery','item_embroidery_on.jpg')"
  127. 						onmouseout="mclosetime(); rollover('menuEmbroidery','item_embroidery_off.jpg')"
  128. 						><img src="/images/item_embroidery_off.jpg" name="menuEmbroidery" width="174" height="24" border="0" /
  129. 					></a
  130. 				></li
  131. 				><li
  132. 					><a href="#"
  133. 						onmouseover="mopen('m3'); rollover('menuHats','item_hats_custom_on.jpg')"
  134. 						onmouseout="mclosetime(); rollover('menuHats','item_hats_custom_off.jpg')"
  135. 						><img src="/images/item_hats_custom_off.jpg" name="menuHats" width="174" height="24" border="0" /
  136. 					></a
  137. 				></li
  138. 				><li
  139. 					><a href="#"
  140. 						onmouseover="mopen('m4'); rollover('menuCut','item_cut_custom_on.jpg')"
  141. 						onmouseout="mclosetime(); rollover('menuCut','item_cut_custom_off.jpg')"
  142. 						><img src="/images/item_cut_custom_off.jpg" name="menuCut" width="174" height="24" border="0" /
  143. 					></a
  144. 				></li
  145. 				><li
  146. 					><a href="#"
  147. 						onmouseover="mopen('m5'); rollover('menuKnitted','item_knitted_on.jpg')"
  148. 						onmouseout="mclosetime(); rollover('menuKnitted','item_knitted_off.jpg')"
  149. 						><img src="/images/item_knitted_off.jpg" name="menuKnitted" width="174" height="24" border="0" /
  150. 					></a
  151. 				></li
  152. 				><li
  153. 					><a href="#"
  154. 						onmouseover="mopen('m6'); rollover('menuFibre','item_fibre_on.jpg')"
  155. 						onmouseout="mclosetime(); rollover('menuFibre','item_fibre_off.jpg')"
  156. 						><img src="/images/item_fibre_off.jpg" name="menuFibre" width="174" height="24" border="0" /
  157. 					></a
  158. 				></li
  159. 				><li
  160. 					><a href="#"
  161. 						onmouseover="mopen('m7'); rollover('menuGraphic','item_graphic_on.jpg')"
  162. 						onmouseout="mclosetime(); rollover('menuGraphic','item_graphic_off.jpg')"
  163. 						><img src="/images/item_graphic_off.jpg" name="menuGraphic" width="174" height="24" border="0" /
  164. 					></a
  165. 				></li
  166. 				><li
  167. 					><a href="#"
  168. 						onmouseover="mopen('m8'); rollover('menuDye','item_dye_custom_on.jpg')"
  169. 						onmouseout="mclosetime(); rollover('menuDye','item_dye_custom_off.jpg')"
  170. 						><img src="/images/item_dye_custom_off.jpg" name="menuDye" width="174" height="24" border="0" /
  171. 					></a
  172. 				></li
  173. 				><li
  174. 					><a href="#"
  175. 						onmouseover="mopen('m9'); rollover('menuPackage','item_package_on.jpg')"
  176. 						onmouseout="mclosetime(); rollover('menuPackage','item_package_off.jpg')"
  177. 						><img src="/images/item_package_off.jpg" name="menuPackage" width="174" height="24" border="0" /
  178. 					></a
  179. 				></li
  180. 				><li
  181. 					><a href="#"
  182. 						onmouseover="mopen('m10'); rollover('menuDecal','item_decal_on.jpg')"
  183. 						onmouseout="mclosetime(); rollover('menuDecal','item_decal_off.jpg')"
  184. 						><img src="/images/item_decal_off.jpg" name="menuDecal" width="174" height="23" border="0" /
  185. 					></a
  186. 				></li
  187. 				><li
  188. 					><img src="/images/menuBottom_fill.jpg" width="174" height="12" border="0" /
  189. 				></li
  190. 			></ul
  191. 		></div
  192. 		><div id="rightfill" style="float:left;"
  193. 			><img src="/images/menu_right_fill.jpg" width="12" height="266" border="0" alt="" /
  194. 		></div
  195. 		><div id="ajaxframe" style="float:right; width:767; height:394"
  196. 			><img src="/images/ajaxFrame_Index.jpg" width="767" height="394" border="0" alt="" /
  197. 		></div
  198. 		><div id="productfill" style="clear:left; text-align:left; width:208; height:128;"
  199. 			><img src="/images/product_left_fill.jpg" width="15" height="128" border="0" alt="" /
  200. 			><img style="position:absolute" src="/images/product_inner_off.jpg" width="193" height="128" border="0" alt="" /
  201. 		></div
  202. 	></div>
  203.  
  204. <!-- footer -->
  205. 	<div id="footertop"
  206. 		><img src="/images/footerTop_fill.jpg" name="footerTop" width="975" height="8" border="0" alt="" /
  207. 	></div>
  208. 	<div id="footermiddle"
  209. 		><img src="/images/footerLeft_fill.jpg" name="footerLeft" width="73" height="170" border="0" alt="" /
  210. 		><img src="/images/footerMiddle.jpg" name="footerMiddle" width="836" height="170" border="0" alt="" /
  211. 		><img src="/images/footerRight_fill.jpg" name="footerRight" width="66" height="170" border="0" alt="" /
  212. 	></div>
  213. 	<div id="footerbottom"
  214. 		><img src="/images/footerBottom.jpg" name="footerBottom" width="975" height="37" border="0" alt="" /
  215. 	></div>
  216. </div>
  217.  
  218. </body>
  219. </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.
Last edited by PsychicTide; Aug 25th, 2008 at 10:00 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 66
Reputation: PsychicTide is an unknown quantity at this point 
Solved Threads: 7
PsychicTide's Avatar
PsychicTide PsychicTide is offline Offline
Junior Poster in Training

Re: Div width and list margin problem

 
0
  #2
Aug 26th, 2008
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 66
Reputation: PsychicTide is an unknown quantity at this point 
Solved Threads: 7
PsychicTide's Avatar
PsychicTide PsychicTide is offline Offline
Junior Poster in Training

Re: Div width and list margin problem

 
0
  #3
Aug 27th, 2008
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...
Last edited by PsychicTide; Aug 27th, 2008 at 5:39 pm.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC