[css-d] nav bar border spike

[Trish Meyer]

Hi everyone,

It's been a few months (just enough to get rusty again), and I 
volunteered to do another couple of sites...


I just started a template today for a garden society:


I can't figure out how to get rid of the "spike" when I hover over 
the nav list?


I put a 4 px border on the right for the a:hover style. What am I doing wrong?!

The style sheet is at


thanks in advance, this list is a godsend,

Trish

--


___
\ Trish & Chris Meyer/CyberMotion: Motion Graphics Design & Effects
 \ recent projects & clients: http://www.cybmotion.com/projects
  \ books, video, & articles:  http://www.cybmotion.com/sharing
   \ music (including Alias Zone):  http://www.cybmotion.com/music
\__
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

RE: [css-d] nav bar border spike

[Trish Meyer]

It is because you've used the border-bottom and right-border combo.
..Use margin-bottom: 10px on those items instead.





Thanks Peter, that did the trick! It makes sense now in the cold 
light of morning when I'm not panicking...


I don't suppose there's a way to make the colored right bar appear 
*inside* the colored nav boxes, rather than outside as it does now (I 
guess that's what borders do...)?  Or do I need to use a graphic 
element that appears in the bar flush-right?


Thanks,
Trish



--


___
\ Trish & Chris Meyer/CyberMotion: Motion Graphics Design & Effects
 \ recent projects & clients: http://www.cybmotion.com/projects
  \ books, video, & articles:  http://www.cybmotion.com/sharing
   \ music (including Alias Zone):  http://www.cybmotion.com/music
\__
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] problem with caption box

[Trish Meyer]

Hi all,

I've spent all afternoon studying how to do a box with a caption in 
it, following the advice at

http://css.maxdesign.com.au/floatutorial/tutorial0208.htm

However, I'm running into a few problems/questions. So I must be 
missing something...


First off, because you have to specify the width of the box, how can 
you accommodate pictures of different sizes? I can't image making a 
new set of styles for every size photo?


I did find that making the height of the div "auto" seems to work. 
But making the width = auto would mean I would have to put in line 
breaks in the caption, otherwise the div expands to fill the text.


My first attempt is online at
http://www.socahort.org/awardsbanquet.html

The CSS is at
http://www.socahort.org/stylesheets/schs.css

go to very end, I used ".captionbox" as my div style (the tutorial 
used ".floatright"):


.captionbox {
float: right;
margin: 0 0 10px 10px;
background-color: #FF;
padding: 10px;
border: 2px solid #F6B534;
width: 320px;
height: auto;
 }
div.captionbox img {
border: 1px solid #250066;
}
div.captionbox p {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 50%;
text-align: center;
color: #250066;
}


?   I can't figure out how to get the caption text to be a different 
size?  I make it 50% which should be very small, but it's showing up 
as 100.1%, which is what the Body is?  And yet, changing the font 
style works, and the text-align, just not the size.


I don't usually style a div like the tutorial suggests, I usually 
give each div a name. But if I name the div (i.e., div#captionbox) 
then I can only have one div with that name, right? I'd like to be 
able to reuse this design over and over.


as usual, I've ended up more confused than when I started...

thanks in advance,

Trish



--


___
\ Trish & Chris Meyer/CyberMotion: Motion Graphics Design & Effects
 \ recent projects & clients: http://www.cybmotion.com/projects
  \ books, video, & articles:  http://www.cybmotion.com/sharing
   \ music (including Alias Zone):  http://www.cybmotion.com/music
\__
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] problem with caption box

[Trish Meyer]

At 9:29 AM -0400 10/25/05, David Laakso wrote:
You might take a look at these methods for setting  images and 
captions(note the file is 4.01 consequently the  is not closed):





Thanks, I see this sets the caption box to a width based in %. I'm 
not sure how well that's going to work - what if the image is much 
wider?


I did manage to get the caption to resize at
http://www.socahort.org/awardsbanquet.html

by applying the text size value to the div itself, not the paragraph 
of text. This will come in handy the next time I have another iamge 
that's also 320 px wide!


It doesn't help me with my next problem of captioning a bunch of 
images, which you can see at

http://www.sfvartclub.org/artaroundtown.htm

I'm supposed to be putting two lines of text (the name of the artist, 
and the title of the artwork), under each image. Right now they all 
just float left with a border and margins.


So I'd still love to find a way to make a caption box with a width 
based automatically on the width of the image, and then make the text 
automatically wrap inside this box width. But it sounds like that's 
not possible. And I can't go making a new style for every possible 
image width?


Maybe the solution is to just use Photoshop and make a graphic...

Has anyone solved this successfully in CSS? Someone mentioned doing 
it with a table, but I don't know tables. Is it time to learn?!


thanks,

Trish


--


___
\ Trish & Chris Meyer/CyberMotion: Motion Graphics Design & Effects
 \ recent projects & clients: http://www.cybmotion.com/projects
  \ books, video, & articles:  http://www.cybmotion.com/sharing
   \ music (including Alias Zone):  http://www.cybmotion.com/music
\__
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] horz nav bar in IE5Mac / site check Windows

[Trish Meyer]

Hi all (aka: my saviors...),

I've spent all weekend reading Dan Cederholm's excellent book 
'Bulletproof Web Design", and was following the general idea in 
Chapter 2 for a scalable nav bar for my latest volunteer site:



CSS at


The nav bar works okay in Safari and Firefox on Mac, but falls apart 
in IE5.2 on Mac (the gradient continues across the page).

Is the nav bar broken too on Windows?

any ideas??

thank you, this list is great,

Trish

BTW. I've spent hours fiddling with this to get the div#nav to 
position itself flush to the bottom of the div#banner by setting it 
#nav to
position: absolute;
bottom: 0;

is there a better way? It seems to work, and the tabs are scalable. 
But willing to learn a better way.




-- 


___
\ Trish & Chris Meyer/CyberMotion: Motion Graphics Design & Effects
  \ recent projects & clients: http://www.cybmotion.com/projects
   \ books, video, & articles:  http://www.cybmotion.com/sharing
\ music (including Alias Zone):  http://www.cybmotion.com/music
 \__
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Use of non-standard font in declaration?

[Trish Meyer]

At 11:10 AM -0800 11/11/05, Tom Dell'Aringa wrote:
>Can anyone advise on how widespread Interstate-Regular is? I've 
>never heard of it but maybe I
>missed the meeting. My feeling is that this is not a good idea, but 
>it's a design decision that I
>don't have a whole lot of control over, so I need to come back with 
>some serious data if I'm going
>to go against it.

Interstate is a really nice sans serif from Font Bureau
http://www.myfonts.com/fonts/fontbureau/interstate/

very popular and hip in the right circles. If the audience for the 
site are publishers and ad agencies, there's a chance they might have 
it installed. Outside of that, I would doubt it. Interstate is not a 
cheap set of fonts (EACH weight is $40).

Rant: It's a shame that Adobe puts all their free fonts that come 
with the Creative Suite in a special Adobe only folder; otherwise you 
could use some of these as near standard fonts at least for a graphic 
designer audience.

Trish


-- 


___
\ Trish & Chris Meyer/CyberMotion: Motion Graphics Design & Effects
  \ recent projects & clients: http://www.cybmotion.com/projects
   \ books, video, & articles:  http://www.cybmotion.com/sharing
\ music (including Alias Zone):  http://www.cybmotion.com/music
 \__
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] clearing clears sidebar too

[Trish Meyer]

Hi all,

I hope this isn't too much of a challenge. I hope it's really easy to 
fix... a really common error (that I just can't seem to find 
anywhere).

I've got a new site mostly designed, but have run into a problem, 
which I've explained in the body copy of the page at:

http://www.collageartists.org/test7x1.html

Basically, adding a clear: both to the headers in the main content 
area, ALSO clears the #leftcol (sidebar). #leftcol is a floated 
element, and #content moves to the right thanks to a left margin.
Everything is positioned: relative, nothing is absolute (if that helps).

The CSS is at
http://www.collageartists.org/stylesheets/caa7_x1.css

Please help! I've troubleshooted this for hours and can't figure out 
how to fix it.

thank you thank you thank you,

Trish

-- 


___
\ Trish & Chris Meyer/CyberMotion: Motion Graphics Design & Effects
  \ recent projects & clients: http://www.cybmotion.com/projects
   \ books, video, & articles:  http://www.cybmotion.com/sharing
\ music (including Alias Zone):  http://www.cybmotion.com/music
 \__
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clearing clears sidebar too

[Trish Meyer]

>On Nov 11, 2005, at 9:52 PM, Trish Meyer wrote:
>  > I've got a new site mostly designed, but have run into a problem,
>>  which I've explained in the body copy of the page at:
>>
>>  http://www.collageartists.org/test7x1.html
>>
>>  Basically, adding a clear: both to the headers in the main content
>>  area, ALSO clears the #leftcol (sidebar). #leftcol is a floated
>  > element, and #content moves to the right thanks to a left margin.
>>  Everything is positioned: relative, nothing is absolute (if that
>  > helps).
>>
>>  The CSS is at
>  > http://www.collageartists.org/stylesheets/caa7_x1.css
>>

At 10:11 PM -0800 11/11/05, Michael Hulse wrote:


>Have you tried clear: right?
>...BTW, why are you clearing the headers in the first place? I have only
>glanced at your code and source, so I apologize in advance if I send
>you on a wild goose chase.

Thanks Michael,

I added so much copy to the right of the first image that it probably 
wasn't clear why I was clearing (no pun intended).  Check the page 
out again.

I tried clear: right only, but it doesn't move heading 2 down below 
the first image in Contents.

I'll try the inner content wrap idea to tomorrow (too fried now!).

I've since looked at it on Windows, and in Explorer the entire 
#contents is moved below the sidebar. On the Mac (Safari and 
Explorer), only the Heading 2 paragraph moves down to clear the 
sidebar.

Maybe in the morning it will look easier...!

Trish
-- 


___
\ Trish & Chris Meyer/CyberMotion: Motion Graphics Design & Effects
  \ recent projects & clients: http://www.cybmotion.com/projects
   \ books, video, & articles:  http://www.cybmotion.com/sharing
\ music (including Alias Zone):  http://www.cybmotion.com/music
 \__
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] clearing clears sidebar too

[Trish Meyer]

Okay, maybe I'm seeing two issues then. Even when I remove the clear: 
both style from the headings in the #content section, the entire 
#content moves down below the sidebar on IE Windows ONLY. It looks 
okay in Mozilla and Mac when I don't clear, so clearing is a red 
herring for now.

I think this is beginning to sound familiar though.

The page with NO clearing (that I was going to show the client...) is at:

http://www.collageartists.org/test7.html

The CSS is at
http://www.collageartists.org/stylesheets/caa5.css

so the clear:both is a problem on Mac (and probably also IE Windows), 
but first I have to fix the #content moving down problem first I 
think.

thanks for any help, aargh,

Trish

-- 


___
\ Trish & Chris Meyer/CyberMotion: Motion Graphics Design & Effects
  \ recent projects & clients: http://www.cybmotion.com/projects
   \ books, video, & articles:  http://www.cybmotion.com/sharing
\ music (including Alias Zone):  http://www.cybmotion.com/music
 \__
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clearing clears sidebar too

[Trish Meyer]

>  > "Know your shizzle" as in, know your stuff
>

You guys know your shizzle and are so sharing to boot! Thanks for all 
the great advice and links. I know I can solve this now one way or 
the other!

thank you thank you thank you,
Trish


-- 


___
\ Trish & Chris Meyer/CyberMotion: Motion Graphics Design & Effects
  \ recent projects & clients: http://www.cybmotion.com/projects
   \ books, video, & articles:  http://www.cybmotion.com/sharing
\ music (including Alias Zone):  http://www.cybmotion.com/music
 \__
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] bottom align text with background image in

[Trish Meyer]

At 4:14 PM + 11/12/05, Barnaby Scott wrote:
>I have been having a number of problems styling the following site:
>
>http://www.southdevons.co.uk/
>The stylesheet is here: http://www.southdevons.co.uk/style/grove.css
>
>In order to avoid confusion, I guess I'd better tackle them one at a time.
>So, the first is the  and :
>
>I set the background image to a 50px square and 40px square image
>respectively, with the intention that the text - and therefore the bottom
>border - should both align to the bottom of the image. Unfortunately I
>couldn't find any way to do this other than by trial-and-error padding.


This brings to mind another question I had yesterday about aligning 
background images. Which might also solve your issue too!

In Dreamweaver, it allows you to enter a "value" for Vertical 
Position. So in my style sheet, I have a  background image that is 
flush left and at "9px" in vertical dimension.
i.e., the css says "left 9px" instead of "left top" or "left bottom".

see the little red bullet to the left of "Breaking News" at 


However, when I validated the CSS, I get an error:

Errors

URI : http://www.collageartists.org/stylesheets/caa5.css
*   Line: 254 Context : #leftcol h5

Invalid number : background-position 9px is not a background-position 
value  : left 9px



So, is this valid css that Dreamweaver allows? It seems to work 
nicely in the couple of browsers I checked.

thanks,
Trish


-- 


___
\ Trish & Chris Meyer/CyberMotion: Motion Graphics Design & Effects
  \ recent projects & clients: http://www.cybmotion.com/projects
   \ books, video, & articles:  http://www.cybmotion.com/sharing
\ music (including Alias Zone):  http://www.cybmotion.com/music
 \__
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] bottom align text with background image in

[Trish Meyer]

At 12:40 PM -0500 11/12/05, Roger Roelofs wrote:
>  >
>>  Invalid number : background-position 9px is not a background-position
>>  value  : left 9px;
>
>I don't remember the exact wording of the spec, but my rule of thumb is
>to use either the words top left... or units like 0 9px or 2em 5em or
>percents 10% 40%.
>

Thanks Roger, using the SAME values, as in

0 9px

did the trick! It now validates.

This should work for you too Barnaby.

Trish

-- 


___
\ Trish & Chris Meyer/CyberMotion: Motion Graphics Design & Effects
  \ recent projects & clients: http://www.cybmotion.com/projects
   \ books, video, & articles:  http://www.cybmotion.com/sharing
\ music (including Alias Zone):  http://www.cybmotion.com/music
 \__
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] site check please

[Trish Meyer]

At 4:57 PM +0200 11/16/05, Schalk wrote:
>Greetings All
>
>Hopefully this will be the last request for a review of this site:
>www.volume4.com/tc/  Thank you all in advance.
>

On Mac, Safari, when I hover over the nav bar, the hover state seems 
to be taller than the normal state? This results in an unattractive 
flickering effect as you move up and down, and the height of the 
entire nav bar changes when you move the cursor in and over the div.

It looks like the photo should be the same height as the left column 
(nav bar) area, but the left column is taller.

Trish

-- 


___
\ Trish & Chris Meyer/CyberMotion: Motion Graphics Design & Effects
  \ recent projects & clients: http://www.cybmotion.com/projects
   \ books, video, & articles:  http://www.cybmotion.com/sharing
\ music (including Alias Zone):  http://www.cybmotion.com/music
 \__
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Int. Explorer 7 - need help

[Trish Meyer]

Hi all,

(I just realized I sent this to the Web Design list by mistake, sorry 
if you get it twice)

I design on Mac, and have IE6 on the one XP box we have. I always 
test and fix my CSS on IE6 on XP of course, but have no way to also 
test on IE7.

I was at my doc's office today, and he let me pull up the VIVA 
Gallery site to see how it looked on IE7.

Unfortunately, images were spilling out of the main content area, 
obscuring the sidebar text.

Can someone with IE7 confirm this problem? see
http://www.vivagallery.org/exhibits/PSA_2007/index.html

If you want to see more examples, go to Exhibits and click on any 
archived art show. They all have the same structure.

The structure is a 3-col fluid center (with min. width set with the 
Project 7 script, if that matters).

The CSS is at
http://www.vivagallery.org/styles/viva3.css

I think the major structure worth mentioning is as follows and is 
pasted below. From what I can tell, the div#photogallery is expanding 
wider than it should, allowing one more #photobox to be included in 
the #content area, and this last photobox spills out and draws over 
the #sidebar.

/* *** left column -  (left nav column is outside #wrapper so may be 
unimportant?) *** */
div#nav {
position: absolute;
width: 150px;
padding: 0;
margin: 0;
top: 174px;
left: 0px;
z-index: 10; /* needs to be in front! */
}

/* *** wrapper includes main content and sidebar*** */
div#wrapper {
position: relative;
margin: 0px;
padding: 0px;
min-width: 850px; /* goes in P7_setMinWidth script too */
width: auto;
top: 0px; /* changed in revision 1-2-06 */
height: auto;
left: 0px;
}

/* *** right column structure *** */
div#sidebar {  /* container for individual sidebar boxes */
position: absolute;
top: 4px;
right: 10px;
float: right;
margin: 0px;
width: 225px;
}

/* *** content structure *** */
#content, #contentwide {
margin: 0px 245px 10px 166px;
padding: 0 4px 0 10px;
position: relative;

/* *** styling for photoboxes *** */
div#photogallery { /* wraps around all photoboxes */
width: 95%;
position: relative;
}

div.photobox { /* default is 3 credit lines in boxes */
float: left;
margin: 5px 15px 5px 0px;
background-color: #FF;
width: 242px;
height: 290px;
border: 0px solid silver;
text-align: center;
padding-bottom: 6px;
  }

If anyone could point out where to start looking, or links, or things 
to try, I would be very very very grateful.

thanks,
Trish
-- 

--
Trish Meyer, Webmaster
VIVA Gallery
The Valley Institute of Visual Arts
http://www.vivagallery.org
Email: [EMAIL PROTECTED]
Mailing List: [EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Int. Explorer 7 - need help - fixed

[Trish Meyer]

At 3:59 PM +1000 6/1/07, Michael McEwen wrote:
>Maybe you could try explicitly setting the width of the photogallery4
>div element.
>
>div#photogallery4 {
>width:780px;
>}

Thanks Michael,

In my case it was user error (I hope, waiting on confirmation from an 
IE7 user).

In the full CSS there were variations on the #photogallery div.

The default is 3 lines of credits, so I change the ide to 
#photogallery2 or #photogallery4 in case the exhibit needs 2 or 4 
lines for descriptions under images. (Changing just the gallery div 
to a new id automatically makes those photoboxes shorter or taller.)

  But I forgot to actually include these new div id variations in the 
top section where the photogallery is defined. So they were using a 
100% default for width, instead of my 95% width. I guess I must have 
run into the "don't make it full width" problem before, hence the 95%.

if you're curious, my code is now:

div#photogallery, div#photogallery2, div#photogallery4 { /* wraps 
around all photoboxes */
width: 95%;
position: relative;
}

div.photobox { /* default is 3 credit lines in boxes */
float: left;
margin: 5px 15px 5px 0px;
background-color: #FF;
width: 242px;
height: 290px;
border: 0px solid silver;
text-align: center;
padding-bottom: 6px;
  }
div#photogallery2 div.photobox { /* when only 2 lines in boxes */
height: 265px;
}

div#photogallery4 div.photobox { /* when 4 lines in boxes */
height: 300px;
}

best,
Trish


-- 

--
Trish Meyer, Webmaster
VIVA Gallery
The Valley Institute of Visual Arts
http://www.vivagallery.org
Email: [EMAIL PROTECTED]
Mailing List: [EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] publishing with Publisher

[Trish Meyer]

Hi all,

Just thought someone might find this of interest and file it in the 
"what not to do" file... Hope it's not too OT.

A friend of mine uses Publisher to produce newsletters, and it 
advertised that it can also build websites. So she built her website 
and hit the "Publish to Web" button. Apparently her site works in 
IEWin but not Firefox. I'm on Mac, and when I checked it on Mac 
Safari, there were no navigation, images, or anything.

http://darlenehorsley.com/

Out of curiousity, I looked at the View Source and saw something that 
looked like a very strange version of CSS. At least, I don't see any 
tables being built. What is that goop? (beside comic relief!) Is it 
XML?

I'd like to explain to her why it doesn't work, though I strongly 
advised her to learn a web program...

Trish

-- 

--
Trish Meyer, Webmaster
VIVA Gallery
The Valley Institute of Visual Arts
http://www.vivagallery.org
Email: [EMAIL PROTECTED]

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Safari Empty Cache redraw problem

[Trish Meyer]

I work on Mac, Safari 2.0.2, and frequently have to Empty Cache in 
order to load new CSS files etc while testing.

Recently I've noticed that one of my sites, 
http://www.wildscaping.com, doesn't draw properly if I go to it 
directly after emptying the cache. All you see is the Footer at the 
top of the contents area; the main contents box is not drawn.

Today it's even weirder, with the Contents text drawing one word on 
each line down the page.

When I go to another main tab, and than back to Home tab, the home 
page draws fine.

Does this sound familiar to anyone? Is there a reason for it?

What I'm really nervous about, of course, is does anyone elso see a 
blank page when they visit http://www.wildscaping.com AFTER emptying 
their cache?

thanks
Trish

-- 

--
Trish Meyer, Webmaster
VIVA Gallery
The Valley Institute of Visual Arts
http://www.vivagallery.org
Email: [EMAIL PROTECTED]

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] CSS Explorer and absolute div

[Trish Meyer]

Help.

It's midnight and I don't know where my div is...

Please see page
<http://www.socahort.org/meetings.html>

and CSS on page
<http://www.socahort.org/stylesheets/schs.css>

the div called #archive includes the "Past Meetings" links.

It's an absolute div, nested inside the div#wrapper which also 
includes the main #contents div, both of which are relative.

#archive renders on the left in Safari, IE Mac, and Firefox on 
Windows, but NOT Explorer 6 on Windows.  Surprise.

I've made it relative, moved it inside and outside the wrapper, and 
I'm stumped. I can get it do draw on the left when outside the 
wrapper, but then the top of the div starts in different places on 
different browsers.

aargh.

thanks for any help,
Trish

PS.
Also, the nav bar jumps up and down in Explorer. I think I can fix 
that as I've seen that before (collapsing margins I think).

-- 

--
Trish Meyer, Webmaster
VIVA Gallery
The Valley Institute of Visual Arts
http://www.vivagallery.org
Email: [EMAIL PROTECTED]

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Explorer and absolute div

[Trish Meyer]

At 11:50 PM -0800 1/20/06, Trish Meyer wrote:
>html
><http://www.socahort.org/meetings.html>
>
>and CSS on page
><http://www.socahort.org/stylesheets/schs.css>
>
>the div called #archive includes the "Past Meetings" links.

After my post last night, I had the brilliant idea (well, brilliant 
for me...) to made the little #archive a float left and relative div, 
rather than an asboluely positioned div. Was this the right approach??

This seems to have solved the problem in Windows Explorer.

However, now in Explorer on Mac, the archive div draws underneath the 
nav bar so it's unreadable. Aaargh again.

Any ideas? Besides telling them to use Safari?

Trish

-- 

--
Trish Meyer, Webmaster
VIVA Gallery
The Valley Institute of Visual Arts
http://www.vivagallery.org
Email: [EMAIL PROTECTED]

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Explorer and absolute div

[Trish Meyer]

At 11:00 AM -0800 1/21/06, Trish Meyer wrote:
>At 11:50 PM -0800 1/20/06, Trish Meyer wrote:
>>html
>><http://www.socahort.org/meetings.html>
>>
>>and CSS on page
>><http://www.socahort.org/stylesheets/schs.css>
>>
>>the div called #archive includes the "Past Meetings" links.
>
>After my post last night, I had the brilliant idea (well, brilliant
>for me...) to made the little #archive a float left and relative div,
>rather than an asboluely positioned div. Was this the right approach??
>
>This seems to have solved the problem in Windows Explorer.
>
>However, now in Explorer on Mac, the archive div draws underneath the
>nav bar so it's unreadable. Aaargh again.
>

Okay, so I used another combination: Float: left AND position: 
absolute, and it seems to work in all browsers now.

I've no idea why it works though. Why do I need to both float: left 
and Position it left? If the #archive is nested inside wrapper, and 
positioned Left: 0px, why did I also need to float it left? Or what 
the Float just needed to fix an Explorer bug?

Am I the only one here who fixes things by saying:

- try Position relative and absolute
- try Float, yes or no
- then try every possible combination of float and and position 
values until one works...

I've read a lot about floats and positioning, and in isolation these 
tutorials make sense. But then you have to throw in how they work 
together, plus browser bugs, and my head is about to explode...

Trish


-- 

--
Trish Meyer, Webmaster
VIVA Gallery
The Valley Institute of Visual Arts
http://www.vivagallery.org
Email: [EMAIL PROTECTED]

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] vertical alignment of photo boxes

[Trish Meyer]

Hi all,

I've gotten pretty far with getting photo/caption boxes to work at

<http://www.vivagallery.org/exhibits/CAA_2006JuriedOpen/index.html>

The only thing I can't figure out is how to align the boxes 
vertically so that they align along their bottoms, not the top. 
Because they are different heights (same widths) the flow is really 
odd when you resize the browser window wide.

  I read somewhere to use display: tablecell and then vertical align 
bottom will work. But they remain flush to the tops.

The photoboxes are floated left (or they stack above each other), but 
I'm open to other ideas.

relative css is:

/* *** styling for photoboxes *** */
div.photobox {
float: left;
margin: 0 10px 10px 0px;
background-color: #FF;
width: 240px;
height: auto;
border: 1px solid silver;
text-align: center;
padding-bottom: 6px;
display: table-cell;
vertical-align: bottom;
  }
div.photobox img {
border: 1px solid #577199;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 4px;
}

full CSS is at
<http://www.vivagallery.org/styles/viva3.css>



thanks for any help,

Trish

PS. I hope by making a new message (rather than hitting reply and 
changing the subject line) I am start a new thread? (I read/reply to 
the list using Eudora mail software.) It seems before that my 
questions were appearing in the middle of other threads. Sorry about 
that.



-- 

--
Trish Meyer, Webmaster
VIVA Gallery
The Valley Institute of Visual Arts
http://www.vivagallery.org
Email: [EMAIL PROTECTED]

__
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] scalable navigation from Cederholm's Bulletproof Sites

[Trish Meyer]

At 8:32 PM -1000 2/12/06, David Faulhaber wrote:
>Things have been going pretty
>well but I'm snagged on the navigation. I followed the "Scalable Navigation"
>example in chapter two of Dan Cederholm's and everything looked great in
>Safari... until I checked the site in Explore, Firefox, and Opera, all of
>which screwed up the nav tabs. Opera displays only two of the tabs (inline),
>while Explorer and Firefox stack all the tabs one on top of the other
>against the left side. I've been trying to troubleshoot this all day but my
>brain is shot and I just can't "see" what the problem might be.

Ah, yes, I found that bug too. I followed that tutorial for my site at

http://www.collageartists.org/

http://www.collageartists.org/stylesheets/caa.css

and I found a bug in the book. Looking at my scribbles, on page 32, 
the problem was the float: left; on the #nav a. You need it for Mac 
IE but not the others.

here's my version:

/* styling horz nav bar  */
div#nav {
float: left;
margin: 0;
padding-left: 15px;
width: 755px; /* 770 minus padding*/
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #7CCB94; /* green*/
position: absolute; /* *** make #nav flush bottom with #banner  *** */
bottom: 0; /* *** make #nav flush bottom with #banner  *** */
}
#nav ul {
margin: 0;
padding: 0;
}
#nav ul li {
float: left;
margin: 0;
padding: 0;
display: block;
list-style: none;
font-family: "Trebuchet MS", "Lucida Grande", Geneva, Arial, 
sans-serif;
font-size: 75%;
letter-spacing: 1px;
}
#nav a {
float: left; /* *** for IE55Mac - hidden below from others  *** */
margin: 0 8px 0 0px;
padding: 4px 6px;
color: #DCFFD9;
display: block;
text-decoration: none;
background: #000 url(../navbar/navtab_a.gif) repeat-x top left;
background-color: #3B7980; /*match btm of tab color */

border: 1px solid #80;
border-bottom: none;
}
/* Commented backslash hack hides rule from IE5-Mac WATCH BACKSLASH! \*/
#nav a {
    float: none;
}
/* End IE5-Mac hack */



hope that helps,

Trish



-- 

--
Trish Meyer, Webmaster
VIVA Gallery
The Valley Institute of Visual Arts
http://www.vivagallery.org
Email: [EMAIL PROTECTED]

__
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] vertical alignment of photo boxes - repost

[Trish Meyer]

Hi all,

I've fiddled with the gallery boxes at

<http://www.vivagallery.org/exhibits/CAA_2006JuriedOpen/index.html>

I now have them all the same width and height, so at least they don't 
jiggle around and fill odd spaces when you resize the browser window 
(the way they did when they were all different heights).

I also fixed a bug in Explorer on Windows where the floated boxes 
would draw behind and below the right sidebar column. The fix was to 
enclose all the photoboxes in another div called #photogallery.

??? If anyone can tell me how to align the div.photoboxes so that 
they are either centered or aligned bottom with each other, I'd love 
to know!

My CSS now looks like below (full CSS is at 
<http://www.vivagallery.org/styles/viva3.css>)

  /* *** styling for photoboxes *** */
div#photogallery { /* wraps around all photoboxes */
width: 95%;
position: relative;
}

div.photobox {
float: left;
margin: 5px 15px 5px 0px;
background-color: #FF;
width: 240px;
height: 290px;
border: 0px solid silver;
text-align: center;
padding-bottom: 6px;
  }
div.photobox img {
border: 1px solid #577199;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 4px;
}


Thanks,
Trish


-- 

--
Trish Meyer, Webmaster
VIVA Gallery
The Valley Institute of Visual Arts
http://www.vivagallery.org
Email: [EMAIL PROTECTED]

__
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] Adding border to image when hovering

[Trish Meyer]

Hi all,

Getting back to CSS after a few months away, and having a brain 
freeze doing something new (for me).

I have a page of small thumbnail images with a thin gray border, and 
as the mouse moves over them, I want the hover state to be a larger 
red border so the visitor knows they can click on them. I thought 
this would work:

#thumbnails img {
border: 1px solid #66605C; /* medium gray */
margin-top: 8px;
margin-right: 14px;
margin-bottom: 8px;
margin-left: 0px;
padding: 6px;
}
#thumbnails img a:hover {
border: 2px solid #C02D2D; /* red border */
}


The image is styled properly with the thin gray border, and the link 
is working in the browser.  But nothing happens when I hover. Am I 
using incorrect CSS?

I also tried defining the a:link before the a:hover, but still nothing.


The HTML is simply:



thanks for any help,

Trish

-- 

--
Trish Meyer, Webmaster
VIVA Gallery
The Valley Institute of Visual Arts
http://www.vivagallery.org
Email: [EMAIL PROTECTED]
Mailing List: [EMAIL PROTECTED]
__
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] adding a global override in a style

[Trish Meyer]

Hi all,

I have a couple of questions regarding a new site I put up today. 
(Welcome any feedback too!).

http://www.co-op7.org/

http://www.co-op7.org/stylesheets/coop7.css


Having a typesetting background, I have strong feelings for 
appropriate amounts of "Space Before" and "Space After" a paragraph.

So I make classes like ".smallmargintop" to reduce the space above an 
 that follows an , as well as the class ".extraspacebefore" 
to add more space before some headers. But these only work on regular 
  and  etc tags.

As soon as I get specific with sub sections, like

#sidebar h1
#profile p

and so on, the classes I created to override inter paragraph spaces don't work.

Is there a simple way to make classes like these always override the 
style? I do I have to make styles like
#sidebar h1.smallmargintop

and so on for every combination

hope that make sense,

thanks,
Trish



-- 

--
Trish Meyer, Webmaster
VIVA Gallery
The Valley Institute of Visual Arts
http://www.vivagallery.org
Email: [EMAIL PROTECTED]
Mailing List: [EMAIL PROTECTED]
__
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] adding a global override in a style

[Trish Meyer]

At 9:40 PM -0400 8/21/06, ~davidLaakso wrote:
>>http://www.co-op7.org/
>>http://www.co-op7.org/stylesheets/coop7.css
>>
>
>Even a complex page seldom needs classes to set lead. If your 
>typesetting background is hot-metal then think along similar lines. 
>Use margin-top and bottom on the headings as you would lead. And 
>sometimes line-height is used with headings, too (but that can get 
>tricky). Use margin-top and bottom for the paragraphs. And 
>line-height (it usually a raw number) to lead the sentences (lines) 
>of p. An exception to the class might be a last paragraph that would 
>be p.last with a deeper margin bottom (although you could pad the 
>bottom of its container, instead; or, use br.lead {line-height: 2.5 
>or whatever; ). You can then vary specific and individual selectors 
>by changing the font-size and/or margin/line-height.

I first set line-height to be appropriate in case a header wraps 
around two lines, then I set top and bottom margins to space it 
around paragraphs.

I could always add a deeper margin to a p.last I suppose, but the 
same problem occurs with getting it to work. Let's say I have defined 
 differently in different sections of a site (#sidebar, #content, 
#profile, etc. )

Do I have to define this larger margin-bottom to specific selectors like

#sidebar p.last, #content p.last, #profile p.last {
  margin-bottom: 2em;
}

I can't seem to create a style called just

.last { margin-bottom: 2em; }

and apply it to any paragraph anywhere in any div when the layout 
calls for extra space?

Even adding !important doesn't work?

(Boy, I'd kill for the Adobe Paragraph palette in CSS...yeah, yeah, I 
know)

Trish

-- 

--
Trish Meyer, Webmaster
VIVA Gallery
The Valley Institute of Visual Arts
http://www.vivagallery.org
Email: [EMAIL PROTECTED]
Mailing List: [EMAIL PROTECTED]
__
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] thumbnail gallery with captions

[Trish Meyer]

At 10:53 AM +1030 1/23/07, David Sharp wrote:
>I have a bunch of image thumbnails - all the images are the same size,
>but some are portrait, some are landscape.
>
>I currently have them displayed inline, text-align : center;
>vertical-align : middle; so they fill each row from the center of the
>screen, and wrap when required. The vertical-align means orientation is
>not an issue.
>
>My problem arises when wanting to center a caption under each image.
>Because the images are inline I can't absolutely position the caption
>with respect to the anchor. Making each anchor a block means I would
>have to float them and therefore lose centering.


I was probably one of those who asked last year!

I do pics and captions for an art gallery, but each image is in its 
own floated div - as in
http://www.vivagallery.org/exhibits/SCORE_2006/index.html


div#photogallery { /* wraps around all photoboxes */
width: 95%;
position: relative;
}

div.photobox {
float: left;
margin: 5px 15px 5px 0px;
background-color: #FF;
width: 242px;
height: 290px;
border: 0px solid silver;
text-align: center;
padding-bottom: 6px;
  }

The only thing I could never figure out was how to control the 
placement of the image - it is always flush to the top of div.photobox
hope that helps,

Trish

-- 

--
Trish Meyer, Webmaster
VIVA Gallery
The Valley Institute of Visual Arts
http://www.vivagallery.org
Email: [EMAIL PROTECTED]
Mailing List: [EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/