Re: [css-d] relatively positioned float with background is stuck (IE6)

[Ingo Chao]

francky wrote:
> ...
> In the meantime also an instable illustrating experiment for the 
> IE-documentation ;-) 
> 
>  
> 
> 
> Greetings,
> francky
> 

Argh. The issues (1), (2), (3) are visible in IE7, too.

And the margin calculation depends on the presence or absence of a 
background image? Bizarre.

Thanks for the demo.

Ingo

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

Re: [css-d] relatively positioned float with background is stuck (IE6)

[Ingo Chao]

Gunlaug Sørtun wrote:
> 
> Is it possible that you can use this reduced version in your 'real
> world' layout...
>   ?
> 
> Would save you from having extra divs, and looks rock steady in my IE6.
> 
> regards
> Georg

Thanks Georg and francky!

I am already using left:percentage value to position the columns

http://www.satzansatz.de/cssd/eqhcol.html
css and comments inside.

(Basically, I am combining the footer stick alt with the equal heights 
column approach of One true layout, with the modification that the 
columns' padding excess is running from bottom to top, starting from the 
footer. With this attempt, I can omit the overflow disaster in Gecko's).

The additional margin is a small compensation for rounding errors. This 
effect is stuck in IE<7, depending on the initial window size. After 
resizing the window, the compensation kicks in and there is no gap 
visible anymore in IE between the right and the center column (so far I 
can see).

If anyone has an idea how to make IE behave ... I am stuck.

Ingo

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

Re: [css-d] List Items

[Jukka K. Korpela]

On Tue, 13 Mar 2007, Kenny Graham wrote:

>> How can I modify the amount of space between the bullet in an
>> unordered list and the actual text?
>
> Of course, the most positioning control comes from replacing the
> bullet with a background image.

There are various ways to create bulleted lists in the visual sense, with 
great flexibility, but they are mostly based on methods that turn the list 
into non-bulleted and then add something that looks like a bullet. The 
method using a background image is commonly used, but its drawbacks 
include the loss of anything bullet-like when image display is turned off 
_or_ background images are not used, as is normal in printing.

> But then the bullet doesn't resize
> with the text, which may be an accessibility issue.

A normal bullet created with  by default or by using list-style 
properties in CSS doesn't resize either. This is an odd feature in 
browsers, but nothing in CSS specs says that they _should_ resize.

Using list-style-type: none to suppress normal bullets and
li:before { content: ...; ... } would give flexibility in using 
different characters as bullets, in spacing between bullet and list item 
text, and in bullet resizability. But it's not feasible on web pages, 
since IE does not support generated content.

So the most flexible and robust way, though perhaps awkward and 
theoretically impure, is to use list-style-type: none and bullets included 
in document content and marked up as elements, i.e.
... text

For limited styling ambitions, you could dispense with the  markup, 
using e.g. li:first-letter { padding-left: 0.5em; }

-- 
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/

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

Re: [css-d] Hiding div class in print stylesheet

[Philippe Wittenbergh]

On Mar 14, 2007, at 2:16 PM, Joanne wrote:

> I have a print stylesheet on a site I'm making.
>
> div#footer *{
> display: none;
> }
>
> This hides 
No it doesn't. It hides all the descendants of div#footer. That is  
what the * selector does there.
Depending on the formatting (e.g. padding+ border) applied to that  
div, it will still appear on the page.

> but how would I get it to hide  class="footer"> I tried the following (below) but it didn't work.
>
>
> div.footer *{
> display: none;
> }
>
> &
>
> .footer *{
> display: none;
> }
In both cases, the same thing applies. You are selecting all  
descendants of an element with class footer

What you probably want is
#footer {display:none;}
.footer {display:none;}

Philippe
---
Philippe Wittenbergh





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

Re: [css-d] Hiding div class in print stylesheet

[Daniel Beardsmore]

Joanne wrote:
 > Hi,
 >
 > I have a print stylesheet on a site I'm making.
 >
 > div#footer *{
 > display: none;
 > }
 >
 > This hides  ...

Technically no, it hides all child elements of #footer. For example:

  
  Here is some text
  
  Text inside an inner div
  

Your rule matches all (*) children of that div, i.e. the  and the inner 
. The image will disappear, as will the text inside the inner div (as the 
inner div is also hidden), leaving you with:

  Here is some text

I imagine your div#footer in question was designed such that this just happened 
to remove everything inside it. But the * is not necessary at all. All you need 
is this:

  .footer {
   display: none;
  }
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Hiding div class in print stylesheet

[Joanne]

Hi,

I have a print stylesheet on a site I'm making. 

div#footer *{
display: none;
}

This hides  but how would I get it to hide  I tried the following (below) but it didn't work.


div.footer *{
display: none;
}

& 

.footer *{
display: none;
}

Joanne

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

Re: [css-d] Sidebar Menu Playing Up!

[Richard Brown]

Hi Daniel

On 13/03/07, Daniel Beardsmore <[EMAIL PROTECTED]> wrote:
> > I hope you are all well. I have a slight problem with a menu.
> > 
> > 
> >
> > But as you can see the result is not the same. Any ideas why not please?
>
> Um, you might want to validate the code, mate :P
>
> Where did that  come from? That seems to really confuse Firefox. Remove 
> that
> and the search form does start on a new line as it should.
>
> Also, you have a "" in there, which is what?
Duly validated and yes it is working fine now.

Many thanks.
-- 
Rich
http://www.cregy.co.uk
Embracing what God does for you is the best thing you can do for him.
Romans 12 v 1
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE 6 - Something wrong with my boxes?

[Web Developer]

hmmm anyone know AlphaImageLoader isn't working for him?

I tested the method as well by going to
http://www.satzansatz.de/cssd/tmp/alphatransparency.html
in IE6 and transparency failed on that age in IE<=6.

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

Re: [css-d] relatively positioned float with background is stuck (IE6)

[francky]

Gunlaug Sørtun schreef:
> Ingo Chao wrote:
>
>   
 http://www.satzansatz.de/cssd/prbgbug.html
 
>
>   
>> This fix does solve for the example, probably not for the original 
>> problem, but I will try, thank you very much. It's a column, its
>> height is not easy to determine, and the proposed inner div would
>> have to have the same height ...
>> 
>
>   
>> Another div for all columns just to compensate for a 1 pix rounding 
>> problem ... sigh.
>> 
>
> Is it possible that you can use this reduced version in your 'real
> world' layout...
>   ?
>
> Would save you from having extra divs, and looks rock steady in my IE6.
>
> regards
>   Georg
>   
That's a stable release over here too! :-)
In the meantime also an instable illustrating experiment for the 
IE-documentation ;-) 


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

Re: [css-d] alternating colors of list items in IE

[Corey Frang]

If you can afford a little javascript, jQuery can solve that pretty 
quickly...

