Re: [css-d] Aligning List Of Name:Value Pairs On Colon

[David Dorward]

On 11/11/05, Graham Cook <[EMAIL PROTECTED]> wrote:

> And the reason that these fit more elegantly than a table? Compare the code
> above to a table below (which really should also should include thead, tbody
> and col id's), it it just so much more concise and no blank cells.

> HomerMarge's layabout husband
> Bart's dad
>  Springfields second biggest consumer of Duff

This is where rowspan comes into play ...

Homer
   Marge's layabout husband
Bart's dad
Springfields second biggest consumer of Duff

... and we have no blank cells.





--
David Dorward 
__
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] Background image problem

[Eoin Maguire]

Hi All,

 

 I sent this yesterday but haven't got any response and there was a
problem with my email so I'm not 100% sure it got through. Basically I'm
trying to fix some weird behavior I'm seeing with background images. I've
set up a free web site to show this to you rather than try and explain it;
it would be difficult to explain exactly what I'm talking about. Please
ignore the banner ad on the following page; the important thing is the
middle column of the page. When you load the page you'll see the three
column layout with an extra class that gives the top of the middle section a
nice shaded look.  I added a text area to show where the issue is, try and
resize the page horizontally. If you drag the window horizontally, making it
smaller as you go, you'll eventually reach the limit of the text area,
making the window any smaller causes the top CSS background image to start
disappearing.  

 

Here's the URL: 

 

http://esdmsd.freefronthost.com/test.html

   

 

 Using the expression method stops this temporarily, but the window has a
tendency to remove all the content in the page for no reason, resizing the
page again sometimes fixes this but it isn't a proper solution. 

 

Has anyone got any ideas how I can fix this?

 

Thanks.

 

__
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] dropdowns appear on top of div

[Sam Partington]

This is an annoying problem, that crops up a lot on this list.  I'll
add it as a wiki entry if no-one has a problem with that?  I'm not
particularly knowledgable about the subject but I can probably knock
something up.

The problem is that some elements (drop-downs, and flash objects,
maybe more) in IE/win are drawn by the OS, and not by the browser, and
they show no respect for z-index.

The solution is to use an iframe behind the div, the iframe acts as a
opaque layer hiding the OS control.  There's a guide here :

 

Its messy, hard to maintain, and its a lot easier to avoid the problem
by moving your popup or drop down so they don't clash.  But where that
isn't an option, the above does work.

HTH

Sam

On 11/10/05, Polina Grinbaum <[EMAIL PROTECTED]> wrote:
> so I am having a problem and I can't post an example right now cause i am
> behind a firewall. I have a very simple hide/show javascript popup.
>
> the popup is suposed to appear payed over on top of a form. however in ie 6
> for pc the dropdowns appear on top of the poup, the input fields do not.
>
> here is the css for the popup:
>
>
> #popup {width:340px; height: 300px; background-color: #fff; display: none;
> position: absolute; top: 10px; right: 3%; margin-top: 50%; margin-left:80%;
> z-index:1}
>
> obviously the javascript toggles the display property.
> __
> 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-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] DIV heights not working with IE/Win

[Jonathan Mao]

Hi

I'm relatively new to CSS but I'm learning fast.

I used the 3 column holy grail stylesheet from Glish  and have been modifying it to suit my design.

The problem is the div in the middle appears about 5 pixles slower  
than divs on the left and right that surround it - when viewed with  
IE/6 on Windows. FIne with other browsers.

You can view the site here:
http://www.tuggeranongcommunityfestival.com.au/new/

CSS is here:
http://www.tuggeranongcommunityfestival.com.au/new/c/basic.css

Any suggestions would be really appreciated.


Cheers
Jonno

__
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] dropdowns appear on top of div

[Christian Heilmann]

>  
>
> Its messy, hard to maintain, and its a lot easier to avoid the problem
> by moving your popup or drop down so they don't clash.  But where that
> isn't an option, the above does work.

I avoided giving that solution as we really should not add extra
markup that even shows up in assistive technology as another document
just to fix a browser bug. Forms are hard to use as they are, no need
to confuse matters even further.

The easier option is to hide the elements when you open your popout,
that way you keep the fix at least in the JavaScript and not in CSS,
HTML and JavaScript.

http://www.webreference.com/programming/javascript/form/2.html
__
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] Live blogging from d.Construct

[Zach Inglis]

Anyone who missed it;
http://www.zachinglis.com/conference/dconstruct/dconstruct-live-post/
__
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/

[WSG] Live blogging from d.Construct

[Zach Inglis]

Anyone who missed it;
http://www.zachinglis.com/conference/dconstruct/dconstruct-live-post/
**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**

Re: [css-d] Absolute Positioning or Float?

[Adriano Castro]

> I am working on a personal page that will serve as a
> portfolio page and contact website. It will be in
> two-column format. I have read advantages for both,
> but was seeking advice on should I use absolute
> positioning or floating? (or does it matter?) I
> appreciate any insight on this topic!

Hi Zach,

I suggest floating instead of positioning.

Also, this is very good read on this subject:

+ http://css.maxdesign.com.au/floatutorial/

Good luck!

-- 
[EMAIL PROTECTED]
www.adrianocastro.net
__
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] Matching column heights in a complexish layout

[Adriano Castro]

>>> 2. http://www.positioniseverything.net/easyclearing.html
> 
> Simply lose the height settings (as Zoe's said) then add the CSS from 
> [2] (above), applying it to your div#container like so:
> 
> div#container {
>width: 800px;
>margin: 66px auto 0px auto;
>padding: 33px 25px 33px 25px;
>color: white;
>background-color: #756F65;
> }
> 
> div#container:after {
>content: ".";
>display: block;
>height: 0;
>clear: both;
>visibility: hidden;
> }
> 
> div#container {display: inline-table;}
> 
> /* Hides from IE-mac \*/
> * html div#container {height: 1%;}
> div#container {display: block;}
> /* End hide from IE-mac */

I tried using the easyclearing method [2] but was applying the fix to 
the wrong div. Applying it to the #container div works perfectly. I 
don't, however, fully understand the need this:

div#container {display: inline-table;}

/* Hides from IE-mac \*/
* html div#container {height: 1%;}
div#container {display: block;}
/* End hide from IE-mac */


Could you please quickly explain?

Also, please note that I changed this:

* html div#container {height: 1%;}

To this:

* html div#container {height: 535px;}

As it's my min height.


Tks for everything. It's now working fine. Just trying to understand it.

-- 
[EMAIL PROTECTED]
www.adrianocastro.net
__
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] Who is up for a CSS challenge?

[Christian Heilmann]

I hinted for some time now, that I was working on a ZenGarden-type
site that simulates a CMS environment.

CSS Zen Garden did and does a tremendous job in educating web
designers in the ways of CSS and showed that you can completely
redesign one HTML document with different style sheets.

Now it is time we did the same for the enterprise level market, where
high level CMS vendors still consider CSS too hard or not flexible
enough to maintain the style of pages based on different templates and
with varying content.

Therefore I started the CSS Toolshed, and will go live with the site soon.
The CSS tool shed is a CMS simulation that has:

- A set of 4 templates for main page layout
- Different content in the main content slot on each reload - the
content will be different short articles on CSS and web development.

So far only my entry is the only one: http://csstoolshed.com/showtime.php
(Click through the different menus to see the different templates -
top menu, left hand menu, bottom menu)

I am very ready to go live with this, but I need some demo styles beforehand.
With a variety of styles the impact can be a lot bigger than just with
my sorry example.

So, who is up for providing more initial styles?

You can download the 4 sample templates and the blank css files
together with a template guide and submission guidelines:
http://www.csstoolshed.com/cssts_dl/cssts_templates.zip

Put the final CSS files on your server and send them to me directly or
via the submission form: http://csstoolshed.com/ouhpickme.php

Thanks, and hopefully this will become a good resource for developers
who cannot control the markup they have to style to the extend the
ZenGarden allowed us to.

regards
Chris

--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
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] page disapears in firefox

[ross]

I know this page is way out in FF in terms of positioning (I have seen the opea 
version) but why can I not see anything except the bg colour in firefox??

http://www.nssdesign.scot.nhs.uk/about_us/nss_management.php

http://www.nssdesign.scot.nhs.uk/about_us/nhs_aboutus.css


__
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] page disapears in firefox

[Ingo Chao]

[EMAIL PROTECTED] wrote:
> I know this page is way out in FF in terms of positioning (I have seen the 
> opea version) but why can I not see anything except the bg colour in firefox??
> 
> http://www.nssdesign.scot.nhs.uk/about_us/nss_management.php
> 
> http://www.nssdesign.scot.nhs.uk/about_us/nhs_aboutus.css

display: inline on "body" is a typo, I guess. Interesting effect.

Ingo

-- 
http://www.satzansatz.de/css.html
__
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] page disapears in firefox

[David Dorward]

On 11/11/05, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
> why can I not see anything except the bg colour in firefox??

Well, it might have something to do with the 42 machine detectable
syntax errors in the HTML ...

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nssdesign.scot.nhs.uk%2Fabout_us%2Fnss_management.php

or the machine detectable syntax errors in the CSS ...

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.nssdesign.scot.nhs.uk%2Fabout_us%2Fnhs_aboutus.css&usermedium=all

... but I don't intend to poke at it further until those problems are
dealt with.

http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you


--
David Dorward 
__
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] dropdowns appear on top of div

[Sam Partington]

On 11/11/05, Christian Heilmann <[EMAIL PROTECTED]> wrote:
> The easier option is to hide the elements when you open your popout,
> that way you keep the fix at least in the JavaScript and not in CSS,
> HTML and JavaScript.

That solution hadn't occurred to me before, its rather elegant
solution I must say.  But its not necessarily the magic bullet for all
situations.  Take my application for example :

I have quite a complex web application/database.  Every page has a
Help button that when clicked displays a popup div with context
sensitive help for that page.

There is no knowing which elements might be obscured by the help
because the help is dynamic and I encourage users to help write the
help (its actually stored in a wiki),  Also the user can move the help
popup around using the titlebar, so at times only parts of elements
might be obscured, you can't visible: hidden part of an element.

If on clicking help, all  elements were to disappear then the
help would be confusing because it would reference elements that have
disappeared.

I can't move the elements around so they don't obscure each other for
exactly the same reason, so the only solution left to me that I know
of is the iframe shim fix.

I suppose I could interrogate the position of all elements and set
visibility: hidden if they overlap. Or I could mess around with the
clip element for a while, but the requirement that the element is
absolutely positioned is too high a price to pay,  Anyway that
solution is more complex than the iframe fix.

Yes its a pain but it is a practical solution to a real world CSS
problem, which is exactly what css-discuss is supposed to be about. 
And this question does crop up a least once a month on this list.

> I avoided giving that solution as we really should not add extra
> markup that even shows up in assistive technology as another document
> just to fix a browser bug. Forms are hard to use as they are, no need
> to confuse matters even further.

The solution can go purely in the Javascript where it belongs, without
affecting the markup or CSS at all.  The JS can then be served up to
IE only, so its not semantic.  But even though its all in JS, it is a
fix to a real world common CSS problem.

Sam
__
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] sitecheck / lists equal in ie+ff

[Mauricio Giraldo Arteaga]

thanks for your feedback!

I am aware of the a few css-friendly methods of embedding flash. however
i havent found a bulletproof (a.k.a. will-be-seen-in-any-browser)
method. satay seems to leave out a few (although legacy) browsers.

is this correct?

regards

- mga



> Nice site! Looks good.
> 
> I thought I would comment on Flash and a few techniques on how one  
> would go about making it validate:
> 
> Technique 01: Use a Javascript method/function & "document.write" the  
> Flash object.
> Example site: http://www.hillmancurtis.com/
> Example HTML: RunFoo();
> Example .js file: http://www.hillmancurtis.com/hc_web/js/food.js
> <( code: )>
> function RunFoo() {
>   document.write(' classid="clsid:D27CDB6E-AE6D-11cf-96B8-44455354"  
> codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/ 
> swflash.cab#version=6,0,29,0" width="400" height="300">\n');
>   document.write(' value="hc_web/index_page/portraits_conference.swf" />\n');
>   document.write('\n');
>   document.write(' src="hc_web/index_page/portraits_conference.swf" quality="high"  
> pluginspage="http://www.macromedia.com/go/getflashplayer";  
> type="application/x-shockwave-flash" width="400"  
> height="300">\n');
>   document.write('\n');
> }
> <( /code. )>
> 
> Technique 02: Flash Satay Method:
> http://www.alistapart.com/articles/flashsatay/
> 
> Technique 03: Flash Javay method:
> (Post #3)
> http://talkfreelance.com/thread125.html
> Google search should yield more results for this method. Originated via  
> alistapart discussusion on the above Satay method, but the discussion  
> has been deleted/closed since the new ALA redesign.  :(
> 
> It has been several months since I last looked-into this matter, so  
> other (better?) methods/techniques are probably floating around  
> cyber-space. I personally like the first technique. The Satay method  
> takes-away a lot of control a developer has when it comes to the Object  
> Parameters.
> 

__
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] sitecheck / lists equal in ie+ff

[Mauricio Giraldo Arteaga]

> I don't see a difference in the lists on this page between FF and IE.  
> Have you fixed it?

> Zoe

no... difference is "minimal" but enough to upset me... heres a
screenshot. notice the green ovals. i had to make margins for the lis
really small so it would fit in IE. li margins in IE are not equal to
those in FF even though it is the same stylesheet. also the "tabbed"
item is slightly separated from the bottom.

http://www.alleati.com/mga/musa-frustration.gif

taken from page:
http://www.museoarqueologico.com/culturas/guane.php

- mga



__
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] IE 6 broke the page !

[CoWBoY :-\)]

Hello everybody,

I'm working on a new template for phpBB. It's not yet
fully finished. And after making it compatible both
for Firefox and IE, there is still little details that
I can't perform as well.

Under Firefox, it looks perfect, but how can I avoid
the little blank on the left side (near the navigation
bar) under IE6 ?

There it is: http://blog.afrikart.net/tg2

Thanks a lot

_
xcuz me bcz im'not very good in english


 
_
_/ principe et valeur 
www.cowboy.salifa.com
 








___ 
Appel audio GRATUIT partout dans le monde avec le nouveau Yahoo! Messenger 
Téléchargez cette version sur http://fr.messenger.yahoo.com
__
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] sitecheck / lists equal in ie+ff

[Gunlaug Sørtun]

Mauricio Giraldo Arteaga wrote:
> http://www.alleati.com/mga/musa-frustration.gif
> 
> taken from page: http://www.museoarqueologico.com/culturas/guane.php

You may possibly pull up the bottom in IE/win by applying some
'overflow: hidden' on a defined height. Even a float-construct with
negative margins may work to your satisfaction.

However, once that page has become readable in any browser, it no longer
looks like any of those screenshots[1].
A typical case of "House On Fire"[2], me thinks.

regards
Georg

[1]http://www.gunlaug.no/tos/alien/frustration.png
[2]http://www.gunlaug.no/contents/molly_1_02.html
-- 
http://www.gunlaug.no
__
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] styles ignored in CSS

[phidlerwerf]

I'm trying to clean up a table with CSS in an XHTML 1.0 Transitional  
page.

I'd like to redo all of the  tags with classes  
pointing to the two colors I'm using, but I'm having problems. I can  
successfully change the background color of ALL rows by using a tr  
declaration, but if I try instead to declare a class, the  
corresponding row uses the color of the containing div#werke instead.

Is this a cascading/specificity issue, or is it not possible to apply  
classes to  elements?

There's a working version with the HTML styling at

http://phidler.com/rosner/index3.html

The version exhibiting the problem I'm having is

http://phidler.com/rosner/index4.html (the bright yellow isn't a  
design preference, just for testing the behavior)

Appreciate any help.

Paul
__
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] FF Menu Problems

[Jinny Valle]

This site is still very much under construction, so not all the links work,
etc. 

I am using the suckerfish drop down menus, but the sub-sub menus don't show
up in Firefox. They work in IE but since IE is the crazy browser :) I am
sure it's something I am doing wrong. 

Specifically there should be sub menus under projects in the foundation list
item. 

Any ideas?

 

www.jinnyruth.com/lassen

 

