why is my code different in different browsers?

**drhowarddrfine** · Mar 24 '10, 03:57 PM

Without a link, or the complete markup, anything would be just a wild guess.

**mariko** · Mar 24 '10, 04:19 PM

Code:

<!DOCTYPE html PUBLIC "_//W3C//DTD XHTML 1.o Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="http://bytes.com/images/style.css" type="text/css" />
<title>Herbergers' Furniture Company</title>
</head>
<body>
<div id="page" align="center">
<div id="content" style="width:800px">
<div id="banner">
<div style="margin-top:30px" class="whitetitle">
</div>
</div>
<div id="menu">
<div align="right" class="smallwhitetext" style="padding:9px;">
<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>
</div>
<div id="panelbyimages" style="padding:10px">
<br />
<div class="titletext">Decorations</div>
<br />
<div class="titletext" style="padding:30px;" align="justify">
Acorn Birdfeeder
<br />
<br />
<div class="titletextTwo" align="justify">
Description:
<br />
Dimensions:
<br />
Wood Type:
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="titletext" style="padding:30px;" align="justify">
Desert Clock
<br />
<br />
<div class="titletextTwo" align="justify">
Description:
<br />
Dimensions:
<br />
Wood Type:
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="titletext" align="justify">
Farm Rooster
<br />
<br />
<div class="titletextTwo" align="justify">
Description:
<br />
Dimensions:
<br />
Wood Type:
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="titletext" align="justify">
Full Harvest
<br />
<br />
<div class="titletextTwo" align="justify">
Description:
<br />
Dimensions:
<br />
Wood Type:
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="titletext" align="justify">
Love
<br />
<br />
<div class="titletextTwo" align="justify">
Description:
<br />
Dimensions:
<br />
Wood Type:
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="titletext" align="justify">
Nostalgia
<br />
<br />
<div class="titletextTwo" align="justify">
Description:
<br />
Dimensions:
<br />
Wood Type:
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="titletext" align="justify">
Prize Fish
<br />
<br />
<div class="titletextTwo" align="justify">
Description:
<br />
Dimensions:
<br />
Wood Type:
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="titletext" align="justify">
Raised Bowl Centerpiece
<br />
<br />
<div class="titletextTwo" align="justify">
Description:
<br />
Dimensions:
<br />
Wood Type:
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="titletext" align="justify">
Southern Pattern Boards
<br />
<br />
<div class="titletextTwo" align="justify">
Description:
<br />
Dimensions:
<br />
Wood Type:
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="titletext" align="justify">
Syled Shelves
<br />
<br />
<div class="titletextTwo" align="justify">
Description:
<br />
Dimensions:
<br />
Wood Type:
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="titletext" align="justify">
The Land Of Coffee
<br />
<br />
<div class="titletextTwo" align="justify">
Description:
<br />
Dimension:
<br />
Wood Type:
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="imagepanel" align="justify">
<br />
<br />
<br />
<br />
<img src="http://bytes.com/images/decorations/acorn_.jpeg" align="justify">
<br />
<br />
<br />
<br />
<img src="http://bytes.com/images/decorations/desertClock.jpg" align="justify">
<br />
<br />
<br />
<br />
<img src="http://bytes.com/images/decorations/farmRooster.jpg" align="justify">
<br />
<br />
<br />
<br />
<br />
<img src="http://bytes.com/images/decorations/FullHarvest.jpg" align="justify">
<br />
<br />
<br />
<br />
<img src="http://bytes.com/images/decorations/Love.jpg" align="justify">
<br />
<br />
<br />
<br />
<img src="http://bytes.com/images/decorations/Nostalgia.jpg" align="justify">
<br />
<br />
<br />
<br />
<img src="http://bytes.com/images/decorations/PrizeFish.jpg" align="justify">
<br />
<br />
<br />
<br />
<img src="http://bytes.com/images/decorations/RaisedBowlCenterpiece.jpg" align="justify">
<br />
<br />
<br />
<br />
<img src="http://bytes.com/images/decorations/southernpatternboards.jpg" align="justify">
<br />
<br />
<br />
<br />
<img src="http://bytes.com/images/decorations/StyledShelves.jpg" align="justify">
<br />
<br />
<br />
<br />
<img src="http://bytes.com/images/decorations/TheLandOfCoffee.jpg" align="justify">
<br />
<br />
<br />
<div align="center">
<div id="woodsubpanel">
<div id="footer" class="smallgraytext" align="center">
<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>
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

**mariko** · Mar 24 '10, 04:20 PM

It sucks but there it is. Do you need CSS?

**drhowarddrfine** · Mar 24 '10, 05:05 PM

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.

**drhowarddrfine** · Mar 24 '10, 05:33 PM

There are a couple ways of listing the items on the page. Here's one I threw together:

Code:

<style>
h1{text-align:center}
div{width:600px;height:100px;margin:0 auto;border:1px solid}
img{float:left;height:100px}
</style>

<h1>Decorations</h1>
<div>
<img src="1.gif">
<dl>
<dt>Acorn Bird Feeder</dt>
<dd>Description:</dd>
<dd>Dimensions:</dd>
</dl>
</div>

<div>
<img src="1.gif">
<dl>
<dt>Desert Clock</dt>
<dd>Description:</dd>
<dd>Dimensions:</dd>
</dl>
</div>

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.

**mariko** · Mar 24 '10, 06:36 PM

Will that fix my inconsistency problems concerning browsers? I agree that I need to update my code regardless. Thanks for helping me!

**drhowarddrfine** · Mar 24 '10, 08:01 PM

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.

**drhowarddrfine** · Mar 24 '10, 08:03 PM

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>Descr iption: </p></li>
<li></li>
</ul>

but I think that would start to get hairy.

**MusoFreak200** · Mar 31 '10, 06:57 AM

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

**MusoFreak200** · Apr 9 '10, 03:12 AM

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...

why is my code different in different browsers?

why is my code different in different browsers?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment