HTML and CSS RSS HTML and CSS RSS

LogicWeb / CSS Question

Reply
1 2

•
•
Join Date: Jan 2008
Posts: 39
Reputation: LogicWeb is an unknown quantity at this point 
Solved Threads: 0
LogicWeb LogicWeb is offline Offline
Light Poster

LogicWeb / CSS Question

 
0
  #1
Feb 4th, 2008
I would appreciate if any designer can help me out on these two issues I'm trying to solve.

To clarify, I'm using Firefox 2 on Vista 64 bit Ultimate.

I also tested it with IE7 (32bit and 64bit versions).

Same problem on all 3 browsers / versions.

#1

The green hover disappears on the tab when the drop down is visible
Hovered on Tab
http://aycu40.webshots.com/image/420...8255486_rs.jpg

Hovered on tab's sub menu, green disappears (but should not)
http://aycu24.webshots.com/image/443...5326122_rs.jpg

Entire site.css file

HTML and CSS Syntax (Toggle Plain Text) 
  1. body {
  2. margin:0px;
  3. padding:0px;
  4. border:0px;
  5. color:#738f93;
  6. font-family: Tahoma, "Trebuchet MS", Arial, Verdana, Lucida, Sans-Serif;
  7. font-size:12px;
  8. line-height:16px;
  9. background-color:#c3dcf1;
  10. background-image:url(../images/bgd_page.gif);
  11. background-repeat:repeat-x;
  12. }
  13.  
  14.  
  15. A:link, A:active, A:visited {
  16. color:#2fb4c8;
  17. text-decoration: none;
  18. }
  19.  
  20. A:hover {
  21. color:#2fb4c8;
  22. text-decoration: underline;
  23. }
  24.  
  25. /* ------------------ */
  26. /* primary navigation */
  27. /* ------------------ */
  28.  
  29. #menu {
  30. margin:0px;
  31. padding:0px;
  32. background-image:url(../images/navigation/primary_nav_full_bgd.gif);
  33. background-repeat:no-repeat;
  34. height:42px;
  35. }
  36.  
  37. ul#primary-navigation {
  38. margin:0px;
  39. padding:0px;
  40. white-space: nowrap;
  41. padding:10px 0px 0px 14px;
  42. }
  43.  
  44. #primary-navigation li {
  45. margin:0px;
  46. padding:0px;
  47. display:inline;
  48. list-style-type: none;
  49. float:left;
  50. margin: 0 5px 0 0;
  51. }
  52.  
  53. #primary-navigation li a {
  54. display:block;
  55. padding:0;
  56. margin-right:4px;
  57. }
  58.  
  59.  
  60.  
  61.  
  62. /* These items were changed */
  63.  
  64. #primary-navigation li a span { display: none;}
  65.  
  66.  
  67. #menuItemHome .tab,
  68. #menuItemServices .tab,
  69. #menuItemWhy .tab,
  70. #menuItemSupport .tab, 
  71. #menuItemAbout .tab, 
  72. #menuItemPartner .tab { display: block; height: 32px;  }
  73.  
  74. #menuItemHome .tab { width: 64px; background:url(../images/navigation/_home.gif) no-repeat top left;}
  75. #menuItemServices .tab { width: 80px; background:url(../images/navigation/_services.gif) no-repeat top left;}
  76. #menuItemWhy .tab { width: 79px; background:url(../images/navigation/_why.gif) no-repeat top left}
  77. #menuItemSupport .tab { width: 80px; background:url(../images/navigation/_support.gif) no-repeat top left}
  78. #menuItemAbout .tab { width: 86px; background:url(../images/navigation/_about.gif) no-repeat top left}
  79. #menuItemPartner .tab { width: 86px; background:url(../images/navigation/_order.gif) no-repeat top left}
  80.  
  81. #menuItemHome .tab:hover,
  82. #menuItemServices .tab:hover,
  83. #menuItemWhy .tab:hover,
  84. #menuItemSupport .tab:hover,
  85. #menuItemAbout .tab:hover,
  86. #menuItemPartner .tab:hover {background-position: left bottom;}
  87.  
  88.  
  89.  
  90.  
  91.  
  92.  
  93.  
  94.  
  95. /* drop down box elements */
  96.  
  97. #primary-navigation li ul {
  98. position:absolute;
  99. width:150px;
  100. left:-999em;
  101. margin:0px;
  102. padding:0px;
  103. font-size:11px;
  104. color:white;
  105. }
  106.  
  107. #primary-navigation li:hover ul, #primary-navigation li.sfHover ul {
  108. left: auto;
  109. }
  110.  
  111. /* individual drop down menu widths */
  112.  
  113. #dropMenuServices li, #dropMenuWhy li, #dropMenuSupport li, #dropMenuAbout li, #dropMenuPartner li {
  114. margin:0;
  115. padding:0;
  116. display:block;
  117. }
  118.  
  119. #dropMenuServices a, #dropMenuWhy a, #dropMenuSupport a, #dropMenuAbout a, #dropMenuPartner a  {
  120. width:140px;
  121. }
  122.  
  123. #dropMenuServices a {
  124. width:175px;
  125. }
  126.  
  127.  
  128. #dropMenuServices a:link, #dropMenuWhy a:link, #dropMenuSupport a:link, #dropMenuAbout a:link, #dropMenuPartner a:link {color:white;}
  129.  
  130. #dropMenuServices a:visited, #dropMenuWhy a:visited, #dropMenuSupport a:visited, #dropMenuAbout a:visited, #dropMenuPartner a:visited {color:white;}
  131.  
  132.  
  133. #dropMenuServices li a:link, #dropMenuServices li a:visited, #dropMenuWhy li a:link, #dropMenuWhy li a:visited, #dropMenuSupport li a:link, #dropMenuSupport li a:visited, #dropMenuAbout li a:link, #dropMenuAbout li a:visited, #dropMenuPartner li a:link, #dropMenuPartner li a:visited {
  134. background-image: url(../images/navigation/primarynav_drop_item.gif);
  135. background-repeat:repeat;
  136. background-position:top left;
  137. padding:5px;
  138. }
  139.  
  140. #dropMenuServices li a:hover, #dropMenuServices li a:active, #dropMenuWhy li a:hover, #dropMenuWhy li a:active, #dropMenuSupport li a:hover, #dropMenuSupport li a:active, #dropMenuAbout li a:hover, #dropMenuAbout li a:active, #dropMenuPartner li a:hover, #dropMenuPartner li a:active {
  141. background-image: url(../images/navigation/primarynav_drop_item_hover.gif);
  142. background-repeat:repeat;
  143. background-position:bottom;
  144. padding:5px;
  145. }
  146.  
  147. /* ---------------- */
  148. /*  general layout  */
  149. /* ---------------- */
  150.  
  151. #header{
  152. margin:auto;
  153. width:834px;
  154. }
  155.  
  156. #body-container {
  157. margin:auto;
  158. padding:18px 18px 0px 18px;
  159. /* box model hack for ie 5.5 */
  160. width:834px;
  161. voice-family: "\"}\""; 
  162. voice-family:inherit;
  163. width:798px;
  164. background-color:#FFFFFF;
  165. }
  166.  
  167. #body-container-client {
  168. margin:auto;
  169. padding:18px 18px 0px 18px;
  170. /* box model hack for ie 5.5 */
  171. width:834px;
  172. voice-family: "\"}\""; 
  173. voice-family:inherit;
  174. width:798px;
  175. background-color:#FFFFFF;
  176. }
  177.  
  178. #body-container-client-support {
  179. margin:auto;
  180. padding:9px 9px 0px 9px;
  181. /* box model hack for ie 5.5 */
  182. width:834px;
  183. voice-family: "\"}\""; 
  184. voice-family:inherit;
  185. width:816px;
  186. background-color:#FFFFFF;
  187. }
  188.  
  189. /* ------------------------- */
  190. /*      sub-menu tabs      */
  191. /* ------------------------- */
  192.  
  193. #tabcell td:hover {
  194. background:#c3dcf1;
  195. }
  196.  
  197. /* ---------------- */
  198. /*      footer      */
  199. /* ---------------- */
  200.  
  201. #footer {
  202. margin:auto;
  203. margin-top:10px;
  204. padding:18px;
  205. /* box model hack for ie 5.5 */
  206. width:834px;
  207. voice-family: "\"}\""; 
  208. voice-family:inherit;
  209. width:798px;
  210. background-color:#9ec5e5;
  211. border:1px solid #93c5ef;
  212. border-top:none;
  213. }
  214.  
  215. #footer-navigation {
  216. color:white;
  217. font-size:11px;
  218. line-height:20px;
  219. }
  220.  
  221. #footer-navigation li:hover {
  222. background:#8bb6d9;
  223. }
  224.  
  225. #footer-navigation a {
  226. color:white;
  227. }
  228.  
  229. #footer-navigation a:hover {
  230. color:white;
  231. }
  232.  
  233. .f_home {
  234. width:40px;
  235. float:left;
  236. margin-right:8px;
  237. }
  238.  
  239. .f_services {
  240. width:140px;
  241. float:left;
  242. margin-right:8px;
  243. }
  244.  
  245. .f_whyus {
  246. width:90px;
  247. float:left;
  248. margin-right:8px;
  249. }
  250. .f_support {
  251. width:130px;
  252. float:left;
  253. margin-right:8px;
  254. }
  255. .f_about {
  256. width:120px;
  257. float:left;
  258. margin-right:8px;
  259. }
  260. .f_cc {
  261. width:800px;
  262. float:left;
  263. margin-right:8px;
  264. }
  265.  
  266. .footer-navigation-heading {
  267. color:white;
  268. font-size:11px;
  269. font-family:inherit;
  270. font-weight:normal;
  271. background-color:#8bb6d9;
  272. margin:0px;
  273. padding:6px;
  274. }
  275.  
  276. .footer-navigation-heading2 {
  277. color:#white;
  278. font-size:11px;
  279. font-family:inherit;
  280. font-weight:normal;
  281. background-color:#8bb6d9;
  282. margin:0px;
  283. padding:3px 6px 3px 6px;
  284. }
  285.  
  286. .footer-navigation-cc {
  287. color:#8bb6d9;
  288. font-size:14px;
  289. font-family:inherit;
  290. font-weight:normal;
  291. background-color:#fff;
  292. margin:0px;
  293. padding:5px;
  294. border:3px solid #8bb6d9;
  295. text-align: center;
  296. vertical-align: super;
  297. }
  298.  
  299. ul.f_services, ul.f_whyus, ul.f_support, ul.f_about
  300. {
  301.  margin:0px;
  302.  padding: 0px;
  303.  text-align:left;
  304. }
  305.  
  306. ul.f_services li, ul.f_whyus li, ul.f_support li, ul.f_about li
  307. {
  308.  list-style:none;
  309.  margin:0px;
  310.  padding:3px 0px 3px 6px;
  311.  border-bottom:1px dotted #fff;
  312. }
  313.  
  314. #contactdetails {
  315. float:right;
  316. background-color:#FFFFFF;
  317. width:230px;
  318. padding: 10px 0px 10px 0px;
  319. }
  320.  
  321. #contactdetails p {
  322. padding:0px 0px 0px 10px;
  323. }
  324.  
  325. /* ------------------------- */
  326. /*     hover buttons       */
  327. /* ------------------------- */
  328.  
  329. button { 
  330.   border:0; 
  331.   cursor:pointer; 
  332.   font-weight:bold; 
  333.   padding:0 10px 0 0; 
  334.   text-align:center;
  335.   text-decoration: none;
  336. }
  337. button span { 
  338.   position:relative; 
  339.   display:block; 
  340.   white-space:nowrap; 
  341.   padding:0 0 0 10px; 
  342.   text-align:center;
  343. }
  344.  
  345. /*blue buttons*/
  346. button.submitBtn { 
  347.   background:url(../images/btn_blue_right.gif) right no-repeat; 
  348.   font-size:1.3em; 
  349. }
  350. button.submitBtn span { 
  351.   height:50px; 
  352.   line-height:50px;
  353.   background:url(../images/btn_blue_left.gif) left no-repeat;
  354.   color:#fff; 
  355. }
  356. button.submitBtn:hover {
  357.   background:url(../images/btn_blue_right_hover.gif) right no-repeat; 
  358. }
  359. button.submitBtn:hover span {
  360.   background:url(../images/btn_blue_left_hover.gif) left no-repeat; 
  361. }
  362.  
  363. /* ------------------------- */
  364. /*           Chat Logo         */
  365. /* ------------------------- */
  366.  
  367. #imgmap {
  368.     position: relative;
  369. }
  370.  
  371.  
  372. #area1 {
  373.     position: absolute;
  374.     display: block;
  375.     left: 603px;
  376.     top: 37px;
  377.     width: 227px;
  378.     height: 47px;
  379. }

Portion of a sub page (example)

HTML and CSS 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" dir="ltr" lang="en" xml:lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  5. <title>LogicWeb, a smart web solution</title>
  6. <meta name="author" content="LogicWeb" />
  7. <meta name="description" content="LogicWeb, provider of affordable website hosting since 2004." />
  8. <meta name="keywords" content="web hosting, hosting, shared hosting, reseller hosting, cheap domains, multiple domains, affordable web hosting, support, savvis datacenter, LogicWeb, cenixhost, webhost, web host, inexpensive, cheap, australia, bundle multi-accounts, united states, webhosting from savvis, website hosting, reliable, affordable, solutions, services, quality, superior uptime, designers, developers, web agencies, hosting plans, large bandwidth" />
  9.  
  10. <style type="text/css">
  11. <!--
  12. @import url("styles/site.css");
  13. @import url("styles/homepage.css");
  14. #menuItemHome .tab { background:url(images/navigation/on_home.gif) no-repeat top left; }
  15. .style1 {
  16. 	border-width: 0;
  17. }
  18. .style2 {
  19. 	color: #FF722B;
  20. }
  21. .style3 {
  22. 	text-decoration: underline;
  23. }
  24. -->
  25. </style>
  26.  
  27. <script type="text/javascript" src="scripts/tabber.js"></script>
  28. <link rel="stylesheet" href="styles/tabs.css" type="text/css" media="screen" />
  29. <!--[if IE]>
  31. <script type="text/javascript">try {  document.execCommand(\'BackgroundImageCache\', false, true); } catch(e) {}</script>
  32. <link rel="stylesheet" type="text/css" href="'core/css/designIE.css" />
  33. <style type="text/css">body { behavior: url('.$siteurl.'css/hover-css.htc); }</style>
  34. <![endif]-->
  35. </head>
  36. <body>
  37.  
  38. <div id="header">
  39. <div id="imgmap">
  40.     <a href="/index.php">
  41.     <img src="images/header.gif" alt="Logo" class="style1" /></a>
  42. 	<a id="area1" href="#" onclick="window.open('http://messenger.providesupport.com/messenger/chadi.html', '_blank', 'menubar=0,location=0,scrollbars=auto,resizable=1,status=0,width=500,height=460')"></a>
  43. </div>
  44.  
  45. <div id="menu">
  46. <ul id="primary-navigation">
  47. <li id="menuItemHome"><a class="tab" href="http://www.logicweb.com"><span>Home</span></a></li>
  48. <li id="menuItemServices"><a class="tab" href="/services/index.php"><span>Services</span></a>
  49. <ul id="dropMenuServices"><li><a href="/services/shared.php">Shared Hosting Plans</a></li>
  50. <li><a href="/services/reseller.php">Reseller Hosting Plans</a></li>
  51. <li><a href="/services/vps/index.php">Virtual Private Servers</a></li>
  52. <li><a href="/services/server/index.php">Linux / Windows Dedicated Servers</a></li>
  53. <li><a href="/services/compare.php">Compare Hosting Types</a></li>
  54. <li><a href="/services/index.php">Additional Services</a></li>
  55. <li><img src="images/navigation/dropmenu_bottom_services.gif" alt="Drop Menu" /></li></ul></li>
  56.  
  57. <li id="menuItemWhy"><a class="tab" href="/reasons/index.php"><span>Why Us?</span></a>
  58. <ul id="dropMenuWhy"><li><a href="/reasons/awards.php">Awards</a></li>
  59. <li><a href="/network/index.php">Data Center</a></li>
  60. <li><a href="/reasons/index.php">Logical Solutions</a></li>
  61. <li><a href="/reasons/guarantee.php">Guarantee</a></li>
  62. <li><a href="/reasons/testimonials.php">Testimonials</a></li>
  63. <li><img src="images/navigation/dropmenu_bottom_why.gif" alt="Drop Menu" /></li></ul></li>
  64.  
  65. <li id="menuItemSupport"><a class="tab" href="/portal/index.php"><span>Support</span></a>
  66. <ul id="dropMenuSupport"><li><a href="https://www.logicweb.com/billing">Billing Portal</a></li>
  67. <li><a href="/portal/contact.php">Contact Us</a></li><li><a href="https://www.logicweb.com/support/index.php?_m=knowledgebase&amp;a=view">Knowledgebase</a></li>
  68. <li><a href="/portal/index.php">Support Desk</a></li><li><img src="images/navigation/dropmenu_bottom_why.gif" alt="Drop Menu" /></li></ul></li>
  69.  
  70. <li id="menuItemAbout"><a class="tab" href="/aboutus/index.php"><span>About Us</span></a>
  71. <ul id="dropMenuAbout"><li><a href="/aboutus/company.php">Company Overview</a></li>
  72. <li><a href="/aboutus/aup.php">Acceptable Use Policy</a></li>
  73. <li><a href="/aboutus/contact.php">Contact Us</a></li>
  74. <li><a href="/aboutus/dmca.php">DMCA</a></li>
  75. <li><a href="/aboutus/faq.php">FAQ</a></li>
  76. <li><a href="/aboutus/privacy.php">Privacy</a></li>
  77. <li><a href="/aboutus/tos.php">Terms of Service</a></li>
  78. <li><img src="images/navigation/dropmenu_bottom_why.gif" alt="Drop Menu" /></li></ul></li>
  79.  
  80. <li id="menuItemPartner"><a class="tab" href="https://www.logicweb.com/billing/cart.php"><span>Partner</span></a></li>
  81. </ul>
  82. </div>
  83. </div>

#2

I actually just noticed another problem in IE7 specifically (32bit / 64bit same). I know IE is horrible, but from an accessibility point of view I have to try anything I can to make sure it works for all.

See attached. The drop down does not go away when you hover to another tab.

http://aycu25.webshots.com/image/439...3275998_rs.jpg
Talk Jesus Forums [ Over 100 Fulfilled Prophecies in the Bible: click here ]
.....................................................................................
LogicWeb...a smart web solution [ hosting for personal and business since 2004 ]
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2007
Posts: 1,429
Reputation: Nichito is an unknown quantity at this point 
Solved Threads: 29
Featured Poster
Nichito's Avatar
Nichito Nichito is offline Offline
Nearly a Posting Virtuoso

Re: LogicWeb / CSS Question

 
0
  #2
Feb 6th, 2008
shouldn't the dropdown menu be designed in javascript?
-->sometimes i wanna take my toaster in a bath<--
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2008
Posts: 39
Reputation: LogicWeb is an unknown quantity at this point 
Solved Threads: 0
LogicWeb LogicWeb is offline Offline
Light Poster

Re: LogicWeb / CSS Question

 
0
  #3
Feb 6th, 2008
It was designed in css and was working fine until someone else suggested switching to sliding menus style to fix the disappearing tab upon initial hover.
Talk Jesus Forums [ Over 100 Fulfilled Prophecies in the Bible: click here ]
.....................................................................................
LogicWeb...a smart web solution [ hosting for personal and business since 2004 ]
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2007
Posts: 1,429
Reputation: Nichito is an unknown quantity at this point 
Solved Threads: 29
Featured Poster
Nichito's Avatar
Nichito Nichito is offline Offline
Nearly a Posting Virtuoso

Re: LogicWeb / CSS Question

 
0
  #4
Feb 6th, 2008
do you have a backup? maybe you could turn back to a restore point and start again with the sliding menus and see where it went the wrong way...
-->sometimes i wanna take my toaster in a bath<--
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2008
Posts: 39
Reputation: LogicWeb is an unknown quantity at this point 
Solved Threads: 0
LogicWeb LogicWeb is offline Offline
Light Poster

Re: LogicWeb / CSS Question

 
0
  #5
Feb 7th, 2008
I do have a backup, but the original problem was the disappearing tabs on initial page load / hover. The whole point of sliding doors was to fix this problem.
Talk Jesus Forums [ Over 100 Fulfilled Prophecies in the Bible: click here ]
.....................................................................................
LogicWeb...a smart web solution [ hosting for personal and business since 2004 ]
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2004
Posts: 434
Reputation: FC Jamison is on a distinguished road 
Solved Threads: 20
Team Colleague
FC Jamison's Avatar
FC Jamison FC Jamison is offline Offline
Posting Pro in Training

Re: LogicWeb / CSS Question

 
0
  #6
Feb 8th, 2008
Your initial problem should be able to be resolved by preloading the rollover images.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2008
Posts: 39
Reputation: LogicWeb is an unknown quantity at this point 
Solved Threads: 0
LogicWeb LogicWeb is offline Offline
Light Poster

Re: LogicWeb / CSS Question

 
0
  #7
Feb 11th, 2008
•
•
•
•
Originally Posted by FC Jamison View Post
Your initial problem should be able to be resolved by preloading the rollover images.
Thanks for your response. I'm not a designer by trade, so please if you may help me out on how to achieve. I'm getting mixed Google search results here.

My site.css sheet currently is this

HTML and CSS Syntax (Toggle Plain Text) 
  1. body {
  2. margin:0px;
  3. padding:0px;
  4. border:0px;
  5. color:#738f93;
  6. font-family: Tahoma, "Trebuchet MS", Arial, Verdana, Lucida, Sans-Serif;
  7. font-size:12px;
  8. line-height:16px;
  9. background-color:#c3dcf1;
  10. background-image:url(../images/bgd_page.gif);
  11. background-repeat:repeat-x;
  12. }
  13.  
  14. A:link, A:active, A:visited {
  15. color:#2fb4c8;
  16. text-decoration: none;
  17. }
  18.  
  19. A:hover {
  20. color:#2fb4c8;
  21. text-decoration: underline;
  22. }
  23.  
  24. /* ------------------ */
  25. /* primary navigation */
  26. /* ------------------ */
  27.  
  28. #menu {
  29. margin:0px;
  30. padding:0px;
  31. background-image:url(../images/navigation/primary_nav_full_bgd.gif);
  32. background-repeat:no-repeat;
  33. height:42px;
  34. }
  35.  
  36. ul#primary-navigation {
  37. margin:0px;
  38. padding:0px;
  39. white-space: nowrap;
  40. padding:10px 0px 0px 14px;
  41. }
  42.  
  43. #primary-navigation li {
  44. margin:0px;
  45. padding:0px;
  46. display:inline;
  47. list-style-type: none;
  48. float:left;
  49. margin: 0 5px 0 0;
  50. }
  51.  
  52. #primary-navigation li a {
  53. display:block;
  54. padding:0;
  55. margin-right:0px;
  56. }
  57.  
  58. #menuItemHome,
  59. #menuItemServices,
  60. #menuItemWhy,
  61. #menuItemSupport, 
  62. #menuItemAbout, 
  63. #menuItemOrder { display: block; height: 32px; }
  64.  
  65. #menuItemHome { width: 64px; background:url(../images/navigation/_home.gif); background-repeat:no-repeat; background-position:top left;}
  66. #menuItemServices { width: 80px; background:url(../images/navigation/_services.gif); background-repeat:no-repeat; background-position:top left;}
  67. #menuItemWhy { width: 79px; background:url(../images/navigation/_why.gif); background-repeat:no-repeat; background-position:top left;}
  68. #menuItemSupport { width: 80px; background:url(../images/navigation/_support.gif); background-repeat:no-repeat; background-position:top left;}
  69. #menuItemAbout { width: 86px; background:url(../images/navigation/_about.gif); background-repeat:no-repeat; background-position:top left;}
  70. #menuItemOrder { width: 86px; background:url(../images/navigation/_order.gif); background-repeat:no-repeat; background-position:top left;}
  71.  
  72. #menuItemHome:hover {position: static; background-image:url(../images/navigation/active_home.gif);}
  73. #menuItemServices:hover {position: static; background-image:url(../images/navigation/active_services.gif);}
  74. #menuItemWhy:hover {position: static; background-image:url(../images/navigation/active_why.gif);}
  75. #menuItemSupport:hover {position: static; background-image:url(../images/navigation/active_support.gif);}
  76. #menuItemAbout:hover {position: static; background-image:url(../images/navigation/active_about.gif);}
  77. #menuItemOrder:hover {position: static; background-image:url(../images/navigation/active_order.gif);}
  78.  
  79. /* drop down box elements */
  80.  
  81. #primary-navigation li ul {
  82. position:absolute;
  83. width:150px;
  84. left:-999em;
  85. margin:0px;
  86. padding:0px;
  87. font-size:11px;
  88. color:white;
  89. }
  90.  
  91. #primary-navigation li:hover ul, #primary-navigation li.sfHover ul {
  92. left: auto;
  93. }
  94.  
  95. /* individual drop down menu widths */
  96.  
  97. #dropMenuServices li, #dropMenuWhy li, #dropMenuSupport li, #dropMenuAbout li, #dropMenuPartner li {
  98. margin:0;
  99. padding:0;
  100. display:block;
  101. }
  102.  
  103. #dropMenuServices a, #dropMenuWhy a, #dropMenuSupport a, #dropMenuAbout a, #dropMenuPartner a  {
  104. width:140px;
  105. }
  106.  
  107. #dropMenuServices a {
  108. width:175px;
  109. }
  110.  
  111. #dropMenuServices a:link, #dropMenuWhy a:link, #dropMenuSupport a:link, #dropMenuAbout a:link, #dropMenuPartner a:link {color:white;}
  112.  
  113. #dropMenuServices a:visited, #dropMenuWhy a:visited, #dropMenuSupport a:visited, #dropMenuAbout a:visited, #dropMenuPartner a:visited {color:white;}
  114.  
  115. #dropMenuServices li a:link, #dropMenuServices li a:visited, #dropMenuWhy li a:link, #dropMenuWhy li a:visited, #dropMenuSupport li a:link, #dropMenuSupport li a:visited, #dropMenuAbout li a:link, #dropMenuAbout li a:visited, #dropMenuPartner li a:link, #dropMenuPartner li a:visited {
  116. background-image: url(../images/navigation/primarynav_drop_item.gif);
  117. background-repeat:repeat;
  118. background-position:top left;
  119. padding:5px;
  120. }
  121.  
  122. #dropMenuServices li a:hover, #dropMenuServices li a:active, #dropMenuWhy li a:hover, #dropMenuWhy li a:active, #dropMenuSupport li a:hover, #dropMenuSupport li a:active, #dropMenuAbout li a:hover, #dropMenuAbout li a:active, #dropMenuPartner li a:hover, #dropMenuPartner li a:active {
  123. background-image: url(../images/navigation/primarynav_drop_item_hover.gif);
  124. background-repeat:repeat;
  125. background-position:bottom;
  126. padding:5px;
  127. }
  128.  
  129. /* ---------------- */
  130. /*  general layout  */
  131. /* ---------------- */
  132.  
  133. #header{
  134. margin:auto;
  135. width:834px;
  136. }
  137.  
  138. #body-container {
  139. margin:auto;
  140. padding:18px 18px 0px 18px;
  141. /* box model hack for ie 5.5 */
  142. width:834px;
  143. voice-family: "\"}\""; 
  144. voice-family:inherit;
  145. width:798px;
  146. background-color:#FFFFFF;
  147. }
  148.  
  149. #body-container-client {
  150. margin:auto;
  151. padding:18px 18px 0px 18px;
  152. /* box model hack for ie 5.5 */
  153. width:834px;
  154. voice-family: "\"}\""; 
  155. voice-family:inherit;
  156. width:798px;
  157. background-color:#FFFFFF;
  158. }
  159.  
  160. #body-container-client-support {
  161. margin:auto;
  162. padding:9px 9px 0px 9px;
  163. /* box model hack for ie 5.5 */
  164. width:834px;
  165. voice-family: "\"}\""; 
  166. voice-family:inherit;
  167. width:816px;
  168. background-color:#FFFFFF;
  169. }
  170.  
  171. /* ------------------------- */
  172. /*      sub-menu tabs      */
  173. /* ------------------------- */
  174.  
  175. #tabcell td:hover {
  176. background:#c3dcf1;
  177. }
  178.  
  179. /* ---------------- */
  180. /*      footer      */
  181. /* ---------------- */
  182.  
  183. #footer {
  184. margin:auto;
  185. margin-top:10px;
  186. padding:18px;
  187. /* box model hack for ie 5.5 */
  188. width:834px;
  189. voice-family: "\"}\""; 
  190. voice-family:inherit;
  191. width:798px;
  192. background-color:#9ec5e5;
  193. border:1px solid #93c5ef;
  194. border-top:none;
  195. }
  196.  
  197. #footer-navigation {
  198. color:white;
  199. font-size:11px;
  200. line-height:20px;
  201. }
  202.  
  203. #footer-navigation li:hover {
  204. background:#8bb6d9;
  205. }
  206.  
  207. #footer-navigation a {
  208. color:white;
  209. }
  210.  
  211. #footer-navigation a:hover {
  212. color:white;
  213. }
  214.  
  215. .f_home {
  216. width:40px;
  217. float:left;
  218. margin-right:8px;
  219. }
  220.  
  221. .f_services {
  222. width:140px;
  223. float:left;
  224. margin-right:8px;
  225. }
  226.  
  227. .f_whyus {
  228. width:90px;
  229. float:left;
  230. margin-right:8px;
  231. }
  232. .f_support {
  233. width:130px;
  234. float:left;
  235. margin-right:8px;
  236. }
  237. .f_about {
  238. width:120px;
  239. float:left;
  240. margin-right:8px;
  241. }
  242. .f_cc {
  243. width:800px;
  244. float:left;
  245. margin-right:8px;
  246. }
  247.  
  248. .footer-navigation-heading {
  249. color:white;
  250. font-size:11px;
  251. font-family:inherit;
  252. font-weight:normal;
  253. background-color:#8bb6d9;
  254. margin:0px;
  255. padding:6px;
  256. }
  257.  
  258. .footer-navigation-heading2 {
  259. color:white;
  260. font-size:11px;
  261. font-family:inherit;
  262. font-weight:normal;
  263. background-color:#8bb6d9;
  264. margin:0px;
  265. padding:3px 6px 3px 6px;
  266. }
  267.  
  268. .footer-navigation-cc {
  269. color:#8bb6d9;
  270. font-size:14px;
  271. font-family:inherit;
  272. font-weight:normal;
  273. background-color:#fff;
  274. margin:0px;
  275. padding:5px;
  276. border:3px solid #8bb6d9;
  277. text-align: center;
  278. vertical-align: super;
  279. }
  280.  
  281. ul.f_services, ul.f_whyus, ul.f_support, ul.f_about
  282. {
  283.  margin:0px;
  284.  padding: 0px;
  285.  text-align:left;
  286. }
  287.  
  288. ul.f_services li, ul.f_whyus li, ul.f_support li, ul.f_about li
  289. {
  290.  list-style:none;
  291.  margin:0px;
  292.  padding:3px 0px 3px 6px;
  293.  border-bottom:1px dotted #fff;
  294. }
  295.  
  296. #contactdetails {
  297. float:right;
  298. background-color:#FFFFFF;
  299. width:230px;
  300. padding: 10px 0px 10px 0px;
  301. }
  302.  
  303. #contactdetails p {
  304. padding:0px 0px 0px 10px;
  305. }
  306.  
  307. /* ------------------------- */
  308. /*     hover buttons       */
  309. /* ------------------------- */
  310.  
  311. button { 
  312.   border:0; 
  313.   cursor:pointer; 
  314.   font-weight:bold; 
  315.   padding:0 10px 0 0; 
  316.   text-align:center;
  317.   text-decoration: none;
  318. }
  319. button span { 
  320.   position:relative; 
  321.   display:block; 
  322.   white-space:nowrap; 
  323.   padding:0 0 0 10px; 
  324.   text-align:center;
  325. }
  326.  
  327. /*blue buttons*/
  328. button.submitBtn { 
  329.   background:url(../images/btn_blue_right.gif) right no-repeat; 
  330.   font-size:1.3em; 
  331. }
  332. button.submitBtn span { 
  333.   height:50px; 
  334.   line-height:50px;
  335.   background:url(../images/btn_blue_left.gif) left no-repeat;
  336.   color:#fff; 
  337. }
  338. button.submitBtn:hover {
  339.   background:url(../images/btn_blue_right_hover.gif) right no-repeat; 
  340. }
  341. button.submitBtn:hover span {
  342.   background:url(../images/btn_blue_left_hover.gif) left no-repeat; 
  343. }
  344.  
  345. /* ------------------------- */
  346. /*		   Chat Logo         */
  347. /* ------------------------- */
  348.  
  349. #imgmap {
  350.     position: relative;
  351. }
  352.  
  353. #area1 {
  354.     position: absolute;
  355.     display: block;
  356.     left: 603px;
  357.     top: 37px;
  358.     width: 227px;
  359.     height: 47px;
  360. }


The html is this:


HTML and CSS Syntax (Toggle Plain Text) 
  1. <div id="menu">
  2. <ul id="primary-navigation">
  3. <li id="menuItemHome"><a href="http://www.logicweb.com"><img src="images/navigation/spacer_home.gif" border="0" alt="home" /></a></li>
  4. <li id="menuItemServices"><a href="/services/index.php"><img src="images/navigation/spacer_services.gif" border="0" alt="services" /></a><ul id="dropMenuServices"><li><a href="/services/shared.php">Shared Hosting Plans</a></li><li><a href="/services/reseller.php">Reseller Hosting Plans</a></li><li><a href="/services/vps/index.php">Virtual Private Servers</a></li><li><a href="/services/server/index.php">Linux / Windows Dedicated Servers</a></li><li><a href="/services/compare.php">Compare Hosting Types</a></li><li><a href="/services/index.php">Additional Services</a></li><li><img src="images/navigation/dropmenu_bottom_services.gif" border="0" alt="" /></li></ul></li>
  5. <li id="menuItemWhy"><a href="/reasons/index.php"><img src="images/navigation/spacer_why.gif" border="0" alt="why us?" /></a><ul id="dropMenuWhy"><li><a href="/reasons/awards.php">Awards</a></li><li><a href="/network/index.php">Data Center</a></li><li><a href="/reasons/index.php">Logical Solutions</a></li><li><a href="/reasons/guarantee.php">Guarantee</a></li><li><a href="/reasons/testimonials.php">Testimonials</a></li><li><img src="images/navigation/dropmenu_bottom_why.gif" border="0" alt="" /></li></ul></li>
  6. <li id="menuItemSupport"><a href="/portal/index.php"><img src="images/navigation/spacer_support.gif" border="0" alt="support" /></a><ul id="dropMenuSupport"><li><a href="https://www.logicweb.com/billing">Billing Portal</a></li><li><a href="/portal/contact.php">Contact Us</a></li><li><a href="https://www.logicweb.com/support/index.php?_m=knowledgebase&amp;a=view">Knowledgebase</a></li><li><a href="/portal/index.php">Support Desk</a></li><li><img src="images/navigation/dropmenu_bottom_why.gif" border="0" alt="" /></li></ul></li>
  7. <li id="menuItemAbout"><a href="/aboutus/index.php"><img src="images/navigation/spacer_about.gif" border="0" alt="about us" /></a><ul id="dropMenuAbout"><li><a href="/aboutus/company.php">Company Overview</a></li><li><a href="/aboutus/aup.php">Acceptable Use Policy</a></li><li><a href="/aboutus/affiliates.php">Affiliates</a></li><li><a href="/aboutus/contact.php">Contact Us</a></li><li><a href="/aboutus/dmca.php">DMCA</a></li><li><a href="/aboutus/faq.php">FAQ</a></li><li><a href="/aboutus/privacy.php">Privacy</a></li><li><a href="/aboutus/tos.php">Terms of Service</a></li><li><img src="images/navigation/dropmenu_bottom_why.gif" border="0" alt="" /></li></ul></li>
  8. <li id="menuItemOrder"><a href="https://www.logicweb.com/billing/cart.php"><img src="images/navigation/spacer_about.gif" border="0" alt="about us" /></a></li>
  9. </ul>
  10. </div>
  11. </div>
Talk Jesus Forums [ Over 100 Fulfilled Prophecies in the Bible: click here ]
.....................................................................................
LogicWeb...a smart web solution [ hosting for personal and business since 2004 ]
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2007
Posts: 1,429
Reputation: Nichito is an unknown quantity at this point 
Solved Threads: 29
Featured Poster
Nichito's Avatar
Nichito Nichito is offline Offline
Nearly a Posting Virtuoso

Re: LogicWeb / CSS Question

 
0
  #8
Feb 12th, 2008
no programmer in his sane mind would try to read your html code... you should try writing it a little bit nicer...
-->sometimes i wanna take my toaster in a bath<--
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2008
Posts: 39
Reputation: LogicWeb is an unknown quantity at this point 
Solved Threads: 0
LogicWeb LogicWeb is offline Offline
Light Poster

Re: LogicWeb / CSS Question

 
0
  #9
Feb 12th, 2008
•
•
•
•
Originally Posted by Nichito View Post
no programmer in his sane mind would try to read your html code... you should try writing it a little bit nicer...
Did it ever occur to you the code is crushed by the small width of the forums? It looks perfectly "nice" in my html editor and source code, had you even tried looking first.

Did you read my post? I am not a designer / programmer. If I was, I wouldn't be here asking for a little help.
Last edited by LogicWeb; Feb 12th, 2008 at 12:57 am.
Talk Jesus Forums [ Over 100 Fulfilled Prophecies in the Bible: click here ]
.....................................................................................
LogicWeb...a smart web solution [ hosting for personal and business since 2004 ]
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2007
Posts: 1,429
Reputation: Nichito is an unknown quantity at this point 
Solved Threads: 29
Featured Poster
Nichito's Avatar
Nichito Nichito is offline Offline
Nearly a Posting Virtuoso

