473,320 Members | 2,035 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

why is my code different in different browsers?

mariko
23
I know that there are different margins in different browsers. I tried the Global Reset and it didn't help. I am a beginner, so I might be doing something wrong and I won't be offended if you criticize me!

In my code, I have two panels. One is for images and it is 350 pixels wide on the left side. Let's call it "imagepanel". On the right, I have descriptions of the images. The descriptions are, obviously, text. To separate the text describing one picture from the text describing another picture, I have <br />'s. And these seem to be the problem. The descriptions in Mozilla Firefox line up nicely. In the (dreadful) IE and in Google Chrome there seem to be fewer <br />'s. Why? And how do I fix it? Thanks!
Mar 24 '10 #1
10 1929
drhowarddrfine
7,435 Expert 4TB
Without a link, or the complete markup, anything would be just a wild guess.
Mar 24 '10 #2
mariko
23
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "_//W3C//DTD XHTML 1.o Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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. <link rel="stylesheet" href="http://bytes.com/images/style.css" type="text/css" />
  6. <title>Herbergers' Furniture Company</title>
  7. </head>
  8. <body>
  9. <div id="page" align="center">
  10. <div id="content" style="width:800px">
  11. <div id="banner">
  12. <div style="margin-top:30px" class="whitetitle">
  13. </div>
  14. </div>
  15. <div id="menu">
  16. <div align="right" class="smallwhitetext" style="padding:9px;">
  17. <a href="index.html">Home</a> | <a href="furniture.html">Furniture</a> | <a href="about.html">About Us</a>  |  <a href="news.html">News</a> | <a href="contact.html">Contact Us</a>
  18. </div>
  19. <div id="panelbyimages" style="padding:10px">
  20. <br />
  21. <div class="titletext">Decorations</div>
  22. <br />
  23. <div class="titletext" style="padding:30px;" align="justify">
  24. Acorn Birdfeeder
  25. <br />
  26. <br />
  27. <div class="titletextTwo" align="justify">
  28. Description:
  29. <br />
  30. Dimensions:
  31. <br />
  32. Wood Type:
  33. <br />
  34. <br />
  35. <br />
  36. <br />
  37. <br />
  38. <br />
  39. <br />
  40. <br />
  41. <br />
  42. <br />
  43. <div class="titletext" style="padding:30px;" align="justify">
  44. Desert Clock
  45. <br />
  46. <br />
  47. <div class="titletextTwo" align="justify">
  48. Description:
  49. <br />
  50. Dimensions:
  51. <br />
  52. Wood Type:
  53. <br />
  54. <br />
  55. <br />
  56. <br />
  57. <br />
  58. <br />
  59. <br />
  60. <br />
  61. <br />
  62. <br />
  63. <br />
  64. <br />
  65. <br />
  66. <div class="titletext" align="justify">
  67. Farm Rooster
  68. <br />
  69. <br />
  70. <div class="titletextTwo" align="justify">
  71. Description:
  72. <br />
  73. Dimensions:
  74. <br />
  75. Wood Type:
  76. <br />
  77. <br />
  78. <br />
  79. <br />
  80. <br />
  81. <br />
  82. <br />
  83. <br />
  84. <br />
  85. <br />
  86. <br />
  87. <br />
  88. <br />
  89. <br />
  90. <br />
  91. <div class="titletext" align="justify">
  92. Full Harvest
  93. <br />
  94. <br />
  95. <div class="titletextTwo" align="justify">
  96. Description:
  97. <br />
  98. Dimensions:
  99. <br />
  100. Wood Type:
  101. <br />
  102. <br />
  103. <br />
  104. <br />
  105. <br />
  106. <br />
  107. <br />
  108. <br />
  109. <br />
  110. <br />
  111. <div class="titletext" align="justify">
  112. Love
  113. <br />
  114. <br />
  115. <div class="titletextTwo" align="justify">
  116. Description:
  117. <br />
  118. Dimensions:
  119. <br />
  120. Wood Type:
  121. <br />
  122. <br />
  123. <br />
  124. <br />
  125. <br />
  126. <br />
  127. <br />
  128. <br />
  129. <br />
  130. <br />
  131. <br />
  132. <div class="titletext" align="justify">
  133. Nostalgia
  134. <br />
  135. <br />
  136. <div class="titletextTwo" align="justify">
  137. Description:
  138. <br />
  139. Dimensions:
  140. <br />
  141. Wood Type:
  142. <br />
  143. <br />
  144. <br />
  145. <br />
  146. <br />
  147. <br />
  148. <br />
  149. <br />
  150. <br />
  151. <br />
  152. <div class="titletext" align="justify">
  153. Prize Fish
  154. <br />
  155. <br />
  156. <div class="titletextTwo" align="justify">
  157. Description:
  158. <br />
  159. Dimensions:
  160. <br />
  161. Wood Type:
  162. <br />
  163. <br />
  164. <br />
  165. <br />
  166. <br />
  167. <br />
  168. <br />
  169. <br />
  170. <br />
  171. <br />
  172. <br />
  173. <br />
  174. <div class="titletext" align="justify">
  175. Raised Bowl Centerpiece
  176. <br />
  177. <br />
  178. <div class="titletextTwo" align="justify">
  179. Description:
  180. <br />
  181. Dimensions:
  182. <br />
  183. Wood Type:
  184. <br />
  185. <br />
  186. <br />
  187. <br />
  188. <br />
  189. <br />
  190. <br />
  191. <br />
  192. <br />
  193. <br />
  194. <br />
  195. <div class="titletext" align="justify">
  196. Southern Pattern Boards
  197. <br />
  198. <br />
  199. <div class="titletextTwo" align="justify">
  200. Description:
  201. <br />
  202. Dimensions:
  203. <br />
  204. Wood Type:
  205. <br />
  206. <br />
  207. <br />
  208. <br />
  209. <br />
  210. <br />
  211. <br />
  212. <br />
  213. <br />
  214. <br />
  215. <br />
  216. <div class="titletext" align="justify">
  217. Syled Shelves
  218. <br />
  219. <br />
  220. <div class="titletextTwo" align="justify">
  221. Description:
  222. <br />
  223. Dimensions:
  224. <br />
  225. Wood Type:
  226. <br />
  227. <br />
  228. <br />
  229. <br />
  230. <br />
  231. <br />
  232. <br />
  233. <br />
  234. <br />
  235. <br />
  236. <br />
  237. <br />
  238. <div class="titletext" align="justify">
  239. The Land Of Coffee
  240. <br />
  241. <br />
  242. <div class="titletextTwo" align="justify">
  243. Description:
  244. <br />
  245. Dimension:
  246. <br />
  247. Wood Type:
  248. <br />
  249. <br />
  250. <br />
  251. <br />
  252. <br />
  253. <br />
  254. <br />
  255. <br />
  256. <br />
  257. </div>
  258. </div>
  259. </div>
  260. </div>
  261. </div>
  262. </div>
  263. </div>
  264. </div>
  265. </div>
  266. </div>
  267. </div>
  268. </div>
  269. </div>
  270. </div>
  271. </div>
  272. </div>
  273. </div>
  274. </div>
  275. </div>
  276. </div>
  277. </div>
  278. </div>
  279. </div>
  280. </div>
  281. <div id="imagepanel" align="justify">
  282. <br />
  283. <br />
  284. <br />
  285. <br />
  286. <img src="http://bytes.com/images/decorations/acorn_.jpeg" align="justify">
  287. <br />
  288. <br />
  289. <br />
  290. <br />
  291. <img src="http://bytes.com/images/decorations/desertClock.jpg" align="justify">
  292. <br />
  293. <br />
  294. <br />
  295. <br />
  296. <img src="http://bytes.com/images/decorations/farmRooster.jpg" align="justify">
  297. <br />
  298. <br />
  299. <br />
  300. <br />
  301. <br />
  302. <img src="http://bytes.com/images/decorations/FullHarvest.jpg" align="justify">
  303. <br />
  304. <br />
  305. <br />
  306. <br />
  307. <img src="http://bytes.com/images/decorations/Love.jpg" align="justify">
  308. <br />
  309. <br />
  310. <br />
  311. <br />
  312. <img src="http://bytes.com/images/decorations/Nostalgia.jpg" align="justify">
  313. <br />
  314. <br />
  315. <br />
  316. <br />
  317. <img src="http://bytes.com/images/decorations/PrizeFish.jpg" align="justify">
  318. <br />
  319. <br />
  320. <br />
  321. <br />
  322. <img src="http://bytes.com/images/decorations/RaisedBowlCenterpiece.jpg" align="justify">
  323. <br />
  324. <br />
  325. <br />
  326. <br />
  327. <img src="http://bytes.com/images/decorations/southernpatternboards.jpg" align="justify">
  328. <br />
  329. <br />
  330. <br />
  331. <br />
  332. <img src="http://bytes.com/images/decorations/StyledShelves.jpg" align="justify">
  333. <br />
  334. <br />
  335. <br />
  336. <br />
  337. <img src="http://bytes.com/images/decorations/TheLandOfCoffee.jpg" align="justify">
  338. <br />
  339. <br />
  340. <br />
  341. <div align="center">
  342. <div id="woodsubpanel">
  343. <div id="footer" class="smallgraytext" align="center">
  344. <a href="index.html">Home</a> |  <a href="furniture.html">Furniture</a> |  <a href="about.html">About Us</a> | <a href="news.html">News</a> | <a href="contact.html">Contact Us</a>
  345. </div>
  346. </div>
  347. <script type="text/javascript">
  348. var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  349. document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  350. </script>
  351. <script type="text/javascript">
  352. try{
  353. var pageTracker = _gat._getTracker("UA-xxxxxx-x");
  354. pageTracker._trackPageview();
  355. } catch(err) {}</script>
  356. </body>
  357. </html>
  358.  
Mar 24 '10 #3
mariko
23
It sucks but there it is. Do you need CSS?
Mar 24 '10 #4
drhowarddrfine
7,435 Expert 4TB
Yes, need the CSS. Also, surround your mark up with code tags: [ code ][ /code ] without the spaces between the brackets.

EDIT: Hold off on the CSS. I want to show you something first.
Mar 24 '10 #5
drhowarddrfine
7,435 Expert 4TB
There are a couple ways of listing the items on the page. Here's one I threw together:
Expand|Select|Wrap|Line Numbers
  1. <style>
  2. h1{text-align:center}
  3. div{width:600px;height:100px;margin:0 auto;border:1px solid}
  4. img{float:left;height:100px}
  5. </style>
  6.  
  7. <h1>Decorations</h1>
  8. <div>
  9. <img src="1.gif">
  10. <dl>
  11. <dt>Acorn Bird Feeder</dt>
  12. <dd>Description:</dd>
  13. <dd>Dimensions:</dd>
  14. </dl>
  15. </div>
  16.  
  17. <div>
  18. <img src="1.gif">
  19. <dl>
  20. <dt>Desert Clock</dt>
  21. <dd>Description:</dd>
  22. <dd>Dimensions:</dd>
  23. </dl>
  24. </div>
  25.  
Notice the markup is easier to read and edit. The styling stays out of the way in the head or can be placed in an external stylesheet.

Inline CSS styles are evil.

You should use margin and padding to space out your elements, not <br> which is used for line endings.

The transitional doctype you are using is for older pages transitioning to using current html markup. New pages should never used deprecated markup and, therefore, a strict doctype. However, you are using older markup and it's needed to keep certain errors from being flagged by the validator though the browser won't care.

If possible, it's always good to have an online test site cause it's easier than copy/pasting everything, plus we have the advantage of having any images.
Mar 24 '10 #6
mariko
23
Will that fix my inconsistency problems concerning browsers? I agree that I need to update my code regardless. Thanks for helping me!
Mar 24 '10 #7
drhowarddrfine
7,435 Expert 4TB
Generally, the only problem browser will be IE, but as long as you initially test your markup in a modern browser, everyone will fall into line and you'll have only IE to contend with.

The purpose of doing it by the example is to eliminate all those unnecessary elements and give you more control. One single div contains one single product and that single product can be moved anywhere on the screen. Using <br> each is a little blocking element and each must be manipulated should anything change. All the extra nesting you had before is gone.
Mar 24 '10 #8
drhowarddrfine
7,435 Expert 4TB
As I said, there are other ways to do this. Some will say that's a "list of products" so:
<ul>
<li><img src=""><p>Description: </p></li>
<li></li>
</ul>

but I think that would start to get hairy.
Mar 24 '10 #9
that is what i have used...

but i can't get it to send information through a mailto: link...

and no one has been able to help me
Mar 31 '10 #10
it is different in different broswers because each browswer reads and writes slightly differently and that is why you get some people who prefer firefox over IE7 and stuff...
Apr 9 '10 #11

Sign in to post your reply or Sign up for a free account.

Similar topics

3
by: Colin McKinnon | last post by:
Hi all, The title says it all - I'm doing sessions with cookies. I can divide the data within the session easily enough but I can't see when the user creates a new window or closes an old one. ...
53
by: Cardman | last post by:
Greetings, I am trying to solve a problem that has been inflicting my self created Order Forms for a long time, where the problem is that as I cannot reproduce this error myself, then it is...
8
by: alanstew | last post by:
With the body tag calling out 'window onload', a function with a 'window.open' fails at the 'window.open' line. If I cut out the body tag, the function executes as normal. At first I thought it...
5
by: CreepieDeCrapper | last post by:
i have a simple JS window.open function that i'm calling and it works great here: http://demo.creationsite.com/GLBC/www/ (click on "virtual tour" in the yellow text link) - no status bar -...
8
by: Lian | last post by:
Hi all, It is a newbie's question about html tag "img". The attributes "title" and "alt" for "img" seems having the same function. So what is the main difference between them? Can i use them at...
7
by: Andrea | last post by:
Hi there - I'm hoping someone can help me; I've been struggling with this for a few days! :-) I have a webpage that is comprised of many forms containing questions. As the user answers one...
28
by: Noone Here | last post by:
AIUI, it was not all that long ago when the threat to personal users, was attachments that when executed compromised machines with keyloggers, trojans, etc. Now it seems that the big problem is...
27
by: David Golightly | last post by:
This is just a quick poll for all you web devs out there: What browsers do you test on/are concerned about compatibility with? Obviously, you're going to test on current-generation browsers such...
3
by: pradeep | last post by:
Hello, Can any one tell me different functions or properties of javascript which are gives different outputs on different browsers ? Thanks in advance. Bye
16
by: LayneMitch | last post by:
Greetings everyone. I'm new to the webdevelopment game and I developed my first site that looks good in IE but crappy in Mozilla/Firefox. Any advice on making my site browser to browser...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...

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.