Different Text Display in Different Browser ???

Thread Solved

Join Date: Jan 2006
Posts: 89
Reputation: j4mes_bond25 is an unknown quantity at this point 
Solved Threads: 0
j4mes_bond25's Avatar
j4mes_bond25 j4mes_bond25 is offline Offline
Junior Poster in Training

Different Text Display in Different Browser ???

 
0
  #1
Jul 6th, 2006
Why is it that text within certain elements are displayed BIGGER in Microsoft Explorer & perfectly well in Firefox on my website ??? See the "Template" text, for example. Is this normal due to browser's incompatibility, since I never had such problem before ???

darsh25.silverserve.co.uk/AllInclusiveWebDesign/

CSS is:

HTML and CSS Syntax (Toggle Plain Text)
  1. /* CSS Document */
  2.  
  3. body
  4. {
  5. background-color:white;
  6. }
  7.  
  8.  
  9. /* .................................... HEADER & FOOTER ................................... */
  10.  
  11. #header
  12. {
  13. background-image:url(headerbackground.jpg);
  14. height:5%;
  15. font-family:Georgia, "Times New Roman", Times, serif;
  16. color:white;
  17. text-align:center;
  18. width:100%;
  19. }
  20.  
  21. #header a
  22. {
  23. color:yellow;
  24. text-decoration:none;
  25. }
  26.  
  27. #header a:hover
  28. {
  29. text-decoration:underline;
  30. }
  31.  
  32. #footer
  33. {
  34. background-image:url(headerbackground.jpg);
  35. font-family:Georgia, "Times New Roman", Times, serif;
  36. color:white;
  37. text-align:center;
  38. border-top:2px solid white;
  39. float:left;
  40. height:5%;
  41. width:100%;
  42. }
  43.  
  44. #footer a
  45. {
  46. color:yellow;
  47. text-decoration:none;
  48. }
  49.  
  50. #footer a:hover
  51. {
  52. text-decoration:underline;
  53. }
  54.  
  55. /************************************ BANNER ************************************/
  56.  
  57. #banner
  58. {
  59. background-image:url(bannerbackground.jpg);
  60. text-align:center;
  61. height:150px;
  62. }
  63.  
  64.  
  65.  
  66. /************************************ TEMPLATE MENU ************************************/
  67.  
  68. #templateMenu
  69. {
  70. float:left;
  71. width:11%;
  72. border:1px solid red;
  73. background-color:green;
  74. }
  75.  
  76. #templateMenu ul
  77. {
  78. list-style:none;
  79. margin:0px;
  80. position:relative;
  81. padding:0px;
  82. width:100%;
  83. border:thin solid red;
  84. border-bottom:0px;
  85. }
  86.  
  87. #templateMenu ul a
  88. {
  89. display: block;
  90. text-align:center;
  91. background-color:yellow;
  92. text-decoration:none;
  93. width:100%;
  94. border-bottom:thin solid red;
  95. color:blue;
  96. position: relative;
  97. font-size:large;
  98. line-height:30px;
  99. }
  100.  
  101. #templateMenu ul a:hover
  102. {
  103. color:black;
  104. background-color:yellow;
  105. text-transform:uppercase;
  106. }
  107.  
  108.  
  109. /************************************ CENTER CONTENT ************************************/
  110.  
  111. #centerContent
  112. {
  113. background-image:url(contentbackground.jpg);
  114. width:700px;
  115. margin-left:35px;
  116. float:left;
  117. border-left:1px solid #999999;
  118. border-right:1px solid #999999;
  119. }
  120.  
  121. #centerContent ul
  122. {
  123. font-family:Georgia, "Times New Roman", Times, serif;
  124. text-align:justify;
  125. list-style-type:decimal;
  126. color:black;
  127. }
  128.  
  129. #centerContent li
  130. {
  131. margin:3% 3%;
  132. line-height:1.5em;
  133. }
  134.  
  135. /************************************ LEFT CONTENT ************************************/
  136.  
  137. #leftContent
  138. {
  139. margin-top:30px;
  140. float:left;
  141. }
  142.  
  143. /************************************ RIGHT CONTENT ************************************/
  144.  
  145. #rightContent
  146. {
  147. float:right;
  148. }
  149.  
  150. /*********************************** Pre-Defined Elements ************************************/
  151.  
  152. p.first-letter:first-letter
  153. {
  154. font-family:Georgia, "Times New Roman", Times, serif;
  155. color:red;
  156. margin-left:5%;
  157. font-size:xx-large;
  158. }
  159.  
  160. p
  161. {
  162. font-family:Georgia, "Times New Roman", Times, serif;
  163. text-align:justify;
  164. font-size:medium;
  165. line-height:1.5em;
  166. margin:2% 3%;
  167. color:black;
  168. }
  169.  
  170. h3
  171. {
  172. font-family:Georgia, "Times New Roman", Times, serif;
  173. text-align:left;
  174. font-size:x-large;
  175. margin:2% 3%;
  176. color:purple;
  177. letter-spacing:5px;
  178. border-bottom:thin solid #990000;
  179. }
  180.  
  181. h4
  182. {
  183. font-family:Georgia, "Times New Roman", Times, serif;
  184. text-align:center;
  185. font-size:x-large;
  186. color:green;
  187. }
  188.  
  189. h5
  190. {
  191. font-family:Georgia, "Times New Roman", Times, serif;
  192. text-align:justify;
  193. font-size:medium;
  194. margin:2% 3%;
  195. color:blue;
  196. }
  197.  
  198. h6
  199. {
  200. font-family:Georgia, "Times New Roman", Times, serif;
  201. text-align:justify;
  202. margin:0;
  203. font-size:medium;
  204. font-weight:normal;
  205. color:red;
  206. }
  207.  
  208. .italic
  209. {
  210. font-family:Georgia, "Times New Roman", Times, serif;
  211. text-align:justify;
  212. color:black;
  213. font-style:italic;
  214. }
  215.  
  216. .bold
  217. {
  218. font-family:Georgia, "Times New Roman", Times, serif;
  219. text-align:justify;
  220. color:black;
  221. font-weight:bold;
  222. }
  223.  
  224. .colorTextRed
  225. {
  226. font-family:Georgia, "Times New Roman", Times, serif;
  227. text-align:justify;
  228. color:red;
  229. }
  230.  
  231. .colorTextBlue
  232. {
  233. font-family:Georgia, "Times New Roman", Times, serif;
  234. text-align:justify;
  235. color:blue;
  236. }
  237.  
  238. .colorTextGreen
  239. {
  240. font-family:Georgia, "Times New Roman", Times, serif;
  241. text-align:justify;
  242. color:green;
  243. }
  244.  
  245. .colorTextLime
  246. {
  247. font-family:Georgia, "Times New Roman", Times, serif;
  248. text-align:justify;
  249. color:#00FF00;
  250. }
  251.  
  252. .background
  253. {
  254. background-image:url(background.jpg);
  255. }
  256.  
  257. /*********************************** TABLE ***********************************/
  258.  
  259. #contactTable
  260. {
  261. border-spacing:2%;
  262. margin:3% 3%;
  263. font-family:Georgia, "Times New Roman", Times, serif;
  264. text-align:left;
  265. }
  266.  
  267. #contactTable tr
  268. {
  269. border:none;
  270. }
  271.  
  272. #contactTable td
  273. {
  274. font-size:medium;
  275. color:black;
  276. }
  277.  
  278. .contactForm
  279. {
  280. background-color:#99FF99;
  281. border:1px solid red;
  282. }
  283.  
  284. /*********************************** TABLE CLASSES ***********************************/
  285.  
  286. .table
  287. {
  288. background-color:white;
  289. border-spacing:2%;
  290. margin:3% 3%;
  291. font-family:Georgia, "Times New Roman", Times, serif;
  292. border-collapse:collapse;
  293. text-align:left;
  294. }
  295.  
  296. .tr
  297. {
  298. border:none;
  299. }
  300.  
  301. .td
  302. {
  303. border:thin solid red;
  304. font-size:medium;
  305. padding:2px;
  306. text-align:center;
  307. color:black;
  308. }
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
Reply With Quote Quick reply to this message  
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

Re: Different Text Display in Different Browser ???

 
0
  #2
Jul 6th, 2006
A quick perusal through your CSS didn't show that you were defining any absolute point sizes. Relative terms like "medium" will be displayed... in relative terms.

In the future, could you please just post scaled down versions, only those portions directly related to your question? Thanks.
Reply With Quote Quick reply to this message  
Join Date: Feb 2005
Posts: 1,181
Reputation: hollystyles will become famous soon enough hollystyles will become famous soon enough 
Solved Threads: 67
hollystyles's Avatar
hollystyles hollystyles is offline Offline
Veteran Poster

Re: Different Text Display in Different Browser ???

 
0
  #3
Jul 6th, 2006
That's right to be little clearer in case you're not aware, if you're not specific about point size in your HTML/CSS the browser defaults to:

IE view menu->text size (set to medium by default perhaps this has got changed by accident in your IE browser to larger or something)

Firefox view menu->text size this just goes + or _ (use ctrl+ or ctrl- with keyboard much easier)

In my experience Firefox tends to display text at a smaller default size to IE.
==========================================
Yadda yadda yadda...
Web junky, fevered monkey
Reply With Quote Quick reply to this message  
Join Date: Jan 2006
Posts: 89
Reputation: j4mes_bond25 is an unknown quantity at this point 
Solved Threads: 0
j4mes_bond25's Avatar
j4mes_bond25 j4mes_bond25 is offline Offline
Junior Poster in Training

Re: Different Text Display in Different Browser ???

 
0
  #4
Jul 6th, 2006
Originally Posted by tgreer
A quick perusal through your CSS didn't show that you were defining any absolute point sizes. Relative terms like "medium" will be displayed... in relative terms.

In the future, could you please just post scaled down versions, only those portions directly related to your question? Thanks.
Yes, that's right. Internet Explorer was already set to "medium" so that wasn't a problem. Guess, in the past I didn't have problem with using "medium" so didn't think "point" would make a massive difference as compared to merely using "medium". But now using the "point" makes it displayed perfectly well on both browser. Thanks.

Yep, that makes sense
Nope, I'm NOT God, but I'm British (which is the next best thing ;)
Reply With Quote Quick reply to this message  
Reply

This thread has been marked solved.
Perhaps start a new thread instead?
Message:


Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC