HTML and CSS RSS HTML and CSS RSS

Can someone check this...?

Reply

•
•
Join Date: Sep 2008
Posts: 15
Reputation: Andrew Hucks is an unknown quantity at this point 
Solved Threads: 1
Andrew Hucks Andrew Hucks is offline Offline
Newbie Poster

Can someone check this...?

 
0
  #1
Sep 7th, 2008
I'm working on a new project [It's actually a PHP project. Go figure]. Anyways, I designed it myself, and coded it myself. I was almost done with it, and I went to run it in Mozilla, and it looked great. I went to run it in Internet Explorer (7), and it was slaughtered. It also looks fine in Safari.

Can someone help me find where it went wrong? I tried to find out by using the W3 Validator, but that just messed me up more. I don't know which Doctype thing to put, so I just slapped one on there. =/.

Any help is greatly appreciated.

Edit: Here's the site-http://andrewhuckstest.freehostia.com/index.html
Html-
HTML and CSS Syntax (Toggle Plain Text) 
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
  3.  
  4.  
  5. <html>
  6.  
  7. 	<head>
  8. 		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
  9. 		<title>Welcome</title>
  10. 			<link rel="stylesheet" type="text/css" href="css.css" />
  11. 	</head>
  12. 		<body> 
  13. 			<center>
  14. 		<!-- Container holds everything together. It's centered.  -->
  15. 	<div id=container>
  16. 		<!-- Header is at the Top. Holds the main links. -->
  17. 			<div id=header>
  18.  
  19. 				<div id="hometext">
  20. 					<a class="#index.php" href="">Home</a>
  21. 				</div>
  22.  
  23. 				<div id="abouttext">
  24. 					<a class="#about" href="">About</a>
  25. 				</div>
  26.  
  27. 				<div id="contacttext">
  28. 					<a class="#contact" href="">Contact</a>
  29. 				</div>
  30.  
  31. 				<div id="donatetext">
  32. 					<a class="#donate" href="">Donate</a>
  33. 				</div>
  34.  
  35. 				<div id="whattext">
  36. 					<a class="#whatweare" href="">What is "Got Skills"?</a>
  37. 				</div>
  38. 				<!--Topnavheader is right above the Top nav link box. Holds the word "Navigtion -->
  39. 			<div id=topnavheader>
  40. 				Navigation
  41. 			</div>
  42. 					<!--Topnav is under topnavheader. Contains Tracker links. -->
  43. 			<div id=topnav>
  44.  
  45. 					<div id="navyourstats">
  46. 						<a href="#personaltracker">Track Your Skills
  47. 					</div>
  48.  
  49. 					<div id="navclanmatestats">
  50. 						<a href="#clanmatetracker">Track Clanmate's Skills
  51. 					</div>
  52.  
  53. 					<div id="navtourns">
  54. 						<a href="#skilltournaments">Skill Tournaments
  55. 					</div>
  56.  
  57. 					<div id="settings">
  58. 						<a href="#clanmatetracker">View Settings
  59. 					</div>
  60.  
  61. 					<div id="clanportal">
  62. 						<a href="#clanportal">Clan Portal
  63. 					</div>
  64.  
  65.  
  66. 				</div>
  67.  
  68. 			<div id=bottomnavheader>
  69.  
  70. 			Your Account
  71.  
  72. 			</div>
  73. 			<div id=bottomnav>
  74.  
  75. 			<div id="register">
  76. 						<a href="#register">Register
  77. 					</div>
  78. 			<div id="login">
  79. 						<a href="#login">Log In
  80. 					</div>
  81. 					<div id="why">
  82. 						<a href="#why">Why Register?
  83. 					</div>
  84.  
  85. 			</div>
  86.  
  87. 			</center>
  88. 		</body>
  89. </html>

CSS-

HTML and CSS Syntax (Toggle Plain Text) 
  1. body {
  2. background: #000000;
  3. font-family: georgia;
  4. font-size: 90%;
  5. color: #444343;
  6. font-weight: bold;
  7. }
  8.  
  9. div#container {
  10. width: 800px;
  11. height: 800px;
  12. background-image: url(Images/container.png) ;
  13. margin : 0 0 0 0;
  14. padding : 0px 0 0 0px; 
  15.  
  16.  
  17. }
  18.  
  19. div#header{
  20. width: 729px;
  21. height: 112px;
  22. background-image: url(Images/header.png);
  23. margin: 0 0 0 0;
  24. padding: 0px 0 0 0px;
  25.  
  26. }
  27.  
  28.  
  29.  
  30. div#topnavheader {
  31.  
  32. width: 183px;
  33. height: 20px;
  34. background-image: url(Images/topnavhead.png);
  35. margin: 200px 0 0 0px;
  36. padding: 0px 0 0 0px;
  37. position: absolute;
  38.  
  39. }
  40.  
  41. div#topnav {
  42.  
  43. width: 183px;
  44. height: 138px;
  45. background-image: url(Images/topnav.png);
  46. margin: 230px 0 0 0px;
  47. padding: 0px 0 0 0px;
  48. float: left;
  49.  
  50. }
  51.  
  52. div#hometext {
  53.   width : 30px;
  54.   height : 75px;
  55.   margin : 87px 0 0 52px;
  56.   padding : 0px 0 0 0px;
  57.   font-size : 12px;
  58.   position : absolute;
  59. }
  60.  
  61. div#abouttext {
  62.   width : 30px;
  63.   height : 75px;
  64.   margin : 87px 0 0 172px;
  65.   padding : 0px 0 0 0px;
  66.   font-size : 12px;
  67.   position : absolute;
  68. }
  69.  
  70. div#contacttext {
  71.   width : 30px;
  72.   height : 75px;
  73.   margin : 87px 0 0 282px;
  74.   padding : 0px 0 0 0px;
  75.   font-size : 12px;
  76.   position : absolute;
  77. }
  78.  
  79. div#donatetext {
  80.   width : 30px;
  81.   height : 75px;
  82.   margin : 87px 0 0 414px;
  83.   padding : 0px 0 0 0px;
  84.   font-size : 12px;
  85.   position : absolute;
  86. }
  87. div#whattext {
  88.   width : 200px;
  89.   height : 75px;
  90.   margin : 87px 0 0 503px;
  91.   padding : 0px 0 0 0px;
  92.   font-size : 12px;
  93.   position : absolute;
  94. }
  95.  
  96. div#navyourstats {
  97. 	width: 130px;
  98. 	margin: 10px 0 0 20px;
  99. 	padding : 0 0 0 0;
  100. 	position: absolute;
  101. 	font-size: 11px;
  102.  
  103.  
  104. 	}
  105.  
  106. div#navclanmatestats {
  107. 	width: 160px;
  108. 	margin: 35px 0 0 26px;
  109. 	padding : 0 0 0 0;
  110. 	position: absolute;
  111. 	font-size: 11px;
  112.  
  113. 	}
  114.  
  115. div#navtourns {
  116. 	width: 160px;
  117. 	margin: 61px 0 0 13px;
  118. 	padding : 0 0 0 0;
  119. 	position: absolute;
  120. 	font-size: 11px;
  121.  
  122. 	}
  123. div#settings {
  124. 	width: 160px;
  125. 	margin: 86px 10px 10px -04px;
  126. 	padding : 0 0 0 0;
  127. 	position: absolute;
  128. 	font-size: 11px;
  129. 	float: left;
  130.  
  131. 	}
  132.  
  133. div#clanportal {
  134. 	width: 160px;
  135. 	margin: 113px 10px 10px -10px;
  136. 	padding : 0 0 0 0;
  137. 	position: absolute;
  138. 	font-size: 11px;
  139. 	float: left;
  140.  
  141. 	}
  142. div#bottomnavheader {
  143.  
  144. width: 183px;
  145. height: 20px;
  146. background-image: url(Images/bottomnavhead.png);
  147. margin: 400px 0 0 0px;
  148. padding: 0px 0 0 0px;
  149. position: absolute;
  150.  
  151. }
  152.  
  153. div#bottomnav {
  154.  
  155. width: 183px;
  156. height: 98px;
  157. background-image: url(Images/bottomnav.png);
  158. margin: 430px 0 0 0px;
  159. padding: 0px 0 0 0px;
  160. position: absolute;
  161.  
  162. }
  163.  
  164. div#register {
  165. 	width: 130px;
  166. 	margin: 12px 0 0 -08px;
  167. 	padding : 0 0 0 0;
  168. 	position: absolute;
  169. 	font-size: 12px;
  170.  
  171.  
  172. 	}
  173. div#login {
  174. 	width: 130px;
  175. 	margin: 40px 0 0 -16px;
  176. 	padding : 0 0 0 0;
  177. 	position: absolute;
  178. 	font-size: 12px;
  179.  
  180.  
  181. 	}
  182. div#why {
  183. 	width: 130px;
  184. 	margin: 68px 0 0 12px;
  185. 	padding : 0 0 0 0;
  186. 	position: absolute;
  187. 	font-size: 12px;
  188.  
  189.  
  190. 	}
  191. a:link {
  192. 	text-decoration : none;
  193. 	color : #444343;
  194. }
  195. a:visited {
  196. 	text-decoration : none;
  197. 	color : #444343;
  198. }
  199. a:active {
  200. 	text-decoration : none;
  201. 	color : #444343;
  202. }
  203. a:hover {
  204. 	text-decoration : none;
  205. 	color : #04AfDf;
  206. }
  207.  
  208. a.nav {
  209. 	font-weight : bold;
  210.  
  211. }
  212.  
  213.  
  214. a.nav:link {
  215. 	text-decoration : none;
  216. 	color : #ffffff;
  217. }
  218. a.nav:visited {
  219. 	text-decoration : none;
  220. 	color : #ffffff;
  221. }
  222. a.nav:active {
  223. 	text-decoration : none;
  224. 	color : #ffffff;
  225.  
  226. }
  227. a.nav:hover {
  228. 	text-decoration : none;
  229. 	color : #ffffff;
  230. }
Last edited by Andrew Hucks; Sep 7th, 2008 at 4:22 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2008
Posts: 55
Reputation: MelechM is an unknown quantity at this point 
Solved Threads: 6
MelechM MelechM is offline Offline
Junior Poster in Training

Re: Can someone check this...?

 
0
  #2
Sep 8th, 2008
Wow...that's awful. I'm looking into it. give me some time and I'll see if i can fix it.

EDIT: Um looks like you will need two stylesheets. Unless you want me to completely re-do the original to work in firefox and IE the same. otherwise two stylesheets (one for IE and one for other browsers since the problems are only in IE) is the way I think would be best.
Last edited by MelechM; Sep 8th, 2008 at 3:36 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2008
Posts: 55
Reputation: MelechM is an unknown quantity at this point 
Solved Threads: 6
MelechM MelechM is offline Offline
Junior Poster in Training

Re: Can someone check this...?

 
0
  #3
Sep 8th, 2008
Why did you seperate all the links? Have them in one container and make them list using ul li and set li to have no bullet points...Also position absolute is not such a good coding habit. I think I'm going to try and re-do your code from the ground up and achieve the same look without so much code, and with better code. First I'll try and do it by leaving it with the code you supplied.
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2008
Posts: 55
Reputation: MelechM is an unknown quantity at this point 
Solved Threads: 6
MelechM MelechM is offline Offline
Junior Poster in Training

Re: Can someone check this...?

 
0
  #4
Sep 8th, 2008
Ok finished. I re-wrote the html and css codes but kept the same links and names for your divs. I took out a lot unnecessary code from the css and added two new divs. The codes are:

HTML and CSS Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
  2.  
  3.  
  4. <html>
  5. <head>
  6. 	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
  7. 	<title>Welcome</title>
  8. 	<link rel="stylesheet" type="text/css" href="css.css" />
  9. </head>
  10. <body>
  11. 	<div id="container">
  12. 		<div id="header">
  13.         	<ul>
  14.                 <li><a href="">Home</a></li>
  15.                 <li><a href="">About</a></li>
  16.                 <li><a href="">Contact</a></li>
  17.                 <li><a href="">Donate</a></li>
  18.                 <li><a href="">What is "Got Skills"?</a></li>
  19.         	</ul>
  20. 		</div>
  21.         <div id="topnavcontain">
  22.             <div id="topnavheader">
  23.                 Navigation
  24.             </div>
  25.             <div id="topnav">
  26.                 <ul>
  27.                     <li><a href="#personaltracker">Track Your Skills</a></li>
  28.                     <li><a href="#clanmatetracker">Track Clanmate's Skills</a></li>
  29.                     <li><a href="#skilltournaments">Skill Tournaments</a></li>
  30.                     <li><a href="#clanmatetracker">View Settings</a></li>
  31.                     <li><a href="#clanportal">Clan Portal</a></li>
  32.                 <ul>
  33.             </div>
  34.         </ul>
  35.         <div id="bottomnavcontain">
  36.             <div id="bottomnavheader">
  37.             Your Account
  38.             </div>
  39.             <div id="bottomnav">
  40.                 <ul>
  41.                     <li><a href="#register">Register</a></li>
  42.                     <li><a href="#login">Log In</a></li>
  43.                     <li><a href="#why">Why Register?</a></li>
  44.                 </ul>
  45.             </div>
  46.         </div>
  47. 	</div><!--end containeer-->
  48. </body>
  49. </html>