$(document).ready(function(){ $("#containAbt .features 
li:even").addClass("even"); });

-or-

$(document).ready(function(){ $("#containAbt .features 
li:even").css({"background-color":"#ebdab3"}); });


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

Re: [css-d] List item markers in different colour using pure CSS?

[Chris Hoffman]

On 3/12/07, Barney Carroll <[EMAIL PROTECTED]> wrote:
> So if I were to have a list of black text with red numeric markers,
> would I be forced to create a span within each li, then set the li's
> colour to red and the span back to black?

Here it is with pure CSS. It works in FF 2 and Opera 9 on Ubuntu, and
presumably on other platforms. A minor, non-standards compliant
browser doesn't work with the style sheet, so we send it something
more palatable via conditional comments.

--Chris

http://www.w3.org/TR/html4/strict.dtd";>



ol {
 counter-reset: list;
 list-style-type: none;
}

li:before {
 content: counter(list) ". ";
 counter-increment: list;
 color: #F00; /* and/or other styling... */
}






foo
bar
baz



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

Re: [css-d] relatively positioned float with background is stuck (IE6)

[Gunlaug Sørtun]

Ingo Chao wrote:

>>> http://www.satzansatz.de/cssd/prbgbug.html

> This fix does solve for the example, probably not for the original 
> problem, but I will try, thank you very much. It's a column, its
> height is not easy to determine, and the proposed inner div would
> have to have the same height ...

> Another div for all columns just to compensate for a 1 pix rounding 
> problem ... sigh.

Is it possible that you can use this reduced version in your 'real
world' layout...
  ?

Would save you from having extra divs, and looks rock steady in my IE6.

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

Re: [css-d] relatively positioned float with background is stuck (IE6)

[Ingo Chao]

francky wrote:
> Ingo Chao wrote:
>> This float is relatively positioned, it has a percentage width, and it 
>> should move to the right due to a left margin.
>>
>> .c {
>> position: relative;   
>> float: left;
>> display: inline;
>> width: 50%;
>> margin-left: 100px;
>> background: gray url(bg.gif) no-repeat 0 0;
>> }
>>
>> 
>> 
>>  
>> 
>> 
>>
>> The problem with IE<7 is that it does not move, initially.
>>
>> http://www.satzansatz.de/cssd/prbgbug.html
>>
>> To make it move, the window has to be resized a little.
>>
>> The bug does not occur if the float has no background image attached.
>>
>> But I need the bg-img, the float, the pos.relative, the margin shift, 
>> the percentage width (and display:inline is added to prevent the 
>> doubled margin bug.)
>>
>> Can anyone help me, point me to a bug description, or to a fix maybe?
>>
>> Thanks,
>>
>> Ingo
>>   
> Hi Ingo,
> Yes, all hasLayout tricks failed; IE is always in for a joke! ;-)
> Seems something like the opposite of the doubled margin bug, or a 
> peekaboo without a link to hover...
> I found as a fix: isolate the problem, i.e. pulling the background out 
> of the class="c" div, and pushing it in an inner div.
> 
>testpage
>
> 
> Hope you can apply this wrapper in your case, and no other IE troubles 
> will appear.

This fix does solve for the example, probably not for the original 
problem, but I will try, thank you very much. It's a column, its height 
is not easy to determine, and the proposed inner div would have to have 
the same height ...

I'm already shifting the column by a .c{left: percentage value} offset. 
The margin for the column is just a small negative backside margin to 
compensate for rounding errors. The stuck and release of the small 
correction was barely visible, but the column started in a dropped 
position, and moved into place after a resize of the window. Took me 
ages to stumble over the cause, the background image.

Another div for all columns just to compensate for a 1 pix rounding 
problem ... sigh.


Ingo

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

Re: [css-d] Sidebar Menu Playing Up!

[Daniel Beardsmore]

Richard Brown wrote:
> Good Morning All
> 
> I hope you are all well. I have a slight problem with a menu.
> 
> 
> 
> I have copied the styling from this site:
> 
> 
> 
> But as you can see the result is not the same. Any ideas why not please?

Um, you might want to validate the code, mate :P

e.g.

  
  http://www.stwinnowceschool.info/";>
  
  
  
  
  

Where did that  come from? That seems to really confuse Firefox. Remove 
that 
and the search form does start on a new line as it should.

Also, you have a "" in there, which is what?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Site Check Please

[Daniel Beardsmore]

Richard Brown wrote:
> Hi All
> 
> I thought I had this site finished but it seems there might be some
> problems with it.
> 
> This is what it should look like:
> 
> 
> Can you tell me if you are seeing this please and if not any ideas why please?

OK, three things:

 must lose the  because this causes IE to expand 
that div to a whole line. Use  instead if you 
find you need a clear, but I don't think you do.

#navMainWrapper needs these lines removing:

  height: 1%;
  width: 100%;

They also cause that div to be the height of one line. Removing these lines, or 
the  alone does not cure it: you must remove the above 
lines AND the . Otherwise, that div becomes a grey block the height of one 
line.

Finally, the image tag in  is broken and leads to an 'x' 
(missing 
image) in IE.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] relatively positioned float with background is stuck (IE6)

[francky]

Ingo Chao wrote:
> This float is relatively positioned, it has a percentage width, and it 
> should move to the right due to a left margin.
>
> .c {
>   position: relative; 
>   float: left;
>   display: inline;
>   width: 50%;
>   margin-left: 100px;
>   background: gray url(bg.gif) no-repeat 0 0;
>   }
>
> 
>   
>    
>   
> 
>
> The problem with IE<7 is that it does not move, initially.
>
> http://www.satzansatz.de/cssd/prbgbug.html
>
> To make it move, the window has to be resized a little.
>
> The bug does not occur if the float has no background image attached.
>
> But I need the bg-img, the float, the pos.relative, the margin shift, 
> the percentage width (and display:inline is added to prevent the doubled 
> margin bug.)
>
> Can anyone help me, point me to a bug description, or to a fix maybe?
>
> Thanks,
>
> Ingo
>   
Hi Ingo,
Yes, all hasLayout tricks failed; IE is always in for a joke! ;-)
Seems something like the opposite of the doubled margin bug, or a 
peekaboo without a link to hover...
I found as a fix: isolate the problem, i.e. pulling the background out 
of the class="c" div, and pushing it in an inner div.

testpage


Hope you can apply this wrapper in your case, and no other IE troubles 
will appear.

Greetings,
francky



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

Re: [css-d] background doesn't fill area & border doesn't show

[PBC Web Design]

At 04:30 PM 3/13/2007, you wrote:
>I'll hit you with a CSS sledgehammer instead :-)
>
>Anyway, if you plug in the additions above, your 
>table-less version will end up looking like this...
>
>...which shouldn't be too far off. Nice flowers.

I'll take the hit in the head, bless you so much 
for helping so quickly.  I'm about totally out of 
a very full head of hair and this project is due 
in a few hours.  I'm going to try your fixes 
right now.  What you made it look like is exactly 
what it's SUPPOSED to look like :) Thanks for the 
compliment - but I can't take credit. The design 
itself was created by another designer, I'm just 
the subcontractor for a few things.  I'll pass it 
along to her, though.  I thought it was real pretty myself.

Ugh .. forgot to change the TO to CSS-D addy - 
anyway - it works and it looks great - THANKS AGAIN!


• ÷÷÷ • ÷÷÷ • ÷ • ÷÷÷ •  •
Deb • Designer @ PBC Web Design • com


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

Re: [css-d] site check: 24-10reading.nl

[Erik Visser]

sorry, this mail was meant to be sent offlist

Erik Visser wrote:
> Daniel Beardsmore wrote:
>   > Hm ... I am no expert, but the design seems simple enough to me that it
>> should reduce in width quite a bit more. 
> 
> agreed
> lots of whitespace everywhere to  reduce
> 
>> I don't know why it stops at ~850px.
>>
> 
> me neither, but i should look into that later.
> 
>> Personally I find the site a tad bit empty, bare ... Like it's missing 
>> something.
>>
> 
> i totally agree, but when a client insiists..
> 
> thanks, Erik
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 

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

Re: [css-d] site check: 24-10reading.nl

[Erik Visser]

Daniel Beardsmore wrote:
  > Hm ... I am no expert, but the design seems simple enough to me that it
> should reduce in width quite a bit more. 

agreed
lots of whitespace everywhere to  reduce

> I don't know why it stops at ~850px.
> 

me neither, but i should look into that later.

> Personally I find the site a tad bit empty, bare ... Like it's missing 
> something.
> 

i totally agree, but when a client insiists..

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

Re: [css-d] site check: 24-10reading.nl A PostScript

[Erik Visser]

Gunlaug Sørtun wrote:
> Erik Visser wrote:
>> Gunlaug Sørtun wrote:
> 
> http://24-10reading.nl/
> 
>>> Too many "back and forth" corrections between browsers for my taste, so
>>> I leave the rest to others.
> 
>> what do you mean exactly with this?
> 
> Only that I personally found it hard to keep track of what was targeting 
> which browser where and in what order. We all have our preferences when 
> it comes to how stylesheets are organized.

ok,  i get it

what i basicly did was:

1. take one true layout [1] as base layout
this provided 1 css file: style.css
all positional css additions are added to style.css

2. for the menu i added Ruthsarian Menus [2] to the layout
this provided a second .css file: menu.css
which contains everything related to the menu

3. then for visual presentation css i added the makeup.css

4. for ie only css: ie.css

So my approach is: take an existing webstandards compliant css layout 
that have proofed itself (till some extend) and take out or add code 
blocks and css (like the ruthsarian menu) to this base layout.

Why did i choose this approach? Since
- i have really limited time
- and i'am not that quick at learning it all by myself

I decided i better use a good base prooven css layout and from there:
- make websites
- read a list like this one
- read some books
- look at tutorials
- etc.

This might be a slow road for really mastering webdevelopment (xhtml / 
css / etc.). But it makes it possible (in the time available to me) to 
better myself while developing websites for customers.

Any thoughts from the "gurus" on this appproach?

Thanks, Erik

[1] http://www.positioniseverything.net/articles/onetruelayout/
[2] http://webhost.bridgew.edu/etribou/layouts/rMenu/index.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background doesn't fill area & border doesn't show

[Gunlaug Sørtun]

PBC Web Design wrote:

> http://www.gentlethreads.com.au/master.html (still in tables)
> 
> http://www.gentlethreads.com.au/test.html (tableless version)

> I'm trying to take link 1 above and make it 
> tableless (link 2).  My problems are:
> 
> 1)

#leftcolumn, #middlecolumn, #rightcolumn {padding-bottom: 1px; 
margin-bottom: -1px;}
#content {overflow: hidden;}
* html #content {overflow: visible;}

> 2)

#rightcolumn {text-align: center;}
#rightcolumn img {vertical-align: bottom;}

> These are the last glitches to work out before 
> one or the other can become a template for the 
> rest of the site.  At this point I'm so sick of 
> trying to figure this out that I don't think I 
> care if I have to use tables as long as it 
> works!  Please use small bullets if you want to 
> shoot me for saying that. I need to have this done tonight!

I'll hit you with a CSS sledgehammer instead :-)

Anyway, if you plug in the additions above, your table-less version will 
end up looking like this...

...which shouldn't be too far off. Nice flowers.

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

Re: [css-d] site check: 24-10reading.nl

[Erik Visser]

bill scheider wrote:
> I really like the design of the site; it has a nice, open feel that I like.

That's exactly what my cliennt was after. But it takes a lot of space as 
you noticed.

> The same as David noted, in IE6 on xp on my machine, the left side logo
> starts to disappear at text-size 'large'. At text-size 'largest', the logo
> is gone and much of the information (on the home page, at least) also falls
> off the left side and, again as David said, is irretrievable. Screenshot on
> ie6 at text largest:
> http://first-encounter-design.dreamhosters.com/imgs/24-10.jpg 
> 

I primarily develop with firefox on linux and mac. So i have to dig into 
that one. And i guess it is something that should be taken care of, 
isn't it?

(to be honest, I thought IE 6 wasn't able to zoom
so i never tested for it
stupid eh?)

> I'd also like to echo what Daniel said about window size. I'm not as averse
> to a horizontal scrollbar as David is but I sometimes think they're an
> inconvenience that I can minimize with a little foresight. When designing a
> site that can be scaled, I design so I won't get a horizontal scrollbar at
> about 800px wide at medium text in IE

David already mentioned the same; thus 800px is a generally accepted 
rule (of the thumb?) for width without scrolling?

> and then, if possible, try to not have
> critical content, i.e., navigation, primary text, fall off if the text is
> zoomed to large. 

That's one of the reasons the home disappeared from the menu bar.

> 
> One other comment I have about your site: I know it's a convention, but it
> took me a bit to realize that the way back to the home page was through the
> link on the logo. A home navigation button would have helped.
> 

And there quite a couple of places with the link:

- terug naar reading Utrecht -

Which is the  same  as "home" but then i a  sentence of the Dutch language.

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

Re: [css-d] site check: 24-10reading.nl A PostScript

[Gunlaug Sørtun]

Erik Visser wrote:
> Gunlaug Sørtun wrote:

http://24-10reading.nl/

>>Too many "back and forth" corrections between browsers for my taste, so
>>I leave the rest to others.

> what do you mean exactly with this?

Only that I personally found it hard to keep track of what was targeting 
which browser where and in what order. We all have our preferences when 
it comes to how stylesheets are organized.

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

Re: [css-d] List Items

[Kenny Graham]

> How can I modify the amount of space between the bullet in an
> unordered list and the actual text?

Of course, the most positioning control comes from replacing the
bullet with a background image. But then the bullet doesn't resize
with the text, which may be an accessibility issue.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] site check: 24-10reading.nl

[Erik Visser]

Daniel Beardsmore wrote:
> ~davidLaakso wrote:
>> However, with both of your sites (and this is a personal opinion that is 
>> not shared by all on this or any other list), I find sites that require 
>> both horizontal and vertical scrolling when the fonts are scaled to be 
>> bothersome.
> 
> Not just font size but window size. I think every relatively interesting 
> design 
> will have its limits as to how small the window can go before the design 
> breaks up.
> 
> Personally I aim to make sure anything I do works on 800x600, but for 
> everyone 
> this will vary.
> 
> Erik, the site you highlighted will go down to about 850px (in Firefox 2) 
> before 
> the first link in the navigation bar starts to go off the side of the window. 
> I 
> don't think that anything in the design requires a window this wide.
> 
> Everyone's needs vary, but 850px width for such a simple design worries me 
> personally.

I agree with you Daniel. In this case it was the client that came up 
with the basic design. And initially it had even more white space. My 
client said he likes space and designs with lots of room. I don't know 
if i can translate this in understandable English, but he said:
I want to create a certain image. And create a certain athmosphere.

And thus i told him that in most cases (if not an art work) the primary 
  goal of a website is to provide information to the visitor. And 
preferable in way so that the visitor can take that info as easy as 
possible. And that scrolling is very irritating to a lot of people.

So at first i made a small version of his design. But he did not like 
it. It was not breathing the right athmosphere he said. So i expanded 
the design again until he was satisfied.

What can you do if a customer insists?

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

Re: [css-d] Opera border bug

[Gunlaug Sørtun]

francky wrote:

> Molly the Cat will like it: Opera ahead for the future! ;-)

She loves it!!!
She is also quite used to seeing Opera in that position ;-)

> btw: maybe next question for w3c: [css2 doesn't say what is the
> definition of a 'dot' - should we allow UA's to have their own
> definition like now (FF and Opera: a dot is a square dot; IE: a dot
> is a round dot) ?] screenshot 
> 
>  :-)

Haven't they added a 'custom dot' in CSS3..? If not, then we have to
demand one. I want mine left-angled ... or maybe diamond-shaped.
Oh, well, the 'border-image'[1] property should do.

Georg

[1]http://www.w3.org/TR/css3-background/#the-border-image
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] background doesn't fill area & border doesn't show

[PBC Web Design]

Hi,

Here are the two page links:

http://www.gentlethreads.com.au/master.html (still in tables)

http://www.gentlethreads.com.au/test.html (tableless version)

CSS:

http://www.gentlethreads.com.au/gentlethreads.css

I'm trying to take link 1 above and make it 
tableless (link 2).  My problems are:

1) The background image on the left and right 
sides of the tabled version do not fill the 
cell/div in FF but do in IE.  In the tableless 
version the background doesn't go all the way to 
the bottom in either browser version.

2) There is supposed to be a 3-sided 1px green 
border around the white box below the image 
button in the right cell/div and the white box 
should be aligned centered under the image.  In 
the tabled version/FF 
http://www.gentlethreads.com.au/master.html the 
border is there both are correct but IE6 the 
border doesn't show up.  In the tableless 
version: 
http://www.gentlethreads.com.au/test.html the 
border is there in both browsers but the alignment is off.

These are the last glitches to work out before 
one or the other can become a template for the 
rest of the site.  At this point I'm so sick of 
trying to figure this out that I don't think I 
care if I have to use tables as long as it 
works!  Please use small bullets if you want to 
shoot me for saying that. I need to have this done tonight!

Your help is greatly appreciated.

• ÷÷÷ • ÷÷÷ • ÷ • ÷÷÷ •  •
Deb • Designer @ PBC Web Design • com


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

Re: [css-d] List Items

[francky]

Gunlaug Sørtun schreef:
> Ledvina, Barbara [ED] wrote:
>   
>> How can I modify the amount of space between the bullet in an 
>> unordered list and the actual text?
>> 
>
> Set suitable paddings on the ul and the li...
> 
>
> regards
>   Georg
>   
Ah, too late to send. Well, then more of the same 


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

Re: [css-d] site check: 24-10reading.nl

[Erik Visser]

~davidLaakso wrote:
> Erik Visser wrote:
>> A site check please for anoter site i recently finished:
>> http://24-10reading.nl/
>>
>> Any remarks, also on the design are very welcome.
>>
>> Thanks, Erik Visser
>>   
> 
> She did well on my end (xp) in ie/7., opera/9.1, and ff (version 
> whatever it is). In  ie/6.0 at /text-size largest/, the vertical logo 
> disappears and there is no horizontal scroll-bar with which to retrieve it.
> See screen shot: .
> 

i will loook into that one.
any idea  on why the scrolllbar doesn't appear?
(or maybe better: why the left side is chopped off?)

> 
> However, with both of your sites (and this is a personal opinion that is 
> not shared by all on this or any other list), I find sites that require 
> both horizontal and vertical scrolling when the fonts are scaled to be 
> bothersome.
> 

Ok, vertical scrolling is hard to avoid. That is, when the amount of 
content rises. With all designs there comes a point where you can't keep 
the content in the browser window. Isn't it?

Then the horizontal scrolling. While keeping the same design, this 
horizontal scrollbar can only be avoided by not using a min-width. Isn't it?
Then it comes up to the design how it keeps up without min-width.

Especially the 24-10reading client could not accept the horizontal menu 
wrapping over 2 lines on smaller browser windows / bigger font sizes.

So withouut brekaing the  design with a horizontal menu bar there isn't 
a way to avoid this horizontal scrollbar. Or...?

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

[css-d] relatively positioned float with background is stuck (IE6)

[Ingo Chao]

This float is relatively positioned, it has a percentage width, and it 
should move to the right due to a left margin.

.c {
position: relative; 
float: left;
display: inline;
width: 50%;
margin-left: 100px;
background: gray url(bg.gif) no-repeat 0 0;
}



 



The problem with IE<7 is that it does not move, initially.

http://www.satzansatz.de/cssd/prbgbug.html

To make it move, the window has to be resized a little.

The bug does not occur if the float has no background image attached.

But I need the bg-img, the float, the pos.relative, the margin shift, 
the percentage width (and display:inline is added to prevent the doubled 
margin bug.)

Can anyone help me, point me to a bug description, or to a fix maybe?

Thanks,

Ingo
-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] UL margins

[Gunlaug Sørtun]

Travis Killen wrote:
> Please help me figure out why there is extra space to the left of my
>  menu list in FireFox. Displays correctly in IE7.  Thank you.
> 
> http://bananaboxes.net

Declare 'padding: 0;' on ul.

Firefox has default paddings on lists, and so have most other non-IE
browsers.

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

Re: [css-d] List Items

[Gunlaug Sørtun]

Ledvina, Barbara [ED] wrote:
> How can I modify the amount of space between the bullet in an 
> unordered list and the actual text?

Set suitable paddings on the ul and the li...


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

Re: [css-d] alternating colors of list items in IE

[Jukka K. Korpela]

On Tue, 13 Mar 2007, David Agnew wrote:

> #containAbt .features li {
>  background-color: #F7EFD5;
> }
> /* darker shades for alternate li's */
> #containAbt .features li+li, #containAbt .features li+li+li+li,
> #containAbt .features li+li+li+li+li+li, #containAbt .features
> li+li+li+li+li+li+li+li{
>background-color: #ebdab3;
> }
>
> the first list item gets the lighter color, and ALL OF THE REST get the
> darker shade

That's because e.g. the third list item also matches a selector like 
li+li. It is a li element that follows a li element. Using contextual 
selectors like li:first-child+li you could make the rule apply to even 
items only, but I'd say it really gets more confusing than the use of 
class attributes (even though it would be cleaner in principle to handle 
this purely inside CSS, without "polluting" the markup with class 
attributes that have no logical meaning).


-- 
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/

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

Re: [css-d] site check: 24-10reading.nl A PostScript

[Erik Visser]

Gunlaug Sørtun wrote:
>>> http://24-10reading.nl/
> 
> Too many "back and forth" corrections between browsers for my taste, so
> I leave the rest to others.
> 

Georg,

what do you mean exactly with this?

Erik

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

[css-d] UL margins

[Travis Killen]

Please help me figure out why there is extra space to the left of my 
menu list in FireFox. Displays correctly in IE7.  Thank you.

http://bananaboxes.net

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

Re: [css-d] alternating colors of list items in IE

[David Agnew]

Jason Herber appears to have written the following on 3/13/07 2:18 PM:
> I'm sorry I don't have an answer to your question, but I wanted to 
> point out that
>
> #containAbt .features li {
>   background-color: #F7EFD5;
> }
>
> is all you need for that first style.  It'll set the color for all li 
> elements, then your second style re-colors the even ones for you.

Thanks fo the reply, Jason.

I agree that that's how it would seem. But in my testing with FF2 Mac, 
when I use this CSS:

#containAbt .features li {
  background-color: #F7EFD5;
}
/* darker shades for alternate li's */
#containAbt .features li+li, #containAbt .features li+li+li+li, 
#containAbt .features li+li+li+li+li+li, #containAbt .features 
li+li+li+li+li+li+li+li{
background-color: #ebdab3;
}

the first list item gets the lighter color, and ALL OF THE REST get the 
darker shade

but if I use the following CSS, all is well. Makes no sense to me, but 
it works.

#containAbt .features li, #containAbt .features li+li+li, #containAbt 
.features li+li+li+li+li, #containAbt .features li+li+li+li+li+li+li, 
#containAbt .features li+li+li+li+li+li+li+li+li {
  background-color: #F7EFD5;
}
/* darker shades for alternate li's */
#containAbt .features li+li, #containAbt .features li+li+li+li, 
#containAbt .features li+li+li+li+li+li, #containAbt .features 
li+li+li+li+li+li+li+li{
background-color: #ebdab3;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Opera border bug

[francky]

Gunlaug Sørtun wrote:
> Philippe Wittenbergh wrote:
>   
>> Gah, I missed one sentence there
>> 
>> '[Border-width doesn't allow percentages in CSS2; should we allow  
>> percentages (of the containing block's width) in CSS3?]'
>> 
>> Written in red, guess that is why I couldn't see it. :p
>> 
>
> Probably :-)
>
> So, it looks like Opera treats that percentage-width border in 
> accordance with the not yet recommended CSS3.
> We at least can't call it an Opera bug then, but rather wait till other 
> browsers either pick up on it or W3C change that part in CSS3.
>
>   Georg
>   
According to this, and for the time being, the css-validator with option 
css3 is saying "yes" to the question:

'[... should we allow percentages (of the containing block's width)
in CSS3?]'

w3c css-3 validating of testpage 


Molly the Cat will like it: Opera ahead for the future! ;-)
francky

btw: maybe next question for w3c:
[css2 doesn't say what is the definition of a 'dot' - should we allow 
UA's to have their own definition like now (FF and Opera: a dot is a 
square dot; IE: a dot is a round dot) ?] screenshot 
 
:-)


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

Re: [css-d] clearing only a nested float

[martin f krafft]

also sprach martin f krafft <[EMAIL PROTECTED]> [2007.03.13.2110 +0100]:
>   http://martin-krafft.net/new/ [valid]
>   CSS: http://martin-krafft.net/new/css/base.css [valid]

Never mind that IE* barfs on the page big time. I am just doing some
design studies right now and will probably simplify the layout by
much later.

-- 
martin;  (greetings from the heart of the sun.)
  \ echo mailto: !#^."<*>"|tr "<*> mailto:"; [EMAIL PROTECTED]
 
spamtraps: [EMAIL PROTECTED]
 
"the less you know about computers the more you want micro$oft!"
-- micro$oft ad campaign, circa 1996
(proof that micro$oft's advertising _isn't_ dishonest!)


signature.asc
Description: Digital signature (GPG/PGP)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE display problems

[~davidLaakso]

Phil Turner wrote:
> Hi
> Please can someone help me sort out the Internet Explorer
> problems.
> A couple of alignment issues in the header and fonts not displaying  
> in bold
>
> http://www.philturner-uk.com/kruger/
>
> Thanks
>
>
> Kind Regards
>
> Phil Turner
>
>   
The page is not contained within its wrapper (all browsers). I think 
someone offered one method for correcting the page cross-browser (and 
the font issue) yesterday.

Best,

~dL

-- 
http://chelseacreekstudio.com/

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

[css-d] clearing only a nested float

[martin f krafft]

Hi there,

I am trying to clear after a right-float inside a  which has
something floating to it's right too. E.g.:

  
  

Some text
  

1 floats to the right of 2, and 2.1 should align with the right
border of 2, so I floated it right. This works, even if 2.1 has
nothing to float right against.

The problem is when I try to add the , since it will appear left
of 2.1. However, I want it to appear *below*. But if I set
clear:right on the , it also clears the right wrt 1 and thus 
will appear at the very bottom of the page, below the content of
1 (but inside 2).

Example page:

  http://martin-krafft.net/new/ [valid]
  CSS: http://martin-krafft.net/new/css/base.css [valid]

How can I achieve what I want, without assuming the height of the
 (and ideally without hardcoding a width)?

I tried making the  (2.1) inline and text-aligning it right, but
that does not work either. And neither does
position:relative;right:0

-- 
martin;  (greetings from the heart of the sun.)
  \ echo mailto: !#^."<*>"|tr "<*> mailto:"; [EMAIL PROTECTED]
 
spamtraps: [EMAIL PROTECTED]
 
"whoever fights monsters should see to it that in the process he does
 not become a monster. and when you look into an abyss, the abyss also
 looks into you."
 - friedrich nietzsche


signature.asc
Description: Digital signature (GPG/PGP)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] files structure opinion

[Phillip Cavaco]

Hi
I would like to know the opinions from CSS coders about website file
structure.
How do you organize your files? Advantages and disadvantaged?

My approach:
/images/
/tools/
/css/
/css/main.css
/css/menu_item_1.css
/css/menu_item_2.css
...
/css/menu_item_N.css
/menu_item_1/index.php
/menu_item_2/index.php
...
/menu_item_N/index.php
/index.php
/header.php
/footer.php


   - main.css for global specifications;
   - css file for each page;
   - every page include the header.php,footer.php,i.e.,fixed elements

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

Re: [css-d] IE 6 - Something wrong with my boxes?

[Corey Frang]

Interesting...

Played with your suggestions, got #leftpage positioned 40px left of 
where it was and added a 40px padding-left, still seems to hold up in 
IE.  I'm well aware of the font-size issue and everything overflowing, 
the graphic designer on the project doesn't want to spend the time to 
cut up the graphics just yet.  For now, we will hope that our users 
aren't font-size 150% :)

Also, I've heard of the pngfix.js way of fixing PNG  in  tags, is 
there a hack for ie6 for PNG's in the background-image property?


Web Developer wrote:
> Looks like those negative margins are getting cutoff. like set
> margin-left to 0px instead of -30px. Not sure why they are getting
> cutoff though.
> Ari
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>   

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

[css-d] IE display problems

[Phil Turner]

Hi
Please can someone help me sort out the Internet Explorer
problems.
A couple of alignment issues in the header and fonts not displaying  
in bold

http://www.philturner-uk.com/kruger/

Thanks


Kind Regards

Phil Turner
FREELANCE CREATIVE
TEL: 0161 439 1669
Chartered Graphic Designer MCSD  BA Hons
[EMAIL PROTECTED]
http://www.philturner-uk.com
HELP SAVE THE PLANET
http://www.yourplanetneedsyou.org


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

Re: [css-d] List Items

[Daniel Beardsmore]

Ledvina, Barbara [ED] wrote:
> How can I modify the amount of space between the bullet in an unordered list 
> and the actual text?

Which way?

Officially, it's impossible. All such joy was ripped out of CSS2 and stamped on 
by the W3C.

Since list items are block-level elements, you could try placing another block 
inside each one, and use their margins to affect the spacing, like:

  li div { margin-left: 1em }

  
   Here is some text
  

Adding more space is fine. Removing space (negative margins) is troublesome as 
you don't actually know how much space is there (since it's not defined and not 
controllable) and you might overrun the bullet.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] List Items

[Ledvina, Barbara [ED]]

How can I modify the amount of space between the bullet in an unordered list 
and the actual text?

Barb
[EMAIL PROTECTED] 
515-242-5036 


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

Re: [css-d] alternating colors of list items in IE

[Jukka K. Korpela]

On Tue, 13 Mar 2007, David Agnew wrote:

> I use a list within div.features to display featured links. To make it
> easier to read, the background color of alternate list items is a
> different shade

That's similar to alternating backgrounds for table rows, a frequently 
deployed idea. Unfortunately it requires - in both cases - either extra 
class markup or long selectors, and the latter method doesn't work on IE 6 
and older.

> This method works in most browsers including MSIE 7 & 5, but MSIE 6 and
> 5.5 completely ignore the list item background-color(s).

I'm afraid I don't quite see what's happening MSIE 5, 5.5., and 6 surely 
don't support selectors like "li + li", but they all let you set a 
background color for an li element.

>  /* use container wrapper colors for 1st, 3rd, 5th, etc li's */
> #containAbt .features li, #containAbt .features li+li+li, #containAbt
> .features li+li+li+li+li, #containAbt .features li+li+li+li+li+li+li,
> #containAbt .features li+li+li+li+li+li+li+li+li {
>  background-color: #F7EFD5;
> }

That's flexible in a sense, but won't work on IE 6 or earlier due to lack 
of support to "+" in selectors, and it gets somewhat awkward.

I'd suggest the simpler approach of assigning a class, say class="e", to 
the 2nd, 4th, 6th, etc. (i.e., even-numbered) list items and using a 
selector like
.features li
to cover all list items (effective making the settings you want for "odd" 
items) and then
.features li.e
to cover the "even" items. This is boring but gives much better browser 
coverage and avoids the problem of (mis)counting in li+li+li+...

-- 
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/

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

[css-d] alternating colors of list items in IE

[David Agnew]

I use a list within div.features to display featured links. To make it 
easier to read, the background color of alternate list items is a 
different shade (these colors vary depending upon the color of the page 
wrapper - e.g. containAbt - but that's irrelevant to this post).

This method works in most browsers including MSIE 7 & 5, but MSIE 6 and 
5.5 completely ignore the list item background-color(s). See 
http://browsershots.org/screenshots/d9ed6fa974ff8ea1ce1b47ab530ddc5d/

Any suggestions on getting IE 5.5 & 6 to color the list items (even if I 
abandon the alternating scheme for those browsers)?

The relevant CSS (rules without color info omitted for clarity):

#containAbt .features {
  background-color: #e4a849;
}
.features {
border: 2px solid #540b13;
background-color: #e4a849;
width: 80%;
text-align: center;
}
.features li {
list-style-image: none;
list-style-type: none;
border: 1px solid #540b13;
color: #333;
padding: 1px 2%; /* all hail Gunlaug! */
margin: 2px 0;
}

  /* use container wrapper colors for 1st, 3rd, 5th, etc li's */
#containAbt .features li, #containAbt .features li+li+li, #containAbt 
.features li+li+li+li+li, #containAbt .features li+li+li+li+li+li+li, 
#containAbt .features li+li+li+li+li+li+li+li+li {
  background-color: #F7EFD5;
}
  /* use darker shades for remaining li's */
#containAbt .features li+li, #containAbt .features li+li+li+li, 
#containAbt .features li+li+li+li+li+li, #containAbt .features 
li+li+li+li+li+li+li+li{
background-color: #ebdab3;

Thanks in advance!
David

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

Re: [css-d] centering list items within a div

[David Agnew]

Georg, you are awesome!
This is beautiful. Thank you.


Gunlaug Sørtun appears to have written the following on 3/13/07 12:26 PM:
> David Agnew wrote:
>> I'm having trouble centering list items within a div. I'm using % for
>>  width (fluid layout), and I don't mind if it's off by a pixel one 
>> way or another, but as the window narrows, the right margin for the 
>> list items shrinks far more than the left. This problem is in 
>> Firefox, I'm guessing it affects other browsers.
>
> You have a mix of pixel-paddings and percentage-width. Since paddings
> and borders are added to width - that's how the box-model works, your
> values will only add up on a single, ideal, width and can't take
> width-changes.
>
>> http://www.lighthouse.chtr.k12.ma.us/index.php
>
> Suggest you change to this...
>
> .features ul {
> padding: 0;
> margin: 0 4%;
> }
> .features li {
> list-style-type: none;
> border: 1px solid #540b13;
> color: #333;
> padding: 1px 2%;
> margin: 2px 0;
> }
>
> ...for perfect symmetry regardless of window-width.
>
> The "trick" is to only declare margins and paddings _here_ - in
> percentages or whatever, and leave the width-calculations to the
> browsers. Browsers are good at calculating the default (width: auto), so
> they should at worst get it 1px wrong.
>
> Don't worry - it is tested :-)
>
> regards
> Georg

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

Re: [css-d] centering list items within a div

[Gunlaug Sørtun]

David Agnew wrote:
> I'm having trouble centering list items within a div. I'm using % for
>  width (fluid layout), and I don't mind if it's off by a pixel one 
> way or another, but as the window narrows, the right margin for the 
> list items shrinks far more than the left. This problem is in 
> Firefox, I'm guessing it affects other browsers.

You have a mix of pixel-paddings and percentage-width. Since paddings
and borders are added to width - that's how the box-model works, your
values will only add up on a single, ideal, width and can't take
width-changes.

> http://www.lighthouse.chtr.k12.ma.us/index.php

Suggest you change to this...

.features ul {
padding: 0;
margin: 0 4%;
}
.features li {
list-style-type: none;
border: 1px solid #540b13;
color: #333;
padding: 1px 2%;
margin: 2px 0;
}

...for perfect symmetry regardless of window-width.

The "trick" is to only declare margins and paddings _here_ - in
percentages or whatever, and leave the width-calculations to the
browsers. Browsers are good at calculating the default (width: auto), so
they should at worst get it 1px wrong.

Don't worry - it is tested :-)

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

[css-d] Further Testing: position: fixed, transparency, and site performance

[Matthew Bernhardt]

Hello again,
   I've had a few days to play around some options regarding the scroll  
speed of a website redesign I'm working on, and wanted to post some  
findings.
   The story so far: the site design has 4 main elements: a university  
toolbar, a navigation menu, the page contents, and a background image. 3  
of the 4 elements were placed using "position: fixed;" with only the  
content scrolling. The contents and menu were 10% translucent, and  
elements overlapped on the screen for aesthetic effect.
   The problem: on older computers (i.e. my 5-year-old Toshiba Portege  
tablet), using browsers such as Netscape 8 or Opera 9, the site scrolls so  
slowly as to be unuable. So I'm looking for ways to have that not be the  
case.
   What I've done: This link shows the original condition (article picked  
because it's a long page with form elements, which seems to be a hard  
thing to scroll smoothly)

http://benedikt.knowlton.ohio-state.edu/default.asp?content=59

I created a series of pages that begin with only the content block, and  
slowly adds elements back into the mix to see when the slowdown starts  
happening. All tests were performed on the aforementioned Toshiba tablet  
PC, Windows XP Tablet PC Edition, connecting via Verizon's EVDO card,  
browsing in Opera 9.10.

Minimal condition:
Step 1 -  
http://benedikt.knowlton.ohio-state.edu/default-fast1.asp?content=59
This page deleted the background image  entirely, and emptied the  
university toolbar and navigation elements (but left the empty 's in  
place). The content block is the only  remaining in its original  
condition, and it has been set to fully opaque. Not surprisingly, this  
page scrolls immediately.

University toolbar:
Step 2 -  
http://benedikt.knowlton.ohio-state.edu/default-fast2.asp?content=59
This page adds the university toolbar. The site slows down -slightly-, but  
is still acceptable IMO.

Step 2a -  
http://benedikt.knowlton.ohio-state.edu/default-fast2a.asp?content=59
This page swaps the CSS styling on the toolbar to "position: absolute;" to  
allow the toolbar to scroll with the content. Scroll speed seems to  
improve to the same as from step 1. Design-wise, I'm happy losing the  
university toolbar if it means the site scrolls faster.

Minor adjustment:
Step 3a -  
http://benedikt.knowlton.ohio-state.edu/default-fast3a.asp?content=59
This page adds in some source code that shouldn't make it to the rendered  
page - essentially taking care of special content cases that exist  
elsewhere on the site. No change in scroll speed is noted.

Menu div:
Step 4a -  
http://benedikt.knowlton.ohio-state.edu/default-fast4a.asp?content=59
Here things get interesting. This page adds an h2 element to the menu  
, but not the actual navigation menu itself. The h2 is styled via the  
"hideme" class to get the label off the screen, but still visible to  
screen readers like JAWS. With only this label in the menu div, the site  
does start scrolling more slowly. It's still acceptable, but ominous that  
just adding text to this div causes such a slowdown.

Step 4b -  
http://benedikt.knowlton.ohio-state.edu/default-fast4b.asp?content=59
The first appearance of the menu items themselves, and things get really  
ugly. Scroll performance drops so much as to become (IMO) unusable. The  
menu in this page is an old-school images with JS rollovers affair - which  
may have something to do with the problem...I think. I did, however, bump  
the content to the right on this and subsequent pages so that the content  
doesn't slide over the menu, so there's no overlap.

Step 4c -  
http://benedikt.knowlton.ohio-state.edu/default-fast4c.asp?content=59
This swaps to a more modern CSS-styled-text menu. While the CSS needs to  
be tweaked (the words in the menu seem to get cropped), I believe  
everything should pass the validators. Unfortunately, this doesn't result  
in any speed improvement - things on this page are as slow as they were in  
version 4b above. So, it doesn't appear that the -images- in the menu are  
the cause of the problem; which makes a certain sense given the  
degradation when I put just the  element into this .

Step 4d -  
http://benedikt.knowlton.ohio-state.edu/default-fast4d.asp?content=59
This page is identical to version 4b above (old school image/rollover  
menu), but with the overlap between content and menu restored. There is  
still no translucency on the content. The scroll speed between versions 4b  
and 4d seems to be roughly the same - both unacceptable, but the overlap  
doesn't seem to slow things down much.

Step 4e -  
http://benedikt.knowlton.ohio-state.edu/default-fast4e.asp?content=59
Working from version 4d above, this re-introduces the translucency from  
the original condition. Scroll speeds decrease yet again (I'd describe  
this speed as "glacial" personally). So the overlapping translucency is  
definitely a complicating factor.

Step 4f -  
http://benedikt.knowlton.ohio-state.edu/default-fast4f.asp?

[css-d] centering list items within a div

[David Agnew]

Greetings -

Many thanks to Gunlaug for providing some @media screen {* html} rules 
to make my sit far more compatible with IE! Now that (most of) the most 
severe problems are fixed...

I'm having trouble centering list items within a div. I'm using % for 
width (fluid layout), and I don't mind if it's off by a pixel one way or 
another, but as the window narrows, the right margin for the list items 
shrinks far more than the left. This problem is in Firefox, I'm guessing 
it affects other browsers.

I've had uglier problems, but this puzzles me, and any ideas would be 
most welcome! 

- David


The list is the box at the right at: 
http://www.lighthouse.chtr.k12.ma.us/index.php

And the relevant CSS is here:

.features {
border: 2px solid #540b13;
background-color: #e4a849;
width: 80%;
text-align: center;
}
.features ul {
padding: 0;
margin: 0 auto;
width: 94%; /* set by text width if not defined */
}
.features li {
list-style-image: none;
list-style-type: none;
border: 1px solid #540b13;
color: #333;
padding: 1px 5px;
margin: 2px auto;
width: 96%; /* funky asymetry at smaller sizes */
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Validation error

[Phil Turner]

Thanks for the help guys - my first site validated :-)
now I've got to finish it  :-0today!

Kind Regards

Phil Turner
FREELANCE CREATIVE
TEL: 0161 439 1669
Chartered Graphic Designer MCSD  BA Hons
[EMAIL PROTECTED]
http://www.philturner-uk.com
HELP SAVE THE PLANET - SEE MY NEW BOOK
http://www.yourplanetneedsyou.org
A MILLION VOICES WANTED TO SAVE THE PLANET


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

Re: [css-d] Validation error

[~davidLaakso]

Phil Turner wrote:
> I'm trying to validate the css, its passed the XHTML validation
> but I'm getting this error on the css and not sure what to do as its  
> part of the links in the footer
>
> http://www.philturner-uk.com/kruger/
>
>
> Phil Turner
>
>   
Back-up the html  file. Run it through Tidy Online 
. Tidy will find and fix it.

Whether you want to correct for ie/6.0 is up to you and your client. 
Same for user discretion in IE and the Gecko's.
See screen shots:






Regards,

~dL

-- 
http://chelseacreekstudio.com/

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

Re: [css-d] increase text size

[Sandy]

hi Kieron

> Could I suggest that you make all the text of your site scalable using
> em/percentages
well, that's what I am doing - this is very much in progress, but for now

http://balancetoronto.org/test/balance07.html
http://balancetoronto.org/test/js_css/balance07.css

> and inform the client that all modern browsers have a built
> in text-resizing facility or a zoom function.
they know! They want a belt and suspenders approach. I really have tried 
talking them out of this!

> If they want to empower the
> user, they could include a page on accessibility that describes how to
> access the tool using key-strokes etc.
this is what I am thinking to do - to see if the client will agree to 
have those links go to a page that explains how to use various browser 
to increase text size.

thanks for your input!
Sandy
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Validation error

[Bjoern Hoehrmann]

* Phil Turner wrote:
>I'm trying to validate the css, its passed the XHTML validation
>but I'm getting this error on the css and not sure what to do as its  
>part of the links in the footer
>
>http://www.philturner-uk.com/kruger/
>
>Please, validate your XML document first!
>Line 78
>Column 90
>Element type "a" must be followed by either attribute specifications,  
>">" or "/>".

See .
-- 
Björn Höhrmann · mailto:[EMAIL PROTECTED] · http://bjoern.hoehrmann.de
Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de
68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/ 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE 6 - Something wrong with my boxes?

[Gunlaug Sørtun]

Corey Frang wrote:

> http://www.talentofrockford.com/

Something is definitely wrong with your boxes - they don't hold their
content properly in place in such a layout.

Basically: the use of absolute positioning to place big chunks of text
on top of fixed-sized graphics, is not a recommended method. There's no
relationship between the background and the absolute positioned
elements, and font-size is not a "fixed size" in any browser.

So, before you try to make that layout work, you should give it a font
resizing to at least 200% in Firefox, and see how bad it gets.

Recommend you ditch the A:P method, and apply a method based of floats
and flexible backgrounds instead.

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

Re: [css-d] IE 6 - Something wrong with my boxes?

[Web Developer]

Temp solution might be just to set margins on #leftpage
p{margin-left:20px;} and none on headings and make left property on
#leftpage smaller value = same as negative margins
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Validation error

[Phil Turner]

Hi everyone
I'm trying to validate the css, its passed the XHTML validation
but I'm getting this error on the css and not sure what to do as its  
part of the links in the footer

http://www.philturner-uk.com/kruger/

Please, validate your XML document first!
Line 78
Column 90
Element type "a" must be followed by either attribute specifications,  
">" or "/>".

Kind Regards

Phil Turner
FREELANCE CREATIVE
TEL: 0161 439 1669
Chartered Graphic Designer MCSD  BA Hons
[EMAIL PROTECTED]
http://www.philturner-uk.com
YOUR PLANET NEEDS YOU
http://www.yourplanetneedsyou.org

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

Re: [css-d] IE 6 - Something wrong with my boxes?

[Web Developer]

Looks like those negative margins are getting cutoff. like set
margin-left to 0px instead of -30px. Not sure why they are getting
cutoff though.
Ari
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How do I force opposed floats (left and right) to "bottom align".

[Gunlaug Sørtun]

j t wrote:
> I still wonder, however, whether it's possible to do some kind of 
> bottom alignment when they're both floats, because then I'm 
> guaranteed that the two boxes will never overlap.

You can't bottom-align floats reliable.

The way I usually solve this is to declare a margin-right on the float,
so it can't go into the space occupied by the absolute positioned element.
Same example with suitable addition...


The exact width (value and unit) of such a margin depends on
design-decisions, as it is possible to affect the absolute positioned
element's width and make it adjust to its environment (its parent).
This will indirectly make these two elements adjust to each other, 
giving you a near perfect visual illusion until the window gets really 
narrow or the text is made really large.
A bit more manipulation of those width and size relations, and it may 
become almost unbreakable.

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

Re: [css-d] How do I force opposed floats (left and right) to "bottom align".

[j t]

On 3/13/07, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
> > http://www.sourceworks.co.uk/communityMxExample
> >
> > This is great, apart from how the text disappears off the top of the
> > page when I manually increase its size. This (I guess) is due to the
> > containing box not expanding to enclose its contents (which in turn is
> > because the contents use absolute positioning).
>
> You can make it work fairly well by using one float and one absolute
> positioned element inside a 100% wide float.
>
> Your example reworked...
> 

That's great - thank you!

I still wonder, however, whether it's possible to do some kind of
bottom alignment when they're both floats, because then I'm guaranteed
that the two boxes will never overlap.

Once again, thanks for your help.

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

Re: [css-d] How do I force opposed floats (left and right) to "bottom align".

[Gunlaug Sørtun]

> http://www.sourceworks.co.uk/communityMxExample
> 
> This is great, apart from how the text disappears off the top of the
> page when I manually increase its size. This (I guess) is due to the
> containing box not expanding to enclose its contents (which in turn is
> because the contents use absolute positioning).

You can make it work fairly well by using one float and one absolute 
positioned element inside a 100% wide float.

Your example reworked...


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

Re: [css-d] Opera border bug

[Gunlaug Sørtun]

Philippe Wittenbergh wrote:
> Gah, I missed one sentence there
> 
> '[Border-width doesn't allow percentages in CSS2; should we allow  
> percentages (of the containing block's width) in CSS3?]'
> 
> Written in red, guess that is why I couldn't see it. :p

Probably :-)

So, it looks like Opera treats that percentage-width border in 
accordance with the not yet recommended CSS3.
We at least can't call it an Opera bug then, but rather wait till other 
browsers either pick up on it or W3C change that part in CSS3.

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

Re: [css-d] Opera border bug

[Philippe Wittenbergh]

I wrote:

> CSS3 border module is more explicit:
> 'Percentages: width* of containing block'
> 
>
> The width of the border should be computed based on the width of the
> box, the same way as percentage based margins are computed.

Gah, I missed one sentence there

'[Border-width doesn't allow percentages in CSS2; should we allow  
percentages (of the containing block's width) in CSS3?]'

Written in red, guess that is why I couldn't see it. :p


Philippe
---
Philippe Wittenbergh





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

Re: [css-d] Opera border bug

[Philippe Wittenbergh]

On Mar 13, 2007, at 7:09 AM, francky wrote:

>> I'm working on my first elastic-layout site and Opera is giving me
>> something I've never seen before. In my  declarations, I've added
>> border-bottom: 1px dotted {color} style. FF, IE 6/7, and Mozilla are
>> rendering correctly, but Opera is generating these huge colored  
>> blocks
>> underneath my h1's.
>>
>> Does switching between em and px cause problems in Opera? The page  
>> is a
>> protected area, but I've set-up the CSS here,
>> http://the1912gallery.ehc.edu/testcss.css.
>>
>> Thanks,
>>
>> Jed
> Hi Jed,
> You have given also a border-width of 80%, and that is giving  
> different
> interpretations by Opera and other browsers.
> I think the css2.1 specs aren't very clear at this point.

Under 8.5.4 Border shorthand properties:
http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties
percentage values are mention explicitly.
'Percentages:   N/A'
Which is not the most clear formulation.
I think that this should be understood as 'does not apply' or  
'undefined', as far as CSS 2.1 is concerned.

CSS3 border module is more explicit:
'Percentages:   width* of containing block'


The width of the border should be computed based on the width of the  
box, the same way as percentage based margins are computed.

Philippe
---
Philippe Wittenbergh





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

[css-d] Site Check Please

[Richard Brown]

Hi All

I thought I had this site finished but it seems there might be some
problems with it.

This is what it should look like:


Can you tell me if you are seeing this please and if not any ideas why please?



Many thanks.
-- 
Rich
http://www.cregy.co.uk
Embracing what God does for you is the best thing you can do for him.
Romans 12 v 1
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How do I force opposed floats (left and right) to "bottom align".

[j t]

On 3/13/07, j t <[EMAIL PROTECTED]> wrote:
> Hi.
>
> I'm trying to get two bits of text to sit on opposite sides
> (left/right) of a header, and various sources suggest using the
> "opposing floats" method. The problem that I have with that is that
> the opposing floats "top align (which becomes apparent when the text
> sizes differ.

I found another suggestion on this page:
http://www.communitymx.com/content/article.cfm?cid=529B0
(written by John Gallant and Holly Bergevin) which talks about using
absolute positioning. I've set up an example here:

http://www.sourceworks.co.uk/communityMxExample

This is great, apart from how the text disappears off the top of the
page when I manually increase its size. This (I guess) is due to the
containing box not expanding to enclose its contents (which in turn is
because the contents use absolute positioning).

Just in case my first post didn't clearly explain what I'm after,
here's an ascii-art picture (it should make sense in a monospace
font):

\  /
 \/   \/


That's just two different-sized v's sitting on opposite ends of a line.

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

[css-d] How do I force opposed floats (left and right) to "bottom align".

[j t]

Hi.

I'm trying to get two bits of text to sit on opposite sides
(left/right) of a header, and various sources suggest using the
"opposing floats" method. The problem that I have with that is that
the opposing floats "top align (which becomes apparent when the text
sizes differ.

In order to show what I'm talking about, I've set up example code from
the aListApart website example here:
www.sourceworks.co.uk/aListApartSplittingTheDifference

and the example code from the "peach pit" website "exandable rows"
example (by Dan Cederholm) here:
www.sourceworks.co.uk/peachpitExpandableRows

In both cases, the smaller text (on the right) is top aligned, whereas
what I'm trying to achieve is to bottom align the text on the right.

All of the examples on
http://www.positioniseverything.net/easyclearing.html are top-aligned
too, so that doesn't appear to help.

All suggestions gratefully received...

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

[css-d] IE 6 - Something wrong with my boxes?

[Corey Frang]

So, I've been working on this site lately, and the CSS is really 
starting to bug me.  In particular take a look at the left "page" area.  
Half of the content is chopped off, and I can't quite figure out why.  
The site was designed mostly with firefox, so if you want to see the way 
it should look, check there.

I have already tried playing with "overflow" but it seems any element 
positioned left of the #leftpage div is getting chopped off.  Any 
suggestions would be greatly appreciated.

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

[css-d] Check first css website

[Ranja]

Hello,

I'm new here, hello everyone.
I build my first website with css:
http://www.anderson-partners.nl

There are a few problems which I cannot fix:
I want a max width on my content. Including ie6 if this is possible.

The navigation tab must stay on highlighted when it is selected 
(without php).
I use templates and cannot use this tutorial:
http://alistapart.com/articles/keepingcurrent/
because I am bad in PHP. The navigation is placed in a template. My 
client will change this navigationlist in Contribute.

There is a problem in ie with window resize. Probably I must change 
something on the floating, padding, etc.

Thanks in advance for any useful help.

Greetings,

-
Ranja: illustrative design
[EMAIL PROTECTED]
http://www.anjaranja.nl
-

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

Re: [css-d] Works in IE7, Mozilla, Opera, but fails IE6

[Gunlaug Sørtun]

~davidLaakso wrote:

> The above is just a start.

...but an extremely good one. IE6 never was any good at
percentage-calculations, and having a page that only works when users
provide a 1280 wide window is not a good design solution - regardless of
browser.

> Validate the markup.

...and use, and mark up for, a proper doctype if you want IE/win in on
the team. XHTML 1.1 *should not* be served as 'text/html'...

...and IE/win doesn't understand the correct 'application/xhtml+xml', so
*no* IE/win version should be able to render that page at all with the
present doctype.

> In the meantime, some kind soul on the list may provide all the 
> "secret weapons" you really need for IE6.

The "secret weapon" for making layouts work in IE6 is to provide valid,
sensible and well organized source-code and equally sensible CSS - the
same as for other browsers. Most IE6 bugs are gone under such
conditions, and the remaining bugs are easier to sort out and "kill".

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

[css-d] Sidebar Menu Playing Up!

[Richard Brown]

Good Morning All

I hope you are all well. I have a slight problem with a menu.



I have copied the styling from this site:



But as you can see the result is not the same. Any ideas why not please?

Thanks.
-- 
Rich
http://www.cregy.co.uk
Embracing what God does for you is the best thing you can do for him.
Romans 12 v 1
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] help with moving menu

[Gunlaug Sørtun]

Wonderbaby Designs wrote:
> This is a category page (which is correct)
> http://209.59.136.73/shop/index.php/action/category/id/1/
> 
> and this is a product page (with the left menu suddenly on top of 
> everything)
> http://209.59.136.73/shop/index.php/action/item/id/1/

Source-code HTML) in both pages are such a sorry mix of non-valid code 
and element-nesting, that hunting for one non-working part would be a 
waste of time. Validate and correct the source-code first.

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

[css-d] help with moving menu

[Wonderbaby Designs]

I just started uploading the code for the cart design I've been working 
on and have discovered that in one of the views the left menu is jumping 
on top of the content and pushing the right column content to the bottom.

I have stared at this for hours but can't figure out why it isn't 
working. Can anyone see something here that I can't?? I would rewrite 
the entire bit of code for this section, but I don't want to try that 
until I can figure out what is wrong with the original code (this part 
of the template between the cont div  is from the original cart code)

This is a category page (which is correct)
http://209.59.136.73/shop/index.php/action/category/id/1/

and this is a product page (with the left menu suddenly on top of 
everything)
http://209.59.136.73/shop/index.php/action/item/id/1/

The style is embedded into the code (function of the cart software).

Thank you for the help!!

Robin~
www.diaperfreebaby.org - due to launch at any moment

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

Re: [css-d] "continuity" rounded corners with sliding doors navigation

[Web Developer]

Used this guys inverted tab design as inspiration (Roger Johansson):
http://www.456bereastreet.com/lab/inverted_tabs/

http://arihoj.freehostia.com/css/upsideDownSlidingDoors/test3/slidingdoors1.html

They look almost the same, but 2nd is expandable (but at expense drop
shadows are less 'clean' looking).

Gonna try to add the extra markup to get it working with IE later and
change design to my own :)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/