473,320 Members | 1,936 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

positioning

i have a site that works well in ie6 for the pc. but i've also seen it
(don't have a mac) with ie for mac and safari. both of these browsers
produce different and unwanted results.

the biggest problem is this:

i wanted a particular look for the text, so i used images instead of html
text. instead of using a different image for each state, i use a
'background' image. depending on the link state, they change their position
and anything outside the div is hidden. (overflow:hidden.) the idea (and its
not mine) is that instead of loading a separate image for each state, the
background image is all that is needed, it just changes position and the
part outside the div is hidden.

if anyone cares to look... www.momeara.com comments are welcome. please
consider this if you respond... html/css is new for me and i suspect that
its kind of hackered coding.
Jul 20 '05 #1
4 1871
On Sat, 24 Jan 2004 16:28:53 -0500, salty_dogs <sa********@hotmail.com>
wrote:
i have a site that works well in ie6 for the pc. but i've also seen it
(don't have a mac) with ie for mac and safari. both of these browsers
produce different and unwanted results.

the biggest problem is this:

i wanted a particular look for the text, so i used images instead of html
text. instead of using a different image for each state, i use a
'background' image. depending on the link state, they change their
position
and anything outside the div is hidden. (overflow:hidden.) the idea (and
its
not mine) is that instead of loading a separate image for each state, the
background image is all that is needed, it just changes position and the
part outside the div is hidden.

if anyone cares to look... www.momeara.com comments are welcome. please
consider this if you respond... html/css is new for me and i suspect that
its kind of hackered coding.

I'm viewing the site as intended in IE 6 on a PC, and also with Opera.

Oh man oh man... what a mess...

I'm taking into account you're new at this. It's not too late to save you.
Cue the "Accessibility Eye For The Javascript Guy" theme music...

1) You are using an image for text. Now, ok, it's a graphics site, and
there is a lower likelihood that someone with images turned off is going
to have much value with your site. But one big problem is that the text is
awfully small, and in IE you can't resize the image to be larger. So
there's a big readability issue there. Also, when the search spiders come
to your site, what text will they have to catalog your site? Using images
for text is simply A Bad Idea.

2) Images sometimes fail to load. When they do, what have you provided?
With background images, there's nothing. When images are content - as text
is - you really have to provide some sort of meaningful alt text. Which
means you need to put them in the HTML as images. Putting content in a
background is using the background-image property to do something it's not
intended to do, and that is also A Bad Idea.

3) When I click on a link, a new window pops up (which makes a lot of
users run away by itself) and there's no address bar or anything anymore.
Why do you need to do this? I liked my address bar... Seriously, popups
and removing browser features - say it with me - A Bad Idea.

Take a look in comp.infosystems.www.authoring.html for my rant in the
"different pages for different screen resolutions" thread. It's too long
to repost here. Try Google if your server doesn't have it.

I can tell you're a quite good artist. Visually, on IE on a PC, your
design is attractive and displays your work well. But you're getting your
results by working against how many browsers work - browsers which follow
the specifications far more closely than IE on a PC. Would you do your
sketches on wax paper with tempera? Of course not, that would be pushing
against the way the materials of your art are designed to work. That's
essentially why these design errors are negatively affecting your site.

These structures you've sketched - they are built on a foundation, that's
why they are standing and habitable. Sadly, your javascript, which is best
compared to the wallpaper or utilities in the building, has taken
preference over the solid structure of good HTML. If an architect chose to
ignore the basics, the house would come tumbling down - as you're seeing
in other browsers. It comes off like a master electrician tried to build a
house - sure the wiring is sound, but what good is that when the roof
caves in?

As someone else said in the thread I cited, in web page design the user
dictates the size of the canvas. Plus a lot of other parameters - most of
which your design takes for granted will be the same as on your computer.

You need to understand that your problems with the way the page is being
rendered lie at a more basic level than simple positioning.

Hate to break it to you, but in my opinion the design needs to be
re-thought. By focusing so hard on this stylized design effect with so
little real knowledge of HTML and CSS (by the way, I recommend htmldog.com
as a good starting point in learning how this stuff should work), you've
put the cart before the horse. Try to do as much without images as you
can. Use background images only for stuff that isn't content on the page.
Then apply the script to a page that will work across platforms and
browsers.

Maybe I'm wrong, maybe some genius can suggest something that will make it
work. I hope so. In the meantime - is it possible to come up with an
alternate plan that uses no javascript at all?

Be prepared to lose the effect if what you'll get in return is a more
functional page. And it may be possible to make it happen in the way you
like, but that has to be added to a page design that works.

Start with the basics, don't bite off more than you can chew. Simple is
better, less is more.
Jul 20 '05 #2
salty_dogs wrote:

if anyone cares to look... www.momeara.com comments are welcome. please
consider this if you respond... html/css is new for me and i suspect that
its kind of hackered coding.


Don't use images for text. Your chosen text size in the graphics is the
size of fly droppings and impossible to read. Using only graphics has
many issues and no benefit.

I can't read the text on your home page, but discovered it was a link
when the mouse accidentally went over it. However, with JavaScript
disabled, nothing happens when I click on it. With JS enabled, all I
get is a pop-up window (yuck!) with (presumably) a menu in the top left
and a big, empty white box on the right. The site is completely
unusable on all counts.

Since you are just learning, please spend some time studying web-related
usability and accessibility issues. Lurk around here and
comp.infosystems.www.authoring.html for a while and you should learn a
lot about these subjects. Also, read a few articles at
<URL:http://www.useit.com/>. I don't always agree with everything
Nielsen says, but he is generally on track.

--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.
Jul 20 '05 #3
Somewhere around 1/24/04 1:28 PM, salty_dogs typed wildly with reckless
abandon:
i have a site that works well in ie6 for the pc. but i've also seen it
(don't have a mac) with ie for mac and safari. both of these browsers
produce different and unwanted results.

the biggest problem is this:

i wanted a particular look for the text, so i used images instead of html
text. instead of using a different image for each state, i use a
'background' image. depending on the link state, they change their position
and anything outside the div is hidden. (overflow:hidden.) the idea (and its
not mine) is that instead of loading a separate image for each state, the
background image is all that is needed, it just changes position and the
part outside the div is hidden.

if anyone cares to look... www.momeara.com comments are welcome. please
consider this if you respond... html/css is new for me and i suspect that
its kind of hackered coding.


In addition to what the other said, what about this:
http://members.tdn.com/ajhess/momeara.html
It's /about/ the same look and function, but this is resizeable too.
You still need to let the user know there is a link there to click.
Making link text identical to everything else is not very nice.

One of the ways I learn is to help. I threw this together in about 10
minutes, so to you regulars here, whom I respect immensely, can you
critique this for me as well? Is there a better way to do this? Thanks, Aron
Jul 20 '05 #4
In message <bu************@ID-195982.news.uni-berlin.de>, salty_dogs
<sa********@hotmail.com> writes
i have a site that works well in ie6 for the pc. but i've also seen it
(don't have a mac) with ie for mac and safari. both of these browsers
produce different and unwanted results.

the biggest problem is this:

i wanted a particular look for the text, so i used images instead of html
text. instead of using a different image for each state, i use a
'background' image. depending on the link state, they change their position
and anything outside the div is hidden. (overflow:hidden.) the idea (and its
not mine) is that instead of loading a separate image for each state, the
background image is all that is needed, it just changes position and the
part outside the div is hidden.

if anyone cares to look... www.momeara.com comments are welcome. please
consider this if you respond... html/css is new for me and i suspect that
its kind of hackered coding.

You've had some good advice from people looking at your site. But
remember that other people with disabilities of various types may be
*listening* to your site through their browser.

Hence the need to ensure that when using graphics for text (and this is
perfectly OK in the visual medium provided that the text is not as tiny
as you have it) you must remember to ensure that the graphics have
adequate 'alternative text'.

Also remember that people who cannot see that you have opened the next
page in a new window can get confused. So you should always include, on
the link, the words '(will open in a new window') or something similar.

Anyway, visiting your site http://www.momeara.com/ all I hear is:

'click me' in a voice telling me it's a link.

If I do 'click' on the link, then I hear an audio clue to tell me a new
window is opening, followed by:

'This page is empty'

So you see the need to ensure that you provide text alternatives to the
graphics ;-)

However, if I were to go to Aron's page:
http://members.tdn.com/ajhess/momeara.html

I would hear:
-------------------------------------------------------------------------

momeara.com
ma**@momeara.com
401-952-4115
335 Court Street #210
Brooklyn NY, 11231
momeara.com is a pesonal website for michael omeara
copyright © 2003 all rights reserved
1024x768 pc-ie6
(sorry, right now I only work on a pc)
-------------------------------------------------------------------------
-

It's spoken in a voice to tell me it's all one big link, but it's much
better because I can now hear the content that you intended me to hear.

It also tells me that the author needs to check the spelling -- and
include some punctuation -- but that's another story ;-)
regards

--
Jake
Jul 20 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
by: Bryan R. Meyer | last post by:
Hello Everyone, The problem of browser resizing has become an issue for me. While redesigning my webpage, I set the left and right margins to be auto so that my content would be centered. ...
4
by: Jane Withnolastname | last post by:
I am trying to re-work an old site by replacing the html with css. On the main page, I have a logo image which I needed centred on the initial screen. I found the solution here:...
14
by: Harlan Messinger | last post by:
What am I not understanding about the definition of { position: absolute; }? "The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These...
6
by: rajek | last post by:
I posted a similar question yesterday, but didn't get an answer that resolved the issue. (Thanks to those who tried though.) The background: I've read in books and online that if you have one...
11
by: NS | last post by:
I am relativly new to css positioning and have a question regarding the display of a DHTML pop-up Here is the basic HTML I am using: <html> <head> <script language="JavaScript"> <!--
1
by: Charles Harrison Caudill | last post by:
with tables there is a clean and algorithmic way to organize things, but with css which is, once you get it working, much cleaner, I have to tweak and patch and hope and pray and curse before...
2
by: Rob R. Ainscough | last post by:
I'm slowly (very slowly) working my way thru the bizarre and sadistic world of control positioning in MultiViews (ASP 2.0). I came across this to help me explain (or attempt to anyway) why my web...
4
by: Alan Silver | last post by:
Hello, Having been a light reader of this ng for a few months now (after several years absence), I have noticed that absolute positioning seems to be considered a Very Bad Thing around here....
9
by: Bill Norton | last post by:
I've been experimenting with floats, positioning and offsets (top, left, etc.) to see what happens when you mix the properties together. All this may be old news to most of you, but it was...
6
by: Mark | last post by:
hi, i'm trying to position something in the top right corner of a container, but i can't seem to figure out how to get it working. here's the html <div class='thumb'><a href='image.jpg'><img...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.