HTML and CSS Syntax (Toggle Plain Text) 
  1. body {
  2. 	margin: 0;
  3. 	padding: 0;
  4. 	width: 800px;
  5. 	background: #000000;
  6. 	font-family: georgia;
  7. 	font-size: 90%;
  8. 	color: #444343;
  9. 	font-weight: bold;
  10. 	margin-right: auto;
  11. 	margin-left: auto;
  12. }
  13. #container {
  14. 	margin: 0;
  15. 	background-image: url('Images/container.png') ;
  16. 	width: 800px;
  17. }
  18. #header{
  19. 	float: left;
  20. 	display: block;
  21. 	width: 800px;
  22. 	height: 112px;
  23. 	background-image: url('Images/header.png');
  24. 	margin: 100px 0 0 0;
  25. 	padding: 0 0 0 0;
  26. }
  27. #header ul {
  28. 	margin: 0;
  29. 	padding: 0;
  30. 	list-style: none;
  31. 	margin-left: auto;
  32. 	margin-right: auto;
  33. }
  34. #header li {
  35. 	margin-left: 60px;
  36. 	float: left;
  37. }
  38. #header li a {
  39. 	display: block;
  40. 	float: left;
  41. 	text-decoration: none;
  42. }
  43. #topnavcontain {
  44. 	float: left;
  45. 	display: block;
  46. 	width: 163px;
  47. 	height: 158px;
  48. 	margin: 0 0 0 0;
  49. 	padding: 0 0 0 0;
  50. }
  51. #topnavheader {
  52. 	display: block;
  53. 	height: 20px;
  54. 	color : #04AfDf;
  55. 	background-image: url('Images/topnavhead.png');
  56. 	margin: 0 0 0 20px;
  57. 	padding: 0 0 0 0;
  58. }
  59. #topnav {
  60. 	display: block;
  61. 	height: 138px;
  62. 	background-image: url('Images/topnav.png');
  63. 	margin: 0 0 0 0;
  64. 	padding: 0 0 0 0;
  65. }
  66. #topnav ul {
  67. 	margin: 0;
  68. 	padding: 0;
  69. 	list-style: none;
  70. 	margin-left: auto;
  71. 	margin-right: auto;
  72. }
  73. #topnav li {
  74. 	margin-top: 10px;
  75. 	float: left;
  76. }
  77. #topnav li a {
  78. 	width: 163px;
  79. 	display: block;
  80. 	float: left;
  81. 	text-decoration: none;
  82. }
  83. #bottomnavcontain {
  84. 	float: left;
  85. 	display: block;
  86. 	width: 163px;
  87. 	height: 158px;
  88. 	margin: 20px 0 0 0;
  89. 	padding: 0 0 0 0;
  90. }
  91. #bottomnavheader {
  92. 	display: block;
  93. 	height: 20px;
  94. 	color : #04AfDf;
  95. 	background-image: url('Images/bottomnavhead.png');
  96. 	margin: 0 0 0 20px;
  97. 	padding: 0 0 0 0;
  98. }
  99. #bottomnav {
  100. 	display: block;
  101. 	height: 138px;
  102. 	background-image: url('Images/bottomnav.png');
  103. 	margin: 0 0 0 0;
  104. 	padding: 0 0 0 0;
  105. }
  106. #bottomnav ul {
  107. 	margin: 0;
  108. 	padding: 0;
  109. 	list-style: none;
  110. 	margin-left: auto;
  111. 	margin-right: auto;
  112. }
  113. #bottomnav li {
  114. 	margin-top: 10px;
  115. 	float: left;
  116. }
  117. #bottomnav li a {
  118. 	width: 163px;
  119. 	display: block;
  120. 	float: left;
  121. 	text-decoration: none;
  122. }
  123. a:link {
  124. 	text-decoration : none;
  125. 	color : #444343;
  126. }
  127. a:visited {
  128. 	text-decoration : none;
  129. 	color : #444343;
  130. }
  131. a:active {
  132. 	text-decoration : none;
  133. 	color : #444343;
  134. }
  135. a:hover {
  136. 	text-decoration : none;
  137. 	color : #04AfDf;
  138. }
  139.  
  140. a.nav {
  141. 	font-weight : bold;
  142.  
  143. }
  144.  
  145.  
  146. a.nav:link {
  147. 	text-decoration : none;
  148. 	color : #ffffff;
  149. }
  150. a.nav:visited {
  151. 	text-decoration : none;
  152. 	color : #ffffff;
  153. }
  154. a.nav:active {
  155. 	text-decoration : none;
  156. 	color : #ffffff;
  157.  
  158. }
  159. a.nav:hover {
  160. 	text-decoration : none;
  161. 	color : #ffffff;
  162. }

I tested this in IE, Firefox, Safari, and Opera and it works in all of them and looks the same in all of them. This site looks exactly as yours does, but works in IE like you wanted and is better organized and made. Please learn from this cause I'm not going to write this back up for you. You had a lot of errors in your code like position absolute and not finishing you tags. a few end divs were also missing.

Next time you need help with a code, make sure simple errors are not there, and make sure you have learned from this!

oh and you're welcome
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 perl pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 xml xsl
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC