User Name Password Register
DaniWeb IT Discussion Community
All
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 361,925 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,663 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 490 | Replies: 1
Reply
Join Date: Jan 2008
Posts: 29
Reputation: vijukumar is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 0
vijukumar vijukumar is offline Offline
Light Poster

Help Correct me and make me more perfect

  #1  
Mar 18th, 2008
please help me i have just started of your boost will makes me more perfect
below i have attached my index.html and css.css file
i had to desicn only using <div> tags so pleas help me in IE it some what works properly but in FF anf safari bit dragged out please correct my codes
css.css below:


  1. BODY {
  2. margin-left:0px;
  3. margin-right:0px;
  4. margin-top:0px;
  5. margin-bottom:0px;
  6. font: 12px/165% "Lucida Sans Unicode", Verdana, Arial, "Times New Roman", sans-serif;
  7. text-align: center;
  8. }
  9.  
  10. #menu
  11. {
  12. margin: 2px;
  13. padding: 40px 250px 10px 250px;
  14. height: 25px;
  15. color: #FF6600;
  16. }
  17.  
  18. #menu ul
  19. {
  20. border: 0;
  21. margin: 0;
  22. padding: 0;
  23. list-style-type: none;
  24. }
  25.  
  26. #menu ul li
  27. {
  28. display: block;
  29. font: 12px;
  30. float: left;
  31. text-align: center;
  32. padding: 0;
  33. margin: 0;
  34. }
  35.  
  36. #title
  37. {
  38. margin: 2px;
  39. padding: 10px 110px 10px 90px;
  40. height: 25px;
  41. color: #33FF66;
  42. }
  43.  
  44. #title ul
  45. {
  46. border: 0;
  47. margin: 0;
  48. padding: 10px 110px 10px 110px;
  49. list-style-type: none;
  50. text-align: center;
  51. }
  52.  
  53. #title ul li
  54. {
  55. display: block;
  56. font: 37px "Lucida Sans Unicode", Verdana, Arial, "Times New Roman", sans-serif;
  57. text-align: center;
  58. padding: 0px 0px 0px 0px;
  59. margin: 0;
  60. }
  61.  
  62. #menu ul li a:link,
  63. #menu ul li a:active,
  64. #menu ul li a:visited
  65. {
  66. border-bottom: 1px dotted #000000;
  67. padding: 1px;
  68. color: #FF6600;
  69. text-decoration: none;
  70. display: block;
  71. text-align: center;
  72. font: 17px "Lucida Sans Unicode", Verdana, Arial, "Times New Roman", sans-serif;
  73. }
  74.  
  75. #menu ul li a:hover
  76. {
  77. border-bottom: 1px double #cccccc;
  78.  
  79. padding: 1px;
  80. color: #cccccc;
  81. text-decoration: none;}
  82.  
  83. #menu li.space
  84. {
  85. padding: 2px 0px 0px;
  86. width:32px;
  87. }
  88.  
  89. #mainbox {
  90. margin: 0 auto;
  91. width: 950px;
  92. hieght: 1000px;
  93. text-align: left;
  94. background:#827B60;
  95. border-top: 1px none #0b0b0b;
  96. border-right: 1px solid #0b0b0b;
  97. border-bottom: 1px none #0b0b0b;
  98. border-left: 1px solid #0b0b0b;
  99. }
  100.  
  101. #datatable {
  102. border: 5px solid #D6DDE6;
  103. height: 440px;
  104. border-collapse: collapse;
  105. padding: 5px;
  106. color: #FF6600;
  107. }
  108.  
  109. #datatable td {
  110. border: 1px solid #D6DDE6;
  111. text-align: right;
  112. }
  113.  
  114. #datatable1 {
  115. border: 1px solid #153E7E;
  116. margin:0px 700px 0px 0px;
  117. padding: 5px;
  118. border-collapse: collapse;
  119. color: #000000;
  120. text-align: center;
  121. }
  122.  
  123. #datatable1 td1 {
  124. border: 1px solid #000000;
  125. }
  126.  
  127. #datatable2 {
  128. border: 1px solid #153E7E;
  129. margin: -450px 5px 10px 244px;
  130. padding: 5px;
  131. border-collapse: collapse;
  132. color: #000000;
  133. }
  134.  
  135. #datatable2 td2 {
  136. border: 1px solid #D6DDE6;
  137. text-align: right;
  138. }
  139.  
  140. #datatable2 td21 {
  141. border: 1px solid #FF6600;
  142. text-align: right;
  143. }
  144.  
  145. #datatable3 {
  146. border: 1px solid #153E7E;
  147. margin: 5px 5px 10px 244px;
  148. padding: 5px;
  149. border-collapse: collapse;
  150. color: #000000;
  151. }
  152.  
  153. #datatable3 td {
  154. border: 1px solid #D6DDE6;
  155. text-align: right;
  156. }
  157.  
  158. #fieldset{
  159. }
  160.  
  161. #legend{
  162. background: #D6DDE6;
  163. color: #FF6600;
  164. }

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>resume</title>
  6. <meta name="description" content="" />
  7. <meta name="keywords" content="" />
  8. <link href="css.css" rel="stylesheet" type="text/css" />
  9. </head>
  10. <body>
  11.  
  12. <div id="mainbox">
  13.  
  14.  
  15. <div id="title">
  16. <ul>
  17. <li> Resume Portal </li>
  18. </ul>
  19. </div>
  20.  
  21. <div id="menu">
  22. <ul>
  23. <li><a href="">Home</a></li>
  24. <li class="space"></li>
  25. <li><a href="">About us </a></li>
  26. <li class="space"></li>
  27. <li><a href="">Register</a></li>
  28. <li class="space"></li>
  29. <li><a href="">Resume</a></li>
  30. <li class="space"></li>
  31. <li class="space"><a href="">Contact</a></li>
  32. </ul>
  33. </div>
  34.  
  35.  
  36.  
  37. <div id="datatable">
  38.  
  39. <div id="datatable1">
  40. <div id="td1"> Login </div>
  41. <div id="td1"> User Name <input name="textfield" type="text" class="typeforms"></div>
  42. <div id="td1"> Password <input name="textfield" type="text" class="typeforms"></div>
  43. <div id="td1"><input name="Submit" type="submit" class="typeforms" value="save"> </div>
  44. <div id="td1"><a href="#">Forgot the password?</a></div>
  45. <div id="td1"> </div>
  46. login pannel login pannel login pannel login pannel login pannel
  47. login pannellogin pannellogin pannellogin pannellogin pannellogin pannel login pannel
  48. login pannellogin pannellogin pannellogin pannellogin pannellogin pannellogin pannel
  49. <div id="td1"><a href="#">Sign Up New Account</a></div>
  50. login pannellogin pannellogin pannellogin pannellogin pannellogin pannellogin pannel
  51. login pannellogin pannellogin pannellogin pannellogin pannellogin pannellogin pannel
  52. login pannellogin pannellogin pannellogin pannellogin
  53. </div>
  54.  
  55.  
  56.  
  57.  
  58. </div>
  59.  
  60. <div id="datatable2">
  61.  
  62. <div di="fieldset">
  63. <div id ="legend">Resume</div>
  64. <div id="td21"> Heading1</div>
  65. <div id="td2"> Display Board Display Board Display Board Display Board Display Board
  66. Display Board Display Board Display Board Display Board Display Board
  67. Display Board Display Board Display Board Display Board Display Board
  68. Display Board Display Board Display Board </div>
  69. <div id="td21"> Heading2</div>
  70. <div id="td2"> Display Board Display Board Display Board Display Board Display Board
  71. Display Board Display Board Display Board Display Board Display Board
  72. Display Board Display Board Display Board Display Board Display Board
  73. Display Board Display Board Display Board </div>
  74. <div id="td21"> Heading3</div>
  75. <div id="td2"> Display Board Display Board Display Board Display Board Display Board
  76. Display Board Display Board Display Board Display Board Display Board
  77. Display Board Display Board Display Board Display Board Display Board
  78. Display Board Display Board Display Board </div>
  79. <div id="td21"> Heading4</div>
  80. <div id="td2"> Display Board Display Board Display Board Display Board Display Board
  81. Display Board Display Board Display Board Display Board Display Board
  82. Display Board Display Board Display Board Display Board Display Board
  83. Display Board Display Board Display Board </div>
  84. </div>
  85. </div>
  86.  
  87. <div id="datatable3">
  88. <div di="fieldset">
  89. <div id ="legend">Latest Resumes</div>
  90.  
  91.  
  92.  
  93. <div id="td3">Firstname Lastname -Softwate <a href="#">View</a></div>
  94.  
  95.  
  96.  
  97.  
  98. <div id="td3">Firstname Lastname -Mechanical <a href="#">View</a></div>
  99. </div>
  100.  
  101.  
  102.  
  103. </div>
  104. </body>
  105. </html>
Last edited by peter_budo : Mar 22nd, 2008 at 3:20 pm. Reason: Keep It Organized
Attached Files
File Type: php index.php (3.5 KB, 2 views)
AddThis Social Bookmark Button
Reply With Quote  
Join Date: Jan 2007
Posts: 2,354
Reputation: MidiMagic is on a distinguished road 
Rep Power: 6
Solved Threads: 89
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Posting Maven

Re: Correct me and make me more perfect

  #2  
Mar 21st, 2008
I found it quickly.

NEVER put size styles (width, height) and surrounding styles (margin, border, padding) in the same tag, class, or id.

Firefox follows the w3c definitions, and puts the surrounding styles OUTSIDE the defined sizes.

IE does it wrong, and crams the surrounding styles INSIDE the defined sizes.

To use both on the same item, nest two tags, one with the size, and one with the surrounding styles. This way, YOU control what order they occur in.
Daylight-saving time uses more gasoline
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

DaniWeb JavaScript / DHTML / AJAX Marketplace
Thread Tools Display Modes

Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum

All times are GMT -4. The time now is 10:38 pm.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC