Re: [css-d] Framing my menu (for horizontal scrolling photo gallery)

[richard n]

> IE6 has a couple of more serious problems...
> 1: the nav doesn't always show up.
> 2: the nav gets cut off on the right side.
> 
> IE6 needs these additions in the separate stylesheet in order to behave
> "well enough" (IMO).


Hi Georg

Thank you very much for the extra code.

I've added it to the IE6 stylesheet.

(I now also have a 'lt IE7' style sheet (to cancel dotted borders) - 
would it be better putting these new bits of code there? Maybe they 
would fix IE5.5?)

Here's the new version:

http://www.richardnicholson.com/testing/menu_with_frames9/editorial.html

I'll go back to the internet cafe this afternoon to check it out in IE6.

I've made a couple of other small changes. The left margin on H1 is 
reduced from 28em to 20.5 em (so it fits more snugly against the menu).

And then a horrible workaround: in the previous version, in Firefox 
only, when you gradually narrowed the browser window, the H1 element 
would move left until it hit the menu. It would then stay fixed (as I 
want). But as the browser's right edge passed over the word 'richard', 
it would pick the H1 element up again and drag it across the menu (i.e. 
the first few letters of my name, 'ric', would never disappear out of 
view). I figured out that this behaviour was caused by the 20px RIGHT 
padding on the H1 element. One workaround was to put the H1 element in 
a DIV, but this broke IE5.2.3 Mac. So instead I removed the 20px right 
padding form the H1 element and replaced it with 4 non-breaking spaces 
after the word 'photography' - not pretty, but it seems to work!

Cheers

Richard












__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Framing my menu (for horizontal scrolling photo gallery)

[richard n]

> Richard, I regret that in your latest version the menu is not on the 
> screen in xp ie/6.0 at 800 or 1024. It seems ok at 1280.
> 15 win/ie captures (win/ie 5 through 7) 
> 
>>  http://www.richardnicholson.com/testing/menu_with_frames8/editorial.html


Hi David

Thank you for posting your browsercam results.

I'm very disappointed.

IE5 seems like a hopeless case (the content has vanished as well as the 
menu).

However I reckon there might be a fix for IE 5.5 and 6, as they both 
seem capable of displaying the menu - they just need an excessive 
amount of horizontal space to do so

The H1 title, 'r n photography', floated right, has a 28em left margin 
to stop it colliding into the menu when the browser window is narrow. 
The menu is positioned absolutely, so the 28em left margin on the H1 
element SHOULD be measured from the left edge of the browser window 
(i.e. the dimensions of the menu SHOULD be ignored). It seems like 
things are working differently in IE 5.5 and 6, and the margin on the 
H1 element is hitting up against the menu and knocking it out of 
place

Hmmm. Back to the drawing board.

If anyone can understand what's going wrong, please let me know.

Cheers

Richard








__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Framing my menu (for horizontal scrolling photo gallery)

[richard n]

Hi

Although I was very happy with the way Georg created frame-like 
behaviour for my photo gallery in IE6, there were some other aspects of 
the page that were bugging me.

I didn't like it that when the browser window was made very narrow, the 
menu (and my name, and copyright info) would collapse in on each other, 
making a mess.

I thought it would be an easy fix (wrap a fixed width div round the 
navigation, or something like that), but it turned out to be quite 
tricky (for me, anyway!).

I switched the layout of the nav elements from float:left to 
display:inline. I then added nowrap, and some absolute positioning. The 
title was floated:right with a big 28em left margin.

This works well in my 4 mac browsers (Safari, Opera, Firefox, IE 
5.2.3). 

I'd like to get some feedback on whether it works in IE5 or 6 or 7 PC. 
I'm interested in what happens when the browser window is made really 
narrow.

Thanks

Richard

My latest version:

http://www.richardnicholson.com/testing/menu_with_frames8/editorial.html

And the original version I was trying to fix:

http://www.richardnicholson.com/testing/menu_with_frames6/editorial.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Framing my menu (for horizontal scrolling photo gallery)

[richard n]

>>  Is it still necessary with your solution?
> 
> No, it isn't.
> 
> You can write...

Hi Georg

I've tidied up the code and tested it in IE6 at an internet cafe:

