Re: [css-d] list

[francky]

Marjo wrote:

>Dear people,
>I am new to this list, having just started my webdesign activities again.
>
Hi Marjo,
Welcome, welcome! :-)

>I have a small problem which I hope is very easy to solve. On a webpage I want 
>to have a piece of text with in between a few lists. Now, with my current 
>design and stylesheet make-up, I have the lists with items floating between 
>the text.
>
>Could anyone tell me what I might be doing wrong? Which piece of code is 
>missing here?
>  
>
It's a bit difficult guessing what is your current design and 
stylesheet, so also difficult to give a general or practical answer. Can 
you say which page it is, or can you upload a testpage?

Greetings,
francky
__
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] What is a simple alternative to JS+CSS rounded corners

[Jon Stockdill]

Doesn't use images or JS:
http://www.spiffycorners.com/sc.php?sc=spiffy&bg=ff&fg=0a67e6

Uses images, but no JS:
http://www.albin.net/CSS/roundedCorners/examples.html

Please let me know if these work out for you.  I considered them, but
eventually choose Nifty.

--jon




On 12/27/06, Parag Jagdale <[EMAIL PROTECTED]> wrote:
> Thank you for your replies.
>
> Yes, i was talking about NiftyCorners with sytanx that i briefly saw
> looked like this:
> Rounded("div.box_3_1_T","top","transparent","#8BBDF7");
> Rounded("div.box_3_1_T","bottom","transparent","#CFE2F8");
> Rounded("div.box_3_2_T","top","transparent","#4799E6");
> Rounded("div.box_3_2_T","bottom","transparent","#B6D7F7");
> Rounded("div.box_3_3_T","top","transparent","#306799");
> Rounded("div.box_3_3_T","bottom","transparent","#7EB2E1");
>
> I want to avoid that.
>
> The following is what I have implemented with my method:
> http://test.un-identified.com/misc_images/roundedCorners.html
>
> I want to come up with something like that, but i dont believe a JS
> solution will give me such shadowed borders...point me in the right
> direction if there is such a method which uses images!
>
> See how I have freedom with images and shadows in phtosohop, and I am
> limited only by the fact that the width must be fixed?
>
> On 12/27/06, Stephan Wehner <[EMAIL PROTECTED]> wrote:
> > On 12/27/06, Parag Jagdale <[EMAIL PROTECTED]> wrote:
> > > So the company I am working for suggests the use of one of the
> > > Javascript+CSS rounded corners solutions. But I myself do not believe
> > > in using Javascript for pure presentation, and I believe that
> > > sacrificing the bandwidth to load all this JS is not worth the
> > > benefit.
> > >
> > > On the other hand, the solution I currently have is also a little
> > > complex and heavy. It uses 3 images and 3 DIV layers. The header and
> > > footer images in total probably take more bandwidth than the JS in the
> > > other solution. The benefit I see in this solution is that there is no
> > > 3rd party (no JS to worry about). There are only DIV layers and CSS
> > > classes that are already defined, so no JS is involved in
> > > presentation.
> > > Another benefit is that I can give the boxes any type of shadowing and
> > > patterns in Photoshop to make the style of the boxes match the rest of
> > > the site.
> > >
> > > What do you think?
> > >
> > > 
> > > Search Colleges
> > >
> > >
> > > 
> > > 
> > >
> > > portalBox: is a vertically repeating image
> > >
> > > portalBox_head: a fixed width and height rectangle which has a non
> > > repeating image with the top left  and right corners rounded
> > >
> > > portalBox_foot: a fixed width and height rectangle which has a non
> > > repeating image with the bottom left and right corners rounded
> > >
> > > div.portalBox{
> > > float:left;
> > > width: 524px;
> > > text-align:left;
> > > background-image: url(../images/portals/portalBox_blue_re.jpg);
> > > background-repeat: repeat-y;
> > > }
> > > div.portalBox_head{
> > > width: 524px;
> > > height: 25px;
> > > float:left;
> > > background-image: url(../images/portals/portalBox_blue_head.jpg);
> > > background-repeat: no-repeat;
> > > text-align:left;
> > > font-size:14px;
> > > font-weight: bold;
> > > color: #333;
> > > padding: 0.6em 1em;
> > > margin:0;
> > >
> > >
> > > }
> > > div.portalBox_foot{
> > > float:left;
> > > width: 524px;
> > > height: 12px;
> > > background-image: url(../images/portals/portalBox_blue_foot.jpg);
> > > background-repeat: no-repeat;
> > > }
> > >
> > >
> > > What I want to know is am i just being stubborn about not using an
> > > easier solution(The JS), or am I right saying that the solution is too
> > > complex and no JS should be involved?
> > >
> > > If there is a better no JS solution, im all ears!
> > >
> > > Thank You,
> > > Parag Jagdale
> > > __
> > > 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/
> > >
> >
> > When I came across this problem I thought, just look at what the
> > javascript does, and use that directly: it manipulates the DOM and
> > inserts spans and divs, as far as I remember. These have classes which
> > produce the appearance of rounded corners.
> >
> > I don't know how this would compare to what you have assembled.
> >
> > In general, I don't think it is wise to let the page appear
> > differently when javascript is turned off.
> >
> > If you are generating the page with PHP, or Rails, or Java, etc. a
> > "helper" method could do the rounding on the server side, instead of
> > the browser

Re: [css-d] Styling abbr

[Blake]

On 12/29/06, Mark J. Reed <[EMAIL PROTECTED]> wrote:
> OK, is there any way to get rid of the dotted underlines on abbr tags,
> assuming I'd like to indicate that they're abbreviations some other
> way?

The dotted line is simply a border. To get rid of it:

abbr {
   border-bottom: 0;
}

-- 
Australian Web Designer – www.blakehaswell.com
__
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] Is a forum a tabular data?

[Ricky Zhou]

-BEGIN PGP SIGNED MESSAGE-
Hash: SHA1

Blake wrote:
 > Yes, you're right, the main forum is definatly a table.
> 
> And what of the threads themselves? Two columns, no real headings or
> complex data, that part of the forum is crying out to be an  to
> me, and I'm imagining the markup to be something like this:
If you need a reference of semantic markup for a forum, take a look at
PunBB (http://forums.punbb.org/)- they pretty much use valid, semantic
markup throughout their forum package (which make it extremely easy to
custom-style with just CSS).

Ricky
-BEGIN PGP SIGNATURE-
Version: GnuPG v1.4.6 (GNU/Linux)

iD8DBQFFk/MQiXbZ7NjlUcARAh35AKCpI/xtgvfAA/ldK7h+2JyMz3u6PACeLg1d
aA6VI+Yxu+06hECzGIe9Vfk=
=9bB5
-END PGP SIGNATURE-
__
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] IE6: content-div is pushed to bottom

[Martin Krumme]

Please look at http://www.nees.uni-bonn.de/2007/test1.html

In IE6 the content-div is pushed to bottom if the window is narrowed to 
about 700px. Is there a way to prevent this without using a 
Javascript-solution?

Regards

Martin
__
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] Styling abbr

[Mark J. Reed]

Ah!  border-bottom!  I thought it was some sort of extension to
text-decoration.  Thanks!

On 12/28/06, Bjoern Hoehrmann <[EMAIL PROTECTED]> wrote:
> * Mark J. Reed wrote:
> >OK, is there any way to get rid of the dotted underlines on abbr tags,
> >assuming I'd like to indicate that they're abbreviations some other
> >way?
>
> That depends on where you see them and why they are there. If you see
> them in Firefox, they are probably the result of the rule set
>
>   /* titles */
>   abbr[title], acronym[title] {
> border-bottom: dotted 1px;
>   }
>
> in the `html.css` file of your Firefox installation. You should then
> be able to set border-bottom for these elements to some different
> value using a similar rule set in your style sheet.
> --
> Björn Höhrmann · mailto:[EMAIL PROTECTED] · http://bjoern.hoehrmann.de
> Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de
> 68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/
>


-- 
Mark J. Reed <[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] Styling abbr

[Bjoern Hoehrmann]

* Mark J. Reed wrote:
>OK, is there any way to get rid of the dotted underlines on abbr tags,
>assuming I'd like to indicate that they're abbreviations some other
>way?

That depends on where you see them and why they are there. If you see
them in Firefox, they are probably the result of the rule set

  /* titles */
  abbr[title], acronym[title] {
border-bottom: dotted 1px;
  }

in the `html.css` file of your Firefox installation. You should then
be able to set border-bottom for these elements to some different
value using a similar rule set in your style sheet.
-- 
Björn Höhrmann · mailto:[EMAIL PROTECTED] · http://bjoern.hoehrmann.de
Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de
68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/ 
__
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] Styling abbr

[Mark J. Reed]

OK, is there any way to get rid of the dotted underlines on abbr tags,
assuming I'd like to indicate that they're abbreviations some other
way?

-- 
Mark J. Reed <[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] list

[Roger Roelofs]

Marjo,

On Dec 28, 2006, at 3:58 PM, Marjo wrote:

> I am new to this list, having just started my webdesign activities  
> again.
Welcome.  I hope you enjoy the list as much as I have.

> On a webpage I want to have a piece of text with in between a few  
> lists. Now, with my current design and stylesheet make-up, I have  
> the lists with items floating between the text.
I'm not sure I understand the question.  However, I have a few  
general suggestions.

The first step should be to write valid markup.  The page is missing  
some starting and ending tags.  When browsers have to guess at where  
elements start and end, they each do it differently.  This causes a  
lot of frustration for you.

Second, the link to the stylesheet is incorrect, so we are seeing the  
page without any style applied.  When I fix the link element I see  
that the paragraphs and lists are overlapping.  This is caused by  
setting the height on the p element.  Remove that and the overlap  
will stop.

Third, validate the css also.  You have some font names that need to  
be in quotes (because they have spaces in their name).  While you are  
there, try setting your font-sizes in percent or ems.  That way  
readers with low vision can easily increase the text size of your  
site so they can more comfortably read it.

I cleaned up/validated the html and got something like this.

-  html 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
http://www.w3.org/1999/xhtml"; lang="du" xml:lang="du">

   

   Chantal van Cappelleveen Zorgadvies
   
   
   
   
   



   Over mij……

   Van 1997 t/m 2001 heb ik de opleiding HBO MWD gevolgd, in juni  
2001 ben ik afgestudeerd.
 Mijn stage heb ik gevolgd bij Stichting MEE regio Tiel. Vanaf  
2000 t/m januari 2006 heb ik gewerkt bij Stichting MEE Zuid Holland  
Zuid. Mijn voornaamste werkzaamheden waren: cliënt- en  
gezinsondersteuning, hulpvraagverduidelijking, casemanager,  
ondersteuning bij indicatieaanvragen en bemiddeling naar zorg.  
Overige taken waren :

 
   Aandachtsfunctionaris AWBZ indicatiestelling (PGB).
   Profileringswerkzaamheden Stichting MEE, invoering WMO.

   Participatie in projectgroep ëGewoon Meedoení.  
Samenwerking tussen diverse aanbieders, gemeente en St. MEE.  
Toeleiding naar werk van mensen met een beperking.

   Participatie in diverse regionale patiënten/cliënten  
platforms (o.a. PGB netwerk en RPCP -Zorgbelang).
 

 In 2001 drie maanden (tijdens afstuderen) ziektevervanging in  
het Diakonesse Ziekenhuis te Zeist als medisch maatschappelijk werker  
(transfer- en indicatiebegeleiding).
 Juni 2001 afstudeerproject ëSturen naar Kwaliteití. Het  
project richtte zich op het ontwikkelen van een zelfsturend team.
 Van september 2002 tot februari 2003, medeoprichtster van PGB  
Bureau. PGB Bureau is gespecialiseerd in administratiebeheer van PGB  
budgetten. Ik richtte mij op het zorginhoudelijke deel.

 
   Begeleiden van startende woonprojecten
   zorginventarisatie tbv indicatiestelling
   PGB advies Stichting Thomashuizen
 

 In 2002 betrokken bij oprichting van Nederlandse  
Branchevereniging PGB Adviseurs (NBPA).
 Heel 2006 heb ik als Jeugdbeschermer gewerkt bij Bureau  
Jeugdzorg. Ik heb dit jaar veel ervaring opgedaan in het werken  
vanuit een gedwongen kader en geleerd over de juridische ascpecten  
van de Onder Toezicht Stelling, Jeugdhulpverlening in zín algemeen en  
indicatiestelling van Jeugdhulpverlening. Ook heb ik een  
functiescholing gevolgd (Pro Education en Bureau Jeugdzorg) en met  
positief resultaat afgerond.
   
   December 2006
   



-- 
Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke

__
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] list

[tedd]

At 9:58 PM +0100 12/28/06, Marjo wrote:
>Dear people,
>
>I am new to this list, having just started my webdesign activities again.
>
>I have a small problem which I hope is very easy to solve. On a 
>webpage I want to have a piece of text with in between a few lists. 
>Now, with my current design and stylesheet make-up, I have the lists 
>with items floating between the text.
>
>Could anyone tell me what I might be doing wrong? Which piece of 
>code is missing here?
>
>
>
>Kind regards,
>
>Marjo van Cappelleveen

It might help us if you provided a url?

tedd
-- 
---
http://sperling.com  http://ancientstones.com  http://earthstones.com
__
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] list

[~davidLaakso]

Marjo wrote:
> I am new to this list, having just started my webdesign activities again.
Welcome, Marjo.
>  
>
> I have a small problem which I hope is very easy to solve. On a webpage I 
> want to have a piece of text with in between a few lists. Now, with my 
> current design and stylesheet make-up, I have the lists with items floating 
> between the text.
> Could anyone tell me what I might be doing wrong? Which piece of code is 
> missing here?
>   
I am not sure I understand the question (always best to provide a 
clickable link to the page/problem in question when possible).
Is this even remotely what you are after?
css:
html, body { font: 100%/1.3 Georgia, seif; text-align: center; }
#rap { border: 1px solid fuchsia; margin: 0 auto; padding: 10px 0; 
text-align: left; width: 300px; }
li { list-style-type: square; }
p { margin: 0 10px; }
html:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Pellentesque neque massa, auctor nec, facilisis in, placerat sed, est.

Item one
Item two
Item three

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Pellentesque neque massa, auctor nec, facilisis in, placerat sed, est.

> Marjo van Cappelleveen
>   
Best,
~dL

-- 
http://chelseacreekstudio.com/

__
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] list problem - undefined

[Marten Gallagher]

> Could anyone tell me what I might be doing wrong? Which piece of code is 
> missing here?

I am not absolutely certain what you regard as wrong...
...but...

I see the first list is going to be a navigation list? (id="navlist")?

You have opened the UL tag twice with a different class in each.

Instead: give the UL the id="navlist":



and create a style for that:

#navlist li{
etc:whatever;
}

Then leave other lists as the default adn style them as:

ul{
etc:whatever;
}

Does that help?

-- 
Marten Gallagher
annerykiln.co.uk
Web Design and Management

__
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] Printing question

[Russ Peters]

One of our sites using frames.  The top frame is the menu/navigation
bar/logo area.  The bottom frame is where all the magic happens.  What I
need is a way to force the bottom frame to print always and hide or do
not display the top frame at all.   I can't give you a url as it's a
login only site (our online banking product).  Is the display:none
property my best bet in a style sheet for print or is there a better
way?

 

Russ 

 

__
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] What is a simple alternative to JS+CSS rounded corners

[francky]

Richard Herrera wrote:

> franky,
>
> You're right. If the example is used once, there really is no benefit  
> to using the script over just using markup. However, if you're  
> applying the corners to multiple elements, well, now you're talkin'.  
> (The script could easily be modified to work by class name, multiple  
> elements, etc...)
>
> # of lines of script, one element: 12
> # of lines of markup, one element: 4
>
> # of lines of script, 10 elements: 12
> # of lines of markup, 10 elements: 40
>
> As for no javascript = no corners, the corners are superfluous  
> anyway. It won't hurt the site's usability, which is a key factor in  
> unobtrusive javascript use.

Hi Richard,
You're right too. For "heavy cornering" pages [1] a javascript to 
implement the span's or div's can be easy for writing the code, and can 
save markup-lines.
On the other hand, if there are elements with slightly different 
corners/borders, the script has to be extended, while with the extra 
html-lines it's just the use of an other class to get (or easy change) 
the used images/borders. But also that is possible by script.

If we make a function of the amount of coding characters for the script 
and for the markup way in a special case (in relation to the download 
time of each), somewhere will be the break even point, and we can make 
the decision depending on what side of the graphic we are. :-)

- And indeed, the usability isn't hurt by disabling js.
So I think it's up to the developer's (or client's) taste what is 
wanted: a site which is "always the same looking, script or noscript" or 
not.

Oh, I almost forgot the alternative of serverside scripting. [2] If for 
instance php is possible, then in the html some php-includes can replace 
the repeating lines. Then the "javascipt disabled" problem isn't 
occurring, and the 40 markup lines only have to be 10 lines. Can be done 
by shtml too, I think.

Greetings & a good 2007!
francky

[1]
Or for adding corners to an existing page, without changing the html.

[2]
The download speed will be the same as the "complete html" way, but the 
html code of the page is cleaner.


__
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] list

[Dave Goodchild]

URL?

On 12/28/06, Marjo <[EMAIL PROTECTED]> wrote:
>
> Dear people,
>
> I am new to this list, having just started my webdesign activities again.
>
> I have a small problem which I hope is very easy to solve. On a webpage I
> want to have a piece of text with in between a few lists. Now, with my
> current design and stylesheet make-up, I have the lists with items floating
> between the text.
>
> Could anyone tell me what I might be doing wrong? Which piece of code is
> missing here?
>
>
>
> Kind regards,
>
>
> Marjo van Cappelleveen
>
>
>
> 才才才�M.J. van Cappelleveen - van der Woerd
> Leerdam - The Netherlands
> www.xs4all.nl/~woerdm
> 才才才�
>
> __
> 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/
>



-- 
http://www.web-buddha.co.uk
__
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] list

[Marjo]

:-)  I assumed it was a relatively common problem and didn't want to 
bother you all with my code problems.

Here is the webpage and the stylesheet.
http://www.xs4all.nl/~woerdm/css/


Thanks in advance.


Marjo



Dave Goodchild schreef:
> URL?
>
> On 12/28/06, *Marjo* <[EMAIL PROTECTED] 
> > wrote:
>
> Dear people,
>
> I am new to this list, having just started my webdesign activities
> again.
>
> I have a small problem which I hope is very easy to solve. On a
> webpage I want to have a piece of text with in between a few
> lists. Now, with my current design and stylesheet make-up, I have
> the lists with items floating between the text.
>
> Could anyone tell me what I might be doing wrong? Which piece of
> code is missing here?
>
>
>
> Kind regards,
>
>
> Marjo van Cappelleveen
>
>
>
> 才才才�M.J. van
> Cappelleveen - van der Woerd
> Leerdam - The Netherlands
> www.xs4all.nl/~woerdm 
> 才才才�
>
> __
> css-discuss [ css-d@lists.css-discuss.org
> ]
> 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/
>
>
>
>
> -- 
> http://www.web-buddha.co.uk 

__
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] list

[Marjo]

Dear people,

I am new to this list, having just started my webdesign activities again. 

I have a small problem which I hope is very easy to solve. On a webpage I want 
to have a piece of text with in between a few lists. Now, with my current 
design and stylesheet make-up, I have the lists with items floating between the 
text.

Could anyone tell me what I might be doing wrong? Which piece of code is 
missing here?



Kind regards,


Marjo van Cappelleveen



¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤
M.J. van Cappelleveen - van der Woerd
Leerdam - The Netherlands
www.xs4all.nl/~woerdm
¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤~¤


__
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] What is a simple alternative to JS+CSS rounded corners

[Richard Herrera]

franky,

You're right. If the example is used once, there really is no benefit  
to using the script over just using markup. However, if you're  
applying the corners to multiple elements, well, now you're talkin'.  
(The script could easily be modified to work by class name, multiple  
elements, etc...)

# of lines of script, one element: 12
# of lines of markup, one element: 4

# of lines of script, 10 elements: 12
# of lines of markup, 10 elements: 40

As for no javascript = no corners, the corners are superfluous  
anyway. It won't hurt the site's usability, which is a key factor in  
unobtrusive javascript use.

On Dec 28, 2006, at 11:56 AM, francky wrote:

> So this script is working as a method to put the 's in the html,
> with an alternative css way for getting some smaller corner images on
> the right places (for painted borders some extra's are needed).
>
> * Comparing: the script is about 12 lines of code, and adding the
>   span's directly in the html is 4 lines of code.

__
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] What is a simple alternative to JS+CSS rounded corners

[francky]

Richard Herrera wrote:

>[...]I think you're being too paranoid. Javascript for presentation is one  
>of the most unobtrusive things you can do with the language. And I  
>hardly think the tiny bit of JS required even qualifies as "bandwidth".
>
>Unless you're talking about a specific solution. A quickie script (&  
>test case):
>[...]
>You get the gist. I don't even think that JS adds up to 1kb.  
>
Hi Parag,
Richard's script is giving as generated html:


 test
 
 
 
 


* See testpage
  


So this script is working as a method to put the 's in the html, 
with an alternative css way for getting some smaller corner images on 
the right places (for painted borders some extra's are needed).

* Comparing: the script is about 12 lines of code, and adding the
  span's directly in the html is 4 lines of code.

I should say: no real advantage for the script, it's only delaying the 
download time (though not very much), and if javascript is turned off 
client side, the visitor doesn't see the corners.

- My interpretation of the question was using an "image replacing" 
javascript, which is drawing the corners (pixel by pixel) on the fly.

* Like the Nifty Cube javascript method
  

In that way, indeed quite some javascript exercitions are applied. In a 
quick view, the needed niftycube.js is about 9kB.

* Comparing: the combined top-foot image in my example is 2.4kB and
  the middle gif is 108bytes. If you combine them with other
  background images in the page, you can save the 2 http-requests to
  get them (and save the packet filling empty space), and use even
  less bandwith for downloading.

And for me the most important reason to use css + images (apart from the 
"js not enabled problem"): you have total freedom about what is 
displayed on screen (the shadowing etc. like you mentioned). :-)

As Tedd said already, a flexible width (self adapting to the surrounding 
box) is possible as well: no problem!
Some more liquid examples you can find in:

* Liquid Corners Playgarden
  

* Liquid Corners (and Borders) article
  
* The Gap Safe Alternative
  


I should go for the css + images method! [You guessed this already, I 
suppose ;-)  ]

Succes and greetings,
francky





__
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] opera or FF rtl bug

[Gunlaug Sørtun]

Ido Dekkers wrote:

>>> which of the above has the bug : 
>>> http://test.dekkers.net/test.aspx

> the question is which of them has the bug (if it's a bug) and can it 
> be fixed in css ?

Yes, it can be fixed in CSS, *if* you use proper *positions* as
starting-points for 'position: absolute'.
You're still positioning "out of thin air" with margins, which is not
how you should absolute position elements to go with a fix-sized
background.

In fact: I can not see any good reason for using 'margins' in
combination with 'position: absolute' at all in your case, as
'top:??px;' and 'left:??px;' will achieve pixel-perfect results for
absolute positioning across the entire browser-land - regardless of
dir="rtl" vs. dir="ltr".

Example:
#logo
{
 position:absolute;
 /* margin:-80px 800px 0 0; */
 top: 10px;
 left: 100px;
}
...will position that logo in _exactly_ the same spot in _all_ browsers
that understands absolute positioning - which should cover all CSS1
capable ones. The margins are commented out - not in use, so you may as
well delete them before going on with similar positioning for the other
overlaid elements. Success is guaranteed.

> regarding IE - i always leave the css code breaking for the last in a
>  separate file.

Fine, although I can't see any good reason for that either in this case,
as IE6 has just "told me" that there are 'collapsing margins' problems
in there, and they should be dealt with at an early stage if you want to
avoid covering up for designer-bugs instead of browser-bugs across
browser-land.
IE6' basic flaws and bugs can provide a lot of information about
design-weaknesses, although we cannot follow IE's lead when it comes to
solving them.

Add...
#header
{
 padding-top: 1px;
}
...to see the 'collapsing margin' from...
#nav
{
 margin: 10px;
 width: 90%;
}
...in Firefox and Opera too. That's the 10px top margin that IE6 is
preventing from collapsing onto body because of the infamous
'hasLayout'[1] bug - resulting in 10px offset for the #nav in IE6.
You'll have to decide how that margin shall be handled across
browser-land, but you can't affect how IE6 is handling it since you
can't get rid of the 'hasLayout' bug.


So, you're definitely not fighting browser-bugs here - apart from in
IE/win. You just need to apply proper positioning.

regards
Georg

[1]http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
http://www.gunlaug.no
__
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] What is a simple alternative to JS+CSS rounded corners

[tedd]

At 8:50 PM -0500 12/27/06, Parag Jagdale wrote:
>The following is what I have implemented with my method:
>http://test.un-identified.com/misc_images/roundedCorners.html
>
>I want to come up with something like that, but i dont believe a JS
>solution will give me such shadowed borders...point me in the right
>direction if there is such a method which uses images!
>
>See how I have freedom with images and shadows in phtosohop, and I am
>limited only by the fact that the width must be fixed?

The width can be fixed or not. See:

http://sperling.com/examples/box/

Perhaps that might work for you.

hth's

tedd

-- 
---
http://sperling.com  http://ancientstones.com  http://earthstones.com
__
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] opera or FF rtl bug

[Hari Kumar G]

On Thu, 28 Dec 2006 15:52:30 +0530, Ido Dekkers <[EMAIL PROTECTED]>  
wrote:

> Gunlaug Sørtun wrote:
>> Ido Dekkers wrote:
>>> which of the above has the bug : http://test.dekkers.net/test.aspx
>>>
>>> the logo and 2 other images display correct in FF(2,3) but not in
>>> Opera(latest)
>>
..
> thanks Georg
> fixed the em -> px issue , but the problem with opera and FF is still  
> there.
> i know what the problem is - opera always calculates the position from
> the left, even if it's a rtl page.
> FF calculates the position from the left on a regular page and from the
> right in an rtl page.
> the question is which of them has the bug (if it's a bug) and can it be
> fixed in css ?

It seems Opera does have a bug on absolutely positioned elements when  
directionality is rtl and also left and right being 'auto'. Anyway, the  
page looks good across browsers (Opera, Ffx2 & IE7 atleast) with the  
following style.

#logo
{
 position:absolute;
 left:80px;
 top:5px;
}

If not for any other reasons, it would be better to specify left and top  
values for an absolutely positioned element and place it w.r.t. to its  
containing block.

Regards,

Hari.
>
> regarding IE - i always leave the css code breaking for the last in a
> separate file.
>
> Ido
> __
> 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/



-- 
<-H_K_G->
__
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] IE problem

[Hari Kumar G]

On Thu, 28 Dec 2006 03:47:50 +0530, KJ'[EMAIL PROTECTED] <[EMAIL PROTECTED]>  
wrote:

> Hi,
>
> Hope you all had a good x-mas. My problem is I can't figure out why the
> images are being cut off (the nav that is) and it looks fine in FF and
> Opera. Any suggestion appreciated. http://geekministry.com/test/

Adding the following to external.js file after line 41 i.e.  
z_IMG.style.left="0";
z_IMG.style.top="0";

would help this work.

Hari.

>
> Thanks
> Kim
> __
> 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/



-- 
<-H_K_G->
__
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] practicality of user stylesheets

[Gunlaug Sørtun]

Felix Miata wrote:

> I'm also curious if anyone tries user styles testing for breakage 
> during their own development, in addition to the considerably easier 
> use of minimum and zoom. I suspect this answer is no more than 1 in 
> 100.

I always use a basic set of user styles for testing during development,
but note that I use Opera :-)
I'm only after usability and a bit of logic, so a couple of my own
variations on top of Opera's built-in set of user styles and options
will do.

I do not spend time on creating site-specific user styles - ever. If a
site doesn't suit my taste, then again: I use Opera and strip the
visited site back to basics. If a site doesn't "survive" then either
(which happens all too often with weak CSS based sites), then I usually
just forget it ever existed.

regards
Georg
-- 
http://www.gunlaug.no
__
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] Is a forum a tabular data?

[Blake]

On 12/28/06, Richard Herrera <[EMAIL PROTECTED]> wrote:
> The very mention that you have multiple headings for organized data
> gives you your answer. It requires a table heading. Therefore, it's a
> table. Don't fear it. :)

Yes, you're right, the main forum is definatly a table.

And what of the threads themselves? Two columns, no real headings or
complex data, that part of the forum is crying out to be an  to
me, and I'm imagining the markup to be something like this:





username



Location:
NSW, Australia



12:23 PM, 28 December 2006










I think this markup is fairly appropriate, any thoughts?

-- 
Australian Web Designer – www.blakehaswell.com
__
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] opera or FF rtl bug

[Ido Dekkers]

Gunlaug Sørtun wrote:
> Ido Dekkers wrote:
>> which of the above has the bug : http://test.dekkers.net/test.aspx
>>
>> the logo and 2 other images display correct in FF(2,3) but not in 
>> Opera(latest)
>
> Before you go any further, consider the following...
>
> - Precise positioning of elements on top of a background-image by using
> em, is a flawed method - regardless of direction. Those elements are not
> anywhere near their intended position in any of my browsers, simply
> because their position - in em - rely on font-size.
> Font-size is not a factor you can control all that well.
>
> - Opera has a rounding-effect on large em margins and paddings. See...
> 
>
> - Firefox (2.0.0.1) offers no horizontal scroll, and I need at least a
> 1450px wide window just to see the entire page.
> That's the effect of 'minimum font-size: 14px'.
> It's the same in other browsers, apart from that they give me a
> horizontal scroll-bar.
>
> - Height in em on those anchors means I see both horizontal and vertical
> repetition of background-images. Pretty confusing link-text, I think.
> Again: it's the effect of uncontrollable font-size.
>
>
> So, when you want to position anything precisely on top of a fix-sized
> background, you'll be better of by using a fix-sized unit for positions
> and dimensions - like px.
>
> Also: especially IE tends to be a bit unpredictable when all
> 'top'/'left'/'right'/'bottom' values are left out and positioning rely
> on default-positions and margins.
>
> regards
> Georg
thanks Georg
fixed the em -> px issue , but the problem with opera and FF is still there.
i know what the problem is - opera always calculates the position from 
the left, even if it's a rtl page.
FF calculates the position from the left on a regular page and from the 
right in an rtl page.
the question is which of them has the bug (if it's a bug) and can it be 
fixed in css ?

regarding IE - i always leave the css code breaking for the last in a 
separate file.

Ido
__
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/