Page displays differently in different browsers

Get Started
1

OK, I HAD my page set up pretty good (at http://www.saccc567.com/PicturesNEW5.php) and it did look pretty good in Firefox. Then I tried IE8 and Google Chrome and, well, all of them now look different.

How can I fix this???

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Picture Page</title>

<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css" media="screen" />
<link rel="stylesheet" type="text/css" href="AllPages.css" media="screen" />
<style type="text/css">

@charset "utf-8";
/* CSS Document */

img,a img {
    border:none;
}

a {
    text-decoration: none;
    border: none;
}

.images{
    width:100%;
    text-align:center;
    margin:90;
    padding:0;
}

.images li {
    display:inline;
}

.images li a{
    margin: 5px;
    width:220px;
    display:inline-block;
    font-size:80%;
    font-color: magenta;
    text-align:center;
    vertical-align:top;
} 

legend {
    padding: 0.2em 0.5em;
    border:1px solid green;
    color:green;
    font-size:90%;
    text-align:right;
}

img {
    margin: .5em auto;
}

a {
    text-decoration: none;
    border: none;
}

fieldset {
    padding-top: 2em;	
}

div.albumJPG {
    display: inline-block;
    margin: 5px auto;
    width:220 px; 
    font-size:80%; 
    font-color: magenta; 
    text-align:center; 
    /*    float:left;  */
}

#header {
    /*    background-color: #FF3;  */
    color:#000;
    margin: -5px 0px 0px -10px;
    /*    height: 150px;   */
    font-size: 1.1em;
    padding: 10px 10px;
    border: solid 1px green;   
    text-align: center;
    vertical-align:middle;
    background-color:#0C3;
}

#mainContent {
  padding-left: 10px;
  padding-top: 2px;
  /*    background-color: #567;  */
/*    border: solid 1px green;  */
  margin: 0 175px;
  position: relative;
}

.clear {
  clear: both;
}

.Mission p {margin-bottom: 10px; }

h2, h3 {text-align:center; padding-top: 5px;}
</style>
</head>

<body id="PagePictures" >
<div  id="Wrapper" class="Container">
       <div id="leftcol">
			<?php include_once('inc/MainNav.php'); ?>
       </div>
       <!-- end left column -->
       <div id="center-col">
          <div id="header">
              <h1 class="Welcome">Pictures </h1>
              <div class="Mission">
                  <p style="font-size:.8em;">Click on an image view each ablum<br><br> We hope you enjoy these historical views!!</p>
                  <p>Each album may take quite a while to load as some years have a lot of pictures (close to 200 in some years!).  
                  Please be patient when you click the image/link.</p>
              </div>
          </div>

          <fieldset id="pixEvents">
          <legend id="pixeventsLegend" style="font-size: 1.2em; font-weight: 600; color: red; margin-left: 2%;">
             Events
          </legend>
          </fieldset>
        <fieldset id="Shows" >
        <legend align="center" style="font-size: 1.2em; font-weight: 600; color: red; margin-left: 2%; margin-bottom: 2em; margin-top: 1.5em;">
           Our shows over the years.....
        </legend>
	<fieldset style="float: left; width: 48%; margin-left: 5px; margin-right: 5px; margin-top: -45px;">
    	<legend>
             SACCC Open Show Pictures
        </legend>
        <ul class="images">
    		<li><a href="2011Pictures.php"><img src="" width="160" ><br> 2011 Show Pictures</a></li>
            <li><a href="2010Pictures.php"><img src="images/2010Flyer.jpg" width="160" > <br>2010 Show Pictures</a></li>
            <li><a href="2009Pictures.php"><img src="images/flyer09.jpg" width="160"> <br>2009 Show Pictures</a></li>
            <li><a href="2008Pictures.php"><img src="images/flyer08.jpg" width="160"> <br>2008 Show Pictures</a></li>
            <li><a href="2007Pictures.php"><img src="images/flyer07.jpg" width="160"> <br>2007 Show Pictures</a></li>
            <li><a href="2006Pictures.php"><img src="images/flyer076.jpg" width="160"> <br>2006 Show Pictures</a></li>
        </ul>
    </fieldset>

	<fieldset style="float: right; width: 48%; margin-left: 5px; margin-right: 5px; margin-top: -45px; ">
    	<legend>
        	Camp Shows (some missing years)

        </legend>
        <ul class="images">
    		<li><a href="#"><img src="" width="220" > <br>2011 Show Pictures</a></li>            
    		<li><a href="#"><img src="" width="220" > <br>2010 Show Pictures</a></li>
            <li><a href="#"><img src="" width="220"> <br>2009 Show Pictures</a></li>
            <li><a href="#"><img src="" width="220"> <br>2008 Show Pictures</a></li>
            <li><a href="#"><img src="" width="220"> >br>2007 Show Pictures</a></li>
        </ul>
    </fieldset>
</fieldset>
<!-- oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo -->        
<!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
         </div>
         <!-- end center column -->
</div>
<!-- Container / Wrapper -->
</body>
</html>
2

Your site will always look different I diffrent browers, you could use normalize.css to minimize the diffrences.
http://necolas.github.com/normalize.css/

3

hi Gar onn,

thanks for your link, i need to learn it too :slight_smile:

4

It’s not your code’s problem. It’s happened because of browser. No need to worry.

5

Well, I’m guessing here, but it could be because you’re using <fieldset> tags around lists. <fieldset> should be used within <form> tags to group form controls and labels; I’m not aware of any other valid use for it.

6

The use of fieldsets and legends is unconventional and inappropriate here. They’re intended for use in forms, rather than to define areas of general content. They are also notoriously difficult to style consistently cross-browser.

The appropriate element for this, for instance,

<fieldset id="pixEvents">
    <legend id="pixeventsLegend" style="font-size: 1.2em; font-weight: 600; color: red; margin-left: 2%;">Events</legend>
</fieldset>

Would be a secondary heading element:

<h2>Events</h2>

With the CSS in a stylesheet, embedded or external, rather than inline styles.

The columnar fieldsets would usually be marked up as divs, with the headings - “SACCC Open Show Pictures” etc. - as h3s.

With headings and divs, you’ll find consistency far easier to achieve.

7

One thing to remember is that apart from you, there will be few (if any) people who will look at your site in different browsers, and almost certainly none who will look at it in two different browsers side-by-side trying to spot any differences. As long as it looks planned and coherent in each browser, it doesn’t matter too much if one is a few pixels different to another.

(But as Victorinox said, you really do need to use more appropriate code, and not use form elements when you haven’t got a form, because that is a sure fire way to confuse the heck out of browsers)