473,325 Members | 2,805 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,325 software developers and data experts.

Interesting Safari Problem

Hi all,

I've trawled the archives in vain for a similar problem:

In building a client's site, I've got a menu section where each menu
heading sits in a table cell. It's _paramount_ that the text of the
menu heading literally sits at the bottom of the cell, so that when
you add the table border, the text looks underlined (this is not the
reason why the text should sit at the bottom, but it is what the end
result should look like.)

I've got it working fine in IE and FireFox, but oddly when I look at
it in Safari, a 2-3 pixel gap appears between the bottom of text and
the bottom of the cell.

I've stripped everything else out of the page:
http://www.orangeideas.co.uk/clients/atv/table.htm but can't get the
text to touch the bottom of the table cell.

I'm guessing that it's me that's doing something wrong, not Safari -
any ideas?

BTW - I can't use the position tag for reasons relating to other parts
of the design, all I want is the text in the cell to literally touch
the bottom, and implemented as simply as possible! (I've been working
on just this problem for a couple of days now, and am starting to
dream in div tags!)

Any advice much appreciated.
TIA,
Lorenzo.
Jul 21 '05 #1
10 2475
Lorenzo Gordon wrote:
I've trawled the archives in vain for a similar problem:
Have you? If you had, I doubt you could have missed several points which
I'll share now. For starters, what is with the excessive x-posting?
Sure, it's worlds better than multiposting, but 4 groups? And you didn't
even have the courtesy to set followups. Since this is a style issue,
let me suggest ciwas for you.
I've got a menu section where each menu heading sits in a table cell.
Why? Using tables for layout is not ideal. But perhaps css for layout is
something you haven't yet tried.

http://www.allmyfaqs.com/faq.pl?Tableless_layouts
It's _paramount_ that the text of the menu heading literally sits at
the bottom of the cell,
Paramount? If pixel perfect presentation is that important, then perhaps
html/css is not the best tool for the job.
so that when you add the table border, the text looks underlined
In that case, use the text-decoration property:

h2 {text-decoration: underline;}
I've stripped everything else out of the page:
http://www.orangeideas.co.uk/clients/atv/table.htm
It does not validate. Fix the markup errors before asking for help. BTW,
you should write new documents using HTML 4.01/strict, not transitional.
But since you trawled the archives, you already knew that.

You've set width and height in pixels. When I resize the text, it
naturally overflows the box. You should never set box dimensions in
pixels if the box will hold text. But you already knew that, too, since
it is repeated so often in the ciwa* groups.
BTW - I can't use the position tag


You mean position property, presumably.

--
Brian (remove "invalid" to email me)
Jul 21 '05 #2

Brian wrote:
Lorenzo Gordon wrote:
I've trawled the archives in vain for a similar problem:
Have you? If you had, I doubt you could have missed several points

which I'll share now. For starters, what is with the excessive x-posting?
Sure, it's worlds better than multiposting, but 4 groups? And you didn't even have the courtesy to set followups. Since this is a style issue,
let me suggest ciwas for you.
Thanks for your suggestions - I noticed that several of the gorups I
posted to are not posted to very often. In my experience 4 groups is
not excessive since the gourps are not particularly over-used, and they
deal with different foci; it seemed appropriate given the content of my
post to do this. I posted using the google groups interface and did
not see anywhere to enter the follow-up header. Your addition is
useful.
I've got a menu section where each menu heading sits in a table cell.
Why? Using tables for layout is not ideal. But perhaps css for layout is something you haven't yet tried.

http://www.allmyfaqs.com/faq.pl?Tableless_layouts
It's _paramount_ that the text of the menu heading literally sits
at the bottom of the cell,


Paramount? If pixel perfect presentation is that important, then

perhaps html/css is not the best tool for the job.
Yes I am aware of tableless layouts, but I'm also aware that because
neither using tables nor using pure css will achieve the desired result
consistently across the necessary browsers, I'm employing both methods
in order to get it to look right consistently.
so that when you add the table border, the text looks underlined


