Re: [css-d] hide image from non-enabled css

[jack fredricks]

On 5/26/06, Zoe M. Gillenwater [EMAIL PROTECTED] wrote:
 Courtney Burge wrote:
  On this page:
  http://www.cofc.edu/~hml/index2.html
 
  I have a header image that is set to display:none on the regular
  stylesheet and will print with the use of a print stylesheet.
 
  Is there a way to also hide this header when toggling OFF the CSS on
  the page?  I can't make the header image a background image, because I
  want it to print ...
 

 Well, obviously CSS can't do anything to solve a problem that occurs
 when CSS is off. :-) So, any solutions are off-topic for this list. Try
 asking your question on another list that can give you scripting advice:

 http://css-discuss.incutio.com/?page=OffTopic

 Best,
 Zoe

There are actually ways to do it.

All you need to do is find a way to display the image ONLY when css is
turned on.

If you COULD use background images, that would work...

however, you might want to try this;

img src=mypic.jpg width=1px height=1px
style=width:300px;height:400px; /

it's got issues, but you might be able to solve them.
__
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] IE5.0/Win issue with position:absolute anchor

[jack fredricks]

 Ingo Chao wrote:

  in [1], you have two solutions, but in Jack's case, only 4:onclick
  handler worked for me, not 3:negative z-index.
 
  Maybe another bug is interfering. I've tried a similar approach as with
  links not working when placed over an absolutely positioned element with
  a filter [2].
 
  http://www.satzansatz.de/cssd/tmp/noclick.html
 
  This requires an additional inner wrapper of the a.p. link with the
  dimensions of the image. But here, the negative z-index does the trick.

 Yes, that's interesting.
 If the anchor has 'layout' but not position:absolute, then position:absolute
 (or relative as well) and z-index:-1 on the image solves the IE5.0 problem,
 without the need of an extra wrapper.  But with position:absolute on the
 anchor this doesn't work anymore (the stacking changes), so an extra wrapper
 seems necessary (unless one wants to use javascript.)

 Bruno

thank you all. I'll play with all this on the weekend and see if I can
get it working 'fully'. I'm glad others had problems with this, as
it's the first bug in a while that caused me real pain.

re http://www.satzansatz.de/cssd/tmp/noclick.html
thanks for the sample. One thing though - might need to set
cursor:hand on that link for IE5.0. The cursor doesn't change on
:hover, just another sign that some kind of problem persists.

thanks again
jack
__
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] IE5.0/Win issue with position:absolute anchor

[jack fredricks]

Hi all,

I'm sorry, I don't have an external link where I can provide a sample.

Here's a html page though (you will need an image with a file name of
a.gif for this to work)

!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html lang=en
head
titledamn you ie 5!/title
style type=text/css
!--
#appheader
{
}
.makemeabsolute
{
  position: absolute;
}
--
/style
/head
body
div id=appheadera href=# class=makemeabsolute
title=blehimg src=a.gif alt=bleh width=400px height=40px
//a /div
/body
/html



The issue I have is in IE 5.01SP2.
The issue does not appear in IE5.5+

The image is absolutely positioned, but I cannot left-click on it to
activate the link. I can right-click and open or open in new window,
however.

The only styling applied to it is position:absolute, so I imagine some
of you might have seen this before, and hopefully know a 'fix'.

thanks
jack
__
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] IE5.0/Win issue with position:absolute anchor

[jack fredricks]

On 5/23/06, Philippe Wittenbergh [EMAIL PROTECTED] wrote:

 On May 23, 2006, at 4:00 PM, jack fredricks wrote:

  The image is absolutely positioned, but I cannot left-click on it to
  activate the link. I can right-click and open or open in new window,
  however.
 
  The only styling applied to it is position:absolute, so I imagine some
  of you might have seen this before, and hopefully know a 'fix'.

 Your link is absolute positioned, and therefore 'hasLayout' [1]; this
 is what makes the image not registering the mouse-click.
 Some tests and a workaround:
 http://www.brunildo.org/test/IEaL.html
 http://www.brunildo.org/test/IEABlock1.html

 [1] http://www.satzansatz.de/cssd/onhavinglayout.html

 Philippe


Thanks Philippe,

I'd already tried to give it layout. But after your email I tried
again...with no luck.

I also took the samples from brunildo.org and made the a absolutely
positioned, to the same effect.

Here's my latest sample. Again, I'm sorry I've no publically viewable samples.

Lastly, according to [1] making an element position:abs gives it layout.


!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html lang=en
head
titleIE5 no click/title
style type=text/css
!--
#appheader
{
border:3px solid green;
height:60px;
position: relative;

}

a
{
  position: absolute;
  height:1%;
  z-index:2;
}

img
{
  z-index:2;
  height:40px;
  display:block;
  position:absolute;
}

--
/style
/head
body
div id=appheader
a href=# title=bleh
img src=a.gif alt=bleh width=400px height=40px 
/
/a
/div
/body
/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] Style Families

[jack fredricks]

 There's javascript, sure. Couldn't we also try to advocate the introduction
 of something like familied style sheets though? And then allow a browser to
 specify an active stylesheet for each family, rather than just one active
 stylesheet?

It's very early here in Oz, and I might have missed a critical part of
your question (please forgive me if I have).

It sounds to me as if bodyswitching will solve your problem. No?

http://www.alistapart.com/articles/bodyswitchers/
__
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] @import media rule

[jack fredricks]

 Workaround:

 I use the following method to @import print-stylesheets into my main
 stylesheets...

@import url(fineprint.css);

 (yes, an ordinary @import without media-pointer.)

 Then, in my 'fineprint.css' i wrap the entire styleset in an ordinary...

@media print {

...all print styles...

}

 ...and all browsers that understand @media will apply the css for
 printing. That excludes IE/Mac and IE4/win and other old browsers.

 I use the same @media rule in stylesheets for screen, print and
 projection, and whatever other media I want to support.
 IE/Mac is let in on screen-styles through a hack, and also given its own
 set of styles for screen in order to overcome some of its limitations.

Hi all/Georg,

Thanks,

I have tried;

1) imported print.css for all media
2) wrapped the content of print.css in an @media print rule

but it still doesnt work for silly IE6 FF is fine.

FF web dev toolbar shows that print.css was linked properly.

Just a tip - Wrapping this way allows u change the @media print rule
to @media all, effectively allowing you to see what your page will
print like (as ofc is print preview).

I guess that means my question is; Is there a way to import a print
only style sheet for IE without using a LINK element?

thanks again
__
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] @import media rule

[jack fredricks]

Hi all,

I've done a bit of a google - with no luck..so I thought I'd mozie on
over here...

I can't seem to get this rule to work on IE6 or FF;

@import url(fineprint.css) print;

http://www.w3.org/TR/CSS2/cascade.html#at-import


The file and the file location are fine (a standard LINK element
works). It's just the @import version that breaks.

Is this just bad UA support? Is there a known work around? or am I just mad?

thanks
jzf
__
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] @import media rule

[jack fredricks]

 lo,

Had the same issue recently, IE and surprisingly FF don't seem to
 support that structure unfortunately, To select media specific css i
 used the link element and just a normal @import rule for the main css,
 ah well  :(
You could always try

@media print { @import url(print.css); }

but i've not tested it.

Rob

using that rule..IE6 imports the stylesheet, but applies it to screen
media also (and not just print as we hoped).

FF didnt import it at all.

thanks anyway :)
__
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] IE6 'dotted' border bug

[jack fredricks]

Hi all,

I've got a lil ol IE6 rendering bug, and I was wondering if anyone had
seen it, and found a solution to it.

NB: this issue is not related to IE getting dotted -vs- dashed confused

I have this rule;

.myclass
{
border: 1px dashed #000;
}

When I scroll down the page, IE doesn't redraw the borders well, and
they end up all 'bunched up' (so instead of steady dashes, i get
little sections of solid lines randomly dispersed throughout)

Is this just part of the common family of IE bugs, and a sign that
other issues exist? or is it something separate?

the div in issue 'has layout'

thanks

jack
__
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] fluid 3 col layout with over-sized content

[jack fredricks]

 Jack,

 There was a similar thread not too long ago. Here was my response,
 pointing to some appropriate layouts:
 http://archivist.incutio.com/viewlist/css-discuss/73051

 Zoe


Thank you all.

Over the last week I've tried several more designs, all to no avail.
Due to time pressures I have to move on, and will make do with a
layout that doesnt meet all my requirement, and re-visit this later.
The public CSM side of this project has a later release date,
thankfully.

The more I think about it, the more I realise that there is so much
non-breaking content of an unknown width - all of which might 'push
open' the center col. All of the 'main' designs I tried failed to cope
with this in what I consider to be the best way.

Once I solve it, or find a solution, I'll post a reply here

thanks again
jack
__
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] fluid 3 col layout with over-sized content

[jack fredricks]

Hi all,

I've been having problems getting the center column in my 3 col
layouts to deal with over-sized content, ie an image with a width of
2000px.

I'm about to give up, and when i do... it's time to come here :)

I've tried about a dozen well known layouts, and then about 6 'lessor'
ones from the wiki, and they all break in some way when this
over-sized content is present.

So..does anyone know of a layout that meets these requirements;

1. 3 cols
2. fluid center
3. fixed/em side cols, doesnt really matter
4. layout holds when center col is pushed wider by content ( wide
image/non-breaking text)

[this is not ALL my requirements, but its a start]

I dont really want to go down the 'detect the width of the center col
with js and make the wrapper div that wide' line of attack.

Thanks

jack
__
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] Resizing input

[jack fredricks]

I can't think of any CSS solution, sorry.

If it HAS to be a single line input, you're USCWAP. I'd suggest using
a TEXTAREA if you can.

If you can just display it (and not have it in an input), try

white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* moz */

good luck


On 3/22/06, Kai Hendry [EMAIL PROTECTED] wrote:
 http://surink.com/?uri=http%3A%2F%2Fsurink.com%2Fc0w

 I would like the bottom input to show the entire (long) URL. So the
 desired effect would be, if it is really long, the font size would be
 smaller (the URL will look shrunk). I don't want the user to scroll
 horizontally.

 Firefox 1.5 users are my audience.

 Best wishes,
 __
 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] Easy Clearing and clear:both issue

[jack fredricks]

Hi all,

Just wondering if you could please shed some light on this issue for
me. Sorry, I dont have access to an external webserver, so I will
paste the code here;

!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html lang=en
head
titleFloat Test/title
style type=text/css

* {margin: 0;padding: 0;}
body {font: 76% verdana, arial, sans-serif;margin: 10px;color: #000;}

#header
{
background-color: #edd;
padding: 2px;
}

#topnav
{
background-color: #d0b1b4;
padding: 2px;
}

#leftnav
{
background-color: #d2d6e3;
padding: 7px;
width: 150px;
float: left;
height:150px;
}

#main
{
background-color: #ff0;
margin-left: 180px;
padding: 7px;
min-height:500px;
_height:500px;
}

div.z
{
min-height:20px;
background:#ccc;
margin-bottom:5px;
}

div.z:after
{
content: .;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/style
/head
body
div id=wrap
div id=header
h1div.header/h1
/div
div id=leftnav
   div.leftnav
/div
div id=main
div class=z
why does my generated content make me as tall as the
floated leftnav to my right?
/div
/div
div id=footer
h3div.footer/h3
/div
/div
/body
/html


Basic 2 col layout: leftnav div is floated left, main div has a margin
a bit bigger than the width of the leftnav.

If you run the code you'll see the issue.

I guess the real question is is clear:both supposed to stop clearing
once it gets to the margin of the containing element, or does it also
clear BEYOND that margin?.

Thanks

jack
__
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] Easy Clearing and clear:both issue

[jack fredricks]

Thank you both (Gunlaug and Ingo),

the problem was indeed my lack of understanding of the 'Block
Formatting Context', listed as G said here;

http://www.w3.org/TR/CSS21/visuren.html#q15

The key then is to change the Block Formatting Context..and..WOW...

G's suggestion of changing the margin-right to overflow:hidden does that

not only that..it seems more a solid way to do my 2 col layout.
Damnit..more reading to do..I had no idea that overflow would do that.
I just thought it meant if my internal content gets too big, hide it
or show scroll bars etc. However, in this case, it is ALSO effecting
the box model of the element.

Without overflow:hidden set, the left-hand-edge of the div.main is
touches the left-hand-edge of the containing element (in this case the
body or div.wrap, im not sure which one).

With overflow:hidden set, the left-hand-edge of the div.main
effectively moves in c200px (ie the width of the floated div.leftnav).

Big difference..

again, thanks both. Everytime I post a question here, I learn about 4 things.

Jack
__
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] combining white-space:pre and word-wrap: break-word?

[jack fredricks]

I'm trying to combine white-space:pre and word-wrap: break-word in
a rule and not getting too far. I guess in someways they shouldn't
work together..but..

i'm trying to achieve this;

content in a TD which;

1) preserves soft-returns/line breaks (breaks that are NOT brs etc).
For this I need the white-space:pre.

2) long (or long due to increasing font-size) and unbroken text to be
forced to wrap, and to NOT push the TD wider. For this I need
word-wrap: break-word (or some proprietary rule ie white-space:
-moz-pre-wrap etc.

Getting one or the other to work is fine. Getting both to work
together is hard, but this is what I'm trying to do.

Any ideas?

NB: when I say soft returns I mean line-breaks that are NOT caused by
Ps or BRs. The kind of line-breaks that PRE preserves. I believe some
people call BRs soft-returns.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS rollover effect problems

[jack fredricks]

if it's an IE (only) hack, should it be escaped for IE (only)?


On 6/3/05, Ingo Chao [EMAIL PROTECTED] wrote:
 Lea Anna Davis schrieb:
  Adding the code  #menu a:hover {background:1%;} worked! How bizarre. I
  have no idea why IE needs to have this code.
 
 background:1%; tries to position a background-image (no matter if there
 is one or not) and reminds IE to do something: redraw all possible
 affected elements.
 Any background change on hover does this trick. This 1% has no sense at
 all. It's short, does not harm (mostly) the layout, and everybody knows
 instantly that this must be a hack, that's all.
 
 Ingo
 
 
 
 __
 css-discuss [EMAIL PROTECTED]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

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

[css-d] Re: Positioning/Hiding Legends

[jack fredricks]

i hate bumping, but i thought i'd try my luck once more

jack

On 5/30/05, jack fredricks [EMAIL PROTECTED] wrote:
 Does anyone know of a decent way to 'hide' a legend from visual
 browsers? For design reasons, I am duplicating the fieldset's legend
 using a header (sorry, I can't avoid this at this stage). I want to
 keep a real legend for accessibility, but don't want to have both my
 fake legend and real legend showing.
 
 dummy code;
 
 h3Fake Legend, sadly I must keep this/h3
 fieldset
 legendReal legend, please hide me for visual browser/legend
 input id=status_all type=radio name=Rstatus value=all checked
 label for=status_alllabel for radio/labelbr
 /fieldset
 
 dummy css;
 
 legend {
 position: absolute;
 left: -999em;
 border:1px blue solid;
 }
 
 display:none works, but kills the accessibility I am trying to keep.
 FF is not letting me position the legend.
 
 thanks
 jack

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

[css-d] Positioning/Hiding Legends

[jack fredricks]

Does anyone know of a decent way to 'hide' a legend from visual
browsers? For design reasons, I am duplicating the fieldset's legend
using a header (sorry, I can't avoid this at this stage). I want to
keep a real legend for accessibility, but don't want to have both my
fake legend and real legend showing.

dummy code;

h3Fake Legend, sadly I must keep this/h3
fieldset
legendReal legend, please hide me for visual browser/legend
input id=status_all type=radio name=Rstatus value=all checked
label for=status_alllabel for radio/labelbr
/fieldset

dummy css;

legend {
position: absolute;
left: -999em;
border:1px blue solid;
}

display:none works, but kills the accessibility I am trying to keep.
FF is not letting me position the legend.

thanks
jack
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Why using file extension .css

[jack fredricks]

it's a DOS hang-over. File extensions are not *needed*, the main OS
developers *choose* to use them. It makes file types more 'human
readable'. I personally think it should be metadata. But thats all
offtopic.

As for why use them TODAY? It all depends on your browser support. If
all the browsers you support (both today and tomorrow) can deal with
*href='basis'*, then use it. Personally I'll stick with n.3.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Images vs inline styles vs width/height

[jack fredricks]

 Just for clarification, since most of the replies have been taken out of
 context,  it is the positioning information within the asterisks that I
 was suggesting the author handle with CSS and move to the CSS file. The
 comment move to the CSS file had nothing to do with dimensions.
 img src=http://www.cregy.net/jewels/images/necklace.jpg; *align=left
 vspace=5 hspace=20* alt=picture of a necklace

I didnt mean to mis-quote, or even quote, you. I just said you made me
think. Your original post, where ever that was, said 'inline styles'.
I just thought I'd take it one step further.

I'll read Uwe's 2 links tonight, then do some testing if I can. Then
post my thoughts.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] help - CSS styled divider in between items on a page not working properly

[jack fredricks]

in an XML document

div class=divider/div

should be;

div class=divider/div

but this isnt a CSS issue. The validator told you the error - Error:
attribute values must be quoted in XML. You should listen to it, it's
quite smart :)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Site Check - Windows Users

[jack fredricks]

not too bad, at least font/viewport re-sizing doesnt totally blow it.
The only thing I saw in IE6 was Enjoy Unique Jewellery ending up
hidden behind the 'icons of jewels'.

i also find that the girl's picture is stretched, and that makes me feel weird. 

Is there supposed to be more borders around the main content areas?
the borders seem incomplete, so im not sure.

as far as CSS goes...

there's a lot of pos.relatives, and pos.rel and left/tops @ 0px. Do
you really need these?

You use shorthands (#ccc) at times, but not at others (#ff). I
guess it's personal preference, but i like using all shorthands when i
can.


also, a lot of developers like to set all margins/padding to 0 to
start with, like this;

* {margin:0, padding:0}. You might want to explore doing this. 


On 5/23/05, Richard Brown [EMAIL PROTECTED] wrote:
 Hi All
 
 Could you please tell me how the following pages look under IE in
 Windows.
 
 http://wilson.cregy.net/
 
 Css is at http://wilson.cregy.net/styles/pages.css
 
 Thanks a lot.
 
 Rich
 
 __
 css-discuss [EMAIL PROTECTED]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

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

[css-d] Images vs inline styles vs width/height

[jack fredricks]

david laasko wrote recently;

Move the inline styles for all the images to the CSS file.

and it made me wonder...

is it ok to move an image's width and height attribs into a style
sheet? I'm old skool, and I was brainwashed into making sure I always
specify them in the html source (to aid with page render pre image
download).

thanks
jack
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] user adjusted font sizing in browsers

[jack fredricks]

IE doesnt resize fixed (px) fonts. 

All other decent browsers will resize font's regardless of what unit
you specify. This is how it should be.

Maybe try JS?

however, if you do this, please make sure the font is readable to
those with poor eyesight. Making something 14pts and fixing it is
nicer than making something 7pts and fixing it.

On 5/21/05, shawn a [EMAIL PROTECTED] wrote:
 Does anyone know if there is a way to set a portion of text so that
 someone cannot increase or decrease the size using their web browser.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Specifying a width for list items

[jack fredricks]

you can't give a width to an inline element like an a. Turn your
as into block elements using

a {
display:block;
width:auto;
}

li {
   width:88px
}

that should do the trick



On 5/19/05, Mike Stickel [EMAIL PROTECTED] wrote:
 I'm working on a new project and the horizontal navigation is a
 pretty strict size - each item should be about 88px wide so that the
 navigation fills the width of the page. I thought using a list would
 work but I can't figure out how to specify the width for list items
 and I'm hoping someone can shed some light on the subject for me.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] site check

[jack fredricks]

there's one thing that confuses me..9 out of 10 'site checks please'
clearly dont EVER increase the font size when testing. Can we put that
in the wiki or something please?

Wayne, load up firefox, and increase the font size please.

also, the titles for your w3c/xhtml anchors are wrong.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Site Check - http://www.annskitchencorner.com

[jack fredricks]

On 5/18/05, Tom [EMAIL PROTECTED] wrote:
 For Mommy's day, I threw together this web site for my mom to share her
 recipes. The address is http://www.annskitchencorner.com
 http://www.annskitchencorner.com/  and I would appreciate any feedback,
 good or bad.
 
 Thomas M. Hall

CSS comments;

I personally think we as developers should make more use of CSS
shorthand properties. There are some nice articles on shorthands @
www.456bereastreet.com.

for example;

border-bottom:2px solid #003366;
border-left:2px solid #003366;
border-right:2px solid #003366;

can become

border:2px solid #036;
border-top: none;

and

font-family: verdana,'Lucida Grande', 'Lucida Sans Unicode', 'lucida',
sans-serif;
font-size:14px;

can become

font: 14px verdana,'Lucida Grande', 'Lucida Sans Unicode', 'lucida', sans-serif;

I also noticed a min-height somewhere in there with no escaped height for IE. 

I've plenty of comments on accessibility too (mainly fixed font sizes
and naughty use of dropdown list menus etc), but that's offtopic.
Contact me off list if you want to.

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

Re: [css-d] Separating Style Sheets - Structure and Color

[jack fredricks]

it also seems like it'd be a pain to develop two sheets at
once not to mention potential for mistakes...

:)

please read what you've just said again, then ask yourself what
benefits do i get from separating my stylesheets into 2 stylesheets
(one for color, one for structure).

If there is no development benefit, why do it?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Style rule based upon ID and Class?

[jack fredricks]

as the others have said, but keep this in mind;

the ID selector has higher specificity. This means that if you have
these two conflicting rules;

#explorer {border:1px RED solid;}

and

.explorer {border:1px BLUE solid;}

the border of the div will be RED.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] I just do not understand style sheets.

[jack fredricks]

1. have you validated your CSS?
2. have you validated all of your pages (html)?

you really shouldnt have to do this;

div id=page-title 
  h1Casper Shafer's Family in America br / Home Page/h1
 /div!-- PAGE TITLES --

as 

h1Casper Shafer's Family in America br / Home Page/h1

will do. Both DIVs and H1s are block level elements.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Site check - IE width problem

[jack fredricks]

3px bug?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] site check

[jack fredricks]

test in this order;

1. load page, view
2. increase font size 

With your site I stopped there. 

too many things to comment on. One is line-height. Remove the units.
I'm not sure what unit you are using, but you should set it like this;

line-height: 1.3

NOT

line-height 1.3em

IE doesnt inherit the line-height properly if u use a unit.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] alt and title on images (SEO etc.)

[jack fredricks]

 What is the proper way to describe photos (IMG tags) for the benefit of
 SEO/Google, etc.?

you missed the point. Alts and Titles arent there for google. They are
there to help accessibility. Please dont confuse the two, or you might
have a blind man throwing eggs at your car.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d]

[jack fredricks]

I'm not too sure what you mean when you say 'not expanding the
background'. Can you please clarify?

If something is playing up, its generally best to assume that firefox
is getting it right, and IE is being too 'smart' for its own good.

Your body rule looks fine, however.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floats not floating in IE

[jack fredricks]

form
{
margin: 0px;
padding: 0px;
width: 400px;
}

that is cause problems
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/