Re: LogicWeb / CSS Question

 
0
  #10
Feb 12th, 2008
dude... take a chill pill...

first of all, not because you're a programmer it means you don't need help... that's what this community is for...

second, i did read, but got stuck when i got to the code... you could use a little indenting... like this:
html Syntax (Toggle Plain Text) 
  1. <div id="menu">
  2. <ul id="primary-navigation">
  3. 	<li id="menuItemHome"><a href="http://www.logicweb.com"><img src="images/navigation/spacer_home.gif" border="0" alt="home" /></a></li>
  4. 	<li id="menuItemServices">
  5. 		<a href="/services/index.php"><img src="images/navigation/spacer_services.gif" border="0" alt="services" /></a>
  6. 		<ul id="dropMenuServices">
  7. 			<li><a href="/services/shared.php">Shared Hosting Plans</a></li>
  8. 			<li><a href="/services/reseller.php">Reseller Hosting Plans</a></li>
  9. 			<li><a href="/services/vps/index.php">Virtual Private Servers</a></li>
  10. 			<li><a href="/services/server/index.php">Linux / Windows Dedicated Servers</a></li>
  11. 			<li><a href="/services/compare.php">Compare Hosting Types</a></li>
  12. 			<li><a href="/services/index.php">Additional Services</a></li>
  13. 			<li><img src="images/navigation/dropmenu_bottom_services.gif" border="0" alt="" /></li>
  14. 		</ul>
  15. 	</li>
  16. 	<li id="menuItemWhy">
  17. 		<a href="/reasons/index.php"><img src="images/navigation/spacer_why.gif" border="0" alt="why us?" /></a>
  18. 		<ul id="dropMenuWhy">
  19. 			<li><a href="/reasons/awards.php">Awards</a></li>
  20. 			<li><a href="/network/index.php">Data Center</a></li>
  21. 			<li><a href="/reasons/index.php">Logical Solutions</a></li>
  22. 			<li><a href="/reasons/guarantee.php">Guarantee</a></li>
  23. 			<li><a href="/reasons/testimonials.php">Testimonials</a></li>
  24. 			<li><img src="images/navigation/dropmenu_bottom_why.gif" border="0" alt="" /></li>
  25. 		</ul>
  26. 	</li>
  27. 	<li id="menuItemSupport">
  28. 		<a href="/portal/index.php"><img src="images/navigation/spacer_support.gif" border="0" alt="support" /></a>
  29. 		<ul id="dropMenuSupport">
  30. 			<li><a href="https://www.logicweb.com/billing">Billing Portal</a></li>
  31. 			<li><a href="/portal/contact.php">Contact Us</a></li>
  32. 			<li><a href="https://www.logicweb.com/support/index.php?_m=knowledgebase&amp;a=view">Knowledgebase</a></li>
  33. 			<li><a href="/portal/index.php">Support Desk</a></li>
  34. 			<li><img src="images/navigation/dropmenu_bottom_why.gif" border="0" alt="" /></li>
  35. 		</ul>
  36. 	</li>
  37. 	<li id="menuItemAbout">
  38. 		<a href="/aboutus/index.php"><img src="images/navigation/spacer_about.gif" border="0" alt="about us" /></a>
  39. 		<ul id="dropMenuAbout">
  40. 			<li><a href="/aboutus/company.php">Company Overview</a></li>
  41. 			<li><a href="/aboutus/aup.php">Acceptable Use Policy</a></li>
  42. 			<li><a href="/aboutus/affiliates.php">Affiliates</a></li>
  43. 			<li><a href="/aboutus/contact.php">Contact Us</a></li>
  44. 			<li><a href="/aboutus/dmca.php">DMCA</a></li>
  45. 			<li><a href="/aboutus/faq.php">FAQ</a></li>
  46. 			<li><a href="/aboutus/privacy.php">Privacy</a></li>
  47. 			<li><a href="/aboutus/tos.php">Terms of Service</a></li>
  48. 			<li><img src="images/navigation/dropmenu_bottom_why.gif" border="0" alt="" /></li>
  49. 		</ul>
  50. 	</li>
  51. 	<li id="menuItemOrder">
  52. 		<a href="https://www.logicweb.com/billing/cart.php"><img src="images/navigation/spacer_about.gif" border="0" alt="about us" /></a>
  53. 	</li>
  54. </ul>
  55. </div>
since you're not a programmer, you can't tell how hard it is to read a disordered code...

btw... fyi, it looks pretty in my html editor...
-->sometimes i wanna take my toaster in a bath<--
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



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 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 swf swf. textcolor timecolor titletags url urlseparatedwords visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC