By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,335 Members | 2,218 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,335 IT Pros & Developers. It's quick & easy.

Ghosts of The Box Properties

P: n/a

Seemed like a good day to bring this up.

I've been shooting for the impossible dream, a screen that looks
exactly the same on FF and IE. I know that the big difference between
FF and IE regards box properties is that width in FF is just that of
the core material but IE width also includes padding and borders. That
seemed like an easy problem to solve, just don't use padding and
borders and FF and IE will be identical.

Or maybe not. Here's the setup I wanted:

<div <div>
<iframe <iframe>
<iframe <iframe>

....where total width for the two divs is 100% and total length for
each div is 100%. The total length for the iframes within each div is
also 100%. No padding or borders on anything.

The first thing I noticed is that I had to "float" the two divs to
cause them to be side by side. Without the floats there must be some
ghostly pixel or two being inserted because they ended up vertically
aligned. With the floats the two divs are side by side in both FF and
IE. Whooo, scarey.

After the floats, the FF screen was exactly how I wanted it to be,
using the entire screen top to bottom and side to side. The IE screen,
however, had developed a ghostly scroll bar to the right of the
right-hand div. The scroll bar was greyed out, didn't have an up-down
tab, and didn't move the screen no matter where you clicked on it. It
did, however, take up real space on the screen and occasionally caused
a text frame on it's left to overflow.

After a little investigation, I decided this had something to do with
the "overflow" statement. I originally had all the divs, iframes, and
src within the iframes with their own overflow statement either
"hidden" or "auto". I changed it to an "overflow:hidden;" statement
only in the highest level body statement and "overflow:auto;" only in
the body statements of the iframe src that needed it. Amazingly, the
ghostly scroll bar vanished from the IE screens!

Well...not exactly. It was still there, it had just become invisible.
It still took up space on the right side of the screen. Is a visible
ghost better or worse than an invisible one?
Anyway here's the current CSS:
Body class for the highest level <bodystatement.
..bframe
{
margin:0;
padding:0;
border:0;
overflow:hidden;
}
Class for the two floated divs
..bigdivL
{
float:left;
width:48%;
height:100%;
border:0;
}
..bigdivR
{
float:left;
width:52%;
height:100%;
border:0;
}
Class for the four iframes
..TheHand
{
width:100%;
height:66%;
overflow:hidden;
}
..TheAuction
{
width:100%;
height:34%;
overflow:auto;
}
..TheText
{
width:100%;
height:96%;
overflow:auto;
}
..TheNav
{
width:100%;
height:4%;
}
Body class for the src in the upper right iframe
..b1
{
background-image:url(chalk.jpg);
font:arial;
font-weight:bold;
margin:1em;
overflow:auto;
}
Body class for the src in the lower right <iframe>
..bnav
{
background-color:#f0e68c;
font:arial;
font-weight:bold;
font-size:smaller;
margin:0;
}

Body class for the src in the upper left <iframe>
..bhand
{
background-color:#1e90ff;
font:arial;
font-weight:bold;
margin:1em;
}
Body class for the src in the lower left <iframe>
..bauct
{
background-color:#00ffff;
font:arial;
font-weight:bold;
margin:1em;
overflow:auto;
}
There's never a silver bullet or a sprig of wolfbane around when you
need one. Anyone know what's happening?

Regards,
Kent Feiler
www.KentFeiler.com
Oct 31 '06 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Kent Feiler wrote:
>
I've been shooting for the impossible dream, a screen that looks
exactly the same on FF and IE.
You have no control over the visitor's browser, screen settings,
installed fonts, font sizes or anything else. Comparable results are
achievable, exact is not, so there isn't much point in trying.

Attempts at a pixel-perfect layout almost always fail miserably.
I know that the big difference between
FF and IE regards box properties
You must not get around much. ;)

It is common knowledge that IE6 uses the same box model as Firefox,
Opera, Safari and other browsers when it renders in standards mode. Use
a Strict doctype and accommodate all browsers, not just 1 or 2. As long
as the result in IE5x is still usable, who cares if it is "off" by a few
pixels. The 5 people still using those browsers are probably accustomed
to rendering oddities by now anyway.
Anyway here's the current CSS:
Post a URL, not code.

--
Berg
Nov 1 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.