date:20060905

On 05/09/2006 07:58, OOzy Pal wrote:
 I have laid down three div boxes on top of each other but they look
 different in IE as the distance between them is bigger in IE

Seems to me that you have both margin-top and margin-bottom set. This 
indicates that IE is probably not correctly collapsing the margins.

For a better explanation of collapsing margins than I could give, see 
Andy Budd:
http://www.andybudd.com/archives/2003/11/no_margin_for_error/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] divs boxes looks different in IE6/7 from Firefox 1.5

On 05/09/2006 08:23, Bradley Wright wrote:
  Seems to me that you have both margin-top and margin-bottom set. This
  indicates that IE is probably not correctly collapsing the margins.

Oh, and since I only showed you an explanation of collapsing margins, my 
suggested fix is to remove margin-top and rely on margin-bottom only. 
Then you won't have to worry about collapsing them at all.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE styling issue with dropdown button.

2006-09-05 Thread Lyn Williams

I have a problem with a dropdown button on a menu in which doesn't style
properly in IE but works fine in Firefox. Please can you check and see if
you are familiar with this problem. It's the 'products' button at this site:
www.access2id.co.uk http://www.access2id.co.uk/ 

 

Hope you can help,

 

Lyn Williams

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

[css-d] Opera8.5 not showing column

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

Re: [css-d] IE styling issue with dropdown button.

Hi Lyn,

I replied earlier with a fix for this issue:
http://lists.css-discuss.org/mailman/private/css-d/2006-September/068633.html
Does this not fix the issue?

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

Re: [css-d] highlighting the current selection

2006-09-05 Thread Rimantas Liubertas

...
 However, basic usability tells you that the current page just should
 not be a link - why should it link to itself?
...

As an another method to refresh the page. I got quite used to that :/

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

Re: [css-d] IE styling issue with dropdown button.

Hi Lyn,

I think this is really a javascript problem, although you should 
validate your html as well.
-- 
Joel Goldstick
www.columbuswebmakers.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] styling a hr / in IE

I've been looking around for this without finding a working solution, is
there any way to style a horisontal ruler in IE? More specifically I'm
looking for the equalent of a 1px dashed border, but I want to avoid using a
div for semantic reasons. For standard browsers I've used

hr.ruler {
padding: 0;
margin: 0;
border: none;
height: 1px;
background: transparent url(../../Media/Common/hr.gif);
}

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

Re: [css-d] Specificity problem with a and text-decoration

Jim Ratliff wrote:

By default, my links within a certain div are not underlined.

   div.column-content a {color: #ff0080; text-decoration: none;}

However, I want some of those links to be underlined. So for those, I  
defined a style:

   a.force-link-decoration  {text-decoration: underline; }

To apply this style to the selected links, I add a class attribute to  
the a tag:

   a class=force-link-decoration  
href=mailto:[EMAIL PROTECTED]Decorate me!/a

In the style sheet, the definition of div.column-content a comes  
first and the definition of a.force-link-decoration comes later.

The way I understand things, because the a.force-link-decoration  
comes later, its definition of text-decoration (viz., underline)  
should trump the text-decoration:none in the earlier definition of  
div.column-content a. And therefore the links with class=force- 
link-decoration should be underlined.

But, to my surprise, though perhaps not yours, 

:-)

these links are NOT underlined.

If I comment out the style definition of div.column-content a in  
the style sheet, the desired links do get underlined as desired.

I'd really appreciate it if someone could enlighten me why the 'a  
class=force-link-decoration' doesn't trump the fact that the link  
is a descendant of the div. What I mean is: An a link of a  
particular class seems like it should be more specific than an a  
link which is merely a descendant of a div.

The HTML and CSS files are located, respectively, at

http://grandlakeguardian.org/force-decoration-test.html
http://grandlakeguardian.org/force-decoration-text.css

Thanks in advance for any help!

Jim

Hi Jim,
I think the order of the css lines doesn't have influence:

   div.column-content a {text-decoration: none;}

means:
'every a in a div with class=column-content has to get no underline',
while:

   a.force-link-decoration  {text-decoration: underline;}

means:
'unless specified elsewhere in another way, every a in the document 
with class=force-link-decoration will get an underline'.
Now in this case an a in the div.column-content is more specific than 
a general a, and wins: no underline.

Solution 1:
delete the prefix div in the first rule, so:

   .column-content a {text-decoration: none;}   
   a.force-link-decoration  {text-decoration: underline;}

Now both are equal in order, but the underline is in a more specific 
element, and wins.

Solution 2:
add the div-rule for the deco link inside it, so:

   div.column-content a {text-decoration: none;}
   div.column-content a.force-link-decoration {text-decoration: underline;}

Literature:
The SelectOracle 
http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py,
CSS2.1 info on Cascading Specificity 
http://www.w3.org/TR/CSS21/cascade.html#specificity.

Greetings,
francky




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

Re: [css-d] styling a hr / in IE

The archive contains the only two links I was going to send through for 
this anyway:
http://archivist.incutio.com/viewlist/css-discuss/26332

PS: looks like it's not really do-able in IE. Like most things, really.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] styling a hr / in IE

2006-09-05 Thread Ian Young

Subject: [css-d] styling a hr / in IE


I've been looking around for this without finding a working solution, is
there any way to style a horisontal ruler in IE? More specifically I'm
looking for the equalent of a 1px dashed border, but I want to avoid using a
div for semantic reasons. For standard browsers I've used

hr.ruler {
padding: 0;
margin: 0;
border: none;
height: 1px;
background: transparent url(../../Media/Common/hr.gif);
}

Eystein

Try the following:

head
titleUntitled/title

style type=text/css
.hr {border:1px dotted #00;

  }

/style
/head

body

hr class=hr /
/body

Works IE Opera and FF

Ian
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.405 / Virus Database: 268.11.7/437 - Release Date: 04/09/2006

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

[css-d] Form issue

2006-09-05 Thread Mark Fellowes

I'm running into an issue where within my app I'm using a plugin that has 
it's own CSS stylesheet. 
I've tried editing it and while it seems I can make some changes the damn thing 
just won't line up with my other elements.

In my main stylesheet I have the following:

label, select{ 
display: block;
width: 16em;
float: left;
margin-bottom:1.5em;
}

fieldset  {
background-color: #006bae;
display: block;
}

However I can't see what I need to do in the plugin stylesheet(I've also tried 
using a class identifier in my main css called dateBocks.  Didn't seem to 
help.

 #dateBocksMessage {
clear: both; 
  }
  
#dateBocksMessage div {
  font-size: 0.75em;
}

#dateBocksMessage div.error {
  color: red;
}

#dateBocks input.error {
  background-color: pink;
}
 
#dateBocks ul {
list-style: none;
padding: 0 0 0 0;
margin: 0;
float: left;
/* clear: right; */
}

#dateBocks ul li {
display: inline;
}

#dateBocks ul a {
padding: 5px;
display: block;
float: left;
}

#dateBocks input {
width: 100px;
}

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

Re: [css-d] Opera8.5 not showing column

Eystein Alnaes wrote:
 http://files.nho.no/rayon/site/index.phtml

Looks like there's a problem with the compensation for older
Opera-versions for .equal. I changed it once, and your page worked in 
7.54 and 8.5. However, I don't have time to play around with it and 
assure a perfectly stable rendering in all situations.

The simplest, and working, fix is to eliminate (delete) 'class=equal 
on div id=mainContent class=equal, as I can't really see any 
differences in any of the other browsers if that class is gone on _that_ 
container, and Opera 8.5 (and older) renders ok without it.

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

Re: [css-d] Opera8.5 not showing column

On 9/5/06, Gunlaug Sørtun [EMAIL PROTECTED] wrote:

 Eystein Alnaes wrote:
  http://files.nho.no/rayon/site/index.phtml

 Looks like there's a problem with the compensation for older
 Opera-versions for .equal. I changed it once, and your page worked in
 7.54 and 8.5. However, I don't have time to play around with it and
 assure a perfectly stable rendering in all situations.

 The simplest, and working, fix is to eliminate (delete) 'class=equal
 on div id=mainContent class=equal, as I can't really see any
 differences in any of the other browsers if that class is gone on _that_
 container, and Opera 8.5 (and older) renders ok without it.

 regards
 Georg
 --



Thank you, I just came to the same conclusion 10 mins ago :)
Eystein
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] styling a hr / in IE

Eystein Alnaes wrote:
 I've been looking around for this without finding a working solution, is
 there any way to style a horisontal ruler in IE? More specifically I'm
 looking for the equalent of a 1px dashed border, but I want to avoid using a
 div for semantic reasons. For standard browsers I've used

 hr.ruler {
 padding: 0;
 margin: 0;
 border: none;
 height: 1px;
 background: transparent url(../../Media/Common/hr.gif);
 }

 Eystein
   
I don't remember where I stole this:
hr {border: none 0;border-top: 1px dashed #000;width: 50%;height: 1px;}
Maybe it will work for you. Maybe not. 
~dL
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] styling a hr / in IE

On 9/5/06, Eystein Alnaes  wrote: .hr { border:1px dotted #00; }

 Ian


Nice, but IE seems to add a margin or padding which I can't zero.

Eystein


On 9/5/06, Ian Young  wrote:

  Where exactly?

 Ian


Above and below. Which is only a concern in at the top of the left column,
where the background colors are different for the different menus.

http://files.nho.no/rayon/site/index.phtml

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

Re: [css-d] styling a hr / in IE

I don't remember where I stole this:

 hr {border: none 0;border-top: 1px dashed #000;width: 50%;height: 1px;}
 Maybe it will work for you. Maybe not.
 ~dL



The replyes are coming in faster then I can test them. Thanx! Sadly I'm
still not getting around the magic margin/padding.

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

Re: [css-d] styling a hr / in IE

Eystein Alnaes wrote:

 hr {border: none 0;border-top: 1px dashed #000;width: 50%;height: 1px;}
 Maybe it will work for you. Maybe not.
 ~dL
 



 The replyes are coming in faster then I can test them. Thanx! Sadly I'm
 still not getting around the magic margin/padding.

 Ey
Put the page on a public server and give a clickable link to it.
~dL

-- 
http://chelseacreekstudio.com/

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

Re: [css-d] styling a hr / in IE

2006-09-05 Thread Ian Young

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of Eystein Alnaes
Sent: 05 September 2006 13:57
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] styling a hr / in IE

The replyes are coming in faster then I can test them. Thanx! Sadly I'm
still not getting around the magic margin/padding.

Is the issue not with the archivnav div. There is a padding of 10px 0 10px
7px?

This will account for the spacing/padding at the top of the second menu in
IE.

Ian
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.405 / Virus Database: 268.11.7/437 - Release Date: 04/09/2006

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

Re: [css-d] styling a hr / in IE

 Is the issue not with the archivnav div. There is a padding of 10px 0 10px
 7px?

 This will account for the spacing/padding at the top of the second menu in
 IE.

 Ian


No, I wouldn't think so (also tested), since the hr / is closed before the
archiveNav div opens.

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

Re: [css-d] styling a hr / in IE

Put the page on a public server and give a clickable link to it.

 ~dL



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

Re: [css-d] styling a hr / in IE

Eystein Alnaes wrote:

I've been looking around for this without finding a working solution, is
there any way to style a horisontal ruler in IE? More specifically I'm
looking for the equalent of a 1px dashed border, but I want to avoid using a
div for semantic reasons. For standard browsers I've used

hr.ruler {
padding: 0;
margin: 0;
border: none;
height: 1px;
background: transparent url(../../Media/Common/hr.gif);
}

Eystein
  

Hi Eystein,
It's possible to use a 1px dashed border for styling the hr:

hr.ruler {
height: 1px;
margin: 0;
padding: 0;
border-top: 0;
border-bottom: 1px dashed #CC9900;
}

No img needed, and even no IE hacks! :-)
See testpage 
http://home.tiscali.nl/developerscorner/css-discuss/test-adapted-hr-line.html.

Gretings,
francky


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

[css-d] Overflow: hidden? not hiding in IE

2006-09-05 Thread Silk-Works

Hello all,

I'm a new one here, hope I'm doing this right?

I know this is a common problem, and is listed on the wiki, but I
seem to be going round in circles..

I am not a web developer - I've just opened a shop and wanted to do
a small site to promote it.. More fool me..

I have been round and round stacks of resources, and I think I've
done everything right, but can't see the woods for the trees...

I have large bottom padding and large negative bottom margin applied
to a sidebar navigation and an inner content area, contained in a wrapper
with overflow set to hidden, to keep my columns the same length for
different content, which seems to be fine in opera and FF, but ignored in
IE.

Other than that I'm pretty happy with the site, but I don't really
know what I'm doing, so I don't really know what I'm doing wrong..

You can get the gist of what I'm trying to achieve at;
http://www.silk-works.com

Can anyone help? This would stop my hair getting any greyer this
week..

The basic structure is;

div id=divBranding
  !--Content for Header--
/div

div id=divWrapper
!--Wrapper for Main page content--

  div id=divSidebar
!--Sidebar navigation, floated left--
  /div

  div id=divContainer
!--Page content area, floated right--
  /div

/div

div id=divInfo
!--Footer content--
/div

And the CSS is at; http://www.silk-works.com/css/master.css

Can anyone point me in the right direction - I'm not sure how many times
I've been through all the links on Veele's blog and position is everything's
'one true layout', I hope there's something simple I'm missing?


Regards,

James

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

Re: [css-d] Specificity problem with a and text-decoration

2006-09-05 Thread Jim Ratliff

Thanks very much!

I used your solution #1 (removing the div from div.column- 
content). (#2 wasn't general enough for all the contexts I want to  
use it.) And that worked: it underlined what I needed to have  
underlined.

Thanks, too, for the two additional resources. The Calculating a  
selector's specificity at

http://www.w3.org/TR/CSS21/cascade.html#specificity

will be  a helpful tool in recalibrating my intuition about specificity!

Jim

--
Jim Ratliff
[EMAIL PROTECTED]
http://virtualperfection.com/jim/

On Sep 5, 2006, at 5:22 AM, francky wrote:

 Jim Ratliff wrote:

 By default, my links within a certain div are not underlined.

  div.column-content a {color: #ff0080; text-decoration: none;}

 However, I want some of those links to be underlined. So for  
 those, I  defined a style:

  a.force-link-decoration  {text-decoration: underline; }

 To apply this style to the selected links, I add a class attribute  
 to  the a tag:

  a class=force-link-decoration   
 href=mailto:[EMAIL PROTECTED]Decorate me!/a

 In the style sheet, the definition of div.column-content a  
 comes  first and the definition of a.force-link-decoration comes  
 later.

 The way I understand things, because the a.force-link- 
 decoration  comes later, its definition of text-decoration (viz.,  
 underline)  should trump the text-decoration:none in the earlier  
 definition of  div.column-content a. And therefore the links  
 with class=force- link-decoration should be underlined.

 But, to my surprise, though perhaps not yours,
 :-)

 these links are NOT underlined.

 If I comment out the style definition of div.column-content a  
 in  the style sheet, the desired links do get underlined as desired.

 I'd really appreciate it if someone could enlighten me why the  
 'a  class=force-link-decoration' doesn't trump the fact that  
 the link  is a descendant of the div. What I mean is: An a link  
 of a  particular class seems like it should be more specific than  
 an a  link which is merely a descendant of a div.

 The HTML and CSS files are located, respectively, at

 http://grandlakeguardian.org/force-decoration-test.html
 http://grandlakeguardian.org/force-decoration-text.css

 Thanks in advance for any help!

 Jim

 Hi Jim,
 I think the order of the css lines doesn't have influence:

   div.column-content a {text-decoration: none;}

 means:
 'every a in a div with class=column-content has to get no  
 underline',
 while:

   a.force-link-decoration  {text-decoration: underline;}

 means:
 'unless specified elsewhere in another way, every a in the  
 document with class=force-link-decoration will get an underline'.
 Now in this case an a in the div.column-content is more specific  
 than a general a, and wins: no underline.

 Solution 1:
 delete the prefix div in the first rule, so:

   .column-content a {text-decoration: none;} a.force-link- 
 decoration  {text-decoration: underline;}

 Now both are equal in order, but the underline is in a more  
 specific element, and wins.

 Solution 2:
 add the div-rule for the deco link inside it, so:

   div.column-content a {text-decoration: none;}
   div.column-content a.force-link-decoration {text-decoration:  
 underline;}

 Literature:
 The SelectOracle http://penguin.theopalgroup.com/cgi-bin/ 
 css3explainer/selectoracle.py,
 CSS2.1 info on Cascading Specificity http://www.w3.org/TR/CSS21/ 
 cascade.html#specificity.

 Greetings,
 francky





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

Re: [css-d] Overflow: hidden? not hiding in IE

Silk-Works wrote:

 I have large bottom padding and large negative bottom margin applied 
 to a sidebar navigation and an inner content area, contained in a 
 wrapper with overflow set to hidden, to keep my columns the same 
 length for different content, which seems to be fine in opera and FF,
  but ignored in IE.

 http://www.silk-works.com

IE does hide overflow on #divWrapper, but a bug makes it render the
overflowing parts of any container that has 'position: relative'
declared on it.

We use this IE-bug combination to make IE /show/ overflow at times -
just like other browsers do, but in your case the effect is quite
unintentional and unwanted.

Thus, the solution is to delete 'position: relative' on...

#divWrapper #divSidebar

...and...

#divWrapper #divContainer

...and IE will stop showing parts of those containers sticking below the
footer.

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

Re: [css-d] Overflow: hidden? not hiding in IE

Gunlaug Sørtun wrote:
 http://www.silk-works.com
 
 
 IE does hide overflow on #divWrapper, but a bug makes it render the 
 overflowing parts of any container that has 'position: relative' 
 declared on it.

 Thus, the solution is to delete 'position: relative' on...

Forgot... :-)

IE has many bugs, so you will then have to add 'position: relative' to
some elements inside...
#divWrapper #divSidebar
...and...
#divWrapper #divContainer
...or else IE gets the stacking wrong and will prevent links from being
at the top and act as proper links.

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

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

Hello

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

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

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

And this is what I've got so far:

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

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

Questions:

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

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

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

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

2. Browser compatibilty.

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

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

Does it work in IE7?

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

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

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

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

Many thanks for any tips

Richard










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

Re: [css-d] Overflow: hidden? not hiding in IE

 http://www.silk-works.com

To save you some time - and grey hair...

The addition of...

#divWrapper #divSidebar a {position: relative;}
#divWrapper #divContainer a {position: relative;}

...will do the trick in IE, once the 'position: relative' on the
containers themselves (as described in the first response), are deleted.

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

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

2006-09-05 Thread Don Miller

- Original Message -
From: richard n [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Sent: Tuesday, September 05, 2006 8:54 AM
Subject: [css-d] side-scrolling portfolio website - best technique?

| Hello
|
| I'm new here, new to CSS and new to web design.
|
| I'm a photographer, and I'm trying to create a side-scrolling portfolio
| website, without using tables.
|
| I've had a lot of help in this thread:
| http://www.csscreator.com/node/17632
|
| And this is what I've got so far:
|
| http://www.richardnicholson.com/testing/list_text.html
|
| (The final site will have several galleries like this, accessed by a
| horizontal dropdown menu running across the top.)

Richard
Why hortizonal scrolling instead of vertical?

Why not smaller images so more can fit on a page and more images can be
viewed without scrolling.
Allow user to click on an image to show a larger picture.
Would also save on download time, especially if you are going to have lots
of pictures.
You could also use JS to open a second, smaller window when the thumbnail is
clicked to show the large image.

There are some good templates out there that others on the list may suggest.
Why reinvent the wheel.

Don

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

-- 
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.405 / Virus Database: 268.11.7/437 - Release Date: 9/4/2006

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

Re: [css-d] Overflow: hidden? not hiding in IE

Silk-Works wrote:
 Hello all,

   I'm a new one here, hope I'm doing this right?

   I know this is a common problem, and is listed on the wiki, but I
 seem to be going round in circles..

   I am not a web developer
Me either.
  - I've just opened a shop and wanted to do
 a small site to promote it.. More fool me..
   
I know exactly what you mean.
   

 Regards,

 James


   
Georg Sortun can fix anything. I start from scratch and hope for the 
best (and hope Georg will fix it :-) ).
http://www.chelseacreekstudio.com/ca/cssd/layout26.html
Regards,
~dL

-- 
http://chelseacreekstudio.com/

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

[css-d] Older Firefox bug?: background image does not display

2006-09-05 Thread jason lee

Greetings,

I've been toying with CSS and set up a blog for my family to review. The
address is www.jassanius.com.

Problem is the background of the main text area doesn't display in Firefox
1.0.4. It displays fine in IE 6 and the latest Opera incarnation, as well as
in the latest Firefox version,  but I cannot for the life of me figure out
why Firefox 1.0.4 will not display my background image. This has been a
problem for a few users using this legacy version of Firefox. Was there some
bit of support missing in Firefox 1.0.4 for CSS or a certain bug?

It seems the background propery for this particular div (content-bg) in my
page does not display at all. I've tried changing the image, setting a
background color, etc... I get nothing to work on the backgound for the
content-bg div.

I have two other divs in my page that use background images that DO display.
The only difference I can see is that these two other divs do not repeat the
background and they have height attributes set for the divs.

What am I missing? Is there a way to solve this. Thanks in advance.

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

Re: [css-d] styling a hr / in IE

2006-09-05 Thread Designer

[EMAIL PROTECTED] wrote:
 I don't remember where I stole this:
 hr {border: none 0;border-top: 1px dashed #000;width: 50%;height: 1px;}
 Maybe it will work for you. Maybe not. 
 ~dL

   
Same idea really, but I use:

.hr{
height : 1px;
margin : Xpx 0px;
border-top : 1px solid #000; }

where the X is replaced with half the vertical height you want the line 
to occupy. I've used this for a while without problems.

-- 
Best Regards,

Bob McClelland

Cornwall (UK)
www.gwelanmor-internet.co.uk


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

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

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

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

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

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

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

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

Thanks

Richard












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

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

2006-09-05 Thread Dave Goodchild

I agree with the thumbnail to larger image technique. I use one at:


http://www.mediamasters.co.uk/dg/karen/index.php?pg=3

it is javascript but pretty stable.


Thanks

 Richard













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




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

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

2006-09-05 Thread Daniel Hammond

| Apparently the scrolling gallery doesn't work in Firefox 
| 1.5.0.6 on a PC. I wonder why, as it works fine in Firefox 
| 1.5.0.6 on my Mac?
| http://www.richardnicholson.com/testing/list_text.html


I'm running Firefox 1.5.0.6 on a PC, and the sidescrolling seems to be
working fine. It also works in Opera. But IE7 wraps everything down into a
column. However, there seems to be some extra unnecessary white space above
all the content, and that makes it so you have to scroll up and down just a
bit in order to see everything (I'm using 1280x800 resolution, so this
problem would also be present for people with 1024x768). Is the white space
intentional? If so, why?

Daniel Hammond
www.objectivedesigns.com


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

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

richard n wrote:
 Apparently the scrolling gallery doesn't work in Firefox 1.5.0.6 on a 
 PC. I wonder why, as it works fine in Firefox 1.5.0.6 on my Mac?
   
It scrolls horizontally as I believe you intend in XP
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.6) 
Gecko/20060728 Firefox/1.5.0.6; Opera/9.01; and IE/6.0.
 Also I've been advised that for 'content type' I should be using 
 'text/html' and not 'application/xhtml+xml'. That was a copy/paste 
 error. I've made the alteration and uploaded it:

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

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

 Re. Don's general comments about whether a side-scrolling gallery is a 
 good idea - Well, I've given it a lot of thought and I've decided that 
 it's the effect I want to achieve.
It may be a good idea to view your page at 800 x 600 and 1024 x 768. At 
those screen resolutions, it was necessary for me to scroll both 
horizontally and vertically to see the full image as they are chopped at 
the bottom, more so at 800, of course). The amount of vertical scroll 
will depend on the users chrome. And there's no way to predict what 
that's going to be (for me the usable vertical area is a max of 350px at 
800 in my default browser). BTW, don't forget to add a background color 
-- not everyone defaults to white .
  Whether it's possible, with good 
 cross browser compatibility, is what I'm trying to find out. I realise 
 that top-to-bottom is the dominant paradigm in web design. I'm just 
 curious to see whether a left-to-right design can be achieved - and 
 without fixing everything in a table.


 Richard
Best,
~dL

-- 
http://chelseacreekstudio.com/

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

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

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

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

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

Thanks

Richard

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





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

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

Thanks, that sounds encouraging.

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

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

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

How about IE5 PC?


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

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

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

How about for a 1024 x 768 screen?

(I've added a background colour - thanks)


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

Re: [css-d] [ADMIN] Re: CSS best practice?

2006-09-05 Thread Theresa Mesa

I've actually set up a couple of macros - one to populate the stylesheet in
and one to populate the page. I fill in the info as needed. I like to
comment my divs so I know where it begins and ends and avoid the extra div
tag issue. The comments are in the macro, also.

I use something like this :

 !---  begin wrapper div --
div id=wrapper

/div
!-- end wrapper div --

Doesn't add much to the weight of the page and saves me a world of trouble.

Since I'm on a Mac and cheap, I use Keyboard Maestro for the macros. I've
also set up a macro to plug in the right doc type (I like XHTML
Transitional, since it supports target=_blank), and another macro to plug
in the includes code. This way, once you know that it's working, it always
works and never becomes an issue for the code not working right, and you can
concentrate on other validation and just plain working right issues. Is the
page breaking because you have an extra closing div tag, or because of
something else entirely?


-- 
Theresa Mesa
Mesa Design House
http://mesadesignhouse.com
909-335-9710
Fax 909-335-9717
Business hours: M-F, 9-5


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

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

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

 How about for a 1024 x 768 screen?

 (I've added a background colour - thanks)


   
 The amount of vertical scroll will depend on the users chrome. And 
 there's no way to predict what that's going to be (for me the usable 
 vertical area is a max of 350px at 800 in my default browser). BTW, 
 don't forget to add a background color -- not everyone defaults to 
 white .
 

   
I think what I wrote is that 350px is the max height of /my/ window with 
my default browser set at 800 x 600. I have 5 browsers. No two of my 
browsers have the same available window height, /regardless/ of the 
screen resolution.
Regards,
~dL

-- 
http://chelseacreekstudio.com/

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

[css-d] a tabless bulletin board?

2006-09-05 Thread cappellano

Hi list!

is there any bulletin board (entirely) tabless?  if yes, which one? if
dont, is it recommended to make it using divs or this one case where
tables do the job efficiently and better than divs? Im asking because
Im interested in developing a bulletin board system (a project for my
college) and Id like to make it tabless. if it is better doing it with
tables, that´s okay! I was just wondering with using css and divs
wouldnt viable.

thank you in advance!
cheers

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

Re: [css-d] a tabless bulletin board?

2006-09-05 Thread Brian Cummiskey

cappellano wrote:
 is there any bulletin board (entirely) tabless? 
   
If there are, they aren't any good or popular.

I am currently at the early stages of a huge project, of converting 
vBulletin to standards based, table-less (or maybe less-tables depending 
on how it turns out...) layout.

http://vbstandard.com

Hoping to debut with a beta skin in late october/early november.


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

Re: [css-d] Older Firefox bug?: background image does not display

jason lee wrote:

Greetings,

I've been toying with CSS and set up a blog for my family to review. The
address is www.jassanius.com.

Problem is the background of the main text area doesn't display in Firefox
1.0.4. It displays fine in IE 6 and the latest Opera incarnation, as well as
in the latest Firefox version, but I cannot for the life of me figure out
why Firefox 1.0.4 will not display my background image. This has been a
problem for a few users using this legacy version of Firefox. Was there some
bit of support missing in Firefox 1.0.4 for CSS or a certain bug?

It seems the background propery for this particular div (content-bg) in my
page does not display at all. I've tried changing the image, setting a
background color, etc... I get nothing to work on the backgound for the
content-bg div.

I have two other divs in my page that use background images that DO display.
The only difference I can see is that these two other divs do not repeat the
background and they have height attributes set for the divs.

What am I missing? Is there a way to solve this. Thanks in advance.

Jason

Hi Jason,
You are missing a height in the clearing div before the end /div of
the #content-bg. Then FF thinks (and Netscape, and I assume all Gecko
based browsers) it can be omitted. So:

.clearing { clear: both; height: 1px; }

See testpage here
http://home.tiscali.nl/developerscorner/css-discuss/test-jassanius.htm.
And to compensate for the extra 1px in the lenght of the page, you can
add also: margin-bottom: -1px. ;-)

Greetings,
francky

btw:
You are aware of the loading time of the page? With fast dsl it took me
about 20 sec. of petience. And with a dialing modem ... unknown, a speed
rapport cannot be made.
See Web Page Speed Report of Websiteoptimization
http://www.websiteoptimization.com/services/analyze/wso.php?url=http://home.tiscali.nl/developerscorner/css-discuss/terst-jassanius.htm:
The size of this web page (1,008,094 bytes) has exceeded the maximum
size of 1,000,000 bytes.

More as 1MB! Page itself is 56kB (rather big too), but the images are
the real culprits. I hope you have planned to split up the page and/or
to make thumbnails of the photographs. :-)

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

Re: [css-d] adding a global override in a style

2006-09-05 Thread Zoe M. Gillenwater

Trish Meyer wrote:
 Hi all,

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

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

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


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

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

 As soon as I get specific with sub sections, like

 #sidebar h1
 #profile p

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

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

   

Yep, that's what you'll have to do with your current setup.

But I'd love to see an example of one your pages with all these classes 
to control spacing. I bet you could do away with most if not all of 
them, greatly simplifying your CSS and markup. Care to offer one up for 
the challenge? I know you posted a link to a site in this message, but 
I'm not sure whether it is an example of a page where you have gotten 
the text formatting just how you like it, or if you are still futzing 
with it. I'd love an example of a finished page to try my hand at 
duplicating with simplified styles.

By the way, to start a new thread, do not reply to an existing message. 
When you do this,
your message gets threaded on to the old thread, which messes up the 
archives
and makes it less likely that others will see your message and subsequently
reply to you. You must send a new message with an appropriate and 
descriptive
subject line to css-d@lists.css-discuss.org in order to start a new thread.

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu


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

Re: [css-d] [ADMIN] Re: CSS best practice? / explaining comments and bug hunting

Theresa Mesa wrote:

I've actually set up a couple of macros - one to populate the stylesheet in
and one to populate the page. I fill in the info as needed. I like to
comment my divs so I know where it begins and ends and avoid the extra div
tag issue. The comments are in the macro, also.

I use something like this :

 !---  begin wrapper div --
div id=wrapper

/div
!-- end wrapper div --

Doesn't add much to the weight of the page and saves me a world of trouble.
[...]
  

Indeed, - I often do it by hand. Indenting the div's is helpful too.
But my trouble with it is the css bug hunting.
If I have this kind of explaining comments in a page, and I want to 
comment out some parts of it (to see what css in what div is causing 
problems), then I've to destroy all these comments first (and place them 
back later). Otherwise the end of each explaining comment is breaking my 
turn off comment ...

The deleting is easy: Search and Destroy in the editor. But to place 
them back: where was it again?.
The more div's/comments, the more work. ;-)

It should be easy if the next html version would have a super comment 
(like !- and --), which overrules the normal comments.
But this is OT again, I don't say anything more.

Greetings,
francky

PS: Hé, just found an other way:

* Inside the explaining comment, use a standard beginning (like:
  !-- ***- ) and a standard ending (like: -*** -- ).
* Then you can get them back with Search All ( ***- ) and Replace
  All (by: !-- ***- ).
  The same for the end of comment. Eureka! :-)



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

[css-d] Layout check please- was Table squirting out of DIV

2006-09-05 Thread rollandburn

sorry if this is posted twice..

Hi again,

This began as [css-d] Table squirting out of DIV but Zoe helped me  
fix that so I thought I'd start a new thread for some of my other  
questions.

Below is a url for referencethe original page I'm working on is  
secured and isn't accessible to the public.  I tried to include as  
much information as possible for anyone feeling kind enough to help.   
I am using http://blog.html.it/layoutgala/LayoutGala24.html as a  
starting point for reference.

http://rollandburn.com/index.html


Thanks!


Hi everyone, thank-you Zoe for the suggestion to use display: table- 
cell to sort out my squir..ahem, overflow problems. Unfortunately  
this nullifies the margins I have applied to the div that are  
necessary for layout.  Applying padding to compensate won't work in  
this situation because of background colour issues.

This is starting to give me a cramp.  I didn't realize how much  
stress is involved with trying to wrap your head around every nuance  
of css, browser differences, accessibility, usability, appearance,  
and code efficiency all at the same time. Talk about overwhelming.   
I'm not going to revert to using tables and I don't know why.

=]



rollandburn wrote:
  I wonder if someone could slap me with some knowledge and tell if
  there is a way to keep a table from squirting

Eww... please use the word overflow, as that's the CSS term for it and
way less gross than the word squirt. I shiver just thinking about
it... :-)

  outside its containing
  div when the browser window is resized smaller. Or, How do you get a
  div to only shrink to the size of its contents (upon window resize)
  and not further?
 

Set it to display: table-cell, which makes it act like a table cell in
that it will expand to fit its contents. IE doesn't understand this, but
IE expands to fit anyway (not sure about IE7, though, which still will
not support the table display values).

You can also simulate expanding to fit by messing with negative margins.
I've written a few articles on this over at CMX:
http://www.communitymx.com/abstract.cfm?cid=B0029

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu


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

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

2006-09-05 Thread Tony Crockford


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

I did it in a similar way your second option, using PHP to add inline 
CSS to suit widths here:

links not working as it's an old demo...

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

[css-d] Avoiding empty pages in print - any ideas?

2006-09-05 Thread hepabolu

Hello list,

I've created a print.css that does what I want most of the time. 
However, every now and then I end up with empty pages. Does anyone know 
of a trick I could use to loose at least the last empty page? I've 
searched high and low, but I can't find something workable.

Also: could people on OS other than Mac or using another default paper 
size than A4, please let me know if things work out?

on this page it works:
http://www.origami-osn.nl/minori/model2006-08.html

on this page I end up with an empty page at the end:
http://www.origami-osn.nl/minori/model2006-07.html

The first obvious idea to make the image smaller is not an option since 
I might have multiple images.

Thanks.

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

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

Thanks for the example Tony.

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

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

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

Cheers

Richard







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

[css-d] ie7 Suckerfish menu problems?

2006-09-05 Thread D Ross

Anyone else had any problems with the Suckerfish dropdowns in ie7 beta 3?

I'll roll over one link which reveals the drop down list for that link but
when I roll off the link the list doesnt go away. So if I roll over another
link the previous list I had rolled over is still showing. Also, if the list
has a second level it will show the first time I roll over it but if another
link has a second level it doesnt pop out.

Any cures for this?

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

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

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

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

Thanks

Richard

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

[css-d] New IE7 haslayout bug?

2006-09-05 Thread Alastair Campbell

Hi everyone,

A client had a strange behavior in IE7 RC1, where mousing over a link in 
one column moved the right hand column off screen. A fairly obscure one 
this, but at first glance it doesn't seem to equate to a current PIE bug.

I've just cut it down to a test case:
http://alastairc.ac/testing/IE7_bugs/hover_background_haslayout_2.html

(or http://tinyurl.com/oac76 )

The triggers seem to be:
- Negative margin floated layout.
- Position relative on a wrapper.
- A background colour applied to the hover state of a link in a list item.

Could someone check that you get the same result before I dig deeper?

Mousing over the link on the left should cause the content area to move 
to the right. This is closer to the original 3 column page:
http://alastairc.ac/testing/IE7_bugs/hover_background_haslayout.html

Cheers,

-Alastair

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

Re: [css-d] Layout check please- was Table squirting out of DIV

 http://rollandburn.com/index.html

Your test page isn't XHTML 1.0, so you should clean it up first, or
change it to HTML 4.01 and mark it up accordingly.
http://validator.w3.org/check?uri=http://rollandburn.com/index.html
Don't know how your original page is, but the same standard-requirements
should be applied to that too. No IE-version understand XHTML anyway, so
you may as well change it since IE-only is one of _your_ requirements.

Having written that: it shouldn't be much of a problem to clean it up
and  turn it into proper XHTML, that survives if served as
'application/xhtml+xml' if _that_ is a requirement (it is according to
W3C). I just did, and all standard-compliant browsers rendered it
perfectly, but IE/win will of course not play ball. Maybe IE8 will :-)

--

 When scrolling to the right in IE/PC, I notice the footer doesn't 
 stretch along 'x' plane all the way when the table is really wide
 
IE/win lose track of how wide the page really is, and limits the
footer-width to the window-width. It is sometimes a tricky one.

Here is a future-safe hack for IE6 and older versions, which must be
placed - completely with @media rule and all - after all other styles.
Will make IE6 behave - or appear as if it does.

@media screen {
* html #footer {
float: left;
width: 5000%;
margin-right: -4999%;
}
}

I have no idea how IE7 renders that footer, but it won't be disturbed by
the above hack. Neither will any other browser.

 In Firefox PC and Mac i notice at the bottom of the footer a baby 
 blue 1px horizontal line where the background image shows through. It
  comes and goes with keyboard font resizing.

The overprecise calculation in Gecko tends to hit and miss a bit.
The simplest cover-up in your case is to pull up the bottom margin on
the footer.

#footer {margin-bottom: -1px)

...should do.

-

Regarding margins seem to cancel themselves out..., is not so.
The #content {margin-left:12em} is positioning that container so far
from the left edge of #container to make space for navigation. If you
don't need navigation, then you simply change that margin to zero.

Example:

body#with-nav #content {margin-left:12em;}
body#no-nav #content {margin-left:12em;}

...or something like that.


I don't know how many eventualities you have to cover with this layout,
so I can't say if this layout CSS has all the bases covered or not.
Given proper (and clean) markup I can't see any problems with it in any
of my browsers.

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

Re: [css-d] Layout check please- was Table squirting out of DIV

Gunlaug Sørtun wrote:
 http://rollandburn.com/index.html

Correction (of course) :-)

 [...] If you don't need navigation, then you simply change that 
 margin to zero.

Example:

body#with-nav #content {margin-left:12em;}
body#no-nav #content {margin-left:0;}

...is more like it, I think.

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

[css-d] Differences Between Exact Code Sections -- Vertical Menus

2006-09-05 Thread Robert Tilley

In the process of implementing vertical menus, I am drawing the work pure CSS 
menus located at http://meyerweb.com/eric/css/edge/menus/demo.html;.

The web page I'm building and 
testing, http://home.cfl.rr.com/rtgroup/index-tantra13.html;, shows some 
bizarre behavior.  The original menu is located at the top, directly lifted 
from the meyerweb page.  Sub-menus correctly come out to the side of the main 
menu column.

My version of the code, produced by simply copying the code and inserting 
links to my own documents, appears identical to the meyerweb code.  However, 
the submenus drop directly down beneath the parent.  This is baffling!

I am writing this in the hope that someone has time to look at the code of the 
above web page.  If they can then tell me what difference exists between the 
code fragments, one that works and one that does not, I will be forever in 
their debt.

Troubled and confused,
Thanks, Bob
-- 
When choosing between two evils, I always like to take the one I've never
tried before.
-- Mae West, Klondike Annie
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] site check

2006-09-05 Thread Miriam Battersby

I have just relaunched a makeover for this site. 
http://www.cheekyjumpingcastles.com.au/
There are three problems that I can't see round and maybe more that I 
haven't found :-)
1. I can't get the current page to display its link differently.
2. In IE the nav buttons are cut off - see Firefox.
3. In Firefox the interface animation drops down. I would like to 
position it better in IE as well.
Any other comments gratefully accepted!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

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