Re: [css-d] Francky's Corners and accessible tabs

2006-07-22 Thread Jono 
 tabs are sliding down, overlapping the div instead of sitting on top.  Teh
following link illlustrates this... http://www.rollandburn.com/test.html

I think the easiest solution would be to wrap the chunk of round corner html
code in its own div id=wrap-round-corners and then give that div a top
margin equal to the height of the .tabNav as follows:

div class=tabNav
ul
li class=currenta href=index.php?view=dashboard
title=DashboardDashboard/a/li

lia href=index.php?view=mortgage-add title=Add MortgageAdd
Mortgage/a/li
lia href=index.php?view=search title=SearchSearch/a/li
lia href=index.php?view=reports title=ReportsReports/a/li
/ul
/div

div id=wrap-round-corners
!-- START ROUNDCORNERS --
div class=top-left/div
div class=top-right/div
div class=inside
span class=notopgapnbsp;/span

pIn a van down by the river/p

!-- FINISH ROUNDCORNERS --
span class=nobottomgapnbsp;/span
/div
div class=bottom-left/div
div class=bottom-right/div
/div!-- End wrap-round-corners --
/body
/html


Adjust the top margins on #wrap-round-corners until the tabs are where you
would like them in relation to the round corner box.  I did not take a close
look at your html/css, so there may be a better way...but this should work
pretty well cross-browser.


-- 
Jono Young
Designer | Developer | Illustrator
Charleston Web Solutions
Bringing Higher Standards to the Lowcountry
http://www.charlestonwebsolutions.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/

Re: [css-d] Francky's Corners and accessible tabs

2006-07-13 Thread francky 
francky wrote:

[...]
See testpage 
http://home.tiscali.nl/developerscorner/css-discuss/test-rolland-new.html.
  

Rollandburn wrote offlist:
 Again you have saved my neck, and this time with a bit of humor!
 hehe...thats a lot francky, i really appreciate all of the help 
 you have given me!

And francky writes:

Not yet saved, not yet ready ... ;-)
After posting my testpage, all of a sudden I saw the positioning of the 
nav bar is o.k. now, but IE is not showing the changing tabs 
(backgrounds) @hover!
Then all IE-visitors cannot see the beauty of the blue's! - And (pity) 
still yet more as 50% of the surfers have IE as (substitute for) browser...

The reason is the li:hover method for changing background positions you 
( I) used; IE doesn't support that.

As I suggested in the CSS-hoverable tabs with 1 image and clientside 
scalable fontsize testpage 
http://home.tiscali.nl/developerscorner/css-discuss/test-slidingDoorsTabs-hoverimage.html
 
that I 've send you offlist some days ago, the hovering tabs can be seen 
in IE with the span method inside the a of the list-items (getting 
the part of the liquid background-image which is called by the li:hover 
otherwise).
Though it is making a bit of tag soup in the html, the result is a 
workaround for IE.

With some adapting of the images you used, I experimented to 
spannarize the test-rolland-new.html page. :-)
The result is reasonable crossbrowser (IE-mac I didn't test), and anyway 
there are IE-win proof css-hover tabs now; see this new new testpage 
http://home.tiscali.nl/developerscorner/css-discuss/test-IE-proof-liquid-tabs.html!
 
[1] [2]

Greetings,
francky

[1] This time I used Stu Nicolls' Fitted Doors technique (with some 
finishing touches here and there) for the positioning of the elements; 
see testpage for the link
[2] Probably the same result without the span soup can be accomplished 
by the use of the Suckerfish hover-script (no time to figure out now), 
but then the page is javascript dependent - and I like more a pure css 
solution.


__
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] Francky's Corners and accessible tabs

2006-07-11 Thread rollandburn 
Hi all,  after great help and suggestions from quite a few of the  
members here I have come to another block in my css training.  After  
successfully implementing francky's rounded corners and accessible  
tabs separately, I find that I am having a problem getting the tabs  
to sit on top of the rounded corner div.  The tabs are sliding down,  
overlapping the div instead of sitting on top.  Teh following link  
illlustrates this.

http://www.rollandburn.com/test.html

again, thanks for un-stumping me! hehe



__
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] Francky's Corners and accessible tabs

2006-07-11 Thread francky 
rollandburn wrote:

Hi all,  after great help and suggestions from quite a few of the  
members here I have come to another block in my css training.  After  
successfully implementing francky's rounded corners and accessible  
tabs separately, I find that I am having a problem getting the tabs  
to sit on top of the rounded corner div.  The tabs are sliding down,  
overlapping the div instead of sitting on top.  Teh following link  
illlustrates this.

http://www.rollandburn.com/test.html

again, thanks for un-stumping me! hehe
  

Yes: because the tabs a in a floating div, out of the normal flow of the 
html. A {clear: left;} in the first independent div under it lets the 
new div start below the tabs-bar.
In this case, the first div is the div class=top-left, so this class 
gets the clear and you are saved. :-)
And to get IE in line, you can place a non-breaking-space (nbsp;) 
instead of the normal space between Add and Mortgage (= compensation 
for the IE-only
fix  tabNav a {width:0.1em;} ).
See testpage 
http://home.tiscali.nl/developerscorner/css-discuss/test-rolland-new.html.

Greetings,
francky
__
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/