How do I get IE to display the following page properly?
Al @ UCBITU
A few days ago I posted a web site I am working on. I started redoing
it with stylesheets. Much to my dismay, my client insists on a scroll
area in the middle. Firefox and Chrome displays the page properly but
Internet Explorer shifts the iframe area downwards.
How do make this display the iframe on all three browsers properly?
Here is the test page URL: http://ucbitu.com/test2/
Thanks!
Al
------------
rf
"Al @ UCBITU" <keep.ear...@gmail.com> wrote in message
news:c34d1f70-cdf9-4cf5...@x23g2000prd.googlegroups.com...
> Hello All:
>
> A few days ago I posted a web site I am working on. I started redoing
> it with stylesheets. Much to my dismay, my client insists on a scroll
> area in the middle. Firefox and Chrome displays the page properly but
> Internet Explorer shifts the iframe area downwards.
>
> How do make this display the iframe on all three browsers properly?
Yes. Don't use an iframe, put the content directly on the page.
Al @ UCBITU
> "Al @ UCBITU" <keep.earth.cl...@gmail.com> wrote in messagenews:c34d1f70-cdf9-4cf5...@x23g2000prd.googlegroups.com...
>
> > Hello All:
>
> > A few days ago I posted a web site I am working on. I started redoing
> > it with stylesheets. Much to my dismay, my client insists on a scroll
> > area in the middle. Firefox and Chrome displays the page properly but
> > Internet Explorer shifts the iframe area downwards.
>
> > How do make this display the iframe on all three browsers properly?
>
> Yes. Don't use an iframe, put the content directly on the page.
I cannot get the tect in the middle to scroll then. That's a
requirement client won't give up.
Al
rf
What is a tect?
Ah, do you mean text?
In any case an iframe is probably not the best tool for the job. A simple
div can be made to scroll like your iframe does. Just give it a size and
specify overflow: scroll;.
> That's a
> requirement client won't give up.
It's a requirement to have two scrollbars on the page? Along with all the
accessibility and usability problems that entails? What is wrong with simply
putting the content directly on the page and using the scrollbar that is
already there?
And yes, I think the client should give up this idea. Show her how much of a
PITA a scrollable area in the middle of the screen is and tell here that the
web site is not for her but for her viewers.
Also google is going to have a very hard time finding any content on this
page. It will probably find this page here:
http://ucbitu.com/test2/dhome_content.html
and index that, all by itself, and totally ignore the page at
http://ucbitu.com/test2/index.html
Of course the last does not apply if you use a scrolling div (which I
disapprove of as well).
BTW for what this page does you do not need all of those nested divs in
there. You seem to be wrapping everything in a div just because you can :-)
As to why it's dropping in IE, don't know, but if you put borders on all
your many divs you may be able to spot the one that is causing it.
Oh, and don't resize images with the browser, especially not images of text,
and especially not bigger. Use your image processor to build a logo the
correct size, or better yet, use plain text in a h1 element. Google likes
that.
Jonathan N. Little
Again don't use an iframe, use server-side to insert
"dhome_content.html" directly into div "lyr1" then style the div:
div#lyr1 { width: 510px; height: 325px; overflow: auto; }
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
dorayme
<c34d1f70-cdf9-4cf5...@x23g2000prd.googlegroups.co
m>,
"Al @ UCBITU" <keep.ear...@gmail.com> wrote:
> Firefox and Chrome displays the page properly but
> Internet Explorer shifts the iframe area downwards.
>
...
>
> Here is the test page URL: http://ucbitu.com/test2/
FF and Chrome do not display this page properly unless something
rather odd is intended. And Opera also shifts the iframe down a
lot.
See your page under different user font sizes (pretend to be a
user and alter try zoom text only).
Check your test page with:
2. Best not to use px unit for fonts unless you really need to
for rare special effects (maybe drop caps...)
3. Best not to use line-height at all unless you are familiar
with it. Using units with line height suggests you may not not be.
4. Beware of absolute positioning unless you are very familiar
with it. It is too tricky.
5. Try hard not to use any widths and especially heights unless
you are sure things are not going to spill out of the resticted
space.
6. Try simpler technology, still using an iframe:
<http://dorayme.netweaver.com.au/frog/frog.html>
--
dorayme
dorayme
<d6f41b38-27a7-4285...@v34g2000prm.googlegroups.co
m>,
You could do something like
<http://dorayme.netweaver.com.au/frog/frog2.html>
--
dorayme
David E. Ross
Some handicapped individuals have extreme trouble using a mouse. They
can scroll a page by use of the arrow keys and Page Up and Page Down
keys. But they cannot use a scroll bar within a page.
If this is a commercial Web page -- a page for a business -- in the
U.S., your client might be inviting a lawsuit under the Americans with
Disabilities Act (ADA).
--
David E. Ross
<http://www.rossde.com/>.
Anyone who thinks government owns a monopoly on inefficient, obstructive
bureaucracy has obviously never worked for a large corporation. © 1997
Al @ UCBITU
> In article
> <c34d1f70-cdf9-4cf5-b2f2-23a7da155...@x23g2000prd.googlegroups.co
> m>,
I wholeheartedly agree with the "simpler technology" approach. Getting
that across to the client has not worked... She sees her colleague's
page and asks me to replicate it... All my templates with much simpler
designs that I proposed to her were pushed aside.
I also agree with most of the other points you are making. (The ones I
do not agree, I do not understand yet :) )
The style sheet is simply a copy from her colleague's site. (BTW, we
have her colleague's permission to do all this copying.)
So the line-height came with that...
Thanks for your comments and the sites you prepared.
Al
Al @ UCBITU
This is a mockup of the actual design David. Actual design has a
script that enables scrolling when the mouse hovers over two arrows.
Al
Al @ UCBITU
>
> Of course the last does not apply if you use a scrolling div (which I
> disapprove of as well).
>
> BTW for what this page does you do not need all of those nested divs in
> there. You seem to be wrapping everything in a div just because you can :-)
>
> As to why it's dropping in IE, don't know, but if you put borders on all
> your many divs you may be able to spot the one that is causing it.
>
> Oh, and don't resize images with the browser, especially not images of text,
> and especially not bigger. Use your image processor to build a logo the
> correct size, or better yet, use plain text in a h1 element. Google likes
> that.
"Tect" is how we say "text" here in California after a bottle of Napa
wine :) After two bottles, it becomes "tehst"...
I should have you by my side when I talk to the client! I like what
you say about the web site being for her viewers. It is very true.
I generated the image for this mockup in a few minutes, and it got out
of shape a bit. On the actual site it is OK.
As I explained in response to Dorayme, I've adopted the design of a
colleague of my client's. Not an approach I favor. I suspect that
design is a template, and has a div for you drop a company logo
containing text and graphics, all lumped into one gif. In my case
there is only text, but I discovered that putting a text with h1's is
screwing up things. When tinkering with the style sheet did not
resolve it, I decided to generate a gif of the graphic.
I did put borders earlier on some of the div's, but it still is not
clear to me why it does not work for IE. So I decided to post to see
if there is something obvious I am missing that you folks can catch.
(My rule is to seek help when I cannot resolve something after
spending three hours on it...)
Al
Adrienne Boswell
<keep.ear...@gmail.com> writing in news:652341f0-ce86-4453-b005-
f19093...@j16g2000prn.googlegroups.com:
>> Some handicapped individuals have extreme trouble using a mouse. ĸThey
>> can scroll a page by use of the arrow keys and Page Up and Page Down
>> keys. ĸBut they cannot use a scroll bar within a page.
>>
>> If this is a commercial Web page -- a page for a business -- in the
>> U.S., your client might be inviting a lawsuit under the Americans with
>> Disabilities Act (ADA).
>>
<please trim signatures>
>
> This is a mockup of the actual design David. Actual design has a
> script that enables scrolling when the mouse hovers over two arrows.
>
There are a lot of things wrong with that statement.
1. A person without a pointing device will not be able to use the area.
2. Is the scripting going to be fast/slow enough for me? What if I read
fast, and it's too slow? What if I read slowly and it's too fast?
3. Depending on where an author has put such a thing, I often have
problems because I have to scroll the right scroll bar to get low enough
to scroll a middle scroll bar (eg. a textarea form control), and I hate
that! This could easily be a case with this page as well.
Please don't do this. There is no need for it, and David is correct,
this could get you in trouble with ADA.
--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
David E. Ross
See Jakob Nielsen's "Scrolling and Attention" at
<http://www.useit.com/alertbox/scrolling-attention.html>. Nielsen is a
professional consultant on useability specializing in Web pages and
applications.
Al @ UCBITU
[...]
> Internet Explorer shifts the iframe area downwards.
> How do make this display the iframe on all three browsers properly?
> Here is the test page URL:http://ucbitu.com/test2/
[...]
It turns out that if I assign a width value of over 475 to the iframe,
IE starts pushing it down!
I fixed that, now the telephone numbers, address, etc. at the bottom
won't show up on IE!
rf
> On Mar 27, 8:38 pm, "Al @ UCBITU" <keep.earth.cl...@gmail.com> wrote:
>
> [...]
>> Internet Explorer shifts the iframe area downwards.
>> How do make this display the iframe on all three browsers properly?
>> Here is the test page URL:http://ucbitu.com/test2/
> [...]
>
> It turns out that if I assign a width value of over 475 to the iframe,
> IE starts pushing it down!
That sounds like a very fragile page.
> I fixed that, now the telephone numbers, address, etc. at the bottom
> won't show up on IE!
<checks source again>
Your best bet here is to dump what you have and re-write it from the ground
up. You have WAY too many div elements in there, as I mentioned before.
Using CSS is not about splattering your page with div elements.
And it's not about specifying every single property for every CSS rule. You
specify all of the font related properties, even with the default values,
for just about every rule you have.
Specify them once, for the body element, and let them inherit down to the
child elements.
And do not use an iframe in this way. Most especially do not use those silly
little arrow things that simply do *not* look like a scroll bar. If your
clients viewers do not see what is obviously a scrollbar *they will not
scroll the text*. You might just as well not put it there in the first
place.
Read this, and make sure you fully understand it, along with all the
implications. Then go over to your clients house and make her read it as
well. All of it. And then do the same with the link that David posted.
http://www.useit.com/alertbox/20050711.html
What you are designing will never be used by your clients viewers.
Al @ UCBITU
>
> What you are designing will never be used by your clients viewers.
Thanks again. I did notice a bunch of "font: 11px Verdana, Arial,
Helvetica, sans-serif;". I will eliminate them all except the "body".
Coming to think of it, why does the style sheet have these three
sections for the "Copyright"?
1- #copyright {
2- #copyright div {
3- #copyright a {
In the third one, I am guessing "a" is for alpha, but I am not sure.
Al
---------------------------------------------------------------------------------------------------------------------------------------
P.S.: The full version of the above is as follows:
#copyright {
clear: both;
position: absolute;
top: 65px;
padding: 0 0 0 0;
font: 9px Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
color: #ffffff;
text-transform: uppercase;
text-align: left;
width: 780px;
}
#copyright div {
float: left;
margin-right: 8px;
}
#copyright a {
font: 9px Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
text-transform: lowercase !important;
color: #8f8f5f;
text-align: left;
line-height: auto !important;
}
#copyright a:hover {
color: #f7f2d1;
}
rf
> Coming to think of it, why does the style sheet have these three
> sections for the "Copyright"?
>
> 1- #copyright {
> 2- #copyright div {
> 3- #copyright a {
>
> In the third one, I am guessing "a" is for alpha, but I am not sure.
Hmmm. If you don't know this then I suggest you look at several CSS
tutorials before proceeding any further.
1- #copyright {
Selects an element whose ID is copyright
2- #copyright div {
Selects any <div> element that is a decendant of an element whose ID is
copyright
3- #copyright a {
Selects any <a> element that is a decendant of an element whose ID is
copyright
IIRC you stated that you "borrowed" all of this from somewhere else. Well,
give it back. Whoever wrote it simply does not know what they are doing.