Major layout discrepancies between IE and Firefox

[Drew Martin]

The page at the below URL renders perfectly in IE6, but is failing horribly
in Firefox (0.7, 0.8). I can't figure out why and was hoping someone could
take a quick look at it. Most of the layout is done through the use of
floats.

HTML file: http://superdisco.net/css/index.html
CSS file: http://superdisco.net/css/sd.css

The gray and maroon backgrounds are to highlight the layout used.

Any ideas on how I can get the page to display correctly in Firefox?

Thanks,
Drew Martin

PS: I'm sorry if it is bad form to post example URLs in this newsgroup, I
read the FAQ and saw nothing about it.

[Lauri Raittila]

Drew Martin wrote:

The page at the below URL renders perfectly in IE6, but is failing horribly
in Firefox (0.7, 0.8).
That means that there is 90% change that there is bug in IE and you have
understood something wrong. As it breaks with Opera too, change is 99%
I can't figure out why
Most likely because you don't know CSS box modell.
width == content-width
Most of the layout is done through the use of
floats.
No browser supports floats perfectly, but I don't think this is related
to floats.
HTML file: http://superdisco.net/css/index.html
CSS file: http://superdisco.net/css/sd.css
IE is in quirks mode, I assume. Try removing xml prolog. If it works,
that was the case.

http://gutfeldt.ch/matthias/articles/doctypeswitch.html
http://www.hut.fi/u/hsivonen/doctype.html

Did you know btw that IE don't support XHTML, exept by accident?

BTW, why are you using XHTML1.1, as you can't even serve it right.

You have contradicting character encoding stuff, you should fix that too
(UTF-8 vs ISO-8859-1)
PS: I'm sorry if it is bad form to post example URLs in this newsgroup, I
read the FAQ and saw nothing about it.

Psoting the URL is good thing. But you should also say something else
than it works perfectly in IE and not on FF. After all, it seems that it
works perfectly on FF and breaks badly on IE, when using definition of
perfect that is more widely accepted.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[Gus Richter]

Drew Martin wrote:

The page at the below URL renders perfectly in IE6, but is failing horribly
in Firefox (0.7, 0.8). I can't figure out why and was hoping someone could
take a quick look at it. Most of the layout is done through the use of
floats.

HTML file: http://superdisco.net/css/index.html
CSS file: http://superdisco.net/css/sd.css

The gray and maroon backgrounds are to highlight the layout used.

Any ideas on how I can get the page to display correctly in Firefox?

1. IE does not know XHTML
2. Using the XML Declaration puts IE 6 into Quirks Mode.
3. Removing the XML Declaration puts IE 6 into Standards Mode.
4. A suggestion is to place notes into your stylesheets. It helps you to
debug.
5. I have made changes to make your styles work. I may have approached
it differently, depending on what you had in mind.
6. Look over the notes that I have placed in the modified stylesheet below.
7. IE calculates widths differently, therefore some differences.
8. Read up on the box model and floats in particular.
9. Try the following modified stylesheet:
10. WFM in IE and Moz.
11. Does not work in Opera. It seems that Opera does not support
display:inline-block.
12. Perhaps someone else will help further.

=====
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #004477;
color: #FFFFFF;
font-size: 80%;
text-align: center;
line-height: 13pt;
}

#frame { /* Over-All Wrapper */
width: 750px;
text-align: left;
border: 2px solid #000;
margin-left: auto;
margin-right: auto;
padding: 0; /* changed 0px; to 0; */
}

#navcontainer { /* wrapper for Navs and Image 1 & 2 */
/* display: inline; removed, needs to be the default of block */
background-color: Gray;
float: left; /* removes the box out of normal flow */
width: 150px;
padding-left: 3px;
padding-right: 3px;
font-size: 12px;
font-weight: bold;
margin: 0; /* changed 0px; to 0; */
}

#maincontainer { /* wrapper for Banner, Tiles, Contents */
display: inline-block; /* changed from inline to inline-block */
background-color: Maroon;
/* float:right; !!!drops it down below navs */
/* width: 100%; ??? */
/* padding-left: 3px; removed left and right padding
padding-right: 3px; and used shorthand with adjustments */
padding:1px 3px 1px 3px;
font-size: 12px;
font-weight: bold;
margin: 0;
margin-left:156px; /* to clear navcontainer 3+150+3=156 */
}
#banner, #tiles, .content { /* Banner, Tiles and Contents */
/* display: block; not needed - is so by default */
padding: 3px;
background-color: #116699;
border: 1px solid #fff;
margin-top: 5px; /* changed from 6px; to 5px; to */
margin-bottom: 5px; /* compensate for the 1px border */
}

#navcontainer .navheader, #navcontainer a { /* Link Visited & Hover */
display: block; /* states */
padding: 3px;
background-color: #116699;
border: 1px solid #fff;
margin-top: 6px;
margin-bottom: 6px;
}

#navcontainer .navheader, #navcontainer a { /* this is not needed */
/* width: 100%; ??? */
}

#navcontainer a:link, #navcontainer a:visited {
color: #FFF;
text-decoration: none;
}

#navcontainer a:hover {
background-color: #4499CC;
color: #FFF;
}

#buttonstrip { /* for Image 1 and Image 2 */
text-align: center;
}

#banner { /* Home box */

font-weight: bold;
text-align: center;
/* width: 100%; ??? */
margin-right: 135px; /* added to clear the tiles */
}

#tiles { /* box for tile 1-5 */
/* margin-left: 6px; "broken?" NO, applied margin to banner */
float: right;
width: 127px; /* IE needs 1+25x5+1=127 */
font-weight: bold;
text-align: center;
/* padding-left: 0px; these 4 declaration removed
padding-right: 0px; and replaced with shorthand
padding-top: 0px; padding: 0;
padding-bottom: 0px; */
padding: 0;
margin-top: 4px; /* added margin to line up tiles */
height: 25px;
}

..content { /* are the two Contents boxes */
/* clear: both; THIS CLEARS AND PLACES IT UNDER NAVS */
/* display: block; not needed - is so by default */
/* width: 100%; ??? */
font-size: 100%;
margin-top: 6px;
}

..bullets { color: #CCCCCC; } /* are the .::.:. and :: */

#tile1 { /*tile 1-5 are the shaded small boxes*/
float: left;
background-color: #004475;
width: 25px;
height: 23px;
}

#tile2 {
float: left;
background-color: #5e96bf;
width: 25px;
height: 23px;
}

#tile3 {
float: left;
background-color: #98c3dc;
width: 25px;
height: 23px;
}

#tile4 {
float: left;
background-color: #cee1eb;
width: 25px;
height: 23px;
}

#tile5 {
float: left;
background-color: #ffffff;
width: 25px; /* typo?? changed 23px; to 25px; */
height: 23px;
}
=====

[Lauri Raittila]

Gus Richter wrote:

11. Does not work in Opera. It seems that Opera does not support
display:inline-block.

If you get problem with inline block on Opera, why are you using it?
Opera has buggy support for inline-block, others don't even try to
support it.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[Gus Richter]

Lauri Raittila wrote:

Gus Richter wrote:

11. Does not work in Opera. It seems that Opera does not support
display:inline-block.

If you get problem with inline block on Opera, why are you using it?
Opera has buggy support for inline-block, others don't even try to
support it.

1. I don't know exactly what the OP has in mind for end result.
2. I tried to get the thing working for IE and FF just as the OP wanted
and with the existing code, since nobody else did.
3. I have no intention of rewriting/redesigning the piece for the OP.
4. It should get the OP started - what to read up on - block, inline,
inline-block, float, etc.
5. His requirement says nothing about Opera - I provided it as
additional info.
6. I'm waiting for YOU to rewrite the piece for the OP, without
inline-block.

--
Gus

[Lauri Raittila]

Gus Richter wrote:

Lauri Raittila wrote:

Gus Richter wrote:

11. Does not work in Opera. It seems that Opera does not support
display:inline-block.
If you get problem with inline block on Opera, why are you using it?
So, I was mistaken who used it. As you posted changed the CSS, I assumed
it was you.
Opera has buggy support for inline-block, others don't even try to
support it.

5. His requirement says nothing about Opera - I provided it as
additional info.
And I added some additional information to your information, because that
was not really very informative.
6. I'm waiting for YOU to rewrite the piece for the OP, without
inline-block.

This seems to be only point in your post, and as you say you don't bother
doing it yourself, I think you have gotten some wrong idea about my post.
I have nothing against you, even if there was some communication problem
in the past between us.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[Gus Richter]

Lauri Raittila wrote:

Gus Richter wrote:

11. Does not work in Opera. It seems that Opera does not support
display:inline-block.

If you get problem with inline block on Opera, why are you using it?
So, I was mistaken who used it. As you posted changed the CSS, I assumed
it was you.

You were right the first time. I was the one that used
display:inline-block since it was the way to get HIS styles to work for
both IE and FF, without me doing a rewrite/redesign. He had used
display:inline which did not work.

Opera has buggy support for inline-block, others don't even try to
support it.

5. His requirement says nothing about Opera - I provided it as
additional info.

And I added some additional information to your information, because that
was not really very informative.

And I thank you for the additional information, since I am not up to
date on all Opera things.
6. I'm waiting for YOU to rewrite the piece for the OP, without
inline-block.

This seems to be only point in your post, and as you say you don't bother
doing it yourself, I think you have gotten some wrong idea about my post.
I have nothing against you, even if there was some communication problem
in the past between us.

I answered your question fully and I feel that I have spent more than
enough time on this, that's all. It was an invitation for you to make it
work for all three, as you suggested it should, without
display:inline-block. There are comments added to my modified stylesheet
which may help, if you decide to take on the invitation.
I realize that there probably is also a second language problem here. If
I have come across in any negative way toward you, please accept my
appology.

--
Gus

[Gus Richter]

Gus Richter wrote:

Lauri Raittila wrote:

Gus Richter wrote:

I was the one that used
display:inline-block since it was the way to get HIS styles to work for
both IE and FF, without me doing a rewrite/redesign. He had used
display:inline which did not work.

I had another quick look and find that removing the display property
completely is all that is needed for all three browsers to display it
correctly. I thought that I tried that first and it hadn't worked,
probably because I still had float in there. Anyway, this change is all
that is needed:

#maincontainer { /* wrapper for Banner, Tiles, Contents */
/* display: inline-block; removed display property completely */
....

It seems that I will have to reread the specs again, since I have made
errors in the notes in the modified stylesheet, wherein I mention the
default to be block when in fact it is inline that is the default.
Fortunately or unfortunately, nobody seems interested in the modified
stylesheet since nobody pointed out this blunder.

--
Gus