Thanks so much, I've been going crazy!

__
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] styles ignored in CSS

[Christian Heilmann]

> Is this a cascading/specificity issue, or is it not possible to apply
> classes to  elements?
> http://phidler.com/rosner/index3.html
> http://phidler.com/rosner/index4.html (the bright yellow isn't a
> design preference, just for testing the behavior)

You define background for TH and TD first, then the one for TR. As TR
does not have a content the background does not get applied, but the
ones for the TH and TD still apply.

Furthermore you cannot start classes with a digit, but should use a letter.

So,

tr.odd td, tr.odd th{
... settings ...
}

will get applied

th,td{

}

tr.odd {
...
}

will not.

Lots of table styling examples: http://icant.co.uk/csstablegallery/


--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
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] FF Menu Problems

[Jinny Valle]

Problem solved! Thanks. The funny thing is, I did validate several of the
pages. weird.

__
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] Problems with DIV and ubication in page

[Holly Bergevin]

From: "Reynier Perez Mira" <[EMAIL PROTECTED]>

>Well, after I read and read the pages you leave me and probe the code, I
>obtain the same error. You can take a look at
>http://www.jovenclub.cu/grm/index.php The DIV for images still appear
>over other DIV elements. How can I fix them? They really look ugly.

If I'm understanding the problem, your little images are covering divs that 
come after them in the source, sometimes. Those little images are align="right" 
which works like floating them. In that light, you'll probably need to add a 
clearing element of some kind after the images but before the next div in order 
to get them to not overlap.

< div class="clear" > < /div >

.clear {
clear: both; /* you could use clear: right; if they all are on the right */
height: 0;
line-height: 0;
font-size: 1px;
} 

I hope that helps,

~holly

 
 
   
__
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] Who is up for a CSS challenge?

[Adriano Castro]

> So, who is up for providing more initial styles?

Sounds interesting. If only I could find the time.

Good luck!

AD

-- 
[EMAIL PROTECTED]
www.adrianocastro.net
__
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] Matching column heights in a complexish layout

[Holly Bergevin]

From: Adriano Castro <[EMAIL PROTECTED]>

>> Found a very good tutorial online [1]. Managed to get it working for IE 
>> but Mozilla doesn't adjust the height of the "container" div. I'm a bit 
>> lost here.
>> 
>> I think my problem is the one defined on PIE's "How To Clear Floats 
>> Without Structural Markup" [2] but having tried the proposed solutions I 
>> still can't get it to work.
>> 
>> Ideas?
>> 
>> 1. http://css.maxdesign.com.au/floatutorial/
>> 2. http://www.positioniseverything.net/easyclearing.html
>
>Here's what I currently have:
>
> Markup:
> + http://dev.adrianocastro.net/help/0004/0004.a.html
>
> CSS:
> + http://dev.adrianocastro.net/help/0004/0004.a.css

In my experience, easyclearing fails sometimes, due probably to other "issues" 
on a given page. So solve your problem it looks like you'll need to add a 
clearing element right before the close of #main. You'll also need to make sure 
browsers other than IE do NOT see the height you've set up on #container, 
because they will obey it, despite the min-height you've set for them.

Hope that helps, 

~holly 
 
   
__
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] IE 6 broke the page !

[bill]

45 validation errors?

I don't know if one of those errors is causing your problem but a lot of
possible causes could be eliminated by having a page with valid markup. As a
fairly new developer one of the most valuable tools I use is
http://www.validator.w3c.org 

Folks on this list are an invaluable resource, but it's good to remember we
all spend a lot of our time wading through each other's code to meet the
challenges presented. It's cool to start with a page that has the errors
that are easily eliminated by the page-builder taken care of. :)

After that, abundant help is usually forthcoming.

Don't mean to preach here; I've just learned the hard way that the lististas
here appreciate being met half way. 
HTH
Bill Scheider


-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of CoWBoY :-)
Sent: Friday, November 11, 2005 7:06 AM
To: CSS List
Subject: [css-d] IE 6 broke the page !

Hello everybody,

I'm working on a new template for phpBB. It's not yet
fully finished. And after making it compatible both
for Firefox and IE, there is still little details that
I can't perform as well.

Under Firefox, it looks perfect, but how can I avoid
the little blank on the left side (near the navigation
bar) under IE6 ?

There it is: http://blog.afrikart.net/tg2

Thanks a lot

_
xcuz me bcz im'not very good in english


 
_
_/ principe et valeur 
www.cowboy.salifa.com
 








___ 
Appel audio GRATUIT partout dans le monde avec le nouveau Yahoo! Messenger 
Téléchargez cette version sur http://fr.messenger.yahoo.com
__
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-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] Use of non-standard font in declaration?

[Tom Dell'Aringa]

Hi there,

I'm working with an agency who is providing us some code. After a preliminary 
look, they have
declared some fonts as Interstate-Regular:

.SubMenu a {  font: 11px Interstate-Regular, Verdana; color: #947D37; 
text-decoration: none; }

This seems to be some kind of "Impact" clone. It seems to display on my Windows 
machine, but I
don't remember this being what I'd consider a standard web font, particularly 
across platforms.
I'm particularly concerned because the x-width of Interstate-Regular vs. 
Verdana is quite
different. (They also need to declare a generic font family, which I will make 
sure they do.)

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.

TIA

Tom


http://www.pixelmech.com/
"I was in a convenience store reading a magazine and the clerk came up to me 
and said "This is not a library". so I said, "All right, I will talk louder 
then!"
__
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?

[Adam Kuehn]

Tom Dell'Aringa wrote:

>.SubMenu a {  font: 11px Interstate-Regular, Verdana; color: 
>#947D37; text-decoration: none; }
>
>I
>don't remember this being what I'd consider a standard web font, 
>particularly across platforms.  Can anyone advise on how widespread 
>Interstate-Regular is?

The best source for this sort of information that I know of is 
CodeStyle .  As you can see, 
Interstate-Regular doesn't make the radar for any platform.  Having said that:

>I'm particularly concerned because the x-width of Interstate-Regular 
>vs. Verdana is quite
>different. (They also need to declare a generic font family, which I 
>will make sure they do.) My feeling is that this is not a good idea

I don't see how it isn't a good idea, just so long as you design with 
some flexibility in mind - which you should probably do, anyway.  The 
thing is, even something as generic as Arial only shows at 95% on the 
survey, so you can never be certain how your viewers will be seeing 
your page.  Allow flexibility in all dimensions and you will be much 
safer.  Here the designers have provided an obscure "ideal" font, a 
reasonably generic specific fall-back, and you'll add the really 
generic fall-back.  That part is done completely correctly, even if 
the named fonts are quite different.  The trick is in making a 
flexible layout that accommodates this way of doing business.



-Adam Kuehn 

__
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] Skinning/style switching issue

[Robyn]

Hey all,

I have a container with two side-by-side floats in it.  The left float 
has a border-right to make it look like a separator.  The issue was that 
I would never know which column was longer, but wanted them both to look 
the same height, so I borrowed a technique/hack from 
PositionIsEverything and applied :

padding-bottom: 500px;
margin-bottom: -500px;

to my right-hand float, so that I was guaranteed that the separator 
would reach the bottom of both columns.  This container is contained 
within a div with overflow: hidden, so it only goes the length of the 
content (~ 75px), not the full 500 pixels.  All is good and well, and 
when the styles load, it works in both Firefox and IE6/PC, which are the 
browsers we support. 

The problem arises when I switch stylesheets in Firefox.  We are able to 
skin our site to either green or blue, and when I apply the alternate 
stylesheet (which is EXACTLY the same, except for colors), my container 
stretches the full 500 pixels.  If I load the site with blue initially, 
it's fine.  If I load it with green initially, it's fine.  When I switch 
them through the interface, no matter from which color to which, it 
stretches. 

Why does this happen?

Unfortunately this is on an intranet, so I can't really send a link

The code looks roughly like this:

.portlet {
float: left;
width: 360px;
overflow: hidden;
}

.my_links {
   float: left;
width: 180px;
padding-left: 5px;
padding-right: 10px;
border-right: 1px;
border-left: 0;
border-top: 0;
border-bottom: 0;
border-color:  silver;
border-style: solid;
height: 100px;
padding-bottom: 500px;
margin-bottom: -500px;
}

.my_drives {
float: left;
width: 170px;
padding-left: 10px;
}




.  



 .   

 


Thanks!
Robyn
__
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] Skinning/style switching issue

[Christian Montoya]

> The problem arises when I switch stylesheets in Firefox.  We are able to
> skin our site to either green or blue, and when I apply the alternate
> stylesheet (which is EXACTLY the same, except for colors), my container
> stretches the full 500 pixels.  If I load the site with blue initially,
> it's fine.  If I load it with green initially, it's fine.  When I switch
> them through the interface, no matter from which color to which, it
> stretches.
>
> Why does this happen?

Does the switcher use Javascript or PHP?

There's an alternative to your method of full length separators. Do this:

#left { border-right:1px solid #000; }

#right { border-left: 1px solid #000; margin-left:-1px; }

This gives the two columns the same border in the middle, and then
brings the right column to the left so that the two border lines
overlap, and look like just one line. Much easier than this
padding-margin stuff.

--
--
C Montoya
rdpdesign.com ... liquid.rdpdesign.com ... montoya.rdpdesign.com
__
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] Skinning/style switching issue

[Ingo Chao]

Robyn wrote:

> Why does this happen?
> 
> Unfortunately this is on an intranet, so I can't really send a link

Using the build-in style switching feature in Fx (1.0.5/1.5b2), I wasn't 
able to reproduce the problem, neither on Alex' original file nor on a 
modified "standalone version" of your code snippet (unfortunately, code 
snippets are next to useless for debugging).

Please provide an URL to a minimal test case which reproduces the 
problem with the Fx version you are testing in, the problem would be 
serious for the mentioned technique.

Ingo

-- 
http://www.satzansatz.de/css.html
__
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] List question

[Jonathan Carter]

I have an unordered list where each list item has it's width set to 50% 
and is floated left to acheive a two-column effect, which works good. 
There is also a second level list inside each of the main list items 
that I want to display in a typical list fashion. The problem I'm having 
is when a 1st level list item's sub list is long, and the 1st level list 
items to the right of it either don't contain a sub list or are short, 
they won't uphold the two-column effect as is expected. An example of 
the HTML is:



First Level Nav Item 1


Second Level Nav Item 1


Second Level Nav Item 2



Second Level Nav Item 3



Second Level Nav Item 4


   


First Level Nav Item 2


First Level Nav Item 3



The following will happen:

First Level Nav Item 1  First Level Nav Item 2
Second Level Nav Item 1 First Level Nav Item 3
Second Level Nav Item 2
Second Level Nav Item 3
Second Level Nav Item 4

My question is what is the best way to get "First Level Nav Item 3" to carry 
underneath of "First Level Nav Item 1"
no matter how long it gets.



__
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] Matching column heights in a complexish layout

[Holly Bergevin]

From: Adriano Castro <[EMAIL PROTECTED]>

 2. http://www.positioniseverything.net/easyclearing.html
> I 
>don't, however, fully understand the need this:
>
>div#container {display: inline-table;}
>
>/* Hides from IE-mac \*/
>* html div#container {height: 1%;}
>div#container {display: block;}
>/* End hide from IE-mac */

The display: inline-table is for IE5/Mac. The following "container" contains 
fixes for IW/Win browsers (the * html line) and other browsers, to reset the 
display that IE5/Mac was given, which those other browsers read as well.

>Also, please note that I changed this:
>
>* html div#container {height: 1%;}
>
>To this:
>
>* html div#container {height: 535px;}
>
>As it's my min height.

If it's working for you, who's to argue, eh? :-)

~holly 
 
   
__
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] using on non-form elements

[Brian Cummiskey]

This is probably a stupid question... (but you know what they say :p )

I have two "groups" on my sidebar:

-1, a css-grouped form for user login within a fieldset and legend.
-2, a stats table (tabular data)

My idea, is to get both these elements to appear the same, at least as 
far as the legend is concerned.

I used some margins and font sizing to make it pretty close, but i'm 
afraid once font sizes change/zoom thatit will break.

Would it be considered bad to wrap non-form data (in this case, my data 
table) with a fieldset and give it a legend tag, thus making my markup 
of the two groups similar?

I know i'm already going to have issues with text zoom on the 
fixed-width sidebar (I plan to change that later down the road)


and example of what i'm playing with is here:

http://www.hondaswap.com/index_v5.php

__
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] IE 6 broke the page !

[Holly Bergevin]

From: "CoWBoY :-\)" <[EMAIL PROTECTED]>

>Under Firefox, it looks perfect, but how can I avoid
>the little blank on the left side (near the navigation
>bar) under IE6 ?
>
>There it is: http://blog.afrikart.net/tg2

Looks like you'll need to add position: relative to the following selectors - 

.box-wrap
.box-content
.box-right

The first one takes care of the missing background image part. The other two 
are necessary to "bring back" those two columns (that disappear when .box-wrap 
is given position: relative ) Isn't IE fun!!!

~holly 
 
   
__
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] Styling COL and COLGROUP revisited

[christianz]

Okay, for those of us who remember my question about styling columns here is 
the solution I came up with (for my current project anyway). It takes advantage 
of the fact that Firefox *does* allow for the background of columns to be 
styled while still keeping everything very tight (notice that no style rule is 
ever declared more than once and the assigning of classes is kept to a bare 
minimum). Thanks to all those who responded to this onlist and offlist before.
Christian Z.
 

 
COLGROUP { background-color: #E1E4E4; }
TBODY, THEAD { text-align: left; }
TD { font-weight: bold;
 text-align: center; }
TH { color: #FF; }
.col2 { background-color: #CCD2D2; }
 

 

 
  
   This cell is the beginning of the first row and the first 
column.   
   Column #1
   Column #2
   Column #3   
   Column #4
  
 
 
  
 
 
  
  
  
  
 
 
  
   Row #1   
   X
   X
    
   X
  
  
   Row #2
    
   X
    
   X
  
  
   Row #3
    
   X
       
   X
  
  
   Row #4
       
    
   X
    
  
 

___
Try the New Netscape Mail Today!
Virtually Spam-Free | More Storage | Import Your Contact List
http://mail.netscape.com
__
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] Create the background image?

[Zach Byrd]

Hi,
I am embarassed to ask for advice on this matter, but
am in the dark about how to create the background
image for 'faux columns'. I have fireworks, and am
assuming it can be done here. The main problem I have
is applying the different colors(columns) to the
image. I am designing a two column layout. I would
appreciate any direction on this matter.

Thanks alot,
 Zach Byrd

__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
__
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] Who is up for a CSS challenge?

[Chris Akers]

> I hinted for some time now, that I was working on a ZenGarden-type
> site that simulates a CMS environment.
> Therefore I started the CSS Toolshed, and will go live with the site soon.
> You can download the 4 sample templates and the blank css files
> together with a template guide and submission guidelines:
> http://www.csstoolshed.com/cssts_dl/cssts_templates.zip

Why do you have the form wrapped around the entire page? It seems to
me that you're losing a valuable styling hook by not wrapping the form
around just the login elements.
__
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] Create the background image?

[Estelle Weyl]

To create a faux column gif, decide what the width of you column is going to 
be.  What will the background color be of both the left and right columns?

Open firefox.
Ctrl - N (opens a new image)
put the size of your column - height = 1, width = the width of your left 
column, canvas color = enter the hexadecimal color of the color you want 
your column to be.

There, you created the image.  Now save it.
Alt-F, Z, then "enter" 4 times.  Give it a name and save it in the right 
spot - enter again.

you'll need to include:
background-image: url(mynew.gif);
background-repeat: repeat-y;
background-color: the color you want your right section to be


HTH,

-Estelle
- Original Message - 
> I am embarassed to ask for advice on this matter, but
> am in the dark about how to create the background
> image for 'faux columns'. I have fireworks, and am
> assuming it can be done here. 

__
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] Who is up for a CSS challenge?

[Christian Montoya]

> Why do you have the form wrapped around the entire page? It seems to
> me that you're losing a valuable styling hook by not wrapping the form
> around just the login elements.

yeah, was that a mistake?

--
--
C Montoya
rdpdesign.com ... liquid.rdpdesign.com ... montoya.rdpdesign.com
__
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] horz nav bar in IE5Mac / site check Windows

[Roger Roelofs]

Trish,

On Nov 10, 2005, at 2:14 AM, Trish Meyer wrote:

> 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).

IE/mac was was written when CSS 2.0 was the standard.  It said floats 
had to have a defined width.  therefore, floats without a width expand 
to 100% of the parent container, just like other block level elements.  
This does not affect windows versions of ie.

I'm not sure which is the best filter to target ie/mac, but something 
like this should work.

* html #nav>ul li { width: 6em; }

hth
Roger,

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
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] PVII Menu adjustments for Horizontal Menu

[Joanne]

I have just used the PVII Pop Menu Magic Tool to create a horizontal menu.
The menu has 5 items in it and the total width of the menu is 650px wide. 

The code in the css file generated by Pop Menu Magic sets each item in the
menu at a certain number of pixels, in this case, I have set it to 130px, as
5 x 130px = 650px.

The trouble is, some of these menu items are small, some are a lot longer. I
want the larger menu items to have a larger portion of the 650px and the
smaller menu items to have a smaller portion of the 650px.

The code for the menu width in the css file is:

/* Top level menu width */
#p7PMnav li {
float: left;
width: 130px;
}

#p7PMnav ul li {
float: none;
}

Is there some way to have it so the widths will automatically set and adjust
depending on the size of the menu items themselves? I don't want them all
the same width.

(Was that clear, if not, I'll upload it somewhere)

Joanne



__
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] PVII Menu adjustments for Horizontal Menu

[Al Sparber]

From: "Joanne" <[EMAIL PROTECTED]>


>I have just used the PVII Pop Menu Magic Tool to create a horizontal 
>menu.
> The menu has 5 items in it and the total width of the menu is 650px 
> wide.
>
> The code in the css file generated by Pop Menu Magic sets each item 
> in the
> menu at a certain number of pixels, in this case, I have set it to 
> 130px, as
> 5 x 130px = 650px.

> Is there some way to have it so the widths will automatically set 
> and adjust
> depending on the size of the menu items themselves? I don't want 
> them all
> the same width.
>
> (Was that clear, if not, I'll upload it somewhere)

Hi Joanne,

This section in the Pop Menu Magic User Guide should help you:
http://www.projectseven.com/products/menusystems/pmm/user_guide/styling/menu_widths/hz_root_varwidth.htm

Sorry 'bout the long link ;-)

Al Sparber
PVII
http://www.projectseven.com

"Designing with CSS is sometimes like barreling down a crumbling 
mountain road at 90 miles per hour secure in the knowledge that 
repairs are scheduled for next Tuesday".


__
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] PVII Menu adjustments for Horizontal Menu

[Joanne]

I deleted everything and started with a fresh menu in case I was doing
something wrong. I used the Horizontal setting with the default style and
added the code from your tutorial on the bottom line.

In Firefox & Opera, the width is dependant on the size of the text, and they
all line up across the page aligned to the left (so there's an empty gap to
the right - which I'd like to have all centered later, but it's no big deal
if I can't). In IE however, each menu item spans across the entire width of
the page and they are listed one under each other.

How do I fix this?

The CSS code is below:
/* 
  ---
  PopMenu Magic Style Sheet
  by Project Seven Development
  www.projectseven.com
  Menu Type: Horizontal
  Style Theme:0 -Basic Style
  ---
*/
#p7PMnav {
margin: 0;
padding:0;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;
border-left: 2px #ff solid;
border-right: 2px #ff solid;}
#p7PMnav li {
list-style-type: none;
margin: 0;
padding: 0;
}
#p7PMnav ul {
margin: 0;
padding: 0;
background-color: #394c2e;
border: 1px solid #00;
position: absolute;
left: -9000px;
z-index: 1;
}
#p7PMnav a {
display: block;
text-decoration: none;
padding: 4px 10px;
color: #66;
line-height:1;
}
#p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus {
background-color: #0066FF;
color: #FF;
letter-spacing: .01px;
}

/* -- the current page marker style -- */
#p7PMnav .p7PMmark {
color: #33;
font-weight: bold;
}
/* -- the trigger link styles --- */

/*the trigger link */
#p7PMnav ul .p7PMtrg, #p7PMnav ul .p7PMon {
background-image:  url(img/p7PM_dark_east.gif);
background-repeat:  no-repeat;
background-position: right center;
}
/* the active trigger link style */
#p7PMnav .p7PMon {
background-color: #0066FF;
color: #FF;
}
/*the submenu classes */

#p7PMnav .p7PMhide {
left: -9000px;
}
#p7PMnav .p7PMshow {
left: auto;
z-index: 2 !important;
}
/* Top level menu width */
#p7PMnav li {
float: left;
width: 124px;
}
#p7PMnav ul li {
float: none;
}
#p7PMnav ul, #p7PMnav ul li {
width: 172px;
}
#pmmcrumb {
font-weight: bold;
margin-bottom: 16px;
color: #33;
}
#pmmcrumb a, #pmmcrumb a:visited {
font-weight: normal;
color: #535FAC;
}
#pmmcrumb a:hover, #pmmcrumb a:active, #pmmcrumb a:focus {
font-weight: normal;
color: #33;
}

/* The single backslash \ character inside this comment
causes IE5 Mac to ignore the following rule, which allows other
browsers to render top-level menu items to their natural width. */
#p7PMnav li {width: auto;}

Joanne

__
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] Who is up for a CSS challenge?

[Michael Hulse]

On Nov 11, 2005, at 6:31 PM, Christian Montoya wrote:
>> Why do you have the form wrapped around the entire page? It seems to
>> me that you're losing a valuable styling hook by not wrapping the form
>> around just the login elements.
>
> yeah, was that a mistake?

Maybe this:

"The  tag is there because this is an asp.net application which
require forms for server-side interaction."

? Got me though... I am not an asp.net dude.

M

__
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

[Michael Hulse]

On Nov 11, 2005, at 9:52 PM, Trish Meyer wrote:
> 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

Have you tried clear: right?

I did not look at your CSS, and that probably is not the best solution, 
if it is a solution at all... It sounds like a problem I have had b4, 
and clear:right was a fix.

You may also want to try an inner content wrap (put inside content div 
and wrap around all #content content... maybe something like this:

#innerContentWrap {
width: 100%;
float: left;
}

Hth, I am sure someone will give a waay better answer.

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.

Micky


-- 

 ><(((º>`·.¸¸.·´¯`·.¸.·´¯`·...¸><º>

·´¯`·.¸. , . .·´¯`·...¸><º>`·.¸¸.·´¯`·.¸.·´¯`·...¸><º>
__
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/

Re: [css-d] Who is up for a CSS challenge?

[Christian Heilmann]

> > Why do you have the form wrapped around the entire page? It seems to
> > me that you're losing a valuable styling hook by not wrapping the form
> > around just the login elements.
>
> yeah, was that a mistake?

Nopes. If you work in .NET, then there will be one form for the whole
document. A really annoying shortcome which will be changed in the
next version - or so my MS Tech developers keep telling me.

http://msdn.microsoft.com/msdnmag/issues/05/09/CuttingEdge/#S4

There are ways around it though.

OFF-Topic, sorry
--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
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

[Gunlaug Sørtun]

Trish Meyer wrote:

> 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.

Didn't have time to look at your CSS, but adding the following will give
you a stable layout.

#wrapper {display: table;}
#content {float: left; margin: 0 -10px 0 15px;}

The solution is based on 'float' as isolated container (with altered
margins to go with it). Clearing inside a float won't react on anything
outside the float.

The 'display: table;' on wrapper makes the wrapper extend below the
floats in all good browsers as if there was a 'clear: both' down there.
IE/win do the same based on the 'hasLayout' bug/concept[1].

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
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

[Michael Hulse]

Hi trish,

On Nov 11, 2005, at 9:52 PM, Trish Meyer wrote:
>
> Please help! I've troubleshooted this for hours and can't figure out
> how to fix it.
>

Fixed it a little bit:

http://www.ambiguism.com/CSSD/caa.html

Added this to CSS:

#innerContentWrap {
width: 100%;
float: left;
}
/* Begin .theClearFix styles: */
.theClearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.theClearFix { display: inline-table; }
/* Begin filter. Hides from IE-mac \*/
* html .theClearFix { height: 1%; }
.theClearFix { display: block; }
/* End filter. End hide from IE-mac. */
/* End .theClearFix styles. */


I cleaned-up the html, makes it a bit more clear:




Heading 1
This is div#content and it is positioned relative to 
div#wrapper
div#wrapper holds #leftcol (the sidebar) and #content 
#leftcol (sidebar) is float=left
#content moves to the right thanks to the right margin 
amount




Heading #2 +clear:both style 
Everything works fine until 

View source to see all the code.

I saw some other issues with your css (no time to delve into that now), 
and I added borders to some of the divs to make it more obvious as to 
what is going on.

Keep in mind, I quickly slapped this together... it already looks like 
some of the gurus on the list have replied with solid answers... 
hopefully a combination of all our help will solve your CSS troubles.

Cheers,
Micky

__
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

[Bill Stemp]

  - Original Message - 
  From: Trish Meyer 
  To: css discuss 
  Sent: Saturday, November 12, 2005 8:46 AM
  Subject: [css-d] clearing clears sidebar too


  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/


Not sure exactly what you are trying to acheive with the headings.

Anyway, reducing the left padding on the #content div solves the problem in 
IE/Win of all the content dropping below the sidebar. I changed the 
padding-left to 10px, which seems ok.

By the way, I could not find any positioning statement for the #content div.

Regards,

Bill Stemp
__
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

[Michael Hulse]

Trish,

On Nov 11, 2005, at 10:46 PM, Trish Meyer wrote:

> 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.

That was the other issue I saw too... I do not have much time (and it 
looks as though you may have already gotten a solid answer from 
Georg)... so, here is a link that hopefully will help you solve your 
issues:

http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=15

Found here:

http://www.sitepoint.com/forums/showthread.php?t=171943&page=1&pp=25

Also, here is an example 2 column CSS from one of my websites:

/*--( 2-COL LEFT SIDEBAR STYLES: )-*/
/* Main content div: */
#contentLeftCol {
margin: 0 0 0 110px;
}
/* Side-menu div: */
#sidebarLeftCol {
width: 100px;
float: left;
}
/* Fix 3px jog & hide from IE5-mac: \*/
* html #contentLeftCol {
height: 1%;
margin: 0;
}
* html #sidebarLeftCol {
margin: 0 7px 0 0;
}
/* End IE5/mac hide */
/*---*/

If you read that Sitepoint post about floats you should be able to 
tackle the float-drop issue with ease.

Micky
-- 
BCC for Privacy!
http://www.cs.rutgers.edu/~watrous/bcc-for-privacy.html
--
My del.icio.us: http://del.icio.us/mhulse
__
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/