473,320 Members | 1,930 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Menu alignment issues

I have this issue in my menu where my ul tag wants to float to the right outside of the boxes.
http://beta.heartfeltcreations.us/product-list.php

I have been working on this for a total of 8 hrs and it is bugging me. Any suggestions would be helpful. I added a border on the ul tag to make it easy to see.

Here is my css
Expand|Select|Wrap|Line Numbers
  1. body {
  2.     margin:0px;
  3.     padding:0px;
  4.     font-family:Arial, Helvetica, sans-serif;
  5.     color:#7f7d78;
  6.     font-size:13px;
  7.     height:auto;
  8.     background-color: #000;
  9.  
  10. }
  11. #corpmessage {
  12.     text-align: center;
  13.     background-color: #000;
  14.     height: 32px;
  15.     font-family: Arial, Helvetica, sans-serif;
  16.     color: #FFF;
  17.     font-size: 13px;
  18.     line-height: 30px;
  19.     background-image: url(../images/corpmessage.png);
  20.     background-repeat: repeat-x;
  21.     background-position: left top;
  22.     width: 996px;
  23.     margin-right: auto;
  24.     margin-left: auto;
  25. }
  26.  
  27. img {
  28.     text-decoration: none;
  29.     border-top-width: 0px;
  30.     border-right-width: 0px;
  31.     border-bottom-width: 0px;
  32.     border-left-width: 0px;
  33.     border-top-style: none;
  34.     border-right-style: none;
  35.     border-bottom-style: none;
  36.     border-left-style: none;
  37. }
  38. .main {
  39.     margin: auto;
  40.     height: auto;
  41.     width: auto;
  42. }
  43.  
  44. .container{
  45.     width:996px;
  46.     margin:0 auto;
  47.     position: relative;
  48. }
  49. #header{
  50.     width:996px;
  51.     float:left;
  52.     background-image:url(../images/header_bg.jpg);
  53.     height:130px;
  54.     background-repeat:repeat-x;
  55.     background-position: left bottom;
  56.     background-color: #F5F5F5;
  57.     margin-bottom: 0px;
  58. }
  59. .logo{
  60.     float:left;
  61.     width:368px;
  62.     margin-top: 10px;
  63. }
  64. .headercontain_right{
  65.     float:right;
  66.     width:600px;
  67.     margin-right:12px;
  68. }
  69. .headercontain_right .top_icons ul{
  70.     float:right;
  71.     list-style-type:none;
  72.     margin: 0px;
  73. }
  74. .headercontain_right .top_icons li{display:inline;}
  75. .headercontain_right .top_icons a img{
  76.     border:none;
  77.     padding-left: 2px;
  78. }
  79. .headercontain_right .top_icons li.text{font-family:Arial, Helvetica, sans-serif;font-size:12px; font-weight:bold;}
  80.  
  81. .top_icons{
  82.     float:right;
  83.     width:400px;
  84.     margin-top: 22px;
  85. }
  86.  
  87. .cartlinks{
  88.     float:right;
  89.     margin-top: 7px;
  90.     width: 600px;
  91.     text-align: right;
  92.  
  93. }
  94. .cartlinks a{
  95. color:#6A1725;
  96. font-family:Arial, Helvetica, sans-serif;
  97. font-size:12px;
  98. text-decoration:none;
  99. font-weight:bold;
  100. width:500px;
  101. }
  102. .cartlinks a:hover{color:#333333;}
  103. .headersearchform{
  104.     width:400px;
  105.     margin-top: 16px;
  106.     text-align: right;
  107.     float: right;
  108.     height: 25px;
  109. }
  110. .headersearchform form {
  111.     width: 200px;
  112.     float: right;
  113.     margin: 0px;
  114.     height: 23px;
  115. }
  116. .headersearchform #searchbox  {
  117.     background:url(../images/search_bg_center.jpg) repeat-x;
  118.     height:23px;
  119.     border:0px;
  120.     line-height: 23px;
  121.     font-family: Arial, Helvetica, sans-serif;
  122.     color: #ADADAD;
  123.     padding-right: 5px;
  124.     padding-left: 5px;
  125.     margin: 0px;
  126.     width: 145px;
  127. }
  128. .headersearchform #searchbox {
  129.     background-image:url(../images/search_bg.jpg);
  130.     background-repeat:no-repeat;
  131.     background-position:left center;
  132.     margin: 0px;
  133. }
  134. .headersearchform form #searchbutton  {
  135.     margin-bottom: -6px;
  136.     margin-top: 0px;
  137. }
  138.  
  139.  
  140. #nav{
  141.     width:996px;
  142.     font-family: 'Ruluko', sans-serif;
  143.     font-size:15px;
  144.     background-image:url(../images/link_bg.png);
  145.     height:40px;
  146.     float: left;
  147.     background-repeat: repeat-x;
  148.     background-position: left top;
  149.     display: block;
  150.     margin: 0px;
  151.     background-color: #781929;
  152. }
  153. #nav ul{
  154.     list-style-type:none;
  155.     height:40px;
  156.     margin: 0px;
  157.     width: 996px;
  158. }
  159. #nav li {
  160.     height:40px;
  161.     text-align:center;
  162.     font-family: 'Ruluko', sans-serif;
  163.     font-size:15px;
  164.     font-weight:bold;
  165.     color:#FFFFFF;
  166.     display:block;
  167.     width:100px;
  168.     line-height: 40px;
  169.     margin: 0px;
  170.     background-repeat: no-repeat;
  171.     background-position: right bottom;
  172.     border-right-width: 1px;
  173.     border-right-style: solid;
  174.     border-right-color: #75263D;
  175.     float: left;
  176. }
  177. .main .container #nav ul .lastmenuitem {
  178.     border-top-style: none;
  179.     border-right-style: none;
  180.     border-bottom-style: none;
  181.     border-left-style: none;
  182. }
  183.  
  184.  
  185. #nav li a {
  186.     display:block;
  187.     color:#CCCCCC;
  188.     text-decoration:none;
  189.     line-height: 40px;
  190.     height: 40px;
  191.     font-size: 15px;
  192.     font-weight: bold;
  193.     width: 100px;
  194.     font-family: 'Ruluko', sans-serif;
  195. }
  196. #nav li  a:hover {
  197.     height:40px;
  198.     width:100px;
  199.     line-height:40px;
  200.     display:block;
  201.     font-size: 15px;
  202.     text-decoration: none;
  203.     color: #FFF;
  204.     background-image: url(../images/hoverbutton.png);
  205.     background-repeat: repeat-x;
  206.     background-position: center top;
  207. }
  208.  
  209. #content{
  210.     width:996px;
  211.     background-color: #FFF;
  212.     position: relative;
  213.     float: left;
  214.     padding-bottom: 5px;
  215. }
  216. #section1{
  217.     width:996px;
  218.     height:325px;
  219.     background-color:#fff;
  220.     float: left;
  221. }
  222. #strip{
  223.     float:left;
  224.     width:996px;
  225.     background-image:url(../images/dotted_strip_down.jpg);
  226.     height:8px;
  227.     background-repeat:repeat-x;
  228.     background-position: left top;
  229.     margin-top: 0px;
  230.     margin-bottom: 0px;
  231.     line-height: 8px;
  232. }
  233. #section2 {
  234.     width:996px;
  235.     height:305px;
  236.     background-color:#fff;
  237.     float: left;
  238.     margin-top: 0px;
  239. }
  240.  
  241. #strip2{
  242.     width:996px;
  243.     height:8px;
  244.     background-repeat:repeat-x;
  245.     float: left;
  246.     background-position: left top;
  247.     background-image: url(../images/dotted_strip_up.jpg);
  248.     margin-top: 0px;
  249.     margin-bottom: 0px;
  250. }
  251. #section3 {
  252.     width:996px;
  253.     height:275px;
  254.     background-color:#fff;
  255.     float: left;
  256.     margin-right: auto;
  257.     margin-left: auto;
  258.     position: relative;
  259.     z-index: 1;
  260.     margin-top: 0px;
  261. }
  262.  
  263. .boxes_main{
  264.     width:996px;
  265.     margin-top: 20px;
  266.     margin-bottom: 20px;
  267. }
  268. .boxes{
  269.     float:left;
  270.     width:205px;
  271.     text-align: left;
  272.     padding-left: 35px;
  273.     height: 255px;
  274. }
  275.  
  276. .boxes_text {
  277.     margin-top: 3px;
  278.     margin-bottom: 3px;
  279.     height: 68px;
  280. }
  281.  
  282. #bottom_box{
  283.     width:940px;
  284.     background-color:#ECECF0;
  285.     height:270px;
  286.     position: relative;
  287.     margin-top: 25px;
  288.     margin-left: 28px;
  289.     z-index: 2;
  290.     visibility: visible;
  291.     float: left;
  292. }
  293. #section2 .boxes_main .boxes .featureimg   {
  294.     padding: 5px;
  295.     border: 1px solid #CCC;
  296.     margin-top: 3px;
  297. }
  298. .feature_heading {
  299.     padding-bottom: 5px;
  300. }
  301.  
  302. .bottom_inner_box{
  303.     width:233px;
  304.     margin-top:25px;
  305.     margin-left:30px;
  306.     float: left;
  307.     height: 210px;
  308.     border: 1px solid #CCC;
  309.     background-image: url(../images/box_center.jpg);
  310.     background-repeat: repeat;
  311.     padding-top: 5px;
  312.     padding-bottom: 5px;
  313. }
  314. .bottom_inner_box3{
  315.     width:270px;
  316.     float:left;
  317.     margin-top:30px;
  318.     margin-left:20px;
  319. }
  320. .bottom_inner_box3 input {
  321.     background-image:url(../images/submit_bg.png);
  322.     height:1.95em;
  323.     background-repeat:no-repeat;
  324.     background-position:left center;
  325.     font-family: Arial, Helvetica, sans-serif;
  326.     width: 155px;
  327.     background-color: #FFF;
  328.     margin-left: 38px;
  329.     padding-left: 10px;
  330.     margin-top: 0px;
  331.     margin-right: 0px;
  332.     margin-bottom: 0px;
  333.     border-top-width: 0px;
  334.     border-right-width: 0px;
  335.     border-bottom-width: 0px;
  336.     border-left-width: 0px;
  337.     border-top-style: none;
  338.     border-right-style: none;
  339.     border-bottom-style: none;
  340.     border-left-style: none;
  341.     line-height: 23px;
  342.     color: #ADADAD;
  343. }
  344. .bottom_inner_box3 form #emailsubmit     {
  345.     margin-bottom: -10px;
  346.     margin-left: -12px;
  347.     position: absolute;
  348. }
  349. .bottom_inner_box3 div form div a img {
  350.     padding-left: 3px;
  351. }
  352. .dotted_line{
  353.     float:left;
  354.     margin-left:25px;
  355.     margin-top:40px;
  356. }
  357.  
  358. #footer{
  359.     float:left;
  360.     width:996px;
  361.     background-image:url(../images/bottom.jpg);
  362.     background-position:center bottom;
  363.     background-repeat:repeat-x;
  364.     height: 92px;
  365.     position: relative;
  366.     z-index: -1;
  367. }
  368. #footer .left{
  369.     float:left;
  370.     margin-top:10px;
  371.     margin-left: 50px;
  372. }
  373. #footer .right{
  374.     float:right;
  375.     color:#FFFFFF;
  376.     margin-top:15px;
  377.     margin-right: 50px;
  378. }
  379. .copyrighttext {
  380.     font-family: Arial, Helvetica, sans-serif;
  381.     font-size: 12px;
  382.     text-decoration: none;
  383.     padding-top: 5px;
  384. }
  385.  
  386. #footer .right a{text-decoration:none; color:#FFFFFF;}
  387. #footer .right a:hover{color:#5D1520;}
  388.  
  389. #left_main{
  390.     float:left;
  391.     width:233px;
  392.     margin-left:15px;
  393.     margin-bottom: 20px;
  394.     margin-top: 15px;
  395.     text-align: left;
  396. }
  397.  
  398. .left_inner{
  399.     width:230px;
  400.     border: 1px solid #CCC;
  401.     -moz-border-radius: 5px;
  402.     border-radius: 5px;
  403.     float: left;
  404.     background-image: url(../images/sidebox_center.jpg);
  405.     background-repeat: repeat;
  406.     background-position: left top;
  407.     margin-left: 0px;
  408. }
  409.  
  410. .left_inner ul{
  411.     margin-top:10px;
  412.     margin-bottom:10px;
  413.     padding-left:5px;
  414.     width: 225px;
  415.     list-style-type: none;
  416.     float: left;
  417.     text-align: left;
  418.     border: 1px solid #999;
  419. }
  420.  
  421. .left_inner li{
  422.     text-align: left;
  423. }
  424.  
  425. .left_inner li a{
  426.     text-decoration:none;
  427.     color:#505150;
  428.     font-family:Arial, Helvetica, sans-serif;
  429.     font-size:12px;
  430.     text-align: left;
  431.     line-height: 20px;
  432. }
  433.  
  434. .left_inner  li a img{
  435.     border:0px;
  436.     float:left;
  437.     margin-top:5px;
  438.     margin-left:5px;
  439.     text-align: left;
  440. }
  441.  
  442. .left_emailsignup{
  443.     margin-top:10px;
  444.     width:228px;
  445.     background-image:url(../images/sidebox_center.jpg);
  446.     background-repeat:repeat;
  447.     background-position:left top;
  448.     border: 1px solid #CCC;
  449.     -moz-border-radius: 5px;
  450.     border-radius: 5px;
  451.     padding-top: 3px;
  452.     padding-bottom: 3px;
  453.     padding-left: 2px;
  454.     float: right;
  455. }
  456.  
  457.  
  458. .left_emailsignup .form_text{font-family:Arial, Helvetica, sans-serif; float:left; font-size:12px; text-align:justify; margin-left:15px; width:200px; font-weight:bold;}
  459. .left_emailsignup #leftemail{
  460.     background-image:url(../images/submit_bg.png);
  461.     background-repeat:no-repeat;
  462.     width:170px;
  463.     height:25px;
  464.     background-position:left center;
  465.     border:0px;
  466.     padding-left:5px;
  467.     font-family:Arial, Helvetica, sans-serif;
  468.     font-size:12px;
  469.     margin-right: 0px;
  470.     line-height: 25px;
  471.     float: left;
  472. }
  473. .left_emailsignup form table tr td #submit {
  474.     margin-left: -20px;
  475. }
  476.  
  477. #right_main{float:right; width:720px; margin-right:15px;}
  478.  
Jan 17 '12 #1

✓ answered by heartfelt

Found the fix.
added a margin-left of 0px to the ul tag

2 2333
Stupid i forgot to say which browser this is in.
IE7 is the problem browser
Jan 17 '12 #2
Found the fix.
added a margin-left of 0px to the ul tag
Jan 17 '12 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

10
by: Lionel B | last post by:
Greetings, I have some code that is to read unformatted data from disc and interpret it as blocks of unsigned integers. In an attempt to achieve efficiency (it is pretty essential for my...
5
by: mathemagic | last post by:
Hello All, I apologise if this has been covered by an earlier post. I just wanted to know how the functions of a class are tied to the class. ie, in C structs, since u can have only data...
8
torquehero
by: torquehero | last post by:
Hi everybody, :) I have a regular .htm file created in Dreamweaver MX 2004. Now I want to include another htm file into it as a header. This header .htm contains the website banner and a...
1
by: scream | last post by:
Hi All, I could do with some help please. I have been devloping a site for a client and came accross an alignment issue in IE7 (Suprise Suprise!) I am trying to get a fixed background in a...
2
by: Chris Thomasson | last post by:
Can anybody notice any problems with the following example of an approach I have been tinkering around with: http://appcore.home.comcast.net/vzoom/malloc/example.cpp Here is a code snippet...
33
by: silpau | last post by:
struct a { int b; char a; int c; } On i386 the sizeof this structure would be 12 bytes,as 3 bytes are padded after a so that c is aligned on 4byte boundary.
1
by: Chris Thomasson | last post by:
I found some time to work a little more on my C++ allocator project. Here is some of the basic alignment code that I am thinking about using: ---------------- #include <cstdio> #include...
2
by: =?ISO-8859-1?Q?Tom=E1s_=D3_h=C9ilidhe?= | last post by:
On Sep 22, 10:45 am, Nick Keighley <nick_keighley_nos...@hotmail.com> wrote: Only problem is that then entire frame in memory might have strange alignment.
8
by: Stephen Horne | last post by:
I understand that the next C++ standard will have features to handle the alignment of data types. This is good, but a bit late for me! I've been using some template trickery to handle alignment...
3
by: Nyris | last post by:
There's a problem with my companies website. For the employees that have larger screens the website's alignment is off only on a few things. Also there are spaces in the dropdown navigation between...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.