HTML and CSS RSS HTML and CSS RSS

Alignment of floated elements

Reply

•
•
Join Date: Jul 2006
Posts: 4
Reputation: Looka is an unknown quantity at this point 
Solved Threads: 0
Looka Looka is offline Offline
Newbie Poster

Alignment of floated elements

 
0
  #1
Jun 13th, 2009
Hi!

Here is a situation. I would like to align <li> inside <div> for my simple menu. The thing is that I'm doing a css based menu instead of gifs on an older website (table design). I've managed to write a css (menu.css) that works perfectly in firefox but not in ie 5.5/6/7. That's why I included conditional comment for ie but the result is not quite there. I would appreciate any tips or suggestions on how to achieve the same alignment in ie as it is in Firefox. Thanks!

Here is how it looks ... URL www.pozvek-sp.si/eng/home_tst.htm

HTML and CSS Syntax (Toggle Plain Text) 
  1.  
  2. /* CSS dokument */
  3. *{
  4. 	margin:0;
  5. 	padding:0;
  6. }
  7. #menu{
  8. 	width:100%;
  9. 	margin:0 0 0px 2px;
  10. }
  11. #menu ul{
  12. 	list-style:none;
  13. }
  14. #menu li{
  15. 	display:block;
  16. 	float:left;
  17. 	width: 120px;
  18. 	margin:0 2 0 0px;
  19. }
  20.  
  21. #menu ul:last-child {
  22. 	margin-left: -2px;
  23. }
  24.  
  25. #menu li a{
  26. 	background: #286293 ;
  27. 	border:2px solid #286293;
  28. 	padding:15px 0 25px 5px;
  29. 	display:block;
  30. 	color:#fff;
  31. 	text-decoration:none;
  32. 	font-family: Arial, Helvetica, sans-serif;
  33. 	font-size:13px;
  34. 	font-weight:bold;
  35. 	height: 28px;
  36. 	margin-bottom: 2px;
  37. }
  38. #menu li a span{
  39. 	color:#F2F5ED;
  40. 	font-size:9px;
  41. 	text-transform:uppercase;
  42. 	font-family: Geneva, Arial, Helvetica, sans-serif;
  43. 	font-weight: bold;
  44. 	font-style:italic;
  45. }
  46. #menu li a:hover{
  47. 	background:#5195ce;
  48. 	border:2px solid #fff;
  49. 	text-decoration:none;
  50. }
  51. #menu li a:hover span{
  52. 	color:#fff;
  53. }



Luka
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Alignment of floated elements

 
0
  #2
Jun 13th, 2009
Try this layout:

HTML and CSS Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="#css21"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  4.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head profile="http://www.w3.org/2005/10/profile">
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <meta http-equiv="Window-target" content="_top" />
  11. <title>Free Live Help!</title>
  12. <style id="css21" type="text/css">
  13. /* <![CDATA[ */
  14.  
  15. html, body {
  16.    border : none;
  17.    font : normal normal normal 95%/1.6 "Trebuchet MS", Verdana, Helvetica, Arial, Sans-Serif;
  18.    height : auto;
  19.    margin : 0;
  20.    min-height : 600px;
  21.    min-width : 600px;
  22.    padding : 0;
  23.    text-align : center;
  24.    width : auto; }
  25.  
  26. body {
  27.    background-color : #FFFFFF;
  28.    color : #405060; }
  29.  
  30. div, div#menu ul, div#menu li {
  31.    border : none;
  32.    margin : 0;
  33.    padding 0; }
  34.  
  35. body div#main {
  36.    margin : 0 auto;
  37.    min-height : 600px;
  38.    width : 100%; }
  39.  
  40. body div#menu {
  41.    height : 28px;
  42.    width : 100%; }
  43.  
  44. div.tube {
  45.    text-align : left;
  46.    padding : 0 2px 0 2px; }
  47.  
  48. div#menu ul {
  49.    background-color : #5195ce;
  50.    height : 100%;
  51.    list-style : none;
  52.    float : left;
  53.    clear : both;
  54.    width : 100%; }
  55.  
  56. div#menu li {
  57.    display : block;
  58.    float : left;
  59.    min-width : 120px;
  60.    height : 100%;
  61.    margin : 0 .020em 0 0;
  62.    width : auto; }
  63.  
  64. div#menu li a {
  65.    display : block;
  66.    height : 100%;
  67.    text-decoration : none;
  68.    width : 100%;
  69.    background-color : #5195ce;
  70.    font : bold normal normal 10pt/28px Geneva, Arial, Helvetica, sans-serif;
  71.    text-align : center;
  72.    color : #fff; }
  73. /* ]]> */
  74. </style> 
  75. </head>
  76. <body>
  77. <div id="main">
  78. <div id="menu">
  79. <div class="tube">
  80. <ul>
  81. <li><a href="#">Link Sample#1</a></li>
  82. <li><a href="#">Link Sample#2</a></li>
  83. <li><a href="#">Link Sample#3</a></li>
  84. <li><a href="#">Link Sample#4</a></li>
  85. <li><a href="#">Link Sample#5</a></li></ul>
  86. </div>
  87. </div>
  88. </div>
  89. </body>
  90. </html>
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2006
Posts: 4
Reputation: Looka is an unknown quantity at this point 
Solved Threads: 0
Looka Looka is offline Offline
Newbie Poster

Re: Alignment of floated elements

 
0
  #3
Jun 14th, 2009
Thanks for your reply essential. I was actually hoping for a way to add and align a div into existent table design. It works in Firefox I'm just looking for a IE hack. I know it's kinda ad-hoc thing but still.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Alignment of floated elements

 
0
  #4
Jun 14th, 2009
This < LINK > might help you out, in search of the things you need to cover this issue.

Hope i've got it covered...

essential
Last edited by essential; Jun 14th, 2009 at 11:38 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2006
Posts: 4
Reputation: Looka is an unknown quantity at this point 
Solved Threads: 0
Looka Looka is offline Offline
Newbie Poster

Re: Alignment of floated elements

 
0
  #5
Jun 14th, 2009
•
•
•
•
Originally Posted by essential View Post
This < LINK > might help you out, in search of the things you need to cover this issue.

Hope i've got it covered...

essential
Hey!

A great resource ... thanks a lot. I think this might help with the problem.

Luka
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
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