Re: [css-d] browser / viewport height problem

[Gunlaug Sørtun]

Jonathan Mao wrote:
> The problem is, when the browser window is less than the height of 
> the page the content seems to go out of the DIVs.

> http://www.abcreative.net.au/folio_print_case.html 
> http://www.abcreative.net.au/folio_tv_showreel.html

It's the div#bgLayer {height: 100%;} and div#wrapper {height: 100%;}
that makes the DIVs height locked to the window-height. Good browsers
will honor given dimensions on containers - regardless of what that
height is set to. Only IE/win (IE6 and earlier) will expand to 'contain
the content' - and that's a bug[1].

We naturally want the DIVs to expand/stretch so they 'contain the
content' here.
CSS tables do that by default in any good browser, so try adding this:

#bgLayer {display: table;}

...which makes those DIVs behave as you want by stretching the outer
DIV. The other DIVs will follow, since the will "see" the new height and
adjust to it.

regards
Georg

[1]http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
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] What's causing the offset of items in this form?

[Marcel Fahle]

James,


James Eaton wrote:
> In this test I have two forms, each with text input field and submit 
> button.  In the top example the button is a standard type="submit", and 
> the two items line up as I'd expect.  In the bottom one I use a 
> type="image" button.  What causes the vertical alignment offset in the 
> bottom example?

I think this offset is caused bei your form image.
But I don't know an elegant way to kill this margin,
except a negativ on:




#formimg {
margin-bottom:-5px;
}


Wondering if someone comes up with a better solution :)


-- 
Best,

Marcel
http://marcelfahle.com
http://mat-computing.com
http://travelbert.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] What's causing the offset of items in this form?

[Ingo Chao]

James Eaton wrote:
  > http://dm126.mediaodyssey.com/form.htm

Hmm, maybe
.sitesearch input {vertical-align: bottom;} ?

probably other Browsers don't like this, so serve it to IE only.

Ingo


-- 
http://www.satzansatz.de/css.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] Can this menu be reproduced with pure CSS?

[Jackie Carey]

http://www.itshere.org.uk

 

I've inherited this table-based site, which is going to be replaced with
a CMS-based site at some point in the next six months. I've worked
styles into some of it, and the rest can remain until the switch.
However, I am not happy with the menu and would like to replace it with
a list-based menu.

 

This could be done very easily if it weren't for the coloured boxes
alongside the menu items. I'd like to keep them as they're part of the
branding and look quite nice.

 

Does anyone know of a way I could do this, without a whole heap of work
(and ideally without Javascript).

 

Thanks

 

Jackie



Scanned by MailDefender - managed email security from intY - 
www.maildefender.net
__
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] z-index? content menu hiding behind header

[francky]

cj wrote:

>[...]
>On 2/7/06, francky <[EMAIL PROTECTED]> wrote:
>  
>
>>Oops, the % was in the direction, but I was too much in a hurry. - A
>>(bottom-2em) is indeed impossible AFAIK, but what you can do is to hang
>>the bg-img in the footer, and then push him upwards:
>>
>>
>unfortunately other themes use a background image for the footer.  :( 
>the only place i can put this image is the body.  i thought about
>adding extra pixels to the bottom of the globe, but if a user resizes
>the text, the footer with expand vertically and cover it up again. 
>this method seems like what i'm going to have to do though, since css
>doesn't cover this.  dang it.
>[...]
>  
>
Hi cj,
Aha! - But I wonder we are defeated now: are you really sure? I placed 
different images in the footer (can be done dynamically too, I think) / 
tried clientside different font-sizes. The footer is expanding, but not 
covering up the globe, because of the principle that the globe is always 
anchored [negative margin-top: his height + some distance] above the 
footer-position, and doesn't influence the height of the footer itself. 
With background-images in the footer that will be the same (someway 
assigning a height to the footer to get the bg-img in / or just cutting 
off). Or do I see it too simple?
See test pages: example a 
,
 
example b 
 
and example c 
.
 
(with bg-img in footer)

Remaining remarks:
- Enlarging fontsize more as 3 steps in FF (quite a lot, though - and 
probably enough) breaks the general layout; in IE the max fontsize is o.k.
- Parts of the footer can go under the bottom of the screenheight - but 
that is not due to the globe thingy. I think it is more general: the 
relationship between the height of the footer and the min-height of the 
master-form (and the way how filling the footer).

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] Any good sites about font sizes?

[Julian Voelcker]

Hi,

I am struggling to educate the design team about using sensible font 
sizes - all their designs come out with tiny fonts and then when I 
create the layout with sensible sizes it tends to knock out the layout.

One of the biggest problems is that they bounce around design 'proofs' 
in PDF format so when expanded on their big monitors the font sizes 
look fine.

I have tried every trick in the book and still can't get them to change 
their habit.

Have any of you come across any good sites covering the issue of font 
sizes and providing sensible (and preferably backed up) guidelines that 
I can wave infront of them saying 'it's not just me'?
-- 
Cheers,

Julian Voelcker
Cirencester, United Kingdom


__
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] browser / viewport height problem

[Cem Meric]

> The problem is, when the browser window is less than the height of
> the page the content seems to go out of the DIVs.
> 
> In other words, the user scrolls down to see the content (that's ok)
> but the white background doesn't extend to the bottom of the browser
> window.
> 
> Pages to check:
> http://www.abcreative.net.au/folio_print_case.html
> http://www.abcreative.net.au/folio_tv_showreel.html
> 
> Stylesheet:
> http://www.abcreative.net.au/c/styles.css
> 
> You can replicate this if you make your browser window less than
> 768px high.
> 
> Is this fixable?
> 
> Any help would be really appreciated.
> 


You can also do this mate

Delete => height: 100%; and min-height: 100%; =>

=> elements in div#bgLayer, div#wrapper, div#bodyContentLeft,
div#bodyContent

Delete => float: right; in div#bodyContent

Change => div#bodyContent margin as => margin: 0 0 0 167px;

I would also suggest replacing your top navigation with CSS e.g.
http://tutorials.alsacreations.com/modelesmenus/hd2.htm 

Regards, 
Cem Meric

Kalkadoon
Corporate Solutions


__
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] Can this menu be reproduced with pure CSS?

[Rakesh Pai]

This is fairly simple. You can use a border-left for the colored boxes
with a background-position: left with an appropriate image to show
that white gap between the colored box and the menu item. There might
be other solutions too, though. This is just something I came up with
off the top.

Just a usability/accessibility tip while you are at it - The hover
state for the menu item which shows the yellow background is
deceptive. Not all the area of the menu item is clickable. Only the
link is. You should use a display: block; width: 100%; on the "a"
element, and specify the width of the menu item in the ul's properties
to get this functioning.



On 2/9/06, Jackie Carey <[EMAIL PROTECTED]> wrote:
> http://www.itshere.org.uk
>
>
>
> I've inherited this table-based site, which is going to be replaced with
> a CMS-based site at some point in the next six months. I've worked
> styles into some of it, and the rest can remain until the switch.
> However, I am not happy with the menu and would like to replace it with
> a list-based menu.
>
>
>
> This could be done very easily if it weren't for the coloured boxes
> alongside the menu items. I'd like to keep them as they're part of the
> branding and look quite nice.
>
>
>
> Does anyone know of a way I could do this, without a whole heap of work
> (and ideally without Javascript).
>
>
>
> Thanks
>
>
>
> Jackie
>
>
>
> Scanned by MailDefender - managed email security from intY - 
> www.maildefender.net
> __
> 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/
>


--
Rakesh Pai
Mumbai, India.
[EMAIL PROTECTED]
http://piecesofrakesh.blogspot.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] Any good sites about font sizes?

[Rahul Gonsalves]

Julian:

Julian Voelcker wrote:
> Have any of you come across any good sites covering the issue of font 
> sizes and providing sensible (and preferably backed up) guidelines that 
> I can wave infront of them saying 'it's not just me'?
>   
http://www.useit.com/alertbox/designmistakes.html

http://www.useit.com/alertbox/9611.html

http://www.useit.com/alertbox/20020819.html

A More detailed List, from Nielsen:

http://useit.mondosearch.com/cgi-bin/MsmFind.exe?QUERY=font+size

http://www.xs4all.nl/~sbpoley/webmatters/fontsize.html

http://diveintoaccessibility.org/day_26_using_relative_font_sizes.html



Cheers,
Rahul.


-- 

. . . . . . . . . . . . . . . . . . . . . . . .
Rahul Gonsalves
Make PNG, not War.
. . . . . . . . . . . . . . . . . . . . . . . .

__
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] Any good sites about font sizes?

[Felix Miata]

Julian Voelcker wrote Thu, 09 Feb 2006 10:30:10 -:
 
> I am struggling to educate the design team about using sensible font
> sizes - all their designs come out with tiny fonts and then when I
> create the layout with sensible sizes it tends to knock out the layout.
 
> One of the biggest problems is that they bounce around design 'proofs'
> in PDF format so when expanded on their big monitors the font sizes
> look fine.
 
> I have tried every trick in the book and still can't get them to change
> their habit.
 
> Have any of you come across any good sites covering the issue of font
> sizes and providing sensible (and preferably backed up) guidelines that
> I can wave infront of them saying 'it's not just me'?

Notice the really old dates in the first one:
http://style.cleverchimp.com/font_size/points/dump.html
http://css.nu/articles/font-analogy.html
http://www.w3.org/2003/07/30-font-size
http://www.alistapart.com/articles/dao/
http://www.digital-web.com/articles/fluid_thinking/
http://evolt.org/article/Liquid_Design_for_the_Web/20/15177/index.html
http://mrmazda.no-ip.com/auth/accessibility.html
http://mrmazda.no-ip.com/auth/defaultsize.html

Sometimes it helps to have them veto themselves with a camera and a
snapshot of them leaning forward in their chair to see better. Also, for
those who don't already wear glasses, find a pair of glasses to emulate
myopia so that they can see as many older folks see. Be sure to have a
high resolution laptop to have them view with as well.

For more links, visit http://mrmazda.no-ip.com/auth/wauth2.html
-- 
"Love your neighbor as yourself."Mark 12:31 NIV

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://mrmazda.no-ip.com/auth/

__
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] browser / viewport height problem

[Jonathan Mao]

On 09/02/2006, at 7:39 PM, Gunlaug Sørtun wrote:

> Jonathan Mao wrote:
>> The problem is, when the browser window is less than the height of  
>> the page the content seems to go out of the DIVs.
>
>> http://www.abcreative.net.au/folio_print_case.html http:// 
>> www.abcreative.net.au/folio_tv_showreel.html
>
> It's the div#bgLayer {height: 100%;} and div#wrapper {height: 100%;}
> that makes the DIVs height locked to the window-height. Good browsers
> will honor given dimensions on containers - regardless of what that
> height is set to. Only IE/win (IE6 and earlier) will expand to  
> 'contain
> the content' - and that's a bug[1].
>
> We naturally want the DIVs to expand/stretch so they 'contain the
> content' here.
> CSS tables do that by default in any good browser, so try adding this:
>
> #bgLayer {display: table;}
>
> ...which makes those DIVs behave as you want by stretching the outer
> DIV. The other DIVs will follow, since the will "see" the new  
> height and
> adjust to it.
>
> regards
>   Georg
>
> [1]http://www.satzansatz.de/cssd/onhavinglayout.html
> -- 
> http://www.gunlaug.no


Thanks Georg

That fixed the problem.

But introduced another...

Some pages don't have much content (e.g., the About page) and so they  
appear very short. In other words, the white background doesn't go to  
the bottom of the browser window.

Ideally, I'd like the pages to be the full height of the browser  
window.. so that there's the white background all the way to the  
bottom of the viewport.

Is that achievable? I've used repeated background images but that  
doesn't seem to do the trick...


Thanks again

Jonno
ps. I'm in the process of validating the page now too. Sorry folks, I  
should have done that before posting.


__
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] browser / viewport height problem

[Jonathan Mao]

On 09/02/2006, at 9:58 PM, Cem Meric wrote:

>
>> The problem is, when the browser window is less than the height of
>> the page the content seems to go out of the DIVs.
>>
>> In other words, the user scrolls down to see the content (that's ok)
>> but the white background doesn't extend to the bottom of the browser
>> window.
>>
>> Pages to check:
>> http://www.abcreative.net.au/folio_print_case.html
>> http://www.abcreative.net.au/folio_tv_showreel.html
>>
>> Stylesheet:
>> http://www.abcreative.net.au/c/styles.css
>>
>> You can replicate this if you make your browser window less than
>> 768px high.
>>
>> Is this fixable?
>>
>> Any help would be really appreciated.
>>
>
>
> You can also do this mate
>
> Delete => height: 100%; and min-height: 100%; =>
>
> => elements in div#bgLayer, div#wrapper, div#bodyContentLeft,
> div#bodyContent
>
> Delete => float: right; in div#bodyContent
>
> Change => div#bodyContent margin as => margin: 0 0 0 167px;
>
> I would also suggest replacing your top navigation with CSS e.g.
> http://tutorials.alsacreations.com/modelesmenus/hd2.htm
>
> Regards,
> Cem Meric
>
[snipped for brevity]


Thanks Cem!!

I'm going to change the navigation as you say. I admit, probably not  
the best use of Flash but I don't know JavaScript or any DOM  
scripting .. yet.. so that was the quickest workaround to get what I  
wanted. Thanks for the link!


Cheers
Jonno


__
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] Floats and border. How does this work?

[Michiel van der Blonk]

For long I have been looking for the easiest way to create forms without 
tables. I found several methods:
- floating
- position:absolute
- display:inline-block & display:-moz-inline-box

All come with their own caveats and problems. The floating is usually 
considered the "best". However, it's not easy to align the input's under 
each other.

The problem is usually that even if I give the label a width, it is not 
used by the browser.  Recently I found out that if I give the label a 
little bit of padding, or an invisible border (color same as background) 
that the inputs are suddenly aligned correctly in both IE and FF.

look at the difference between:
form {width:20em}
label {float:left;width:10em;margin-bottom:1em;}
input {float:left;}

and
form {width:20em}
label {float:left;width:10em;margin-bottom:1em;padding:1px}
input {float:left;}
for this html

Name
Address
Email


I explained my methods here: 
http://michiel.wordpress.com/2006/02/09/floating-forms/

I know that it works. I just would like to know why this works.

Michiel
__
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 Developer Toolbar b2 released

[cj]

the ie developer toolbar beta 2 was released.

direct link:
http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

blog:
http://blogs.msdn.com/ie/


[no, i don't work for ie.]  :)
__
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 Developer Toolbar b2 released

[Conyers, Dwayne, Mr [C]]

Cj announced:

> the ie developer toolbar beta 2 was released.

I installed the first beta and while it worked fine it seemed to "attach"
itself to the Adobe bar... I couldn't hide one without the other hiding, or
show one without the other showing.  

Maddening... especially since deleting the toolbar doesn't seem to be an
option.

D-OHH!

Guess I will just have to upgrade.


--
Dwacon
www.dwacon.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] right button panel

[Kike Estellés]

On 2/8/06, Zoe M. Gillenwater <[EMAIL PROTECTED]> wrote:
>
> Kike Estellés wrote:
> > I've seen in www.csszengarden.com an effect that I can't reproduce.
> >
> > In this website, when you make smaller the window, it gets a point where
> the
> > rigth button panel stops and the horizontal scroll bar appears. I tried
> to
> > reproduce it:
> > - using the minimun size of the window (it doesn't work)
> > - using the padding-right (it doesn't work)
> >
>
> You'll need to send us a link to your page that exhibits the problem.
>
> 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/
>

The website where I founded it is http://www.csszengarden.com
I tried to reproduce that "effect" in my computer (i won't upload the htm
file to Internet until it's ready).

Thank you
__
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] Problem in IE/WIN with borders

[cindy Smeulders]

Hi,

I'm a newbie and trying to learn CSS as i go along.
Tried to convert my website from tables to css, but have a problem in
Win/IE.
Other browers (Firefox(lin,mac), Opera(mac), IE(mac) don't show this
problem.

Used borders to have same lenght columns, tried several other systems (Faux
columns and overflow:hidden - padding) but they never suited my needs.

http://roundtheworld.homelinux.com

If you go the website the first time it all looks like it should. When you
do a refresh or try a link the borders are all screwed up.

I looks like it first displays the menus and then draw the border over it,
so you can't see the menu anymore.
The right menu is displaced to the center area and if you just go over it
(hover) with your mouse it sudenly all comes back like it should.
Go to the website again, by going to the adress bar en push enter (not
refreshing) all works again.

First idea was something to do with caching but nothing gave a sollution,
tried a few hacks and fooled around in the css and html code, but couldn't
come up with any solution.
It could be dirty code/fault/error, but no other browser has this problem.


Can somebody take a look at it PLEASE !!

(my deadline is coming up, leaving for the trip in less than 14 days, and
the site is everything but finished, put way too much time (intresting time
though) in the css convertion.)

Cindy
__
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] Any good sites about font sizes?

[Julian Voelcker]

Thanks both of you, great help.
-- 
Cheers,

Julian Voelcker
Cirencester, United Kingdom


__
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 and clear:both

[Paul Hilder]

Hi,

This has probably been discussed before but anyhow.

http://stressed.180bpm.co.uk/stuff/design/float.htm

The above page looks fine in Firefox and Dreamweaver incidentally. 
However in IE a lot of the text doesn't appear until you resize the 
page. It goes again if you refresh it. I'm using clear:both; on each  
tag.

The CSS is in the html source.

Is this a well known IE bug or have I just used bad CSS?

Thanks in advance.

Paul.
-- 
* Paul Hilder
* Get paid for you opinions on Films, Music and lots more
* http://www.ciao.co.uk/reg.php?FriendId=5017264

__
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] Any good sites about font sizes?

[Nick Fitzsimons]

> I am struggling to educate the design team about using sensible font
> sizes - all their designs come out with tiny fonts and then when I
> create the layout with sensible sizes it tends to knock out the layout.
>
> One of the biggest problems is that they bounce around design 'proofs'
> in PDF format so when expanded on their big monitors the font sizes
> look fine.
>

You've already received some good lists in response to this, but as an
aside I would suggest one thing which seems to concentrate designers'
minds: make them turn off antialiasing of fonts in Photoshop (or whatever
design tool they use).

I've lost count of the number of times I've had to explain to clients that
their pages don't look like the designs because the designs were
antialiased and the browser doesn't do that (unless you use a Mac, or a
Win box with LCD screen and ClearType enabled). Just a few weeks ago my
current clients filed a bug report that the wrong font was being used; I
had to send them screenshots proving that it was indeed Tahoma, and that
the reason the site looked so different to the designs (produced by
another company) was lack of smoothing.

At a previous employer, I actually managed to get the in-house designers
to disable antialiasing of text in Photoshop, and the number of such
objections dropped to zero. The designers (eventually) came around to it,
as at least they could design something that looked like it would in
reality, rather than the ideal world of their monitors.

HTH,

Nick.
-- 
Nick Fitzsimons
http://www.nickfitz.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] Site Check: www.girlscantwhat.com

[[EMAIL PROTECTED]]

David Laakso wrote:

> [EMAIL PROTECTED] wrote:
>
>> Site: http://www.girlscantwhat.com
>> CSS: http://www.girlscantwhat.com/css/gcwcss.css
>>
>>  
>>
> Gretchen,
> With regard to readability and breaking on zoom:
> Work in FF:
> Set the font- size on html to 100%; and 1em on the body;
> Set the main content p to 1em.
> Add a ruleset: #rightcolumn p, #leftcolumn p(or whatever they are 
> called) font-size .9em.
> Delete font-weight bold, letter-spacing, small-caps, and first:letter 
> from /all/ declarations containg them.
> Some long words(Independence) in the sidebars will need to be 
> physically broken.
> Re-set the heads for the side bars to 1em.
> Move the whole google search stuff to a new horizontal container 
> beneath the menu.
> Reduce the size of all headings (h1, h2) and declare font-weight 200 
> on them.
> Re-adjust the menu accounting for zoom.
> Hack IE to reflect these changes.
> The above is just a start. You'll need to play with it. Try to hold at 
> least 2 zoom clicks in FF and font-size 'largest' in IE without 
> overlap or float drop.
> HTH.
> ~davidLaakso
>
>
David - I appreciate your taking time to offer feedback.  I have made 
most of the changes that you have suggested and it is working well so 
far.  I have one question, though.   Why remove the small-caps?  I 
removed them and changed the headers to font-wieght 400 but I don't 
think it has as good of effect as the small-caps.  Is there a reason for 
removing them?  I am guessing that they take up more space or is it a 
readability issue?  Thanks for your help.

-- 
Gretchen

__
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] Any good sites about font sizes?

[Julia Kulla-Mader]

I am still a CSS newbie, but I happened to look into research 
surrounding font size and accessibility for a class project last 
semester. You can find the results at: 
http://www.unc.edu/~jkullama/inls181/final/font.html

Julia


Julia Kulla-Mader
MSIS Student
School of Information and Library Science
UNC-Chapel Hill
http://www.unc.edu/~jkullama

Quoting Julian Voelcker <[EMAIL PROTECTED]>:

> Hi,
>
> I am struggling to educate the design team about using sensible font
> sizes - all their designs come out with tiny fonts and then when I
> create the layout with sensible sizes it tends to knock out the layout.
>
> One of the biggest problems is that they bounce around design 'proofs'
> in PDF format so when expanded on their big monitors the font sizes
> look fine.
>
> I have tried every trick in the book and still can't get them to change
> their habit.
>
> Have any of you come across any good sites covering the issue of font
> sizes and providing sensible (and preferably backed up) guidelines that
> I can wave infront of them saying 'it's not just me'?
> --
> Cheers,
>
> Julian Voelcker
> Cirencester, United Kingdom
>
>
> __
> 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/

[css-d] tables

[jeremy]

I am looking for a good tutorial on creating Tables that validate.
any good recommendations?
-jeremy


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

[David Dorward]

On 09/02/06, jeremy <[EMAIL PROTECTED]> wrote:
> I am looking for a good tutorial on creating Tables that validate.
> any good recommendations?

http://www.w3.org/TR/html4/struct/tables.html

--
David Dorward 
__
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] tables

[Zoe M. Gillenwater]

jeremy wrote:
> I am looking for a good tutorial on creating Tables that validate.
> any good recommendations?
>   

Jeremy,

This a question about HTML/XHTML, not CSS, so it doesn't belong on this 
list. You will have better results asking it on another list, such as 
one of the ones listed here:
http://css-discuss.incutio.com/?page=OffTopic

Or, a good Google of "table markup" or something similar will doubtless 
turn up useful information.

I've written a free article on table markup.  Email me off-list if 
you're interested, and I'll send you the URL.

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] Any good sites about font sizes?

[Julian Voelcker]

Hi Nick,

> You've already received some good lists in response to this, but as an 
> aside I would suggest one thing which seems to concentrate designers' 
> minds: make them turn off antialiasing of fonts in Photoshop (or whatever 
> design tool they use).

Great idea - never considered that one, thanks.
-- 
Cheers,

Julian Voelcker
Cirencester, United Kingdom


__
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] Constructive Critisism, Please

[Donna]

Hi List,

I am almost finished with this site I'm making.  All pages validate. 
This is my first site I've done that looks the closest to professional
that I've done so far (very new to web site design).  

Please be kind; I'm looking for any helpful suggestions on improvements.

Thank you in advance to all who feel inclined to help!  Here's the link:

http://sswd51.accountsupport.com/index.html


Donna
__
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] tables

[Jim Barraud]

This is an excellent write-up:
http://www.456bereastreet.com/archive/200410/bring_on_the_tables/


On 2/9/06, Zoe M. Gillenwater <[EMAIL PROTECTED]> wrote:
> jeremy wrote:
> > I am looking for a good tutorial on creating Tables that validate.
> > any good recommendations?
> >
>
> Jeremy,
>
> This a question about HTML/XHTML, not CSS, so it doesn't belong on this
> list. You will have better results asking it on another list, such as
> one of the ones listed here:
> http://css-discuss.incutio.com/?page=OffTopic
>
> Or, a good Google of "table markup" or something similar will doubtless
> turn up useful information.
>
> I've written a free article on table markup.  Email me off-list if
> you're interested, and I'll send you the URL.
>
> 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/
>
__
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] Was: Newby struggling with unwanted border color in Firefox, now Fixing it to work in IE 6

[Maxwell Balmain]

Thanks to Rahul Gonsalves for fixing that unwanted color border on  
the actual image thumbnails and nav arrows. He suggested a img 
{border:none} attribute and it fixed the Firefox problem.

I checked the site last night on a friend's PC and it fails totally  
in IE6 and Opera. It looks fine on IE 5 on the Mac though. Also looks  
fine with Safari and Firefox.

www.rubybluestudio.com

I validated it today and it found 23 errors. I do not understand most  
of the error reports. I fixed a few things on the index file on my  
hard rive and the errors dropped to 15. I then switched the file from  
strict to transitional and it "tentatively" validated. I then checked  
the file in Opera and the index page showed improvement. Should I  
change all the pages to transitional instead of strict? The gallery  
page is the page that really falls apart in IE6. But then so does the  
header.

Like many new kids to CSS it felt like I had been punched in the  
stomach when I finally viewed the site in IE6...

Thanks for the help!

Maxwell Balmain
__
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] Constructive Critisism, Please

[Marcel Fahle]

Donna,


Donna wrote:
> I am almost finished with this site I'm making.  All pages validate. 
> This is my first site I've done that looks the closest to professional
> that I've done so far (very new to web site design).  
> 
> Please be kind; I'm looking for any helpful suggestions on improvements.
> 
> Thank you in advance to all who feel inclined to help!  Here's the link:
> 
> http://sswd51.accountsupport.com/index.html

First impression: Looks good.

A few Critics:
- Maybe you consider using a larger font-size or at least
switch to relative font sizes, so that the people using IE
can resize themself.
- (Not CSS, just aesthetical) I think it would be nicer to
make the two margins both on left and right of the main content
equal width.
- Special characters like apostrophs (just on donation site) are
not rendered properly on my german computer.
- the re-arrangement of the navigation when through the site
is very confusing.



Hope that helps :)


-- 
Best,

Marcel
http://marcelfahle.com
http://mat-computing.com
http://travelbert.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] Constructive Critisism, Please

[cj]

On 2/9/06, Donna <[EMAIL PROTECTED]> wrote:

> Thank you in advance to all who feel inclined to help!  Here's the link:
>
> http://sswd51.accountsupport.com/index.html


these are probably personal preferences, so feel free to take them as such!

- the navigation looks weird to me with a background color on
non-hover.  the background color change when i *do* hover makes the
text hard to read.  i'd do two things:  erase the white background on
menu links, and change the hover font color to white if you like the
black background coloring.

- you might consider making the middle and right columns both fluid,
as increasing the window width makes the middle column fairly long
while the right column stays compact.

- your link font color and the first text of the right column are the
same color, and i thought that the right column first text was a very
large link.  i would recommend either changing the site's link color
to be distinct or changing the right column to be something other than
the menu color.


small things:
- the home logo in the upper left should probably have a transparent
background instead of white.
- there are two doves underneath "fax" that don't look like they're
doing anything.
- the bright neon teal color is a bit blinding, but it's probably just me.  :)


hopefully this is what you're looking for.  best of luck!
__
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] Constructive Critisism, Please

[Els]

Donna wrote:
> Hi List,

Hi Donna :-)

> I am almost finished with this site I'm making.  All pages
> validate. This is my first site I've done that looks the
> closest to professional that I've done so far (very new to web
> site design).
>
> Please be kind; I'm looking for any helpful suggestions on
> improvements.
>
> Thank you in advance to all who feel inclined to help!  Here's
> the link:
>
> http://sswd51.accountsupport.com/index.html

The space between the navigation and the center content is much 
larger than the space on the other side of the content. Is this 
on purpose? I think it looks better when symmetric.
Another thing is the navigation itself: I only clicked three 
links before I was confused - the order of the links seems to be 
random, which leaves the surfer without sense of direction. After 
some investigation I found that you just let the current link and 
top link switch places, but I still think it's too confusing. 
Give each link it's proper place, and people will see by the 
different styling which page it is they're on.

On the services page there's a link to 'Retreats and Seminars', 
but the href points to the service page itself.

Design wise, I'd give the links in the navigation a bit more 
styling, and make them clickable in the full width of the 
container, not just over the text. Also, it's a list of links, so 
best mark it up as a list.

HTH :-)

-- 
Els
http://locusmeus.com/
http://locusoptimus.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] Any good sites about font sizes?

[Julian Voelcker]

Hi Julia,

> http://www.unc.edu/~jkullama/inls181/final/font.html

Thanks Julia.
-- 
Cheers,

Julian Voelcker
Cirencester, United Kingdom


__
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] pixel to em conversion revisited

[css man]

I've been studying the archives on this subject and experimenting a bit,
using the suggestion to set font-size: to 75% and 12px in the body, like so:

body {
   font-size: 12px;
   _font-size: 75%;
 }

I downloaded "Calipers" and tested this out on Firefox and IE6 and found it
is not too precise.

What did work was to set the body to .75em and then use 1em or whatever, for
each element.

Anyone else find the same?
__
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 way to set a dynamic anchor in a div?

[Rick Faircloth]

Hi, all...

I'm working on an web-based office application,
so I'm trying to put as much functionality on a single
screen as possible.

I've using scrolling div's for areas to add, update, and
delete
content.

Everythings going well except for trying to place an anchor
inside a div for client contact entries.

I think I'm coding everything correctly...I've done this
before,
but the anchor was on a full page of html, not in a
particular div.

Is there some way I can target the anchor to affect the
content
in a particular div?  I think that's why the anchor's not
working,
because it's not an anchor for the whole HTML page, just the
content in that particular div.

It's a dynamic ColdFusion-generated anchor, but I've done
that before, too.

The div just seems to ignore the anchor...do I need to give
the div
and id and target the id somehow?

Ideas?

Rick
__
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] Height collapses in Firefox 1.5

[css man]

I have a  #container div:

#container {
   border: .4em solid #cc6;
   background-color: #fff;
   height: 42.1em; <--must be set specific value, otherwise
collapes-->
   font-size: .95em;
   margin: 0 auto;
   padding: 0;
   position: relative;
   text-align: left;
   width: 775px;
  voice-family: "\"}\"";
   voice-family: inherit;
   width: 775px;
}

Unless I set the height to a specific value, height collapses; works fine in
IE6.

Can someome explain what I'm doing wrong here?
__
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] problems with 2-column layout positioning and borders

[Zoe M. Gillenwater]

Stan Winchester wrote:
> I have two different methods of trying to layout a page that has a header,
> footer, left column for navigation buttons (client insists on the image
> based buttons), and a main content column as seen on: 
> http://www.asian-herbs.com/index.cfm 
>
> The problem with the above is the left column is floated over the left
> border of the main content column. In FF/NS I can set the border to
> transparent and everyone is happy. In IE the border shows black, so I had to
> change the color of the left border to match the background color of the
> background image (also as per client requirements). The problem with this is
> it covers the left most portions of the background images. I would prefer to
> be able to fix this page if possible. 
> Here is the css: http://www.asian-herbs.com/assets/styles.css  
>
> 
> Another Option (as modified from
> http://www.fu2k.org/alex/css/onetruelayout/example/interactive)
>
> HTML: http://www.aftershockweb.net/bd/css/onetruelayout/index2.cfm 
> CSS: http://www.aftershockweb.net/bd/css/onetruelayout/styles2.css 
> The problems I am having with this example are:
>
> 1.) Forcing the left nav buttons to stay against the left margin
> 2.) Forcing the main content to not disappear under the nav buttons with
> smaller window sizes like 800X600; at 1024X768 this layout's display is
> acceptable in all three browsers.
>
> I am willing to use either method or scrap it and start over if there is a
> better way.
>   

Hi Stan,

I'd say scrap it and start over.  Your border method doesn't work, and I 
don't think One True Layout works with a mix of liquid and fixed, as you 
have (someone correct me if I'm wrong).  The reason that the content 
disappears under the nav buttons is that you have that column set to a 
width of 20%, with a corresponding left margin of 20% on the content 
column.  But at smaller window sizes, 20% is not big enough to hold the 
fixed pixel sizes of those buttons. So they spill out of their div and 
overlap adjacent content.

You need a layout with one fixed column and one liquid column.  This is 
not difficult to achieve.  Here's the barebones structure:

Nav goes here...
main content goes here. Further divs 
can be nested to create further columns.

That's really it.  But I'm guessing you want your content column to come 
first in the source, so that's why you were trying these more 
complicated methods?  If you must have your content column first, I 
recommend a negative margin layout method.  Two demos:
http://www.pixelsurge.com/experiment/negative_margins_1.html
http://www.pixelsurge.com/experiment/negative_margins_2.html

Hopefully that will give you something useful to work with...

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] pixel to em conversion revisited

[Els]

css man wrote:
> I've been studying the archives on this subject and
> experimenting a bit, using the suggestion to set font-size: to
> 75% and 12px in the body, like so:
>
> body {
>   font-size: 12px;
>   _font-size: 75%;
> }

I don't know yet what IE7 will do with the pixels, but it won't 
see the %, as the underscore hack isn't working in IE7 anymore.

> I downloaded "Calipers" and tested this out on Firefox and IE6
> and found it is not too precise.
>
> What did work was to set the body to .75em and then use 1em or
> whatever, for each element.
>
> Anyone else find the same?

No, I haven't tried it out. But I'd advise you to not use ems for 
the font-size on body. The result is that the larger and smaller 
font-size settings in IE become exponential. It's a bug of 
course, but the workaround is just to use % for body font-size. 
There is no problem if you then set the size in ems on other 
elements though.

-- 
Els

__
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] Site Check: www.girlscantwhat.com

[Felix Miata]

[EMAIL PROTECTED] wrote Thu, 09 Feb 2006 10:32:34 -0600:

> David Laakso wrote:
 
> > [EMAIL PROTECTED] wrote:

> >> Site: http://www.girlscantwhat.com
> >> CSS: http://www.girlscantwhat.com/css/gcwcss.css

> > Reduce the size of all headings (h1, h2) and declare font-weight 200
> > on them.

I have no idea why David makes the suggestion of 200 weight for
headings. Leave the weight at the Hx default, usually around 800, unless
you have particular desire for a spindly or extra bold look.

> David - I appreciate your taking time to offer feedback.  I have made
> most of the changes that you have suggested and it is working well so
> far.  I have one question, though.   Why remove the small-caps?

I like small caps.

Originals:
http://mrmazda.no-ip.com/SS/gretcg1.jpg
http://mrmazda.no-ip.com/SS/gretcg2.jpg
Current:
http://mrmazda.no-ip.com/SS/gretcg3.jpg
http://mrmazda.no-ip.com/SS/gretcg4.jpg

Now that the base text size is medium, the fixed width is even worse for
high resolution users. It needs column widths set in ems, so that
proportions are maintained according to text size, keeping the outer
columns wide enough for their content without making line lengths in the
middle too short. Examples of em widths at:
http://mrmazda.no-ip.com/auth/Sites/dlviolin.html
http://mrmazda.no-ip.com/auth/widths-em-v-px.html
http://mrmazda.no-ip.com/auth/fflinelength.html
-- 
"Love your neighbor as yourself."Mark 12:31 NIV

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://mrmazda.no-ip.com/auth/

__
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] Can this menu be reproduced with pure CSS?

[Jackie Carey]

Thanks for this, Rakesh.

My problem is, I can't work out how write the css to get a different
colored box into the different list items when I rewrite the menu as a
list, as per

http://css.maxdesign.com.au/listamatic/vertical05.htm

which uses just one image.

That weird mouseover event is one of the main reasons why I want to redo
the menu. Its very existence takes me a step further from level 2
compliance. But your tip will make it more usable until I can get it
changed - I'll do that ASAP.

Cheers

Jackie

>This is fairly simple. You can use a border-left for the colored boxes
>with a background-position: left with an appropriate image to show
>that white gap between the colored box and the menu item. There might
>be other solutions too, though. This is just something I came up with
>off the top.
>
>Just a usability/accessibility tip while you are at it - The hover
>state for the menu item which shows the yellow background is
>deceptive. Not all the area of the menu item is clickable. Only the
>link is. You should use a display: block; width: 100%; on the "a"
>element, and specify the width of the menu item in the ul's properties
>to get this functioning.
>
>
>
>On 2/9/06, Jackie Carey <[EMAIL PROTECTED]> wrote:
>> http://www.itshere.org.uk
>>
>>
>>
>> I've inherited this table-based site, which is going to be replaced
with
>> a CMS-based site at some point in the next six months. I've worked
>> styles into some of it, and the rest can remain until the switch.
>> However, I am not happy with the menu and would like to replace it
with
>> a list-based menu.
>>
>>
>>
>> This could be done very easily if it weren't for the coloured boxes
>> alongside the menu items. I'd like to keep them as they're part of
the
>> branding and look quite nice.
>>
>>
>>
>> Does anyone know of a way I could do this, without a whole heap of
work
>> (and ideally without Javascript).
>>
>>
>>
>> Thanks
>>
>>
>>
>> Jackie
>>
>>
>>
>> Scanned by MailDefender - managed email security from intY -
>www.maildefender.net
>>
__
>> 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/
>>
>
>
>--
>Rakesh Pai
>Mumbai, India.
>[EMAIL PROTECTED]
>http://piecesofrakesh.blogspot.com/
>
>Scanned by MailDefender - managed email security from intY -
>www.maildefender.net


Scanned by MailDefender - managed email security from intY - 
www.maildefender.net
__
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] browser / viewport height problem

[Gunlaug Sørtun]

Jonathan Mao wrote:
>>> The problem is, when the browser window is less than the height
>>> of the page the content seems to go out of the DIVs.
>> 
>>> http://www.abcreative.net.au/folio_print_case.html http:// 
>>> www.abcreative.net.au/folio_tv_showreel.html

...

>> We naturally want the DIVs to expand/stretch so they 'contain the 
>> content' here. CSS tables do that by default in any good browser,
>> so try adding this:
>> 
>> #bgLayer {display: table;}

...

> Some pages don't have much content (e.g., the About page) and so they
>  appear very short. In other words, the white background doesn't go
> to the bottom of the browser window.
> 
> Ideally, I'd like the pages to be the full height of the browser 
> window.. so that there's the white background all the way to the 
> bottom of the viewport.

Short pages did extend to bottom of viewport at my end - with that
'display: table' addition. Good browsers simulate old 'html tables' when
given that display-style.

Which browser(s) create problems?
Did you make any other changes to those styles?

Give us a link to the most troublesome page, and we'll evaluate it and
see what's possible to do.

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] Constructive Critisism, Please

[Els]

Donna wrote:

>> ***I'd give the links in the navigation a bit more
>> styling, and make them clickable in the full width of the
>> container, not just over the text.***
>
> I don't know how to go about doing that, could you explain?

Sure.
If you have a list like this:

Home page
Some place
Elsewhere


You could use styles like this:

#nav,
#nav li{
  margin:0;  /* to get cross browser consistency*/
  padding:0; /* ditto */
}
#nav{
  width:12em; /* to provide a width limit for the a elements */
  background-color:red;
}
#nav li{
  background-color:orange;
}
#nav li a{
  display:block; /* to make links block level, clickable full
width */
  width:100%; /* needed to avoid whitespace bug in some cases */
  font-weight:bold;
  text-decoration:none;
}
#nav li a:link{
  background-color:yellow;
}
#nav li a:visited{
  background-color:lightyellow;
}
#nav li a:focus,
#nav li a:hover,
#nav li a:focus{
 background-color:black;
 color:white;
}
#nav li a.current:link,
#nav li a.current:visited,
#nav li a.current:focus,
#nav li a.current:active,
#nav li a.current:hover{
 background-color:orange;
 color:black;
}

(the background colours on ul and li are only there so you can 
see what happens)


HTH ;-)


-- 
Els
http://locusmeus.com/
http://locusoptimus.com/

-- 
Els

__
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 pc 'ttm'

[Michelle W]

Hello all,

I have nearly completed a site, and would appreciate a review.
Since i am on mac, please point out any PC bugs to me.

http://www.thetravelingmarathoner.com/test

This is how is screenshot of Mac view.
http://www.thetravelingmarathoner.com/test/screenshot.jpg

I am aware that the page has validation errors, due to Amazon Associates
code, and target=blank issue. Maybe i should switch to transitional?

Also on the top12 page;
 
http://www.thetravelingmarathoner.com/test/top12.html
 http://www.thetravelingmarathoner.com/test/top12.css
I am trying to get the #tablist width to be the same as #nav.
can't figure it out.
Also would like to eliminate the empty li at the bottom of #tablist.
I have nested divs with uls
#left column
#nav
ul
#tablist
ul
 
All help very much appreciated.
__
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] Site Check: www.girlscantwhat.com

[[EMAIL PROTECTED]]

Felix Miata wrote:

>I like small caps.
>
>Originals:
>http://mrmazda.no-ip.com/SS/gretcg1.jpg
>http://mrmazda.no-ip.com/SS/gretcg2.jpg
>Current:
>http://mrmazda.no-ip.com/SS/gretcg3.jpg
>http://mrmazda.no-ip.com/SS/gretcg4.jpg
>
>Now that the base text size is medium, the fixed width is even worse for
>high resolution users. It needs column widths set in ems, so that
>proportions are maintained according to text size, keeping the outer
>columns wide enough for their content without making line lengths in the
>middle too short. Examples of em widths at:
>http://mrmazda.no-ip.com/auth/Sites/dlviolin.html
>http://mrmazda.no-ip.com/auth/widths-em-v-px.html
>http://mrmazda.no-ip.com/auth/fflinelength.html
>  
>


Felix - thanks! Your examples helped me to understand the difference.  I 
am working on the layout right now, but I have a very busy schedule 
today with band rehearsals so my time is limited.  I will let you know 
when I have it fixed.  Thanks again.  You have been very helpful and I 
appreciate that.

-- 
Gretchen

__
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 and clear:both

[Gunlaug Sørtun]

Paul Hilder wrote:
> http://stressed.180bpm.co.uk/stuff/design/float.htm
> 
> The above page looks fine in Firefox and Dreamweaver incidentally. 
> However in IE a lot of the text doesn't appear until you resize the 
> page. It goes again if you refresh it.

A well known IE/win bug - related to 'Layout'[1].

I think adding...

#container {position: relative;}

...should "kill" that bug in your page.

regards
Georg

[1]http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
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] Constructive Critisism, Please

[Els]

Els wrote:
> #nav li a:focus,
> #nav li a:hover,
> #nav li a:focus{

I meant to write
#nav li a:focus,
#nav li a:hover,
#nav li a:active{

> #nav li a.current:link,
> #nav li a.current:visited,
> #nav li a.current:focus,
> #nav li a.current:active,
> #nav li a.current:hover{

And here I meant to have :active after :hover instead of vice 
versa.

-- 
Els
http://locusmeus.com/
http://locusoptimus.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] Site Check: www.girlscantwhat.com

[[EMAIL PROTECTED]]

Also - what are the advantages/disadvantages of using em width verses % 
width on the columns?   I am experimenting with giving my layout a fluid 
center and columns that are a % of the screen.  Any pointers would be 
appreciated.  I think I have it working, but I am not quite grasping the 
difference between using a % and us an em.  I will upload it when I have 
had a chance to test in available browsers and fix the header image to 
accomodate the layout.  Thanks.

-- 
Gretchen

__
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] Drop shadow effect on Text with CSS

[Peach Lynda L CTR USAF 96 CG/SCTA]

 
>> http://wwwdev.eglin.af.mil/faq.shtml Our users are primarily IE --
but 
> I couldn't connect to your page ...

Sorry -- that's a test environment before it goes to "public".

Site page is http://www.eglin.af.mil/faq.shtml

I am so trying a JavaScript solution one of you kind folks suggested.
It's at http://www.eglin.af.mil/faqtest.shtml. The reality of that one
is IE doesn't display the page at all ... I have no idea why and Firefox
ignores the JavaScript. This is being worked in the background and if
you have suggestions please send directly to me. I'm sure the error is
in the JS not in the CSS so does not belong on this list.

If I get something that works AND looks acceptable (faq.shtml works -- I
just don't personally think it's acceptable, mho-oc) I will post how to
accomplish.

Thanks to those who have respond on and off the list! That's what makes
this list so valuable. 

Lynda Peach








__
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] Was: Newby struggling with unwanted border color in Firefox, now Fixing it to work in IE 6

[Maxwell Balmain]

An update on www.rubybluestudio.com

I went through and validated each page as in "strict" mode. Again,  
thanks to Rahul Gonsalves for pointing out that I needed a closing  
"/" at the end of my images and to replace any capitalization that I  
had in my markup. That seemed to help. It looks good in Safari,  
Mozilla, Firefox, Opera 8.5 and IE5(Mac). The navigation links drop  
down in Opera 6 for the Mac. I am assuming the same will happen with  
IE6 on the PC. I don't have a PC. Can someone test this for me and  
give me a quick report to compare it in IE6 vs Firefox? I am assuming  
this problem is a margin issue?

I think I am getting much closer. I can then spruce up the rollover  
colors and some of the header images etc. What was last night's total  
frustration is todays positive learning experience.

Thanks to all that emailed me!

Cheers,

Maxwell Balmain
__
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] Need main content to touch top nav bar

[Julie Flolo]

I have searched and searched and I think my brain is tired.  I want the main 
content of the page to butt up against the top navigation bar.  How do I make 
this happen? Thanks in advance for your help!

http://www.floloweb.com/test/index4.html
http://www.floloweb.com/test/4style.css

-
Julie H. Flolo
A & J Office Works
[EMAIL PROTECTED]
719.550.3181 Phone
719.550.3182 Fax
__
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] Site Check: www.girlscantwhat.com

[David Laakso]

[EMAIL PROTECTED] wrote:

>David Laakso wrote:
>
>>[EMAIL PROTECTED] wrote:
>>
>>>ite: http://www.girlscantwhat.com
>>>CSS: http://www.girlscantwhat.com/css/gcwcss.css
>>>
>David - I appreciate your taking time to offer feedback.  I have made 
>most of the changes that you have suggested and it is working well so 
>far.
>
I'm not so sure about that. I do not know what you did since yesterday, 
but whatever it is Opera is no longer a happy camper (and I do not know 
how to fix her).

You are dropping the float at 800 in IE6.0 at text-size "largest," and 
the Google stuff (and long words in right col) remain problematic on 2nd 
zoom click in FF.

>  I have one question, though.   Why remove the small-caps?
>
Strictly a personal opinion: they are not appropriate with /unserifed/ 
fonts on the Web.

It would be best for you to follow Felix's recommendations from here on out.

Best wishes,
~davidLaakso


__
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] relative positioning creates horizontal scroll in Firefox

[pmarsh2]

Essentially, I'm attempting to position non-background graphics outside 
of a page's main content area (in the right and left 'margins'), but 
trying to avoid having them call up scrollbars.

What I've done is attach these graphics to (that is, enclose them in 
the div of) absolutely positioned 'modules' placed within the main 
content area -- and then moved the graphics 'offscreen' to the right 
and left using relative positioning.

My understanding was that relatively positioned elements moved outside 
the main content area this way would not create a horizontal scrollbar 
(that didn't otherwise exist). In fact, IE6 and Safari both work this 
way, hiding the relatively positioned elements in the 'margin' area as 
the browser window is narrowed, and only creating a horizontal 
scrollbar when the window
is narrower than the main content div.

However, Firefox creates scrollbars as soon as the window is narrowed 
to the right edge of the graphics now rendered in the right 'margin'.

I know that with absolutely positioned content, elements moved 
'offscreen' to the right and downward will create scrollbars. But I 
thought relatively positioned content would be considered by the 
browser to still be in its original (non-relatively-positioned) 
location. Why does Firefox not see it this way?

Is there any way to achieve the desired effect using other positioning 
techniques?

I don't want to put the images into the background, since then they'll 
get cut off in unfortunate places depending upon page content height.

Any thought, references, avenues of inquiry, etc. would be hugely 
appreciated.

__
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] Site Check: www.girlscantwhat.com

[David Laakso]

David Laakso wrote:

> [EMAIL PROTECTED] wrote:
>
>> David Laakso wrote:
>
>
Sorry, sent wrong uri for the Opera captures: 
http://www.browsercam.com/public.aspx?proj_id=227152

> ~davidLaakso
>
>
>

__
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] Need main content to touch top nav bar

[Ingo Chao]

Julie Flolo wrote:
> ...I want the main content of the page to butt up against the top navigation 
> bar.  
> http://www.floloweb.com/test/index4.html
> http://www.floloweb.com/test/4style.css

In Fx, zero the default margin of the ul

#topmenu ul {margin-bottom: 0;}

Ingo

-- 
http://www.satzansatz.de/css.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/

Re: [css-d] relative positioning creates horizontal scroll in Firefox

[Neill Harmer]

Your best bet would be to use absolute positioning and top/right/bottom/left
to specify. Example: 

 -- this
will put the image on the bottom right hand side of the page, and still
scroll. 

Or you can try this

 -- this
will put the image on the bottom right hand side of the page, and it still
stay in position even if someone scrolls. 

If that was too vague, try this:
http://www.alistapart.com/articles/flexiblelayouts

Could also be helpful if you throw the link to the site so we can all see
what code you are using. (instead of us having to guess)

Thank you!
 
Neill Harmer
[EMAIL PROTECTED]
Back40 Design, Inc.
p. 405/478-4080
f.  405/478-0419
 
"Innovation distinguishes between being a leader and a follower."
 
 
 

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED]
Sent: Thursday, February 09, 2006 2:20 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] relative positioning creates horizontal scroll in Firefox

Essentially, I'm attempting to position non-background graphics outside of a
page's main content area (in the right and left 'margins'), but trying to
avoid having them call up scrollbars.

What I've done is attach these graphics to (that is, enclose them in the div
of) absolutely positioned 'modules' placed within the main content area --
and then moved the graphics 'offscreen' to the right and left using relative
positioning.

My understanding was that relatively positioned elements moved outside the
main content area this way would not create a horizontal scrollbar (that
didn't otherwise exist). In fact, IE6 and Safari both work this way, hiding
the relatively positioned elements in the 'margin' area as the browser
window is narrowed, and only creating a horizontal scrollbar when the window
is narrower than the main content div.

However, Firefox creates scrollbars as soon as the window is narrowed to the
right edge of the graphics now rendered in the right 'margin'.

I know that with absolutely positioned content, elements moved 'offscreen'
to the right and downward will create scrollbars. But I thought relatively
positioned content would be considered by the browser to still be in its
original (non-relatively-positioned) location. Why does Firefox not see it
this way?

Is there any way to achieve the desired effect using other positioning
techniques?

I don't want to put the images into the background, since then they'll get
cut off in unfortunate places depending upon page content height.

Any thought, references, avenues of inquiry, etc. would be hugely
appreciated.

__
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] Constructive Critisism, Please

[David Laakso]

Donna wrote:

>Hi List,
>
>I am almost finished with this site I'm making.  All pages validate. 
>This is my first site I've done that looks the closest to professional
>that I've done so far (very new to web site design).  
>
>Please be kind; I'm looking for any helpful suggestions on improvements.
>
>Thank you in advance to all who feel inclined to help!  Here's the link:
>
>http://sswd51.accountsupport.com/index.html
>
>
>Donna
>
>  
>
Congratulation-- valid css and markup! (consider deleting the buttons).
Freak out yourself, your friends, your associates, and your family?:
body { font: 100%/1.2 whatever fonts...; }
and it's not necessary to repeat the font-family on selectors, since 
that's the only one you use.
20 captures 
Nice job.
~davidLaakso
__
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] breaking boundaries

[Vincent Hide]

Hi all,

first off, sorry to be a pain! I have already requested a little help
with this.

I have been working on www.tuxdiscs.com and all is well in IE and I
thought all was well in FF - however, the background doesn't always go
all the way to the bottom of the content (sometimes it does, sometimes
it does not.)

I am confused.

Thanks for any pointers.

Vince

__
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] On Testing IE7 beta 2

[cj]

if anyone was interested in what the ie7 "experts" had to say in the
live chat today, i went through the answers after the session and
tried to copy/paste all the css-related questions into one page.

http://sltclan.com/images/cj/ie7.html

very quick summary:
- haslayout still exists, but they hope we won't need to use it
- if you do need to force layout, height won't work.  use zoom.
- min/max width isn't guaranteed but they'll try

there is one question that's not directly related but the answer was
so short and simple i thought it was worth a humor attempt.  i thought
it was funny at least.  :D  if anyone else was attending and sees that
i missed something, let me know and i'll stick it in.
__
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] breaking boundaries

[David Laakso]

Vincent Hide wrote:

>I have been working on www.tuxdiscs.com and all is well in IE and I
>thought all was well in FF - however, the background doesn't always go
>all the way to the bottom of the content (sometimes it does, sometimes
>it does not.)
>  
>
I have no idea what is wrong. But I'd start by validating the markup. 
There are 101 errors.

>I am confused.
>  
>
Me too.

>Thanks for any pointers.
>  
>
Use a meaningful, specific problem related subject line?

>Vince
>
>
>  
>
Best,
~davidLaakso
__
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] Problem in IE/WIN with borders

[Ingo Chao]

cindy Smeulders wrote:
> 
> http://roundtheworld.homelinux.com
> 
> If you go the website the first time it all looks like it should. When you
> do a refresh or try a link the borders are all screwed up.
> I looks like it first displays the menus and then draw the border over it,
> so you can't see the menu anymore.


Confirmed. I can not reproduce it locally, though, and life editing in 
IEDomExplorer is not reliable in this case.

I'd try to play with the containing elements
#container, #inner

A position:relative for both

or

B position:static to both and zoom:1; to both

In the desperate case this should not work, mix A+B.

Please report back if it worked or not.


> (my deadline is coming up, leaving for the trip in less than 14 days, 

A Trans Siberian trip in winter?

Good luck!

Ingo

-- 
http://www.satzansatz.de/css.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 IE 7 Ruined my Nav???

[TMH Design]

Please look at this page - www.thomashall.com 
in IE 7 and Firefox. Can someone tell me what is going on? It was perfect in
IE 6

__
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] creating an overlay div

[Peter Michaux]

Hi,

Suppose I have an inline div and I want an invisible but perfectly
matching div overlaying it. How do I do this so that when I resize the
window or scroll the two div's remain overlayed?

The reason I ask is for detecting a dragging item over a drop zone.
The drop zone won't respond to the mouse pointer unless the drop zone
has a higher z-index. However I want the draggable to appear above the
drop zone. My idea is to have the drop zone on the bottom, the
draggable in the middle and then a clear div on top of the drop zone
at the heightest layer. That way the clear drop zone can respond to a
mouse over.

Thanks,
Peter
__
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] New IE 7 Ruined my Nav???

[Al Sparber]

From: "TMH Design" <[EMAIL PROTECTED]>
To: 
Sent: Friday, February 10, 2006 1:56 AM
Subject: [css-d] New IE 7 Ruined my Nav???


> Please look at this page - www.thomashall.com 
> 
> in IE 7 and Firefox. Can someone tell me what is going on? It was 
> perfect in
> IE 6

It's far from perfect in any browser. Did you really want it to jump 
like that on hover? I need a tranquilizer after looking at it :-) As 
for IE7, it's a beta and if you do find a fix, make sure you deploy it 
carefully, as the final version might not have the same problems. 
Visit this page:

IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7

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

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







__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
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] New IE 7 Ruined my Nav???

[Ingo Chao]

TMH Design wrote:
> Please look at this page - www.thomashall.com 
> in IE 7 and Firefox. Can someone tell me what is going on? 


/* Hide from IE-mac \*/
* html .vnav ul li a/* hide from IE 5.0 */ {height: 1%;}
/* End hide */

The star html head is dead, but not the bugs.

http://css-discuss.incutio.com/?page=IE7
"List-item whitespace bug has not been fixed"

> It was perfect in IE 6

The navigation is still jumpy, and the zooming the text size is not 
possible in IE6.

Ingo

-- 
http://www.satzansatz.de/css.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] "Does not allow "h3" here???

[Maxwell Balmain]

Can someone please explain this validation:

Error Line 43 column 29: document type does not allow element "h3"  
here; missing one of "object", "ins", "del", "map", "button" start-tag.
Recent Assignments
The mentioned element is not allowed to appear in the context in  
which you've placed it; the other mentioned elements are the only  
ones that are both allowed there and can contain the element  
mentioned. This might mean that you need a containing element, or  
possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put  
a block-level element (such as "" or "") inside an inline  
element (such as "", "", or "").



What could I substitute to get the  style that I need?

Thanks



Maxwell Balmain
__
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] New IE 7 Ruined my Nav???

[Olly Hodgson]

On 10/02/06, TMH Design <[EMAIL PROTECTED]> wrote:
> Please look at this page - www.thomashall.com 
> in IE 7 and Firefox. Can someone tell me what is going on? It was perfect in
> IE 6

1) IE7 is still just a beta, so there's no use relying on it to get
things right just yet.
http://meyerweb.com/eric/thoughts/2006/02/03/charting-ie7b2/ says it
nicely. It might have something to do with the various CSS hacks that
you've got going on.

2) I can't see any difference in your nav between IE6 and Firefox 1.5.
The date in the top-right is obscured slightly in Firefox though.

Changing the css for #date to:

#date {
position: relative;
top: -15px;
text-align: right;
margin: 0;
font-size: 12px;
font-weight: normal;
}

...went some way towards fixing the problem. I'm not sure if that
affected IE6 though.

By the way, aren't the hacks for IE4 and Netscape 4 a bit pointless in
this day and age? :)

--
Olly
http://thinkdrastic.net/
__
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] "Does not allow "h3" here???

[Seona Bellamy]

On 10/02/06, Maxwell Balmain <[EMAIL PROTECTED]> wrote:
>
>
> Recent Assignments
>
> One possible cause for this message is that you have attempted to put
> a block-level element (such as "" or "") inside an inline
> element (such as "", "", or "").
>
> What could I substitute to get the  style that I need?
>

No need to substitute. All you need to do is swap the tags:

Recent Assignments

You've got the same hooks, you might just have to swap some references
around in your CSS to keep the cascade working properly. And it's valid.

Cheers,

Seona.
__
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] "Does not allow "h3" here???

[Olly Hodgson]

On 09/02/06, Maxwell Balmain <[EMAIL PROTECTED]> wrote:
>
> One possible cause for this message is that you have attempted to put
> a block-level element (such as "" or "") inside an inline
> element (such as "", "", or "").

There's what's gone wrong. You've put an  (a block-level element)
into an  (which is an inline element).
http://cat.xula.edu/tutorials/html/versus.php give a nice simple
explanation: "Blocks may contain other blocks, as well as inline
elements and data (content). In contrast, inline elements may contain
only data and other inline elements."

> What could I substitute to get the  style that I need?

Switching it around to some text would probably work :-)



--
Olly
http://thinkdrastic.net/
__
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] Can this menu be reproduced with pure CSS?

[BigSmoke]

You can give each menu item a different id and then style these IDs
accordingly, such as in:


  Home
  About us
  Our Services



ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-left: 1em solid yellow;
  border-bottom: 2px solid white;
  background-color: white;
  margin: 0;
  padding: 0;
  padding-left: 1px;
  height: 1em;
}

.menu li#about {
  border-left: 1em solid blue;
}

.menu a {
  display: block;
  background-color: #ccc;
}

.menu a:hover {
  background-color: yellow;
}



My suggestion is based on Rakesh Pai's suggestion that you should use
a border to achieve the square bullet effect. Only, I haven't used a
background image. Also, note that I haven't actually tested my
example. It's not guaranteed to work just like that.

  - Rowan

On 2/9/06, Jackie Carey <[EMAIL PROTECTED]> wrote:
> Thanks for this, Rakesh.
>
> My problem is, I can't work out how write the css to get a different
> colored box into the different list items when I rewrite the menu as a
> list, as per
>
> http://css.maxdesign.com.au/listamatic/vertical05.htm
>
> which uses just one image.
>
> That weird mouseover event is one of the main reasons why I want to redo
> the menu. Its very existence takes me a step further from level 2
> compliance. But your tip will make it more usable until I can get it
> changed - I'll do that ASAP.
>
> Cheers
>
> Jackie
>
> >This is fairly simple. You can use a border-left for the colored boxes
> >with a background-position: left with an appropriate image to show
> >that white gap between the colored box and the menu item. There might
> >be other solutions too, though. This is just something I came up with
> >off the top.
> >
> >Just a usability/accessibility tip while you are at it - The hover
> >state for the menu item which shows the yellow background is
> >deceptive. Not all the area of the menu item is clickable. Only the
> >link is. You should use a display: block; width: 100%; on the "a"
> >element, and specify the width of the menu item in the ul's properties
> >to get this functioning.
> >
> >
> >
> >On 2/9/06, Jackie Carey <[EMAIL PROTECTED]> wrote:
> >> http://www.itshere.org.uk
> >>
> >>
> >>
> >> I've inherited this table-based site, which is going to be replaced
> with
> >> a CMS-based site at some point in the next six months. I've worked
> >> styles into some of it, and the rest can remain until the switch.
> >> However, I am not happy with the menu and would like to replace it
> with
> >> a list-based menu.
> >>
> >>
> >>
> >> This could be done very easily if it weren't for the coloured boxes
> >> alongside the menu items. I'd like to keep them as they're part of
> the
> >> branding and look quite nice.
> >>
> >>
> >>
> >> Does anyone know of a way I could do this, without a whole heap of
> work
> >> (and ideally without Javascript).
> >>
> >>
> >>
> >> Thanks
> >>
> >>
> >>
> >> Jackie
> >>
> >>
> >>
> >> Scanned by MailDefender - managed email security from intY -
> >www.maildefender.net
> >>
> __
> >> 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/
> >>
> >
> >
> >--
> >Rakesh Pai
> >Mumbai, India.
> >[EMAIL PROTECTED]
> >http://piecesofrakesh.blogspot.com/
> >
> >Scanned by MailDefender - managed email security from intY -
> >www.maildefender.net
>
>
> Scanned by MailDefender - managed email security from intY - 
> www.maildefender.net
> __
> 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/
>


--
Morality is usually taught by the immoral.
__
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] creating an overlay div

[Jesse Skinner]

Hi Peter,

You can set an absolute position, width, height and z-index to a div. 
You can set a top/left to position it, or you can put it beside the 
'drop zone', like:


 drop zone 

These divs will have the same position and size. The 'position:absolute' 
causes the element to take up no space on the page, and without left/top 
the browser doesn't move it from the starting place.

You can add more layers with position:absolute, just make sure you put 
them in before the 'drop zone' or whatever it is that actually takes up 
space on the page.

(I was trying to solve a similar problem lately in JavaScript, dealing 
with mouse events, and ended up deciding the best solution was to set a 
mousemove event to the window, then calculate the mouse position to 
determine whether or not it was in the destination area. Perhaps this 
could help you too.)

Cheers,

Jesse Skinner
www.thefutureoftheweb.com

Peter Michaux wrote:
> Hi,
> 
> Suppose I have an inline div and I want an invisible but perfectly
> matching div overlaying it. How do I do this so that when I resize the
> window or scroll the two div's remain overlayed?
> 
> The reason I ask is for detecting a dragging item over a drop zone.
> The drop zone won't respond to the mouse pointer unless the drop zone
> has a higher z-index. However I want the draggable to appear above the
> drop zone. My idea is to have the drop zone on the bottom, the
> draggable in the middle and then a clear div on top of the drop zone
> at the heightest layer. That way the clear drop zone can respond to a
> mouse over.
> 
> Thanks,
> Peter

__
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] New IE 7 Ruined my Nav???

[Gunlaug Sørtun]

Ingo Chao wrote:
> TMH Design wrote:
>> http://www.thomashall.com/

>> It was perfect in IE 6

> The navigation is still jumpy, and the zooming the text size is not 
> possible in IE6.

Of course it is, but that doesn't make it come through any better...

...since the design isn't prepared for that.

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] Was: Newby struggling with unwanted border color in Firefox, now Fixing it to work in IE 6

[David Laakso]

Maxwell Balmain wrote:

>An update on www.rubybluestudio.com
>  
>
[...]

> The navigation links drop  
>down in Opera 6 for the Mac.
>
Opera6 on any OS is going way back there, IMO. Most Opera users stay 
relatively up to date-- and your pages look fine in Debian Opera 
8.51/Firefox1.0.7.

> I am assuming the same will happen with  
>IE6 on the PC. I don't have a PC.
>
Dunno. I sometimes wonder if I have a PC  myself-- for some unknown 
reason I am unable to reach your page in XP_SP2 IE6.0.  Anyway, here are 
some IE screen captures from Win/2000 and XP. Perhaps someone else can 
view it live and give correction advice.

> 
>Maxwell Balmain
>
Just curious: what's that dude snorting?

Regards,
~davidLaakso

__
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] What's causing the offset of items in this form?

[Rowan Wigginton]

James Eaton wrote:
> What causes the vertical alignment offset in the 
> bottom example?
>
> http://dm126.mediaodyssey.com/form.htm

I have no idea what's causing it, but in Firefox any value of 
"vertical-align" will change the alignment, "vertical-align:top" gives 
the best result.

Don't forget that IE adds unmodifiable padding to form elements as well, 
so that could cause further alignment issues.

/ rowan
__
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 and clear:both

[Paul Hilder]

Gunlaug Sørtun wrote:
> Paul Hilder wrote:
>> http://stressed.180bpm.co.uk/stuff/design/float.htm
>>
>> The above page looks fine in Firefox and Dreamweaver incidentally. 
>> However in IE a lot of the text doesn't appear until you resize the 
>> page. It goes again if you refresh it.
> 
> A well known IE/win bug - related to 'Layout'[1].
> 
> I think adding...
> 
> #container {position: relative;}
> 
> ...should "kill" that bug in your page.
> 
> regards
> Georg
> 
> [1]http://www.satzansatz.de/cssd/onhavinglayout.html

Ok that fixed most of the disappearing text.

However the s are still not showing in IE. I can see they're there. 
There's the right amount of space to allow for them. But IE just wont 
show them.

Any ideas?

Paul.
-- 
* Paul Hilder
* Get paid for you opinions on Films, Music and lots more
* http://www.ciao.co.uk/reg.php?FriendId=5017264

__
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] Was: Newby struggling with unwanted border color in Firefox, now Fixing it to work in IE 6

[Gunlaug Sørtun]

Maxwell Balmain wrote:
> www.rubybluestudio.com

> Can someone test this for me and give me a quick report to compare it
>  in IE6 vs Firefox? I am assuming this problem is a margin issue?

Sort of... :-)
IE6 is showing its 'margin-doubling bug on floats' on those logos, and
is running out of space because of that bug. The following fix is
working well...

#spice_logo, #toplogo {display: inline;}
...and won't disturb other browsers since only IE/win is buggy enough to
even register 'display: inline' on a float.

The same bug is making column2 drop below column1, so I added the same
fix to both columns...

#column1,#column2 {display: inline;}


That seems to be all that's needed for IE6.

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] IE and clear:both

[Gunlaug Sørtun]

Paul Hilder wrote:

>>> http://stressed.180bpm.co.uk/stuff/design/float.htm

>> #container {position: relative;}

> Ok that fixed most of the disappearing text.
> 
> However the s are still not showing in IE. I can see they're
> there. There's the right amount of space to allow for them. But IE
> just wont show them.

More of the same problem, I think.

Try the same fix on the h3 itself, and/or add a more "solid" 'hasLayout'
trigger to it, as described in the article I linked to.

This combination is often needed:

* html element {position: relative; height: 0;}

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] need help to sex up my website

[Patrick Aljord]

Hey all,
I recently tried to make my website using 100% CSS and make it valid
XHTML1.0. It worked but the result is kind of ugly, well I'm not a
designer as you might guess. I was wandering if you had some
tips/links to make my site more sexy such as by rounding my div blocks
or things like that.

Any suggestions very welcome.

Here is my website http://2e2c.free.fr/

Thanx in advance

Pat
__
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 and clear:both

[Paul Hilder]

Gunlaug Sørtun wrote:

 http://stressed.180bpm.co.uk/stuff/design/float.htm
> 
>>> #container {position: relative;}
> 
>> Ok that fixed most of the disappearing text.
>>
>> However the s are still not showing in IE. I can see they're
>> there. There's the right amount of space to allow for them. But IE
>> just wont show them.
> 
> More of the same problem, I think.
> 
> Try the same fix on the h3 itself, and/or add a more "solid" 'hasLayout'
> trigger to it, as described in the article I linked to.

Thanks, adding position: relative; to the h3 fixed it. :)

I'll remember this for later on. ;)

Paul.
-- 
* Paul Hilder
* Get paid for you opinions on Films, Music and lots more
* http://www.ciao.co.uk/reg.php?FriendId=5017264

__
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] Site Check: www.girlscantwhat.com

[Felix Miata]

[EMAIL PROTECTED] wrote Thu, 09 Feb 2006 13:26:00 -0600:
 
> Also - what are the advantages/disadvantages of using em width verses %
> width on the columns?
 
I don't see anything to directly address this on the wiki home page.

Both are relative measures. The difference is what each is relative to.
Em is always relative to font size. % is relative to the containing
block, usually the body, a div, or a table, unless applied to font-size,
in which case it applies to the parent font-size.

When you set your column widths in em, as font size is changed, the
relative widths of the columns stay the same, but the absolute width
only changes when font size is changed. Whether a horizontal scoll will
appear depends on the viewport width, on the widths you set, and on the
font size actually used, which means it is possible for the font size
used to cause a horizontal scroll. Using ems for column widths means
line lengths in characters will not vary as text size is changed. If at
16px default #rightside fits exactly "They said don't try to change" all
on one line, then it will do the same if the default is instead 24px or
32px.

In contrast, when you set column widths as a % of the body, the column
widths change only when the viewport width is changed, not when font
size is changed. This means regardless of actual font size, a change in
font size won't cause a horizontal scroll. This also means the columns
can get very crowded or even inadquate in width if the actual font size
is large. If at 16px default in an 800px wide viewport in #rightside
fits exactly "They said don't try to change" all on one line, as text
size is increased to 32px, that line will split onto two or more lines.

If you design a page (with no images) using em widths to look the way
you want in a 1000px wide viewport with 16px defaults (e.g. for
1024x768 resolution), then the page will look proportionally identical
with 32px defaults in a 2000px wide viewport (e.g. for 2048x1536
resolution).
-- 
"Love your neighbor as yourself."Mark 12:31 NIV

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://mrmazda.no-ip.com/auth/

__
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] Was: Newby struggling with unwanted border color in Firefox, now Fixing it to work in IE 6

[Rahul Gonsalves]

Maxwell Balmain wrote:
> Thanks again Rahul,

Please don't mention it.
>
> I REALLY appreciate your taking the time out to explain some of this 
> stuff. I will make these changes and move on from there. 
> www.rubybluestudio.com
 From one obsessive, compulsive person, to another.

Add



To your  area. This will ensure that you can stick a "Valid XHTML" 
button on your page.

Replace all  tags with  ones - think semantically rather than 
presentationally. With Firefox, you can turn off Styles (View > Page 
Style > No Style); the content should make as much sense as is possible.

I notice that you have a span class defined for the blockquote. Consider 
using the actual HTML element - that is, Lorem Ipsum 
Dolor, and then use CSS to redefine the way the 
blockquote is rendered. This will make more sense, for search engines, 
screen readers and people without graphical browsers (Lynx, et al.).

You also have a slight case of Divitis [2]; for an excellent article 
which talks more about this, [3].

See here for a complete list of HTML tags - there are _quite_ a few [1]. 
Please ensure that you stay with the non-deprecated ones, if you want to 
remain in valid xHTML space.
c
One minor nit-pick:



Should really be:



Add the space after the closing quote.
> I have learned a lot but still have a long way to go. I have become a 
> little obsessed with this stuff. I just wish it were easier. I am a 
> photographer and am also busy building a site for my work.
>
> You mention it is late where you are. Where is that?
I greet the day way before most of the world; I study in Bangalore, 
South India.

Also, one small suggestion; bottom-post, rather than top-post. You will 
notice that I have replied to your message below what you have written; 
this makes more sense when one reads through it, as you can see what you 
have written, and to which part I have specifically replied. [4]
>
> max

I hope this is useful,
Regards,
Rahul.


[1] http://www.w3schools.com/tags/default.asp
[2] http://en.wikipedia.org/wiki/Divitis
[3] http://www.456bereastreet.com/lab/web_development_mistakes/
[4] http://en.wikipedia.org/wiki/Top-posting#Bottom-posting

-- 

. . . . . . . . . . . . . . . . . . . . . . . .
Rahul Gonsalves
Make PNG, not War.
. . . . . . . . . . . . . . . . . . . . . . . .

__
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] Was: Newby struggling with unwanted border color in Firefox, now Fixing it to work in IE 6

[Rahul Gonsalves]

Maxwell Balmain wrote:
> Thanks again Rahul,

Please don't mention it.
>
> I REALLY appreciate your taking the time out to explain some of this 
> stuff. I will make these changes and move on from there. 
> www.rubybluestudio.com
 From one obsessive, compulsive person, to another.

Add



To your  area. This will ensure that you can stick a "Valid XHTML" 
button on your page.

Replace all  tags with  ones - think semantically rather than 
presentationally. With Firefox, you can turn off Styles (View > Page 
Style > No Style); the content should make as much sense as is possible.

I notice that you have a span class defined for the blockquote. Consider 
using the actual HTML element - that is, Lorem Ipsum 
Dolor, and then use CSS to redefine the way the 
blockquote is rendered. This will make more sense, for search engines, 
screen readers and people without graphical browsers (Lynx, et al.).

You also have a slight case of Divitis [2]; for an excellent article 
which talks more about this, [3].

See here for a complete list of HTML tags - there are _quite_ a few [1]. 
Please ensure that you stay with the non-deprecated ones, if you want to 
remain in valid xHTML space.
c
One minor nit-pick:



Should really be:



Add the space after the closing quote.
> I have learned a lot but still have a long way to go. I have become a 
> little obsessed with this stuff. I just wish it were easier. I am a 
> photographer and am also busy building a site for my work.
>
> You mention it is late where you are. Where is that?
I greet the day before most of the world; I study in Bangalore, South India.

Also, one small suggestion; bottom-post, rather than top-post. You will 
notice that I have replied to your message below what you have written; 
this makes more sense when one reads through it, as you can see what you 
have written, and to which part I have specifically replied. [4]
>
> max

I hope this is useful,
Regards,
Rahul.


[1] http://www.w3schools.com/tags/default.asp
[2] http://en.wikipedia.org/wiki/Divitis
[3] http://www.456bereastreet.com/lab/web_development_mistakes/
[4] http://en.wikipedia.org/wiki/Top-posting#Bottom-posting

-- 

. . . . . . . . . . . . . . . . . . . . . . . .
Rahul Gonsalves
Make PNG, not War.
. . . . . . . . . . . . . . . . . . . . . . . .

__
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] need help to sex up my website

[David Laakso]

Patrick Aljord wrote:

>Hey all,
>I recently tried to make my website using 100% CSS and make it valid
>XHTML1.0. It worked but the result is kind of ugly, well I'm not a
>designer as you might guess. I was wandering if you had some
>tips/links to make my site more sexy such as by rounding my div blocks
>or things like that.
>
>Any suggestions very welcome.
>
>Here is my website http://2e2c.free.fr/
>
>Thanx in advance
>
>Pat
>__
>  
>
*Think macho,* Women have rounded corners. Men do not. Let the machines 
do the talking. Strip the color. Center the page. Reduce the width to 776px.
Re-set to:
html, body { 100%/1.3 sans-serif; margin: 0; padding: 0; color: #000; 
background-color: #FFF; }
And use no other font-size declaration or color than above
~davidLaakso
__
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] Is this the IE guillotine bug? Or something else?

[Virginia Murdoch]

Hi there,
I'm having problems with this site: http://www.jd-associates.com.au/ 
test/permissions/
The CSS is at http://www.jd-associates.com.au/jd.css

In IE, the main column content gets lopped off below the line of the  
sidebar (you can see different examples on other pages). I've put  
some borders in place to give you a bit more idea of the page's  
structure.

Is this the guillotine bug? (http://positioniseverything.net/explorer/ 
guillotine.html)  I've tried following the instructions on that page,  
but not got very far with it, since not all of it seems to apply here.

I've also tried clearing elements in different ways, but haven't hit  
upon a combo that works.

Cheers,
Virginia
__
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] Can this menu be reproduced with pure CSS?

[Jono]

> http://www.itshere.org.uk
>
> Does anyone know of a way I could do this, without a whole heap of work
> (and ideally without Javascript).
> 


You can create that effect fairly easily with CSS by using left borders to
create the blocks and then margins and a small background image to create
the divisions.

I put together a quick page with styles inline, here:
http://www.charlestonwebsolutions.com/test_case/block_nav_01.html

Copy and Paste to your hearts content, but beware that I did not test this
in anything but Firefox on my Mac.  Should be OK for other browsers, even
IE, but check all the browsers you are concerned about to be sure.

Good Luck,


-- 
Jono Young
Designer | Developer | Illustrator
Charleston Web Solutions
"Bringing Higher Standards to the Lowcountry"
http://www.charlestonwebsolutions.com/



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

Re: [css-d] need help to sex up my website

[francky]

Patrick Aljord wrote:

>[...]I was wandering if you had some tips/links to make my site 
>more sexy such as by rounding my div blocks or things like that.
>[...]
>Here is my website http://2e2c.free.fr/
>  
>
Hi Patrick,
For sexy roundings p.e. you can have a look at the method Liquid Round 
Corners 
.
You can use a background-image (the same in each page): of one of the 
vehicles, or a détail of it.
Can be a colored one, or just mysty black&white, or an "artist 
impression" (filtered or transformed
in a paint programm).
Or a "footprint" of tyres, a bottom line with small photo's of some of 
the cars, just some graphical
accents.
You also can play somewhat with different background-colors of the page, 
or a subtle color gradient.
And surfing around to get some inspiration!

Greetings / bonne chance
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] browser / viewport height problem

[Jonathan Mao]

On 10/02/2006, at 5:54 AM, Gunlaug Sørtun wrote:

> Jonathan Mao wrote:
 The problem is, when the browser window is less than the height
 of the page the content seems to go out of the DIVs.
>>>
 http://www.abcreative.net.au/folio_print_case.html http://
 www.abcreative.net.au/folio_tv_showreel.html
>
> ...
>
>>> We naturally want the DIVs to expand/stretch so they 'contain the
>>> content' here. CSS tables do that by default in any good browser,
>>> so try adding this:
>>>
>>> #bgLayer {display: table;}
>
> ...
>
>> Some pages don't have much content (e.g., the About page) and so they
>>  appear very short. In other words, the white background doesn't go
>> to the bottom of the browser window.
>>
>> Ideally, I'd like the pages to be the full height of the browser
>> window.. so that there's the white background all the way to the
>> bottom of the viewport.
>
> Short pages did extend to bottom of viewport at my end - with that
> 'display: table' addition. Good browsers simulate old 'html tables'  
> when
> given that display-style.
>
> Which browser(s) create problems?
> Did you make any other changes to those styles?
>
> Give us a link to the most troublesome page, and we'll evaluate it and
> see what's possible to do.
>
> regards
>   Georg
> -- 
> [snipped for brevity]


The browsers I tested with are Safari and Firefox.

Yes, I did make changes to the stylesheet. Mainly to remove the  
height attributes ...

http://www.abcreative.net.au/c/styles.css

The home page and the About pages are exhibit the problem with height  
I'm having:

http://www.abcreative.net.au/
http://www.abcreative.net.au/about.html

I'm trying a few things now but any suggestions would be great!


Cheers
Jonno
__
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] Urgent Site Check - http://www.wordseurope.domainsolutions.ca/final/index.html

[K Husbands]

CSS Experts

 

Can anyone take a look at the following site and accompanying CSS and tell
me why the "Media" page continues to shift from left to right while browsing
the site. 

 

When I comment out the "main" div, which stores the page text on the media
page the menu works flawlessly without shifting. 

 

If I replace the text and remove the spacing/formatting, again the menu
functions properly, but once I format the text as a more readable list, this
undesirable shifting of the "Media page occurs within the browser window
(FIREFOX and possibly Safari).   

 

The menu doesn't shift when viewing any other sequence of pages. 

 

Any help is greatly appreciated. 

 

http://www.wordseurope.domainsolutions.ca/final/index.html

 

 

CSS here: http://www.wordseurope.domainsolutions.ca/final/globalstyles.css

 

 

HTML Here: http://www.wordseurope.domainsolutions.ca/final/html.zip

 

 

 

 

Ko

__
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] browser / viewport height problem

[Jonathan Mao]

On 10/02/2006, at 5:54 AM, Gunlaug Sørtun wrote:

> Jonathan Mao wrote:
 The problem is, when the browser window is less than the height
 of the page the content seems to go out of the DIVs.
>>>
 http://www.abcreative.net.au/folio_print_case.html http://
 www.abcreative.net.au/folio_tv_showreel.html
>
> ...
>
>>> We naturally want the DIVs to expand/stretch so they 'contain the
>>> content' here. CSS tables do that by default in any good browser,
>>> so try adding this:
>>>
>>> #bgLayer {display: table;}
>
> ...
>
>> Some pages don't have much content (e.g., the About page) and so they
>>  appear very short. In other words, the white background doesn't go
>> to the bottom of the browser window.
>>
>> Ideally, I'd like the pages to be the full height of the browser
>> window.. so that there's the white background all the way to the
>> bottom of the viewport.
>
> Short pages did extend to bottom of viewport at my end - with that
> 'display: table' addition. Good browsers simulate old 'html tables'  
> when
> given that display-style.
>
> Which browser(s) create problems?
> Did you make any other changes to those styles?
>
> Give us a link to the most troublesome page, and we'll evaluate it and
> see what's possible to do.
>
> regards
>   Georg


Hi again George

I've added the height parameter to the #bgLayer DIV and that's  
resolved the problem for Safari and FireFox... haven't tested IE/Win  
yet.

The test page is here:

http://www.abcreative.net.au/test/

and it validates! woo hoo!

Thanks again for your help


cheers
Jonno
__
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] Urgent Site Check - http://www.wordseurope.domainsolutions.ca/final/index.html

[rashantha de silva]

On Feb 9, 2006, at 8:54 PM, K Husbands wrote:

> CSS Experts
>
>
>
> Can anyone take a look at the following site and accompanying CSS  
> and tell
> me why the "Media" page continues to shift from left to right while  
> browsing
> the site.

it's not shifting on safari, the scroll bar comes up after you go  
from services to media.

services pages fits one screen - no scroll bar

media pages is more than one screen - scroll appears which makes the  
screen smaller.

[EMAIL PROTECTED]
__
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] browser / viewport height problem

[Gunlaug Sørtun]

Jonathan Mao wrote:
> I've added the height parameter to the #bgLayer DIV and that's 
> resolved the problem for Safari and FireFox... haven't tested IE/Win
>  yet.

> http://www.abcreative.net.au/test/

> and it validates! woo hoo!

So it should, since 'CSS table'[1] is valid CSS2/2.1 ;-)

Note: no 'min-height' needed since 'display: table' turns 'height: 100%'
into 'min-height: 100%' by default, which means a container with
'height: 100%;' set on it will stretch to at least fill the viewport
when body has that height (which it has in your latest CSS). From there
the container will continue to stretch as far as needed - depending on
the amount of content.



This use of 'CSS table'[1] might solve those problems many have when
they want CSS layouts to behave like old 'html tables' and fill the
viewport. Not all browsers are up to full use of 'CSS table' yet, but
the latest are handling enough of the specs to make it work.

IE doesn't have a clue, of course, but IE6 (and older win-versions) can
at least be tricked by 'height' acting as 'min-height' anyway.
IE7 is unclear, as it is indicated that 'CSS table' won't be included -
the old 'height = min-height' won't work anymore - and they're still
working on 'min-height'.
We'll see...

regards
Georg


[1]http://www.w3.org/TR/CSS21/tables.html
-- 
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] browser / viewport height problem

[Jonathan Mao]

On 10/02/2006, at 9:32 AM, Cem Meric wrote:

>
>> Ideally, I'd like the pages to be the full height of the browser
>> window.. so that there's the white background all the way to the
>> bottom of the viewport.
>>
>> Is that achievable? I've used repeated background images but that
>> doesn't seem to do the trick...
>
> Here is good example on your issue
> http://www.bigbaer.com/css_tutorials/ 
> css_three_column_liquid_maxheight_02.ht
> m
>
>


Hi again mate.

Thanks for that.

But I fixed the problem... you can view here:

http://www.abcreative.net.au/test/
http://www.abcreative.net.au/test/c/styles.css

thanks again!!


cheers
Jonno


__
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] browser / viewport height problem

[Jonathan Mao]

On 10/02/2006, at 4:32 PM, Gunlaug Sørtun wrote:

> Jonathan Mao wrote:
>> I've added the height parameter to the #bgLayer DIV and that's
>> resolved the problem for Safari and FireFox... haven't tested IE/Win
>>  yet.
>
>> http://www.abcreative.net.au/test/
>
>> and it validates! woo hoo!
>
> So it should, since 'CSS table'[1] is valid CSS2/2.1 ;-)
>

Sorry, I meant the page as a whole .. not just that bit of CSS. I did  
the Flash Satay thing to get the Flash nav to validate.


> Note: no 'min-height' needed since 'display: table' turns 'height:  
> 100%'
> into 'min-height: 100%' by default, which means a container with
> 'height: 100%;' set on it will stretch to at least fill the viewport
> when body has that height (which it has in your latest CSS). From  
> there
> the container will continue to stretch as far as needed - depending on
> the amount of content.
>
> 
>
> This use of 'CSS table'[1] might solve those problems many have when
> they want CSS layouts to behave like old 'html tables' and fill the
> viewport. Not all browsers are up to full use of 'CSS table' yet, but
> the latest are handling enough of the specs to make it work.
>
> IE doesn't have a clue, of course, but IE6 (and older win-versions)  
> can
> at least be tricked by 'height' acting as 'min-height' anyway.
> IE7 is unclear, as it is indicated that 'CSS table' won't be  
> included -
> the old 'height = min-height' won't work anymore - and they're still
> working on 'min-height'.
> We'll see...
>
> regards
>   Georg
>
>
> [1]http://www.w3.org/TR/CSS21/tables.html
> -- 
[]

Cool. I removed the min-height :-)

Thanks again for your help. Awesome!


Cheers
Jonno
__
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] Footer That Extends Fully to the Right

[anathema]

I have a client that is requesting something a little strange. Well  
basically it is best to look at it.

http://www.webnonsense.org/dan/

What they want is for the blue footer to extend all the way to the  
right edge of the screen, but NOT the LEFT. I am kinda stumped on how  
to do that.

I suppose I could use a 3 col layout with fixed width center column  
and fluid side columns and then just not put any content in the side  
columns and throw a back ground image in the right column. I have  
never even used that kind of layout, and am not sure I have seen one  
that wasn't full of hacks and other nonsense.

Looking for some clues

Anathema
__
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] Adjacent Selector for IE6?

[Ryan Bowman]

I have a definition list where each dt has an id.  I'd like to style
each dd depending on the preceeding dt.  I'd rather not have to class
each dt/dd pair, so the most obvious approach to me was dt#id + dd,
but just as obvious it doesn't work for IE.

Is there a CSS only way to simulate the adjacent selector for IE6?  I
haven't been able to find anything on google.
__
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/