Page formatting different in different browsers Options

[snuffysam]

For some reason, my website looks very different depending on the browser, even though the code is the same throughout.
Here is what it looks like in Safari, Firefox, and Chrome respectively:



None of these are what it's supposed to look like. The closest on this list is Safari, which is only missing the image in the middle.
Why would this happen? How do I fix it?

This post has been edited by snuffysam: Feb 24 2013, 12:20 PM

[Christian J]

You should post the URL of the page you're having trouble with (I could figure it out anyway).

First, add a Doctype. Doctypes are necessary to put browsers in "standards mode". Some examples are shown here: http://www.htmlhelp.com/tools/validator/doctype.html

Next test the pages in the HTML validator (see link at the top). Some hints:

* all pages need a TITLE element

* many attributes values need to be quoted

* use ordinary quote characters, not curly ones

* you can't use decimal values in most HTML attributes

As a side note I suggest you find a more robust hosting solution that the current one (HTML hosted by dropbox and images by photobucket). While the current solution may work it just complicates things a lot for yourself.

[snuffysam]

What hosting do you recommend?

EDIT: There's still the same formatting issues, despite the validator accepting it.

This post has been edited by snuffysam: Feb 24 2013, 04:20 PM

[pandy]

One where you can upload your files so you don't have to use cloaked redirection.

[Christian J]

What hosting do you recommend?

There are thousands of paid hosts, check out online reviews etc. Don't know about free ones.

EDIT: There's still the same formatting issues, despite the validator accepting it.

The widths of the top row link images add up to 100.6%, which in theory means the last "blank bar" image should jump down below the rest. But I suspect Firefox ignores the decimals so that you get nine 5% images followed by one 49%, or 94% in total. Try using integer percent values instead. Better yet, don't use percent values for the link images, and make the last "blank bar" image a CSS background.

Vertical percent values (like in the tall side border images) is tricky with HTML alone (at least in standards mode). You probably need CSS for that, the easiest might be to use a repeating background image.

[pandy]

There are thousands of paid hosts, check out online reviews etc. Don't know about free ones.

There are thousands of those too.

[Christian J]

BTW are decimals allowed in HTML4 percent length values? I thought not, but the spec doesn't say: http://www.w3.org/TR/html401/types.html#type-length (it does say pixels must be integers, though).

HTML5 does not allow it: http://www.w3.org/TR/html5/embedded-conten...#attr-dim-width not sure if it allows percentages either, actually.

[pandy]

Never thought about it, but it says:

CODE

<!ENTITY % Length "CDATA" -- nn for pixels or nn% for percentage length -->

http://www.w3.org/TR/html401/sgml/dtd.html#Length

If one "nn" should be interpreted as an integer, maybe the other one should to. On the other hand, you can't have a fraction of a pixel, but percent is all about fractions anyway.

[snuffysam]

So how do I set the blank bars as backgrounds?
Is there a way to make one cell in a table have its own background?

[pandy]

I don't understand the first question but on the second I say: yes. With CSS all (visible) elements can have their own background.

[snuffysam]

So I figured out how to make the top blank bar work with these:

CODE

td.topBar {
background-image:url('http://i1190.photobucket.com/albums/z455/snuffysam/Snuffysam%20Games/snuffysamGames_blank_zpscc6999aa.png');
background-size:100% 100%;
}

CODE

<td class="topBar" width="55%" valign="top"></td>

And that works for the top one. But when I do this:

CODE

td.leftBar {
background-image:url('http://i1190.photobucket.com/albums/z455/snuffysam/Snuffysam%20Games/snuffysamGames_LBorder_zps326ce52c.png');
background-size:100% 100%;
}

CODE

<td width="100%" class="leftBar" valign="top"></td>

the left bar doesn't show up!
Is it because there's nothing else in the row?

[pandy]

Yes, I think so. Because the cell is empty and has no height.

[Christian J]

To give HTML elements percentage height you might use http://www.jr.pl/www.quirksmode.org/css/100percheight.html

[snuffysam]

It's still not working.
I use this code in my style:

CODE

html,body {
   height: 100%;
}
div#leftBar {
        height: 100%;
}

And this in the left table:

CODE

<tr><div id="leftBar"></div></tr>

But it still isn't appearing!

[pandy]

You can't replace the TD with a DIV. And make it a reasonable hight, not 100%. If you want that bar to go all the way down, butting in a nested table won't ever work.

[snuffysam]

So what do I do then?

[pandy]

I don't know what how you want it to look or work, so that's hard to say.

If you want the stripe to go all the way down use one (1) table cell and make it go all the way with rowspan. Then add the background and put the icons directly in that TD. No need for a cell for everything. The images will be under each other anyway if there isn't room for them to be side by side. And don't make the icons 100% wide. That's just, well...

[snuffysam]

I finally took the time to clean up and reformat the code for each page.
And it's mostly good. The borders extend all the way to the bottom.

But I'm still having problems with differences in different browsers.
In Safari, that Time Stamper image in the middle doesn't appear.
In Firefox, the right border is thick and ugly.
Basically the same as the images in the first post, except the lining-up and size parts have been fixed.

So how do I make the image appear in Safari? And how do I fix the right border in Firefox?

[pandy]

FYI no images but the two small icons to the left appears in Iron (same engine as Chrome) or Safari Windows.

You still have errors, some of then table related. Fix them and your images will show up.

http://www.htmlhelp.com/cgi-bin/validate.c...p;input=yes#L42

[snuffysam]

I fixed the errors on this page: https://dl.dropbox.com/u/39574758/Snuffysam...esOriginal.html
But the errors that were on that page still show up!