473,666 Members | 2,565 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Menu alignment issues

3 New Member
I have this issue in my menu where my ul tag wants to float to the right outside of the boxes.
http://beta.heartfeltc reations.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
2 2339
heartfelt
3 New Member
Stupid i forgot to say which browser this is in.
IE7 is the problem browser
Jan 17 '12 #2
heartfelt
3 New Member
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
3803
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 application that the code be speed optimized ) I use reinterpret_cast to alias a block of chars read in from disc as a block of integer "words". My existing code (see simplified code below) appears to work well enough on the platforms available to me,...
5
2396
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 members, sizeof(some_C_struct) gives u the cumulative size of each of the individual members plus whatever bytes were used for alignment padding
8
2099
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 navigation menu. I included this header.htm into another regular .htm page that contains other information about the company and saved it as .ASP. (I m saving it as .asp so that i'll be able to include this header.htm into it.) But the moment I save it as...
1
1463
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 table and the image has an edge built into it (which may have been a mistake) and IE7 knocks it to the right by 1 pixel. http://www.scream.co.uk/test/index.html Can anyone help?
2
1577
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 of the main alignment functions I created; I think I am going to end up actually using the logic... __________________
33
2280
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
2076
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 <cstring> #include <cassert> // attempts to extract the alignemnt of a type T
2
236
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
2818
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 issues for some time. What I usually want is a type that takes the same amount of space and has the same alignment as some other type, but which doesn't have constructors, destructors etc. The idea is that initialisation and cleanup can be done...
3
1565
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 each link where there shouldn't be. Is there away to get around alignment issues in screen sizes in CSS? Or any other language?
0
8440
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8352
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8780
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8549
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
7378
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6189
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4192
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
2765
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
1763
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.