http://www.richardnicholson.com/testing/menu_with_frames6/editorial.html

It is NOT THE SAME in IE6 as it is in Firefox.

I think it's better!

The screens in the internet cafe were low resolution, and also IE was 
crammed with toolbars. This meant that there was a little vertical 
scrolling on my page.

Interestingly, in IE, vertical scrolling behaved as if there was no 
frame - i.e. the nav menu disappeared off the top of the screen.

In FF (or any other browser which recognises position:fixed) the nav 
menu is stuck there at the top, whichever way you scroll.

I like the IE way better, as it frees up some screen real-estate to 
display the pictures. And when you get to the end of a long line of 
images, you can just nudge the scroll wheel up to get back to the menu.

Hmmm, I'm assuming that this sort of behaviour can not be created using 
pure CSS? (Ideally I'd fix the menu horizontally, but not vertically).

Apart from this added feature, your fix for IE6 worked exactly as I had 
hoped (the scrolling action seems totally normal). Thank you very much 
- it's a very tidy solution.

All the best

Richard

- In the above link I've also implemented the solution David Laakso 
suggested to me a couple of weeks ago, to turn off the dotted borders 
in IE5 and 6 (substituting them for solid borders - I think I've done 
it right (?)). Actually this might not have been necessary as I could 
no longer replicate the problem of horizontal dashes blurring into each 
other. That's either because the dashes are now on a table rather than 
a div, or it's something in your scrolling expression that has fixed 
it. (Anyway, I only really like dots, not dashes, so the dashes have 
gone!)





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Framing my menu (for horizontal scrolling photo gallery)

[richard n]

> Replace what's in your 'ie6.css' stylesheet with the following...
> 
> html,body {
> background: #fff url(foo) fixed;
> }
> 
> #topbar {
> position: absolute;
> left:expression(eval(document.compatMode &&
> document.compatMode=='CSS1Compat') ?
> documentElement.scrollLeft
> : document.body.scrollLeft);
> }
> 
> #content {
> padding-top: 3.8em;
> }



Hi Georg

Thank you VERY much for your help.

Although I don't understand Javascript (well, I think it's JS!), it 
looks like a neat and compact solution.

The updated pages are here:

http://www.richardnicholson.com/testing/menu_with_frames4/editorial.html

Unfortunately I can't test it right now. (I'll go to an internet cafe 
tomorrow.)

One question:

In my main CSS - 
http://www.richardnicholson.com/testing/menu_with_frames4/menu.css -

- there is the following code:

html>body #topbar {position:fixed;z-index:10;}
html>body #content {padding-top: 3.8em;}

I'm not sure if understand that type of selector (i.e. 'html>body' - I 
lifted it from Roger's code). Is it hiding the rule from IE6 (and only 
IE6?). Is it still necessary with your solution? I'm thinking that 
maybe it is only necessary for the #topbar, and that the #content can 
do without the 'html>body' prefix (meaning that '#content {padding-top: 
3.8em;}' could be deleted from ie6.css). (Also the 'z-index:10' - 
shouldn't IE6 be seeing that too?)

Apart from that is there anything I would ever want to adjust in the 
ie6.css? Or can I just leave it be?

Thanks again

Richard



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Framing my menu (for horizontal scrolling photo gallery)

[richard n]

> You should have read _one_ comment further down in that article, as
> you'll find working solutions linked in there. They may not seem to be
> of much use for CSS frames, but they apply perfectly for such cases.
> That's why I added them :-)
> 
> 
> 
> 
> The following page is using parts of the former solution to achieve a
> pretty cross-browser working CSS frame...
> 
> ...but it clearly isn't based on Roger's code since mine is more than a
> year old already.
> 
> Need any help with CSS frames - just let me know.
> 
> regards
>   Georg


Hi Georg

I had seen your links - there in the Comments section on Roger's site - 
and had read them with interest

However, at the bottom of 
http://www.gunlaug.no/contents/wd_additions_17.html I read the 
following, and thought that meant it would not be applicable to my 
side-scrolling gallery:

'Weak spot: the extra div: div#iefix can't handle a horizontal 
scroll-bar properly on a page like this. That's the reason why I have 
only hidden the vertical scroll-bar on html/body, so those elements 
(depending on mode) can handle horizontal scrolling if/when that's 
needed on narrow windows. Thus, nothing gets lost – it may just look a 
bit odd.'

I've probably misunderstood (?)

I'll have another look at your pages later.

(It's really tricky though, not having a PC here to test on.)

Many thanks

Richard

http://www.richardnicholson.com/testing/menu_with_frames3/editorial.html__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Framing my menu (for horizontal scrolling photo gallery)

[richard n]

> No PC here, so can someone let me know if it works?
> 
> Here it is:
> 
> HTML: 
> http://www.richardnicholson.com/testing/menu_with_frames3/editorial.html
> CSS: http://www.richardnicholson.com/testing/menu_with_frames3/menu.css
> CSS for IE6: 
> http://www.richardnicholson.com/testing/menu_with_frames3/ie6.css


Well in the end I had to phone a friend - and it doesn't work on IE6 PC 
(no scrollbar)...

Possibly because I trimmed away too much of Roger Johansson's code...

Thereagain, Roger's final words in the comments section don't sound too 
promising - 'Ok, I'm not wasting any more time on this.'

Perhaps if I need frames, I should use frames (with all their 
disadvantages)?

It's either that, or I let Mac users have framed behaviour (CSS 
position:fixed), whilst PC users (with IE) are left scrolling 
back-and-forth to access the navigation.

(My navigation menu uses absolute positioning in the layout of the sub 
menus, and from what I've read that may be incompatible with any hack 
to get IE PC exhibiting frame-like behaviour. Or maybe not? Is it just 
in the scrolling area that I can't use absolute positioning?). 

Richard






__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Framing my menu (for horizontal scrolling photo gallery)

[richard n]

> Perhaps I should follow this one (as it is the most 
> current), and work through it, deleting the code I don't need (?):
> 
> http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/



Well I worked through the above link and tried to apply it to my 
side-scrolling gallery.

I left out the bits of the code that I thought weren't relevant to my 
site (the footer, the stuff about 100% height).

I suspect that I've inadvertently left out something vital.

Everything still looks fine in FF, Safari, Opera (all on Mac). Also the 
frame/scrolling aspect works fine in IE Mac (just the menu is out of 
joint).

But my objectivet is to get it working in IE6 PC.

No PC here, so can someone let me know if it works?

Here it is:

HTML: 
http://www.richardnicholson.com/testing/menu_with_frames3/editorial.html
CSS: http://www.richardnicholson.com/testing/menu_with_frames3/menu.css
CSS for IE6: 
http://www.richardnicholson.com/testing/menu_with_frames3/ie6.css

Thanks

Richard
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Framing my menu (for horizontal scrolling photo gallery)

[richard n]

Hi

Now that I've got my navigation menu sorted out for some of the main 
browsers (FF, Safari, Opera, and IE6 PC), I'd like to use CSS to 
emulate a frame.

(This is going to be for my side-scrolling photo gallery.)

It seems to be a very simple effect to achieve in FF, Safari and Opera.

I simply add position:fixed to the #topbar (and then make the textbox 
3000px wide - so that there's something to scroll):

HTML:

http://www.richardnicholson.com/testing/menu_with_frames/editorial.html

CSS:

http://www.richardnicholson.com/testing/menu_with_frames/menu.css

What else do I need to add to get it working in IE6 PC?

(I still have a faint hope of getting something workable in IE 5.2.3 
Mac - but I'd be happy to lose the frame, and just have regular 
scrolling for that browser)

 - I know there are several links to 'frames' tutorials here at 
css-discuss. I've looked at a couple and they seem to be quite 
complicated, adding functionality that I don't need (fixed sidebars, 
footers etc). Perhaps I should follow this one (as it is the most 
current), and work through it, deleting the code I don't need (?):

http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/

Thanks for any tips

Richard









__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari acting up with horizontal menus

[richard n]

> What's "best" practice is always debatable, but a 'good' practice is one
> that tends to work no matter what - even under some stress. That's a
> good starting-point.


Thanks Georg for your advice on setting font sizes, line height etc.

I've hopefully implemented things correctly here:

HTML:

http://www.richardnicholson.com/testing/menu6/editorial.html

CSS:

http://www.richardnicholson.com/testing/menu6/menu.css


* The menu still looks a mess in IE 5.2.3. Mac. If anyone can give me 
any pointers to getting it working there, I would be very happy. There 
are two basic problems - the menu is out of alignment, and some of 
links vanish when hovered over. *

Thanks

Richard

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari acting up with horizontal menus

[richard n]

> Another observation:
> 
> This page also triggers the 'em font-resizing bug' in IE/win...
> 
> ...but the bug is only acting on the #nav since that's the only element
> that has font-size declared in 'em'.
> 
> Font-size keywords on body as a starting-point does not prevent this bug
> - it enforces it. In fact: the use of font-size keywords on any
> container will introduce or re-introduce the 'em font-resizing bug' to
> nested elements that have font-size defined in 'em'.
> 
> This bug may be used to enhance font-resizing in IE/win, but since it's
> usually an unwelcome "effect", and also one that many web designers
> don't notice because they don't test with font-resizing in IE/win, I
> thought I'd mention it.
> 
> The cure is to either avoid using 'em' as font-size unit, *or* to base
> 'em' sized fonts on a font-size that has '%' as unit (usually on body)
> and to avoid keywords anywhere in the mix. There are a few other
> options, but they usually only complicates the matter.


Thanks Georg

I just read your article (and the accompanying one about Minimum Font 
Size)

Very interesting, but quite complicated for a beginner such as myself.

Going forward, I want to make sure that I'm following best (or at least 
'good'!) practice.

So...

- I should replace the 'small' in my body tag with a percentage? 100% 
or 62.5% or 

- I should then use percentages for sizing all other text elements 
('p', 'h1', 'h2', 'ul', 'li' etc).?

- Ems - Ems are new to me. I started using them in the navigation menu 
to give a 'margin right' to the horizontal list elements (i.e. to space 
out the elements). I was keen that when the text was enlarged, that the 
spacing between the menu items would enlarge proportionally. Is this a 
good use for ems? Or is there a better unit to use? Maybe pixels will 
enlarge in the same way?

Sorry - very basic beginner's questions.

Thanks

Richard
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari acting up with horizontal menus

[richard n]

> Highlighting working alright across browser-land on windows.
> 
> IE/win needs an additional...
> #nav a {display: block;}
> ...to get the dimensions, and thereby the positions, right.
> 
> regards
>   Georg



Thanks Georg

I added in: #nav a {display: block;}

In IE 5.2.3 Mac this has caused the menus to run vertically (previously 
they were running horizontally - as they are supposed to - but 
overlapping).

How is it on IE6?

Here it is:

http://www.richardnicholson.com/testing/menu5/editorial.html

And the CSS:

http://www.richardnicholson.com/testing/menu5/menu.css

Thanks

Richard
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari acting up with horizontal menus

[richard n]

> It seems to be working OK in IE6 for PC although the positioning of the
> sub-menus is a little off.  At the moment they are positioned to high up the
> page and therefore intersect with the main menu.
> 
> The CSS is working though (if the following is what you intended!).  On the
> main menu, the current page is underlined and an underline appears when you
> hover on a main menu link.  For the sub-menu, the current page is underlined
> and no underline occurs when you hove on a sub-menu link.
> 
> Regards
> 
> Robin


Thanks Robin

You point to two problems in IE6:

- The overlapping menus. Hopefully that might be fixed here:

http://www.richardnicholson.com/testing/menu5/editorial.html

- Lack of hover on the submenu - that had been a problem, previously, 
but I thought I had fixed it. Top and bottom menus should behave 
exactly the same - i.e. underline on hover, and underline to indicate 
the active menu.

Thanks

Richard
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari acting up with horizontal menus

[richard n]

Ok, I've got the menu working correctly now in Safari, FF and Opera 
(all on a Mac).

I'm using conditional CSS (if that's what it's called) to reveal the 
relevant sub menus and to highlight the active menus.

Can anyone tell me whether this works in any PC browsers?

I'm currently trying to get it working in IE Mac.

Thanks Richard

HTML:

http://www.richardnicholson.com/testing/menu2/editorial.html

CSS:

http://www.richardnicholson.com/testing/menu2/menu.css
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari acting up with horizontal menus

[richard n]

Well, I've almost got it figured out... Safari is now behaving the same 
as FF and Opera

I've been trying to create a menu system where the active selection is 
highlighted - but highlighted using conditional CSS, rather than 
inserting a .selected class into the HTML (i.e. the HTML for the 
navigation menu is identical for every page).

The CSS has got a lot more complicated that I had anticipated. And it's 
still not perfect (I've lost the hover effect (underline) on the lower 
level links).

Here it is:

http://www.richardnicholson.com/testing/menu/editorial.html

And the CSS:

http://www.richardnicholson.com/testing/menu/menu.css

I'm interested to know whether it works in IE 5 and IE 6 PC (I guess 
not!)

It's a bit of a mess in Mac IE 5.2.3 (sub menus overlap with main 
menus). I think the problem is with the CSS that structures the menu 
(rather than the conditional CSS the controls the menu's highlighting).

Any idea of how to fix it?

Thanks

Richard
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Safari acting up with horizontal menus

[richard n]

Hi

Trying to create a simple navigation menu for my side-scrolling photo 
gallery.

I've played with dropdowns, but given up on them because they seem 
buggy (also I decided I didn't like the look of them).

Now trying  something that is hopefully a bit simpler - a 2 line 
horizontal menu. Main sections on line 1, sub sections on line 2.

I'm interested in having the menu as a SSI (I think that's what you 
call it (?) - a single linked document, rather than having the menu in 
every page).

I want an underline on the active main section and sub section - and 
the non-active subsections need to be hidden.

I want to do this with CSS.

I've got it working in FF and Opera.

But Safari gets the underlines wrong (it underlines ALL the subsection 
items).

Here's the page (which won't work in IE, for other reasons, I think):

http://www.richardnicholson.com/testing/menu/editorial.html

This is the relevant CSS:

#editorialpage #personalwork ul, #editorialpage #info ul { visibility: 
hidden;} /* hides two sub menus */
#editorialpage #commissioned {text-decoration: underline;} /* 
underlines top level menu */
#editorialpage #editorial {text-decoration: underline;} /* underlines 
sub menu */

And HTML:


Commissioned
  
Editorial
Series #1
Series #2
Annual #1
Annual #2
Contract
  

Safari underlines all the sub menu elements, not just 'editorial'.

Is this a bug in Safari? Or is there something wrong with my code (more 
than likely, as I'm new to this)? Is there a word for this type of menu 
- where CSS is controlling visibility/underlines etc?

Thanks

Richard






__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Font choices - Safari acting up (beginner question)

[richard n]

Great tip. I would never have guessed. Thank you.

Can anyone recommend a site that has an in-depth discussion of styling 
text with CSS?

Richard





> 
> On Sep 8, 2006, at 4:03 AM, richard n wrote:
> 
>> In the site I'm creating I've set up the fonts for the Body tag like so:
>> 
>> 'font: small "Gill Sans Light", "Gill Sans", "Trebuchet MS", Helvetica,
>> Arial, sans-serif;'
>> 
>> (I believe that Gill Sans and Gill Sans Light are supplied as standard
>> with OSX. They're unlikely to be on the average PC, so Trebuchet is for
>> them.)
>> 
>> Previewing in different browsers on my Mac, I see Gill Sans Light in
>> Firefox, Opera and even IE Mac 5.2.3.
>> 
>> Safari, however, won't display Gill Sans Light - it displays Gill Sans.
> 
> You need to use the Postscript name of the font: 'GillSans-Light' for 
> Safari, otherwise Safari uses the 'regular' weight
> font: small 'GillSans-Light', 'Gill Sans Light', 'Gill Sans', ..
> 
> Philippe
> ---
> Philippe Wittenbergh
> <http://emps.l-c-n.com>
> 
> 
> 
> 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Font choices - Safari acting up (beginner question)

[richard n]

In the site I'm creating I've set up the fonts for the Body tag like so:

'font: small "Gill Sans Light", "Gill Sans", "Trebuchet MS", Helvetica, 
Arial, sans-serif;'

(I believe that Gill Sans and Gill Sans Light are supplied as standard 
with OSX. They're unlikely to be on the average PC, so Trebuchet is for 
them.)

Previewing in different browsers on my Mac, I see Gill Sans Light in 
Firefox, Opera and even IE Mac 5.2.3.

Safari, however, won't display Gill Sans Light - it displays Gill Sans.

Anyone know why?

Thanks

Richard




__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] putting it all together (side-scrolling portfolio)

[richard n]

Thanks for the tips on my dropdown navigation menu.

I'm starting to wonder whether ANY dropdown is a bit too fancy (from a 
user, rather than a code, perspective).

But to make a decision, I need to get the dropdown up-and-running with 
the scrolling gallery.

However I can't for the life of me figure out how to do the layout!

Here's what I've got (pink and green backgrounds inserted to help me 
try to figure out what's going wrong). It looks similarly wrong in FF 
Mac and Safari. (Probably not worth checking in IE at the moment as 
that will introduce more errors.)

http://www.richardnicholson.com/testing/menu_gallery.html

What I want:

- name + navigation all on the same horizontal level.
- name + navigation expand simply to the right (without wrapping, and 
maintaining spacing) when the text is enlarged.
- name + navigation fixed at top, as if in a frame (I've accomplished 
this by putting name + nav in a fixed topbar div - but I gather I need 
a workaround to get working in IE).

At the moment the navigation is dropping downwards, below the level of 
my name. To fix this I've tried everything - pixels, margins, boxes, 
positioning, pixels, ems etc

I think the HTML is ok - clean and simple.

So I must be doing something wrong with the CSS.

What am I missing

Thanks for any tips.

Richard
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] drop-down navigation menu (for side-scrolling portfolio)

[richard n]

 (* alert - beginner's question *)

Hi

Thanks for the feedback on my sample side-scrolling portfolio. Very 
useful to know that IE PC messes up the dashed borders - and how to fix 
it.

I'm now trying to figure out a navigation menu.

There are going to be about 12 galleries, each with about 12 pictures. 
So that's 12 links, plus a few more for further info.

15 links seems too many to display at once, so I'm thinking of 
drop-down menus.

I'm keen on a CSS-only solution, and I've played with the various menus 
at CSSPlay. Unfortunately I can't style any of them in quite the way I 
want (I'd like the menu to survive a couple of clicks of 'enlarge text' 
in the viewer's browser). (Also the CSSPlay menus simply won't work in 
IE Mac, which I've decided I need to support.)

So I've moved on to the Son of Suckerfish menu at HTMLDog. With the 
help of the huge comments section, I've altered (cut/paste) the small 
bit of Javascript so that it will work on IE Mac (it's a bit buggy - 
the links become invisible when clicked - but it works). It also works 
well in Safari 1.3.2, Safari 2.0.3, FF Mac 1.5.0.6 and Opera Mac 9.01.

Here it is. I've dropped an image below the menus in roughly the 
position the side-scrolling gallery will be. Obviously, the menus 
should appear over, not under, the image. The links don't go anywhere 
at present:

http://www.richardnicholson.com/testing/suckermenu7.html

Questions:

1. Does it work in other browsers (especially IE 5, 6, 7 PC)?

2. Does it survive an increase in text size?

3. Are there better solutions than Suckerfish (that I could style 
visually in a similarly basic way)?

4. Is it possible to target the top level links with CSS so they don't 
darken on mouseover (like the other links do)? Also can I stop the 
cursor changing into a hand for these top links? (Basically I don't 
want people clicking on the top level links, and the only behaviour I 
want them to see is the menu dropping down).

5. Can I use CSS to make the white background of the menus 
semi-transparent (i.e. so the images show through slightly)?

Thanks for any tips

Richard
 



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] side-scrolling portfolio website - best technique?

[richard n]

I've had a few emails about the horizontal dotted borders being 
rendered as blurred dashes in IE PC.

>From what I've been told the borders look ok (but dashed) when the page 
is static, but as the page is scrolled the borders start to degrade 
(the gaps between the dashes start to fill in) - I've been sent a 
couple of very ugly looking screengrabs.

This is possibly worse on low-powered computers, and seems to be worse 
when the screen is scrolled with the cursors keys.

(I'm assuming that IE PC has a fundamental problem rendering dashed 
borders, and it isn't just doing this because my CSS says 'dotted'.)

This is a naive question, but is it possible, using CSS, to tell IE to 
render the borders as solid, whilst other browsers can be left to 
render the borders dotted? - That would my ideal solution.

thanks

Richard

(oh dear, dotted borders were why I decided to learn CSS!) 

www.richardnicholson.com/testing/list_text.html

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] side-scrolling portfolio website - best technique?

[richard n]

I've been sent a reply off-list with a screen-grab of how the scrolling 
gallery displays in IE6 PC.

I had been forewarned that my dotted borders would be displayed as 
dashes in IE6 PC, but I was surprised to see that the dashes on the 
horizontal borders were erratically blending into each other. Quite 
messy really. Are others seeing this on IE6 PC?

Thanks

Richard

http://www.richardnicholson.com/testing/list_text.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] side-scrolling portfolio website - best technique?

[richard n]

Thanks for the example Tony.

It looks good, and by reading the code I can just about work out what's 
going on. 

Unfortunately, PHP is beyond me, and without PHP it is just too tricky 
to position everything correctly.

I think that semantically your approach is better. I'm using a list, 
which somehow doesn't seem appropriate for a gallery of images. There 
again, if a list is deemed appropriate for a navigation bar, then I 
guess it might also be suitable for an image gallery.

Cheers

Richard







>>  I tried another way (floating divs left, inside a container div), but 
>>  that required me to specify a total width for the container div, or 
>>  otherwise the images would wrap to the browser window. I rejected the 
>>  method as it was tricky calculating the width of the container div.
> 
> I did it in a similar way your second option, using PHP to add inline 
> CSS to suit widths here:
> 
> links not working as it's an old demo...
> 
> http://xebitordev.xebitor.com/timeline/
> Chronology of All
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] side-scrolling portfolio website - best technique?

[richard n]

You mention 350px vertical being a good guide for designing for an 800 
x 600 screen.

How about for a 1024 x 768 screen?

(I've added a background colour - thanks)


> The amount of vertical scroll will depend on the users chrome. And 
> there's no way to predict what that's going to be (for me the usable 
> vertical area is a max of 350px at 800 in my default browser). BTW, 
> don't forget to add a background color -- not everyone defaults to 
> white .
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] side-scrolling portfolio website - best technique?

[richard n]

Thanks, that sounds encouraging.

(Hmm, I must confess, I don't actually know what Mozilla and Gecko are.)

So... it looks like it doesn't work in IE7... any idea how I can fix 
that?

And it doesn't work in IE5.2.3 Mac (images display vertically).

How about IE5 PC?


> It scrolls horizontally as I believe you intend in XP
> Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.6) 
> Gecko/20060728 Firefox/1.5.0.6; Opera/9.01; and IE/6.0.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] side-scrolling portfolio website - best technique?

[richard n]

There should be 60 pixels of white space above the scrollling gallery. 
That is a holding space - I'm going to put dropdown menus there, so 
people can navigate to different galleries (and the usual 'about' 
'info' 'contact' sections).

I'm aware that the whole thing is a bit too deep. I intend to make the 
images slightly smaller, and perhaps tighten up the big white margins. 
My target is to get it working on my flatmate's 12" iBook (1024x768?), 
without vertical scrolling.

I'm less bothered about users with 800x600 resolutions.

Thanks

Richard

http://www.richardnicholson.com/testing/list_text.html





> However, there seems to be some extra unnecessary white space above
> all the content, and that makes it so you have to scroll up and down just a
> bit in order to see everything (I'm using 1280x800 resolution, so this
> problem would also be present for people with 1024x768). Is the white space
> intentional? If so, why?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] side-scrolling portfolio website - best technique?

[richard n]

I've had a couple of replies off-list.

Apparently the scrolling gallery doesn't work in Firefox 1.5.0.6 on a 
PC. I wonder why, as it works fine in Firefox 1.5.0.6 on my Mac?

Also I've been advised that for 'content type' I should be using 
'text/html' and not 'application/xhtml+xml'. That was a copy/paste 
error. I've made the alteration and uploaded it:

http://www.richardnicholson.com/testing/list_text.html

(To be clear, all the images should be laid out in one long horizontal 
ROW. If they wrap to the browser window, or line up in one long COLUMN, 
then my code isn't working.)

Re. Don's general comments about whether a side-scrolling gallery is a 
good idea - Well, I've given it a lot of thought and I've decided that 
it's the effect I want to achieve. Whether it's possible, with good 
cross browser compatibility, is what I'm trying to find out. I realise 
that top-to-bottom is the dominant paradigm in web design. I'm just 
curious to see whether a left-to-right design can be achieved - and 
without fixing everything in a table.

Thanks

Richard












 
> 
> - Original Message -
> From: "richard n" <[EMAIL PROTECTED]>
> To: 
> Sent: Tuesday, September 05, 2006 8:54 AM
> Subject: [css-d] side-scrolling portfolio website - best technique?
> 
> 
> | Hello
> |
> | I'm new here, new to CSS and new to web design.
> |
> | I'm a photographer, and I'm trying to create a side-scrolling portfolio
> | website, without using tables.
> |
> | I've had a lot of help in this thread:
> | http://www.csscreator.com/node/17632
> |
> | And this is what I've got so far:
> |
> | http://www.richardnicholson.com/testing/list_text.html
> |
> | (The final site will have several galleries like this, accessed by a
> | horizontal dropdown menu running across the top.)
> 
> 
> Richard
> Why hortizonal scrolling instead of vertical?
> 
> Why not smaller images so more can fit on a page and more images can be
> viewed without scrolling.
> Allow user to click on an image to show a larger picture.
> Would also save on download time, especially if you are going to have lots
> of pictures.
> You could also use JS to open a second, smaller window when the thumbnail is
> clicked to show the large image.
> 
> There are some good templates out there that others on the list may suggest.
> Why reinvent the wheel.
> 
> Don
> 
> 
> 
> | css-discuss [EMAIL PROTECTED]
> | http://www.css-discuss.org/mailman/listinfo/css-d
> | IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> | List wiki/FAQ -- http://css-discuss.incutio.com/
> | Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> |
> |
> |
> 
> 
> 
> 
> -- 
> No virus found in this outgoing message.
> Checked by AVG Free Edition.
> Version: 7.1.405 / Virus Database: 268.11.7/437 - Release Date: 9/4/2006
> 
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] side-scrolling portfolio website - best technique?

[richard n]

Hello

I'm new here, new to CSS and new to web design. 

I'm a photographer, and I'm trying to create a side-scrolling portfolio 
website, without using tables.

I've had a lot of help in this thread: 
http://www.csscreator.com/node/17632

And this is what I've got so far:

http://www.richardnicholson.com/testing/list_text.html

(The final site will have several galleries like this, accessed by a 
horizontal dropdown menu running across the top.)

Questions:

1. Is this the best way to do it (using an unordered list)?

I tried another way (floating divs left, inside a container div), but 
that required me to specify a total width for the container div, or 
otherwise the images would wrap to the browser window. I rejected the 
method as it was tricky calculating the width of the container div.

The unordered list method is neat because I can add or remove images, 
and change borders/margins/padding etc, without having to specify an 
overall length of the gallery - i.e. it works like a table.

(I was browsing in a bookshop the other day, and I noticed that in More 
Eric Meyer on CSS, in his chapter on making a thumbnail gallery, he 
recommends using a table if you DON'T want the thumbnails to wrap. But 
in general, as I understand it, it is best to avoid tables). 

2. Browser compatibilty.

I'm on a Mac. My test page works in the latest version of FF, Safari 
and Opera. It should also work in IE6 PC (there's a hack in there).

I think it won't work in IE 5 (PC or Mac) (?)

Does it work in IE7?

Is there any way to get it working in IE 5 Mac?

(A lot of photography buyers use Macs, and a few of those still use IE.)

If I can't get it working in IE Mac, would it be best substitute the 
list for a CSS-styled table like this:

http://www.richardnicholson.com/testing/table_text.html ?

Many thanks for any tips

Richard










__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/