In that case, use the text-decoration property:

h2 {text-decoration: underline;}

If you had read my original posting properly, you would have read that
I'm not interested in the text being underlined in any position; what I
want is the bottom of the text flush with the table border so that it
_appears_ underlined.
I've stripped everything else out of the page:
http://www.orangeideas.co.uk/clients/atv/table.htm


It does not validate. Fix the markup errors before asking for help.

BTW, you should write new documents using HTML 4.01/strict, not transitional. But since you trawled the archives, you already knew that.
It should validate fine now, thanks for your helpful suggestion.
You've set width and height in pixels. When I resize the text, it
naturally overflows the box. You should never set box dimensions in
pixels if the box will hold text. But you already knew that, too, since it is repeated so often in the ciwa* groups.

The page I put up for the purpose of the posting is not in fact the
design in full :-) It is an attempt to isolate this problem
specifically. Are you saying that the resizing/overflowing issue is
drectly related to this problem I'm experienceing? If so, please
explain how becuase I'm been so far unaware of the connection.
BTW - I can't use the position tag


You mean position property, presumably.

Yes you are correct, well done on spotting the mistake.

Any help in solving the problem of getting the text to lie flush with
the bottom of the table in Safari is very much appreciated.

Lorenzo.

Jul 21 '05 #3
lo***********@hotmail.com wrote:

Yes I am aware of tableless layouts, but I'm also aware that because
neither using tables nor using pure css will achieve the desired result
consistently across the necessary browsers, I'm employing both methods
in order to get it to look right consistently.
Does the fact that you're still failing when using a table layout
combined with CSS tell you anything? :)
> http://www.orangeideas.co.uk/clients/atv/table.htm

I'm not interested in the text being underlined in any position; what I
want is the bottom of the text flush with the table border so that it
_appears_ underlined.


FWIW, it looks pretty much the same to me in Safari 1.0 v85 as it does
in other browsers. None of them show the text flush with the cell
bottom, and none of them look especially attractive, IMO.
Brian wrote:
You've set width and height in pixels. When I resize the text, it
naturally overflows the box.
Are you saying that the resizing/overflowing issue is
drectly related to this problem I'm experienceing?


Methinks the overflow issue is directly related to your misunderstanding
of how the CSS box model works, coupled with your mistaken belief that
you have any control over the visitor's font size. Take a look at your
test page in just about any browser other than WinIE. Now look around
the menus and find the option to increase the text size. Bump it up a
couple times and see what happens.
Any help in solving the problem of getting the text to lie flush with
the bottom of the table in Safari is very much appreciated.


I think this is a case of trying to fix the wrong problem. If you showed
this issue in context, we might show you a better way to achieve
whatever it is you want.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 21 '05 #4

kchayka wrote:
lo***********@hotmail.com wrote:

Yes I am aware of tableless layouts, but I'm also aware that because
neither using tables nor using pure css will achieve the desired result consistently across the necessary browsers, I'm employing both methods in order to get it to look right consistently.
Does the fact that you're still failing when using a table layout
combined with CSS tell you anything? :)


If you look at the page source code, you'll see that the first 4 cells
contain no CSS at all. I'd be happy to work withotu CSS, if you
suggest a way (short of using images) to align text flush with the
bottom of the table?
> http://www.orangeideas.co.uk/clients/atv/table.htm

I'm not interested in the text being underlined in any position; what I want is the bottom of the text flush with the table border so that it _appears_ underlined.


FWIW, it looks pretty much the same to me in Safari 1.0 v85 as it

does in other browsers. None of them show the text flush with the cell
bottom, and none of them look especially attractive, IMO.

Well I guess you have good taste, but attractiveness is not what the
post is about, since this is not the site design, just me attempting to
deal with this alignment issue.
I'm surprised you say it looks the same in various browsers - which
ones are you using? I've looked at it in Firefox, and what happens
there is that the 'about' text tabel cell is flush with the bottom of
the tables, whilst the other four are higher. In 2 versions of Safari
on two different friends' computers, the 'about' text is the same
height as the text in the otehr cells.

Methinks the overflow issue is directly related to your misunderstanding of how the CSS box model works, coupled with your mistaken belief that you have any control over the visitor's font size. Take a look at your test page in just about any browser other than WinIE. Now look around
the menus and find the option to increase the text size. Bump it up a
couple times and see what happens.

Yes, and I'll deal with that problem. But I don't see how the two ar
related, please enlighten me!
Any help in solving the problem of getting the text to lie flush with the bottom of the table in Safari is very much appreciated.


I think this is a case of trying to fix the wrong problem.

Really? Why?

Jul 21 '05 #5
lo***********@hotmail.com wrote:
kchayka wrote:
lo***********@hotmail.com wrote:

> http://www.orangeideas.co.uk/clients/atv/table.htm
I've looked at
it in Firefox, and what happens there is that the 'about' text tabel
cell is flush with the bottom of the tables, whilst the other four
are higher.


Yeah, because the text in the 1st 4 cells has room reserved for
character descenders, like for g, y, j, etc. Just because you aren't
using those kinds of characters doesn't mean the space shouldn't exist.

You've set height limitations on the last cell so it does align
differently, but that's really a kludgy side effect rather than an
intentional result. I doubt it's the best way to deal with it. I might
suggest using line-height instead, but that may not be the best solution
either. Hard to say without seeing this in context.

Whatever you do, just stop setting text element sizes in px units. Use
the right unit for the job. Where text is concerned, ems are often best,
px rarely is.
Take a look at your
test page in just about any browser other than WinIE. Now look
around the menus and find the option to increase the text size.
Bump it up a couple times and see what happens.

Yes, and I'll deal with that problem. But I don't see how the two ar
related, please enlighten me!


There is no real relationship between the overflow and this alignment
thing. You've merely set a 10px height restriction for the text
container in that last cell. What do you think should happen with a 16px
(or larger) font? If you think the text's container should grow to fit
the content, then you don't understand how CSS boxes are supposed to work.

BTW, that's a perfect example of why to use em units instead of px. ems
will naturally adjust with the text size, whatever it may be.
I think this is a case of trying to fix the wrong problem.

Really? Why?


Because you've chosen a solution when you haven't really identified the
"problem", just some symptoms. Show this thing in context and we may
show you better ways to get to there from here.

BTW, it would also be nice if you corrected the line length in your
newsreader so wrapping of quoted text didn't get so squirrelly.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 21 '05 #6
lo***********@hotmail.com writes:

If you look at the page source code, you'll see that the first 4 cells
contain no CSS at all. I'd be happy to work withotu CSS, if you
suggest a way (short of using images) to align text flush with the
bottom of the table?


Your original post asked for "looking like
underlined". Which do you want?

You can probably do something hideous, like:

<style>
..sink {vertical-align: -100%;}
</style>
....
<td align="left" valign="bottom" width="115"><span class="sink">1</span>
</td>
....

but I make no claims as to whether any given browser will
put the text where you want it. I'd expect descenders and
quite possible other parts of characters to poke through the
table border, done that way, and it relies on the leading
bearing a certain relation to the line height.

If you want text to look like it's underlined, why not set
text-decoration so that it /is/ underlined?

--
Jón Fairbairn Jo***********@cl.cam.ac.uk

Jul 21 '05 #7
Yeah, because the text in the 1st 4 cells has room reserved for
character descenders, like for g, y, j, etc. Just because you aren't
using those kinds of characters doesn't mean the space shouldn't exist.
You've set height limitations on the last cell so it does align
differently, but that's really a kludgy side effect rather than an
intentional result. I doubt it's the best way to deal with it. I might suggest using line-height instead, but that may not be the best solution either. Hard to say without seeing this in context.

Whatever you do, just stop setting text element sizes in px units. Use the right unit for the job. Where text is concerned, ems are often best, px rarely is.


Hi, thanks for that.
I've amended the table.htm page to use ems, not px, and am only using
line height. (http://www.orangeideas.co.uk/clients/atv/table.htm)
I'm _still_ having the problem that the 'about' text is sitting nicely
in both IE and Firefox, but is still floating too high in Safari.
I've uploaded an image of the design, so you can see what it is I'm
trying to achieve:
http://www.orangeideas.co.uk/clients...ges/layout.gif
Any other ideas?

Lorenzo.

Jul 21 '05 #8
lo***********@hotmail.com wrote:

(http://www.orangeideas.co.uk/clients/atv/table.htm)
I'm _still_ having the problem that the 'about' text is sitting nicely
in both IE and Firefox, but is still floating too high in Safari.
I think you worry too much about insignificant things.
I've uploaded an image of the design, so you can see what it is I'm
trying to achieve:
http://www.orangeideas.co.uk/clients...ges/layout.gif
Any other ideas?


Here's some food for thought:
<URL:http://accessat.c-net.us/test/orangeideas/>

It's not thoroughly tested, but might give you some other ideas.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 21 '05 #9
Yes...I had a look at the page you put up, interesting...is that a
short way of saying you don't know the solution to this problem?

Jul 21 '05 #10
lo***********@hotmail.com wrote:
Yes...I had a look at the page you put up, interesting...is that a
short way of saying you don't know the solution to this problem?


<sigh>
Seems you have fixated on a sub-optimal solution and are closed-minded
concerning alternatives that might result in a better user experience.

The page was intended to show you a way to get the intended visual
effect using semantic, structured markup (something your design
seriously lacks) and a flexible layout (something else your design lacks).

You can either learn from this and start thinking about web design
rather than just graphic design, or you can be spoon-fed kludgy hacks
that fix the wrong problem. I'm happy to help with the former, but not
with the latter.

HAND

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 21 '05 #11

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

Similar topics

2
by: Josh Renaud | last post by:
I'm working on a site and ran into a little trouble with Safari. Here are the relevant links: page: http://www.joshrenaud.com/fredbear/contact.html css: ...
1
by: Lorenzo Gordon | last post by:
Hi all, I've trawled the archives in vain for a similar problem: In building a client's site, I've got a menu section where each menu heading sits in a table cell. It's _paramount_ that the...
5
by: Bill Cohagan | last post by:
I'm having some serious difficulties with my ASP.Net 2.0 app rendering in Safari 2.0.3. The most immediate problem is that the menu control doesn't seem to work at all, particularly the use of...
3
by: Joe Cox | last post by:
I am having a problem with style properties for dynamic images in Mac OS X Safari. By dymanic images, I mean images allocated with the javascript 'new Image()' call. With static images (created...
34
by: Simon Wigzell | last post by:
document...focus() will scroll the form to move the specified text field into view on everything I have tried it with except Safari on the MAC. The form doesn't move. Any work around? Thanks.
12
by: effendi | last post by:
I wrote the following function and tested it in MSIE, Firefox and Mac Safari, Works in all but the Safari. What can I do to rectify this? function processBackground(){ for (n=1;n<11;n++) { ...
7
by: Tom | last post by:
I have an oo-type javascript program running perfectly on IE 6.0+, FF 1.5+, and Opera 7+ on Windows 98+, Linux (RH 9, FC 6), and Mac OS X. 4. As usual, the Safari browser is not working correctly,...
3
by: Brad | last post by:
I have an aspx page that is sending pdf files to client browsers: it uses a filestream to read the pdf file and response.binarywrite to send content to the browser. This has worked great for years...
15
by: GinnTech | last post by:
I have a site that works perfectly in IE6 IE7 FF2 FF3 but not in the latest Safari. Here is the issue. I am attempting to call functions within a flash object. When trying to attempt to...
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...
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: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
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: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

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.