Alignment in Firefox vs. Explorer

HTML & CSS
21

You didn’t have a complete DTD, therefore IE was in quirks mode where it emulates its really old, pre 2001, non-standard self. This especially makes itself felt where centering and box sizes are concerned.

With the coming of IE8, and to a lesser extent IE7, MSFT is finally approaching good standards support. Unfortunately, MSFT is making little effort to keep up with the other browsers, Firefox, Opera, and Safari/Chrome, as they begin supporting the latest html elements and css properties as they come out of the respective working groups. Lest you think the modern browsers rash, html and css have not been updated in 11 and 12 years respectively; it’s past time.

cheers,

gary

22

Hi Barnum,

http://johns-jokes.com/downloads/sp/stoutstandards/

I have re-written your Research.html and you can find the results in the above link.

I also optimised your images and the aspect ratio is now correct and also resized to remove the scaling. You should find that the page loads quite a bit quicker.

Cheers,

John_Betong

.

23

there is a quick way to fix this. but internally, there are still lots of problems. like…no one uses <font color= xx> now.

Ok, back to the quick fix, the images are not centering in FF because the table isn’t occupying the full width.

So, just give it a width=“100%” and the td containing the image a align=“center” like below:

<table class="image" align="center" [COLOR="Red"]width="100%"[/COLOR]>
	<tr>
	<td [COLOR="Red"]align="center"[/COLOR]><img src="images/find.jpg" height="695" width="500" border="4" alt="Latest Where to Find Treasure Book">
		</td>
	</tr>
</table>

why is IE centering it? well, i never understood IE either…:smiley:

24

Wow, thanks very, very much to all of you for taking the time to rewrite for me. I really need to dissect them line by line to understand them better. Be patient with me… I did opt for the quick fix on the image center so that the site looks a little better in FF.

Tried all the suggestions offered, but still having the text size problem in FF, but will figure it out sooner or later. Seems when I check this out online most people have just he opposite problem (text is too small)…?

I also appreciate the effort to do the layout a little different. I like a few of the ideas, and will make the changes soon.

Thanks again for all your help.

25

Glad you got some of the help you needed. And glad to help trouble shoot with you! (Even though I don’t think my suggestions helped… :smiley:

26

Copy the source code for this page and change the font on line 17 to a specific font such as font-size: 12px and it works (for me) in Firefox, IE, Opera and Safarari.



		  body {
		    background-color:#deb887; color: black;
		    font-family:sans-serif, arial, tahoma, verdana, 'times new roman';
		    font-style:italic;
		    font-size:16px; /* THIS IS THE LINE TO CHANGE *?
		    font-weight:700;
		    line-height:1.5}

I looked at your code and you change the font numerours times. Just set a global font once should be enough to make the whole page a uniform font size. This is the basic idea of the CSS - Cascading Style Sheets. Set the font in the <body …> and the font is automatically inherited in tables, divs, paragraphs, fieldsets, etc.

Also “Take your hat off”

…