[css-d] Safari for Windows

[Lori Lay]

Apparently Apple has recently released a public beta of Safari for Windows.

Hopefully this gives Windows users an opportunity to test their sites on 
Safari...

It will be interesting to see how it differs from the Mac version.

http://www.apple.com/safari/

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

Re: [css-d] pleeeeease help.....png problems

[Lori Lay]

jeffrey morin wrote:
>
>
>
> The comment wasn't meant to be witty.  You still haven't followed the
> instructions.  Look at the demo page!  Line one in the CSS!!  It
> starts
> with USAGE in capital letters.  I've seen your posts over the last few
> months and I was noting a trend.
>
> Lori
>
>
> at the top of my global.css it says
>
>  .index #content #header img.logo { behavior: url(iepngfix.htc) }
>
> i've tried just .logo as well as img.logo
>
> i don't know why you don't see it

It's there now.  There was no .logo class when I looked at your CSS 
files and no behavior directive.

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

Re: [css-d] pleeeeease help.....png problems

[Lori Lay]

jeffrey morin wrote:
> On 6/7/07, Lori Lay <[EMAIL PROTECTED]> wrote:
>   
>> jeffrey morin wrote:
>> 
>>> i have looked at the following site forever now and still cannot get
>>>   
>> this to
>> 
>>> work.
>>>
>>> http://www.twinhelix.com/css/iepngfix/
>>>
>>>   
>> Well look closer because you haven't followed the instructions.  Pardon
>> the terse tone, but we're not here to write your code for you...
>> 
>
>
> as much as i love these kinds of witty comments after a long day, i had
> originally tried it with a class in my stylesheet but removed it for a
> javascript fix, you must have seen the latter. so I'll excuse your tardiness
> just this once Lori.
>
>   

The comment wasn't meant to be witty.  You still haven't followed the 
instructions.  Look at the demo page!  Line one in the CSS!!  It starts 
with USAGE in capital letters.  I've seen your posts over the last few 
months and I was noting a trend.

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

Re: [css-d] pleeeeease help.....png problems

[Lori Lay]

jeffrey morin wrote:
> i have looked at the following site forever now and still cannot get this to
> work.
>
> http://www.twinhelix.com/css/iepngfix/
>   

Well look closer because you haven't followed the instructions.  Pardon 
the terse tone, but we're not here to write your code for you...

Anyway, have a look at the demo page

http://www.twinhelix.com/css/iepngfix/demo/

to see the change that you have to make to your CSS to get this 
working.  Leave the .htaccess file alone - or more accurately, don't 
create one.  That's an Apache configuration file and I wouldn't start 
messing with that until you do a little more research.  You probably 
don't even need it for this anyway.

Lori

Hint:  you have given your logo a class called logo, but there's no logo 
class in your CSS file...
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Keeping a div positioned in Viewport

[Lori Lay]

Sam Carter wrote:
> I have an application with vertical scrolling.  I'd like to keep a div
> positioned in the viewport.  Before I resort to beating it up with
> JavaScript, is there a CSS technique, maybe with minor JavaScript, which
> works well across browsers?
>
> Sam
>   
It sounds like you're after fixed positioning but it's not supported in 
IE 6.  Georg aka Gunlaug aka Ron Zisman has, in addition to his identity 
crisis*, some interesting work-arounds to this issue:

http://www.gunlaug.no/contents/wd_additions_15.html

Lori

*  Forgive me, but I have been dying to say that for the last few days.  
Seems Georg is re-working his website and I guess he's deciding on a new 
moniker as well :-)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Width ignored in IE6 | Sub-menus disappear | Cross compatibility

[Lori Lay]

Renae Willis wrote:
> http://www.lccoachingbeta.com/web/LCC/countryprofiles1.html
>
> Additionally, the css drop down menu (alternate content for the flash
> menu) no longer has it's sub-menus once I place it in the page. The
> isolated, functional (in IE7 & Firefox 2) menu can be found here:
>
> http://www.lccoachingbeta.com/web/LCC/menufinal.html
>
> Also, are there better ways to test for cross compatibility?
>   
Your pages don't load.  I get a 404.  Try http://browsershots.org/ for 
cross-browser testing.  There's also http://www.browsrcamp.com/ for 
testing on Mac browsers.  There's also a paid service that gets you your 
screen shots a little quicker, but I'm afraid I don't have the URL 
handy.  Try searching the archives from April or May and I think you'll 
find some references.

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

Re: [css-d] Positioned Corners in IE6

[Lori Lay]

Glen Lipka wrote:
> Sample:
> http://cpns.commadot.com/
>
> In IE6, the corners at the bottom are being placed too low.
> When I use the IE Dev toolbar and change anything about them, they snap back
> into place.
>
> I hate errors like that.  Any ideas?  Thanks,
>
> Glen
>   
Actually the corners are off a bit in FF too.  Also, your layout is font 
resizing intolerant.  Even bumping up the font size once breaks the 
layout.  I don't know if this is something you can use at this point, 
but francky has an amazing rounded corners design that works in all 
browsers and is extremely flexible:

http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm

If you are using a fixed width, which I think you are, you don't need 
the four divisions that francky has allowed for.

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

Re: [css-d] Help needed: Float Layout IE 5.5 & 6 Win

[Lori Lay]

Boris Höltje wrote:
> Thank you Lori.
>
> This was exactly what I was hoping to fix. Unfortunately there seems  
> to be no quick solution I guess. Would be easier to track the problem  
> down, if I had that IE THING on Windoze here Hmm. What next?
> I couldn't find anything that could have caused the extra 10px width  
> in the #header. But I added a width to the #nav division inside the  
> header which I did not before.
>
> Could that have done it?
>
> Many thanks again.
>
> Boris
>   

I tried removing the width from the nav division and it didn't make any 
difference.  However, I found that changing the display of the list 
elements (li) to inline corrected the problem and it seems to work 
cross-browser.  Also this doesn't require any adjustments to the header 
width or right margin.

So here's the change:

li
{
display: inline;/* change from block to inline */
float: left;
margin-right: 10px;
}

So I guess you ran into IE's margin doubling bug and that's usually 
fixed with a change to inline display.

Viele Grüße

Lori

>
> Am 06.06.2007 um 18:19 schrieb Lori Lay:
>
> ...snipped...
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Help needed: Float Layout IE 5.5 & 6 Win

[Lori Lay]

Boris Höltje wrote:
> Hi all!
>
> I have a big problem concerning a float layout and I'm hoping to get  
> a solution, because I do not have a Win PC for testing purposes...
> I tried everything I'm used to do to work around the common float  
> bugs in IE 5.x &6 Win. Applied "display: inline" where needed and  
> tried to avoid other hacks by using rather margins than paddings.
> Unfortunately the layout still gets busted in older IE versions. In  
> any other browser I tried (Firefox Mac/Win, Safari, IE 7 Win)  
> everything looks fine.
>
> Has anyone suggestions how to fix this?
>
> The site can be found here: http://rgb-digital.com/arbeiten
>
> Thank you very much in advance.
>
> Boris
>   

Boris,

Some of the others on the list weren't quite sure what the problem was, 
so I'll start by saying that I think the issue is that the line 
following kontakt with 05-2007 on it drops down in IE 6.

I fixed this by bumping up the width on your header division and 
removing the right margin.  It appears that making it 610px wide will 
fix the problem and that seems to be as small as it can be and still 
have the line level with the rest of the menu.  Perhaps you can track 
down where these extra 10px are coming from.  If not, maybe you can feed 
the extra width to the older versions of IE only.  It doesn't break the 
rest of the layout.  I also had to remove the right margin to keep the 
header in line with the logo.

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

Re: [css-d] Star Rating System

[Lori Lay]

Diego Muñiz wrote:
> It works if i do that, but it doesn't validate in xhtml 1.0
>
> On 6/4/07, Lori Lay <[EMAIL PROTECTED]> wrote:
>   
>> Diego Muñiz wrote:
>> 
>>>>> I' ve done this star rating system: <
>>>>> http://www.punisha.com/test/estrellas/>
>>>>>
>>>>>
>>>>>   
>>> I have uploaded the new verion. It works in FF, IE and Opera, but in
>>> internet explorer i'm not able to show it inline.
>>>
>>>
>>>
>>>   
>> Try using a span instead of a division.  A span is an inline element, so
>> you can probably get the results you need without resorting to altering
>> the display attribute.
>>
>> Lori
>>
>> 
>
>   

So much for the easy solution.  It looks like Bruno has done some work 
with this.

Have a look at http://www.brunildo.org/test/inline-block.html to see how 
he solved it.  It looks like you just need to feed IE 6 an inline 
display value, but I didn't study his solution too closely.

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

Re: [css-d] padding and margins

[Lori Lay]

Sandy wrote:
> hey David
>
> Thank you SO MUCH for looking at this!
>
>   
>>> The  in
>>> http://sandyfeldman.com/test/smale/portfolio1/port111.html seems to have 
>>> just a little
>>> padding on the right, compared to the same thing in
>>> http://sandyfeldman.com/test/smale/portfolio1/port110.html
>>>   
>
>   
>> I am not seeing this in any browser. (Opera, FF, IE 6/7.) Did you fix it?
>> 
> I am still seeing it - but I am glad to hear you are not!
>
>   
I can see it too.  After some inspection with Firebug, it almost looks 
as if the larger images don't fit in the space you have alloted for 
them.  I think it's the border around the images.  The big ones with the 
border total 702px wide and you have alloted 700px.

>> I couldn't get your pages to load in IE6. The "stop" button did not 
>> work either. I intended to use the DOM inspector from the IE developer
>> toolbar, but it would not work while the download was still in progress.
>> 
> Can you see them now? They were validating when I used bbtidy here at 
> home, but when I checked them with the w3 validator, there was still 
> some work to do. I *think* they are ok now.
>
> http://sandyfeldman.com/test/smale/portfolio1/port110.html
> http://sandyfeldman.com/test/smale/portfolio1/port111.html
> http://sandyfeldman.com/test/smale/portfolio1/port112.html
>
>   
>> Try adding the margins to the surrounding links instead.
>> 
> I did that and opened a new can of worms which I am wrestling with now.
> It looks like
> http://sandyfeldman.com/test/smale/portfolio1/port112.html
> is ok in IE6 now, but that the other two have big gaps after the first 8 
> thumbnails, coming from goodness knows where.
>
> Any thoughts, anyone?
>   
I see that one too.  That's weird!  IE can't count?  I'm afraid I don't 
have a clue...

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

Re: [css-d] Problem making the width of div tags equal

[Lori Lay]

Farid Jamea wrote:
> Thank you so much for your help. That problem seems to be fixed. (or
> at least looks much better now).
>
> The other problem is that as you can see in Firefox
> (cateringbyingrid.com/temp) the suckertreemenu is separated from both
> header and content. In IE, the lower separation is not showing. I
> tried several ways but couldn't fix it. Can you see where the problem
> is?
>
> Thanks
>

Have you tried the Firebug extension?  http://www.getfirebug.com/

It is excellent for debugging this type of thing.  Using Firebug I can 
see that the space above the nav bar is caused by the bottom margin on 
your header division and the space below is caused by the top margin on 
your content division.

Please don't top-post and include the list in your replies.

Lori
> On 6/4/07, Lori Lay <[EMAIL PROTECTED]> wrote:
>> Farid Jamea wrote:
>> > Hello,
>> >
>> > I have a very simple web page. (one column, 4 sections: header, menu,
>> > content, footer). The width of the menu seems to be about 0.5 mm 
>> less than
>> > all other 3. (this is more clear in IE7, and also when you zoom)
>> >
>> > All sections are contained in a wrapper with a width of 922px.
>> > #header, #content, and #footer are all 900px. How can I make the 
>> entire menu
>> > to be 900px too?
>> >
>> > The web page can be found here: http://cateringbyingrid.com/temp/
>> >
>> > I appreciate any help
>> >
>> >
>> I'd remove the widths from the anchors (a) and put them on the list
>> items (li)
>>
>>
>> Lori
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] multiple similar pages with same navigation bar

[Lori Lay]

Kaye wrote:

...snipped
> My question is whether it is possible to turn this example into an 
> external style sheet with the header, footer and left column content 
> there and  then just have each separate page's content (for the right 
> column) in an html page that uses that external style sheet.
>
> I can't seem to make it work and am not sure if it's possible, or if 
> I just haven't got it working right, or if I have some kind of major 
> conceptual problem and this is just totally the wrong way to go about this.
>
>   
I think you're getting confused about the role of style sheets versus 
page content.  Style sheets serve as a single global source for the 
styles of your page elements.  By putting styles in an external style 
sheet, they can be modified once and the changes will be applied to all 
pages that use those styles.  Structural elements like headers, footers, 
nav bars etc. have to be listed in every page unless you use something 
like server side includes (SSI), which is outside the scope of this 
list.  Content Management Systems (CMS) also help with this and are also 
out of scope for this list.
> So is this a good way to go about this task, or is there some other 
> way to use css to have multiple pages all with the same navbar 
> (without duplicating it in each page)?
>   

The structure has to be repeated in every page.  The styles for the nav 
bar are defined once in an external style sheet and that sheet is linked 
to every page in the page head element.

If you don't have a large system, you can create a template page that 
has the page structure in it and replicate that page for all the pages 
in your site.  Then you just modify the content in the right column for 
each page.

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

Re: [css-d] table class

[Lori Lay]

Edinburgh Nights wrote:
> I usually add id but I have a series of tables I want to apply the same class 
> to
>
> 
>   
If you actually wrote it this way in your page, then there's your 
problem.  Try




>
> this doesn't work
>
> .signup_table {
> border-collapse:collapse;
> border:1px solid green;
> }
>
> or does this 
>
> table.signup_table {
> border-collapse:collapse;
> border:1px solid green;
> }
>
>   
Either of these should be fine.

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

Re: [css-d] Star Rating System

[Lori Lay]

Diego Muñiz wrote:
>>> I' ve done this star rating system: <
>>> http://www.punisha.com/test/estrellas/>
>>>
>>>   
> I have uploaded the new verion. It works in FF, IE and Opera, but in
> internet explorer i'm not able to show it inline.
>
>
>   
Try using a span instead of a division.  A span is an inline element, so 
you can probably get the results you need without resorting to altering 
the display attribute.

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

Re: [css-d] Problem making the width of div tags equal

[Lori Lay]

Farid Jamea wrote:
> Hello,
>
> I have a very simple web page. (one column, 4 sections: header, menu,
> content, footer). The width of the menu seems to be about 0.5 mm less than
> all other 3. (this is more clear in IE7, and also when you zoom)
>
> All sections are contained in a wrapper with a width of 922px.
> #header, #content, and #footer are all 900px. How can I make the entire menu
> to be 900px too?
>
> The web page can be found here: http://cateringbyingrid.com/temp/
>
> I appreciate any help
>
>   
I'd remove the widths from the anchors (a) and put them on the list 
items (li).  That seems to provide a bit more control of the widths.  
You could set the width of your suckertreemenu division, but the 
contents won't expand to fill that space anyway, so you're better off 
setting the width on the inline elements.  Since six doesn't divide into 
922, I think you're going to have to adjust your overall width anyway if 
you want the menu to fill the space.

Remember that the overall width is your specified width plus the width 
of borders, padding and margins, so even though you have specified 900px 
for your header, content and footer, the overall width is 922px and you 
have to make your menu match that.

Lastly, the menu is wrapping to the next line in FF 2/Mac, so it's 
overall width is larger than the content.  You should use a properly 
compliant browser for development and test on IE afterwards.  It will 
save a lot of frustration in the end...


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

Re: [css-d] Navcontainer Problems

[Lori Lay]

Richard Brown wrote:
> Hi All
>
> I am trying to use different images for a nav list. I am declaring
> different classes for each image and that is working. However, I
> cannot get the text to sit below the images. Could you have a look and
> maybe see where I am going wrong please?
>
> 
> 
>
> Please ignore the hideous hover!
>
> Many thanks.
>   

I actually thought the hover was kind of cute :-)

Try this

#navcontainer ul {
list-style-type:none;
margin:0px;
padding:0px;
text-align:center;   /* change this to center */
}

and this

#navcontainer ul li a.one {
background:transparent url(images/appleno.gif) no-repeat scroll 50% 0%;  
/* change the horizontal alignment to 50% */
}

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

Re: [css-d] yet another problem between IE and Firefox. (Can I throw IE out the Windows?)

[Lori Lay]

Sarah Atkinson wrote:
> OK my links in IE are underlined but in Firefox they are not
> They are not meant to be underlined.
>  
> http://www.2spoileddogs.com/
> (under tab "compare plans") word the bottom of the page
>  
> CSS
> http://www.2spoileddogs.com/css_include.inc.php
>  
> Sarah
>
>   
I don't see any underlined links in IE 6 or 7.  The only thing I see is 
that under IE 7, the grey backgrounds on the menus at the bottom of the 
page don't go all the way across.

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

Re: [css-d] Problem between IE 6 and Firefox - at end of my rope.... please help

[Lori Lay]

Michael S. Kirkpatrick wrote:
> I can't figure out why but in IE 6 my spacing looks different (more
> space on LI). I've read (and tried) just about every hack related to
> extra spaces on LI's in IE 6 but all to no avail. Here's my design -
> can someone just point me in the right direction and I'll be happy to
> figure out within the code on my own.
>
> http://www.webjerks.com/
>
>   
Your blk_button images don't seem to be on the server.  Also, as others 
have mentioned, I think you will get better results if you make them 
background images on the anchors or span elements.  That way the 
browsers won't be trying to make space for them and you should be able 
to control the spacing better.  Also, I would remove the absolute 
positioning from the span element and use margins to padding to get it 
into position.  The text is awfully hard to read and your visitors may 
want to bump up the font size to compensate.  Absolute positioning won't 
tolerate that very well.

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

Re: [css-d] Layout issues

[Lori Lay]

jana coyle wrote:
> Here is my site http://www.precisemessenger.com/private/help4.html
> I have a problem with getting text to align where I want it.
> On the top of the page The links Home, About Us and Contact are not centered 
> inbetween the lines.
>   

You've only specified left padding on your anchor elements.  Specify an 
equal amount of right padding and they will be centred.

> The select a size form and add to cart are not centered under the price $2.95
>   
Don't see this element.
> Image description is not centered under the square image 1 and the spaces 
> between image description, product photos(click here), available colors and 
> the color squares are to far apart.
>   
Why would you expect it to be?  You haven't given any styles to the 
paragraph element in the thumbnailtext division.  You've given 
productphotos and shirtcolors an auto margin on all sides.  If you 
wanted to centre these divisions, then it should only be the right and 
left margins that are auto, not all.  Of course, this will only work 
under compliant browsers.  You'll have to feed text-align: center to 
IE.  (I see you have it on shirtcolors, but not productphotos).

You have some validation errors that may also cause trouble.

Lori
> I have been trying for two days to work these problems out.
> Any help is greatly appreciated.
> Thanks,
> Kevin
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] content boxes sitting o/s

[Lori Lay]

Fiona wrote:
> Hi,
>
> I have just joined the list and am new to CSS.  I am trying to build my 
> first site with it and have run into a few problems.
>
> I have uploaded the page to www.fionahayward.com
> In IE7 the left and right content divs (maincontent and rightportfolio) sit 
> inside the container div like they are supposed to, but when I look in 
> Firefox, they are sitting outside of the main container.
>   

I'm not seeing the behaviour you describe under FF 2/Mac.  It looks fine.

> The CSS is embedded in the head.
>
> Also, if I wanted to put a footer at the bottom of the maincontent div (on 
> the left), but don't want it to go under the right content box, how would I 
> do that, but just sit level with the bottom of the rightportfolio div? (I 
> hope that makes sense)
>   

Try moving the rightportfolio division above your maincontent div.  
Create a new wrapper division and put maincontent and the footer in it.  
You will probably need to replicate some of the styles from maincontent 
to the new wrapper division (like float: left for example, new value for 
height).

Lori
> Any help would be appreciated.
> Regards
> Fiona 
>
>
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE 6 not displaying image

[Lori Lay]

Sandy wrote:
> Hey all,
>
> Any idea of what may be going on here? IE6 does not display the image in 
> the top left side of the banner.
>
> http://www.uoguelph.ca/~dmangroo/index.html
> styles are here:
> http://www.uoguelph.ca/~dmangroo/mangroo.css
>
> thanks!
>
> Sandy
>   

Sandy,

I guess you fixed the problem you were having because I don't see the 
behaviour you are describing.  However, your page does render quite 
differently in IE and Firefox.  In IE the descriptive text goes all the 
way across the page, with the yeast fluorescence image underneath.  In 
Firefox, the text is in a justified division, but the image slips down 
under the text, but to the right, with a blank space above.

I'm not sure what you intend, but I thought I'd let you know.

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

Re: [css-d] Site check, please -- two small problems

[Lori Lay]

Tom McNeer wrote:
> Deb,
>
> Thanks for the compliment. As far as validation goes, are you 
> referring to HTML or CSS validation? The W3C CSS validator simply 
> throws a servlet error, and has been doing so for a long time; so I 
> haven't been able to validate the CSS, although it's not different 
> from page to page. If you could give me some general idea of what sort 
> of validation errors you received, I'd appreciate it.
>
> Lori,
>
> Actually, I took the breadcrumb trail out of a div because of weird IE 
> behavior. If I turn it into a div, the div itself is positioned 
> correctly, but for some reason the text inside is indented about 10 
> pixels. Firebug reports no padding on the element, either specified or 
> inherited. ???
>
> When you make it a span, the text and element are both positioned to 
> the right, corrected by the conditional padding -- but disabling the link.
>
> -- 
> Thanks,
>
> Tom
>

Tom,

There are several bugs in your stylesheet.  For one, there's a missing 
semi-colon on the last rule in the wrapperBorder definition.  If you're 
using Firefox, the new error console has a CSS section which will show 
all the CSS errors - and there are quite a few.  If you have the new 
error console, open it from the Tools menu and pick the CSS tab in the 
second row of menu options, starting with JS.

Maybe you should get your CSS fixed up before we start messing around 
with spans and divisions...

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

Re: [css-d] Site check, please -- two small problems

[Lori Lay]

Tom McNeer wrote:
> Hi folks,
>
> I would appreciate it if anyone interested would quickly scan through
> http://ids.mediumcool.com.
>
> I think most cross-browser issues are solved -- except for two.
>
> First, on any page below the home page, there is a bread crumb trail. In IE6
> and 7, the first link in the trail -- Home -- is not activated as a link.
> Viewing the source shows that the  tag is in place and correct, and
> Safari and Firefox have no problem with it. The problem is "caused" by an IE
> conditional statement that moves the breadcrumb to the left. I don't know
> why the move would disable the link, but it seems to. If someone can explain
> to me a way to make IE align the breadcrumbs as they are in Firefox without
> the conditional, I'd love it.
>
>
>   
Have you tried putting the breadcrumb trail in a div instead of a span?  
I'm wondering if IE is getting hung up on the repositioning of an inline 
element.  Your span seems like a block level element anyway, so maybe 
using a div would give you better results.

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

Re: [css-d] Div Element Sizing

[Lori Lay]

Chris Anderson wrote:
> Hi All
>
>
> My example is having a 100% width and height div, but with a margin of 10px
> around it to create a border.  This should demonstrate my issue, even though
> it's not exactly how my site is designed.  However the div goes off the
> right hand side and the bottom of the page, despite having experimented with
> both margins and padding on both the body and the div.  My example page HTML
> below:
>
>   
Margins, borders and padding are all in addition to any width you have 
specified.  Remove the 100% width and height from your contentdiv.  You 
are getting 100% + 1px border + 2*10px margin.

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

Re: [css-d] Estimating x-height

[Lori Lay]

Jukka K. Korpela wrote:
> (The discussion started under the heading "font-family font sizes", but I 
> now changed the Subject to more specific.)
>
> On Fri, 18 May 2007, Bruno Fassino wrote:
>
>   
>> Putting together the above, if we trust Gecko,  the aspect ratio of a
>> font can be obtained simply observing the size of an element
>> dimensioned using 'ex' units.
>> 
>
> The results are consistent with those I got with my simplistic method that 
> compares the letter x in large font size with a stickyard. See
> http://www.cs.tut.fi/~jkorpela/x-height.html
>
> It seems that different ways lead to the same results, implying that the 
> figures mentioned in CSS specifications are wrong - most notably when 
> they say that Verdana has an aspect ratio of 0.58, but it actually has 0.545.
>
> This, as well as methods of finding out the x-height value for specific 
> fonts, is of some importance to authors who wish to use font-size-adjust 
> (which helps on Firefox 2 and does no harm when it doesn't).
>
>   
I don't think you can rely on the size of elements dimensioned in ex 
units.  Eric says in his book that many user agents get their value for 
ex by taking the value of em and dividing it in half.  This is because 
most fonts don't have the value of their x-height built-in, and it's 
difficult to compute, as you discovered.  Since lowercase letters are 
about half as tall as uppercase letters, user agents assume that 1ex is 
equal to .5em.

Also, would monitor resolutions or dot pitch have any impact on your 
calculations?  Since you are taking a ratio, I wouldn't think so, but I 
wonder...

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

Re: [css-d] A line over a textarea.

[Lori Lay]

victor NOAGBODJI wrote:
> As you can see here:
> http://tiger.towson.edu/~knoagb1/javascript/textslicer.html
>
> I'm trying to create a guideline widget for a textarea. The problem is the
> big space left after the textarea due to the height of the line.
> Do you have any suggestion?
>
>   

IE has a problem with empty divisions.  You need to convince it that the 
division is really empty.  It seems that IE reserves some space for the 
content that doesn't exist.  Believe it or not, you convince IE that the 
div is empty by inserting a comment in the empty div.

Change the ruler div to the following:



You don't need the text in the comment at all, just a comment.  I 
usually have text of some sort there so that others know what it's for.


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

Re: [css-d] Layout Issue With IE 6 & 7

[Lori Lay]

Alicia Orth wrote:
> My goal is to create a layout that has the following:
>
>1. 3 column layout with a header and footer (the footer can either
>   sit at the bottom of the 2nd column, with the 1st & 3rd columns
>   wrapping down beside it.  Or, it can sit under and span all 3
>   columns).
>2. 100% width fluid layout - 1st & 3rd column are fixed width while
>   the 2nd column is fluid
>3. All 3 columns will be filled with their own color and need to be
>   of equal height (I would prefer using color codes rather than
>   images if possible)
>4. It can't matter which column will have the most/least amount of
>   content
>5. If a page is short on content I would like the footer to stick to
>   the bottom of the page.  However, I don't want mock frames (the
>   header and footer should scroll with the page).
>6. 100% height - if a page is short on content I would like the
>   columns to expand all the way down to the footer
>7. I would like to be able to enforce the set width of the 1st and
>   3rd column.  I don't want long unbreakable URLs or emails to break
>   the set width.
>8. I would like to avoid using JavaScript if possible.
>
>
>   

Have a look at http://www.pmob.co.uk/temp/3colfixedtest_explained.htm

I think he manages to meet most of your requirements.  I have adopted 
the "content first" version (link in left column on page), with some 
modifications.

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

Re: [css-d] Using position: fixed for repeated page headers

[Lori Lay]

Philippe Wittenbergh wrote:
> On May 25, 2007, at 9:44 AM, Lori Lay wrote:
>
>   
>> Jukka K. Korpela wrote:
>> 
>>> I'm looking for a way have some content printed at the start of each
>>> printed page. I guess this is would be generally useful, since  
>>> many rules
>>> and standards require that some identifying information appear on  
>>> each
>>> page.
>>>
>>> On Firefox 2, the following simple approach works nicely: wrap the
>>> repeatable initial content in side ... and use  
>>> e.g.
>>>
>>> @media print {
>>>#hdr { position: fixed; top: 0; width: 100%; height: 3em; }
>>>body { position: relative; top: 4em; } }
>>>
>>> It degrades gracefully on IE 6, but on IE 7, things get wild: the  
>>> header
>>> is repeated but it overlays the content proper. If I put the content
>>> proper inside a div and set position: relative; top: 4em for it, then
>>> IE 7 seems to do it right. Demo:
>>> http://www.cs.tut.fi/~jkorpela/test/hdr.html
>>> (I didn't actually print it; I'm relying on Print Preview.)
>>>
>>> Is the approach reasonable at all - can it be expected to work on
>>> conforming browsers? Any pitfalls?
>>>
>>> Often we'd like to have the header not appear on the front page,  
>>> but I'm
>>> afraid there is no simple way to prevent that.
>>>
>>>
>>>
>>>   
>> Jukka,
>>
>> I had a look at this in various browsers.
>>
>> Results:
>>
>> FF 2/Mac, FF 2/Win - Works ok, but the English - the universal  
>> language
>> on the Internet heading with the copyright is repeated on every page.
>> 
> That is the intention, actually. Position:fixed objects should be  
> repeated on every page.
>   
>> Your hdr division is at the very top of the page.
>>
>> Safari - Works as expected.  The hdr division contents are repeated
>> every page, but the English - the universal language... with the
>> copyright title is only on the first page.
>> 
> Safari and WebKit get that wrong
> #hdr, which is the fixed position object should be displayed as Fx  
> 2.0 does.
>
> Philippe
> ---
> Philippe Wittenbergh
> <http://emps.l-c-n.com>
>
>
>   
Yes, Philippe, you're right.  I got confused about which part was 
supposed to repeat and which part was simply output by the browser.

So, only FF correctly renders the print style.  Opera tries but the 
content overwrites the header on the second page.  The rest of the pages 
do not display the header.  And the header is printed vertically if you 
actually print the first page.  As far as the rest go, they didn't get 
it right either.  I even tried a WebKit nightly - no dice.

Sorry for the confusion.

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

Re: [css-d] Using position: fixed for repeated page headers

[Lori Lay]

Jukka K. Korpela wrote:
> I'm looking for a way have some content printed at the start of each 
> printed page. I guess this is would be generally useful, since many rules 
> and standards require that some identifying information appear on each 
> page.
>
> On Firefox 2, the following simple approach works nicely: wrap the 
> repeatable initial content in side ... and use e.g.
>
> @media print {
>#hdr { position: fixed; top: 0; width: 100%; height: 3em; }
>body { position: relative; top: 4em; } }
>
> It degrades gracefully on IE 6, but on IE 7, things get wild: the header 
> is repeated but it overlays the content proper. If I put the content 
> proper inside a div and set position: relative; top: 4em for it, then 
> IE 7 seems to do it right. Demo:
> http://www.cs.tut.fi/~jkorpela/test/hdr.html
> (I didn't actually print it; I'm relying on Print Preview.)
>
> Is the approach reasonable at all - can it be expected to work on 
> conforming browsers? Any pitfalls?
>
> Often we'd like to have the header not appear on the front page, but I'm 
> afraid there is no simple way to prevent that.
>
>
>   

Jukka,

I had a look at this in various browsers.

Results:

FF 2/Mac, FF 2/Win - Works ok, but the English - the universal language 
on the Internet heading with the copyright is repeated on every page.  
Your hdr division is at the very top of the page.

Safari - Works as expected.  The hdr division contents are repeated 
every page, but the English - the universal language... with the 
copyright title is only on the first page.

Opera/Mac - It appears that Opera's own styles interfere with yours.  
Your hdr title is displayed on the left ok, but Opera puts a page number 
where the url should be.  The url is printed at the bottom left of the 
page.  Also, the stuff at the top of the page is jammed right at the 
edge of the page - in print preview mode anyway.  When I actually print 
the page, your page title (with copyright) is printed vertically down 
the page!  But the content isn't jammed against the edges.  On page two, 
the first page title (with copyright) is printed under "The Current 
Situation" title.  The rest of the pages seem ok.

IE 6 - Works ok.  The first page title is only printed on the first 
page.  Your hdr contents are printed on every page.  I have found that 
fixed positioning seems to work in print sometimes.  I managed to break 
it, but that's too long a story to go into here.  Anyway, it seems to be 
working in your example.

It would appear that your approach is ok in most browsers.  You would 
have a bit more work to do if you wanted it to work in Opera - on the 
Mac anyway...

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

Re: [css-d] firefox display problems - need urgent help

[Lori Lay]

Lori Lay wrote:
> Liz wrote:
>   
>> It is worse on the Mac Firefox but on the pc it happens on
>> http://www.whsfoundation.org/calendar.shtml and
>> http://www.whsfoundation.org/donate.shtml  Try clicking back and forth
>> between a few links on the site. It happens more often after coming from
>> another page in the site.  My PC & Mac Firefox version is 1.5.0.11.
>>
>> When I check for updates it says there are no new ones.
>>
>> Liz
>>
>> On 5/15/07 4:32 PM, "Brian Crescimanno" <[EMAIL PROTECTED]> wrote:
>>
>>   
>> 
>>> Firefox 2.0.3 here; I don't see the problem you're referring to.  Can
>>> you point to a specific URL URL where you're seeing the bug?
>>>
>>> 
>>>   
> Confirmed under FF 1.5/Win and FF 2.0/Win.  Not a problem under FF 2/Mac.
>
> You have to go to Mozilla.com to install FF2.  It's a major upgrade, so 
> it's not part of the regular updates.  FF 1.5 is still being supported.
>
> Since it works under the Mac and not under Win, I'd have a closer look 
> at your font sizes.  Also, even when it screws up, hitting the refresh 
> button fixes it - as if there is something that it can't quite figure 
> out on the initial load.
>
> I'll have a bit more of a look, but you might want to use Firebug to 
> double-check your widths and padding on your divisions, if you haven't 
> done so already.
>
> Lori
>   
Do you need the display: table on the content division?  In one of the 
times that the problem manifested itself, I removed display:table using 
Firebug from the content division and it corrected itself.  Mind you, 
Firebug redraws the screen when you change the CSS, so I may be way off 
base here.  However, I didn't see any difference in the layout with 
display:table removed, so I wonder if you need it.  Certainly IE doesn't 
understand that anyway.

Just a thought.

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

Re: [css-d] firefox display problems - need urgent help

[Lori Lay]

Liz wrote:
> It is worse on the Mac Firefox but on the pc it happens on
> http://www.whsfoundation.org/calendar.shtml and
> http://www.whsfoundation.org/donate.shtml  Try clicking back and forth
> between a few links on the site. It happens more often after coming from
> another page in the site.  My PC & Mac Firefox version is 1.5.0.11.
>
> When I check for updates it says there are no new ones.
>
> Liz
>
> On 5/15/07 4:32 PM, "Brian Crescimanno" <[EMAIL PROTECTED]> wrote:
>
>   
>> Firefox 2.0.3 here; I don't see the problem you're referring to.  Can
>> you point to a specific URL URL where you're seeing the bug?
>>
>> 
Confirmed under FF 1.5/Win and FF 2.0/Win.  Not a problem under FF 2/Mac.

You have to go to Mozilla.com to install FF2.  It's a major upgrade, so 
it's not part of the regular updates.  FF 1.5 is still being supported.

Since it works under the Mac and not under Win, I'd have a closer look 
at your font sizes.  Also, even when it screws up, hitting the refresh 
button fixes it - as if there is something that it can't quite figure 
out on the initial load.

I'll have a bit more of a look, but you might want to use Firebug to 
double-check your widths and padding on your divisions, if you haven't 
done so already.

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

Re: [css-d] firefox display problems - need urgent help

[Lori Lay]

Liz wrote:
> On this site http://www.whsfoundation.org/ when I click around within the
> site in Firefox often the right and left column are empty because the
> content drops to the bottom.  This didn't happen on my demo sever
> http://www.liztestsite.com/indexTest.shtml. Any ideas of what I can do?
>
> Thanks,
>
> Liz
>
>   
I couldn't find any problems with FF 2.0.0.3 on Mac.  There is a 
definite re-draw of the left navigation contents, but they stay put.  
I'm running at 1920x1200 - I don't know if that has anything to do with 
it or not.  Even seems to work with JavaScript disabled.

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

Re: [css-d] remove input border via css?

[Lori Lay]

tedd wrote:
> At 9:12 AM +0900 5/15/07, Philippe Wittenbergh wrote:
>   
>> On May 15, 2007, at 6:43 AM, tedd wrote:
>>
>> 
>>>  Is there any way to use css to remove the border that accompanies 
>>>  an input box?
>>>
>>>  I've tried border: none;, but that hasn't worked.
>>>   
>> That should work (and works in most OS X browsers, actually [1]). 
>> {border:none} is equivalent to border: 0 none solid. And border-style 
>> trumps all other values.
>> Where does it fails? Test case ?
>>
>> [1] except Safari 2.0 and lower, which simply doesn't allow styling 
>> of border on input controls.
>>
>> Philippe
>> 
>
> Hi Philippe:
>
> I guess that's it. The only problem I have is with Safari 2.0.4.
>
> One of the few times that Apple got it wrong.
>
> Cheers,
>
> tedd
>   
Hmmm interesting.  It does work in a recent WebKit nightly 
build...(#21368)  Might mean this will be fixed soon?  Keep our fingers 
crossed I guess.

Used border: 0; actually.

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

Re: [css-d] remove input border via css?

[Lori Lay]

tedd wrote:
> Hi gang:
>
> Is there any way to use css to remove the border that accompanies an input 
> box?
>
> I've tried border: none;, but that hasn't worked.
>
> Cheers,
>
> tedd
>   

Try border-style: none;

If that doesn't work, try

border-style: none;
border-width: 0;

Usually border-style on its own is enough.

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

Re: [css-d] ordered horizontal list

[Lori Lay]

Mauricio Samy Silva wrote:
> Lori,
> Thanks now I know that IE7  behaves like IE6 on this issue.
> The question is how to force IE renderizes the markers.
> I'd like to know if it is impossible or not.
>
>
Maurício,

It would appear that it's not possible.  I did some searching and that 
seems to be the consensus, even as recently as Dec 2006.  Apparently the 
issue is that IE changes the list from display: list-item to display: 
block when the list is floated, so the markers are lost.  Even setting 
the display on the list items to display: list-item doesn't fix the 
problem.  The solutions seemed to be either to use JavaScript or images, 
which you said you wanted to avoid.

I even found a lot of "solutions" that simply involved using an 
unordered list instead!

Now all we need is display: inline-list-item and we'd be all set :-)

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

Re: [css-d] ordered horizontal list

[Lori Lay]

Mauricio Samy Silva wrote:
> Hi all,
>
> Is it possible to achieve a horizontal ordered list in IE6 
> using only one OL element and valid CSS without images?
>
> Say: 
>
> 1. First item2.  A longer second item  3. shorter 3th
>
> HTML:
> < ol>
> < li>...< /li>
> < li>...< /li>
> < li>...< /li>
> < /ol>
>
> CSS:
> ol li {
> float:left;
> margin-right:25px;
> }
>
> This works in FFox and Opera but fails in IE6 (don't know in IE7 but believe 
> it works, since it seems to be a 'hasLayout' issue).
>
> PS:
> I extract the following excerpt from: 
> http://www.satzansatz.de/cssd/onhavinglayout.html#list
> "Some of these problems cannot be cured, so when the markers are desired it's 
> better to avoid layout on lists and list elements." 
>
> And now I ask: Do you know if  this  is one of "Some of these problems" that 
> cannot be cured?
>
> Thanks
>
> Maurício Samy Silva
> http://www.maujor.com/
>
>
>   
Maurício,

Your sample renders the same way in IE 6 and 7 - the items are listed 
horizontally, but without markers.

Might be an incurable problem, but I am not an expert...

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

Re: [css-d] Width on Unordered List Bug in IE 7

[Lori Lay]

Bruno Fassino wrote:
> On 5/2/07, Lori Lay <[EMAIL PROTECTED]> wrote:
>
>> >> Here's a mock-up of a page showing the problem:
>> >>
>> >> http://www.goethebooks.com/gentest/unordered_list_test.html
> [...]
>> Yes Bruno, that works. Thanks.  I'd love to remove the 100% width on the
>> anchor, but if I do this, the list no longer appears centred.
>
> Well, you could leave the 100% width on the anchors, but move their
> margin left and right on the ul. At least in your example this should
> give the same result, and I think is less stressing for the browsers.
> But of course it all depends on your complete page, if now it works
> for you there is no real reason to change.
>
> Best regards,
> Bruno

And it actually makes more human sense too :-) I think I will have 
better luck figuring out what I did two years from now if I move the 
margin definitions.  I did as you suggested and it works wonderfully.

Thanks again.

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

Re: [css-d] Opera question

[Lori Lay]

Shelly wrote:
> Thanks Denis.  Good idea - but didn't work  (However, if I set the body 
> with "position:absolute;" it does - but the whole thing shoots to the 
> left.  but this may be an idea I can work with...)
>
> Someone else emailed me offlist and suggested I use "padding-top" for 
> the main area, instead of "margin-top".  But that's not feasible, 
> unfortunately.  The reason I'm using margin is because there's a 
> background image in the main area that has a drop shadow.  If I use 
> "padding", then the background image is visible behind the header - and 
> it looks horrid.
>
> Anyway, I removed the logo and stuff that would make the name of who the 
> client is known and uploaded the files.  I'm gonna play with the 
> absolute positioning idea - but if anyone else has any suggestions, 
> that'd be great. :)
>
> http://www.anekostudios.com/test/issue/index.html
> http://www.anekostudios.com/test/issue/inside.html
>
> Thanks!
>
> ~Shelly

Shelly,

I don't think Opera is seeing the top position setting.  I am using WAT 
for Opera, and the top rule doesn't show up when I ask it to show the 
applied styles.  I notice that you set the top position at the top of 
style-index.css, but you don't set the position to absolute until you 
get to line 59 in styles.css.  I wonder if Opera sees the top position 
but discards it because the position isn't being set to something that 
can use it.

Why don't you try putting all the rules for the header in one place and 
see if Opera cooperates?

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

Re: [css-d] Width on Unordered List Bug in IE 7

[Lori Lay]

Bruno Fassino wrote:
> Lori Lay wrote:
>
>   
>> Here's a mock-up of a page showing the problem:
>>
>> http://www.goethebooks.com/gentest/unordered_list_test.html
>>
>> This seems to work ok in most browsers (FF, Safari, Opera),
>> including IE 6!
>> However in IE 7, the list is not centred in the blue area but is
>> skewed to the right.  I have tried removing the width declaration but
>> that doesn't correct the problem and makes the anchor borders expand
>> past the width of the container.
>> 
>
>
> If you remove  text-align:center on #left-bar the problem seems to go away.
> (you lose centering on the h4, but you can restore it with
>  h4 { text-align: center; }
> )
>
> The reason is more or less the following:
>
> IE7 is (wrongly) centering the ul block element (with width 180px) inside
> the 200px left-bar, giving to it 10px margin at the left (and at the right).
> Your links inside the li are so shifted to the right by an extra 10px (and
> the centering looks incorrect.)
>
> IE6 is saved by the fact that he assigns to the list an expanded width of
> 200px (because of the contained anchors having 100% width plus 20px
> margins.) So in IE6 the centering doesn't have any effect.
> IE7 has no more the box auto-expansion bug, but still centers block elements
> when text-align:center is in effect.
>
>
> Now, the way I would really solve this is avoiding the need of anchors
> overflowing the list (having 100% width plus margins.) You can surely
> rearrange things in order to avoid this and put IE under less stress :-)
>
> hth,
> Bruno
>
> --
> Bruno Fassino http://www.brunildo.org/test
>
>   
Yes Bruno, that works. Thanks.  I'd love to remove the 100% width on the 
anchor, but if I do this, the list no longer appears centred.  I was 
working from some examples on Listamatic 
(http://css.maxdesign.com.au/listamatic/) and many of them set the width 
to 100%.  Quite frankly I didn't want to mess with a design that seemed 
to work :-)

The current design also grows fairly well with font scaling.  I wasn't 
sure if this would be the case if I started using padding or margins to 
do the centering.

Thanks again for your help.

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

Re: [css-d] An 'hours open' schedule

[Lori Lay]

David Anderson wrote:
> Hi,
>
> ... snipped ...
>   
> Here's after:
> http://aperture.cit.buffalo.edu/test/sched-fixedemw.html
>
> I'm using a css reset stylesheet; the tables won't be flush left in the 
> final version.
>
> Your thoughts?
>
> Thanks!
> David Anderson
>
>   
Well the new version is certainly easier to understand than the old :-)

I suggest you add some top and/or bottom margins to your captions.  They 
run into the table text a little bit.  Also IE 6 doesn't understand 
child selectors, so if you want your caption styles to be read by IE 6, 
you should change them to descendant selectors.

Change
table.schedule > caption

to
table.schedule caption

I don't think that will impact anything else.  Lastly the scale ticks 
seem to be top aligned in IE 6 so they are covering the numerals.  They 
are also a lot longer than they are under Firefox.  I'm sorry, I'm not 
sure what is causing that.

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

[css-d] Width on Unordered List Bug in IE 7

[Lori Lay]

Hi,

According to my searches there's a bug in IE 7 that causes it to render 
an unordered list improperly when you define a width on the UL.  
Unfortunately I can't find a solution anywhere, so I was wondering if 
anyone is aware of this and has a solution.

Here's a mock-up of a page showing the problem:

http://www.goethebooks.com/gentest/unordered_list_test.html

This seems to work ok in most browsers (FF, Safari, Opera), including IE 
6!  However in IE 7, the list is not centred in the blue area but is 
skewed to the right.  I have tried removing the width declaration but 
that doesn't correct the problem and makes the anchor borders expand 
past the width of the container.

Does anybody know how to fix this?

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

Re: [css-d] Import Directive in StyleSheet

[Lori Lay]

Ingo Chao wrote:
> Lori Lay wrote:
>   
>> Hi,
>>
>> When you use an import directive in a style sheet, which rules come 
>> first?  The imported rules or the rules defined in the style sheet itself?
>> 
>
> CSS2.1 6.4.1 Cascading order
> http://www.w3.org/TR/CSS21/cascade.html#cascading-order
>
> "... 4. Finally, sort by order specified: if two declarations have the 
> same weight, origin and specificity, the latter specified wins. 
> Declarations in imported style sheets are considered to be before any 
> declarations in the style sheet itself."
>
>
> Ingo
>   

Aha!  There it is.  Believe it or not, I did try to find the spec.  Did 
you know that there's no link to the spec in the wiki?  Not on the main 
page anyway...

Thanks Ingo.

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

Re: [css-d] Import Directive in StyleSheet

[Lori Lay]

Todd Edwards wrote:
> Quote from css-discuss.incutio.com:
>
> Why not put @import at the bottom of simple.css?
>
> According to the CSS specs, @import rules must precede any other CSS rules
> in a stylesheet, so this creates the need to place it in its own stylesheet
> for these purposes.
>
>
>   

Thanks Todd, but that wasn't my question.  I know where the import 
directive has to go, I wanted to know where the rules wound up after 
processing.  It's odd because the Web Developer toolbar shows them 
coming after the styles in the main style sheet, so I was just making 
sure I understood things correctly.

Please include the list in your replies.

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

[css-d] Import Directive in StyleSheet

[Lori Lay]

Hi,

When you use an import directive in a style sheet, which rules come 
first?  The imported rules or the rules defined in the style sheet itself?

So if I have:

basic.css:

@import url(nav.css);

h1, h2, h3, h4, h5, h6 {
margin: 1em 0 1em 0;
font-family: Georgia, "Times New Roman", Times, "CG Times", serif; }

p {
margin: 0 0 1em;
padding: 0; }

... rest of rules in basic.css...

Are the rules from nav loaded into the top of the combined stylesheet so 
that they come first, or do the rules in the basic style sheet come 
first, followed by the rules from nav?

I'm doing the import right in the style sheet, not in the pages.

Thanks,

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

Re: [css-d] I've died and gone to CSS hell

[Lori Lay]

John Wells wrote:
> Guys,
>
> Don't know if your remember this or not, but back some time ago I emailed 
> about a three-column layout that was killing me. A helpful soul suggested 
> using "display:table-cell" to fix my problem, and it did!...except, not 
> really in IE.
>
> So, I finally relented. I gave up. I admitted defeat. I cried for awhile. 
> Then, I picked myself up...looking forward to the certain simplicity a two 
> column layout was sure to bring. I mean, three is hard...but two? Come 
> on...we should all be able to do THAT in our sleep.
>
> Wrong...wrong for me anyway. I must be css-layout challenged.
>
>
>   

I sympathise.  Having just gone through the same process, I can 
definitely sympathise.  Personally I found that there is so much 
information out there, that it is very difficult to pick a design.

If you want to have a look at some layouts that may work, I suggest you 
have a look at some of the following links.  For your site, a fixed 
layout might be best.  If you want the design to adapt to the width of 
the browser, have a look at the fluid layouts.  The major differences is 
that fixed layouts are sized using pixels or ems and fluid layouts are 
sized using percentages.

First, there is a page in the CSS Discuss wiki:

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


Even though this is for 3 column layouts, most can be made into 2 
columns fairly easily.

In this list, some of the more active and recognised sites are Position 
is Everything, Holly 'n John or Holly Bergevin, Alex Robinson and 
Thierry Koblentz.  That's not to say the others aren't as good, these 
are just starting points to try to filter things for you a little bit.  
I actually wound up adapting Paul O'Brien's work.  There's also Bruno 
Fassino's site, which I didn't see listed: http://www.brunildo.org/test/

One thing that you may like is the improved Piefecta page maker 

 
by ClevaTreva.  There's a link to this from Position is Everything 
.

In terms of your layout, one thing I notice right-off-the-bat is that I 
don't think your widths add up.  You have to remember that in the box 
model, the width is only the width of the content.  On to that you have 
to add margins and padding.  You have the header at 80% and the 
navigation at 20% with a 5% margin.  So I think your header needs to be 
75% - if you want the navigation to run up alongside the header.  
Lastly, I don't think you have enough divisions to contain everything - 
sorry!

Sorry I can't help you more with your layout.  Others on the list may be 
able to do that.

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

Re: [css-d] Vertically Aligning Text in Division - IE 6 Problem

[Lori Lay]

Mauricio Samy Silva wrote:
> Hi Lori,
> Try the following CSS:
>
> #footer {
>position: relative;
>width: 100%;
>height: 50px;
>clear: both; }
>
> #footwrap p {
>   width:100%;
>   margin:0 auto;
>   position: absolute;
>   bottom: 0;
>   text-align:center;
> }
>
> Regards,
>
> Maurício Samy Silva
> http://www.maujor.com/
>
>
Thanks Maurício that works too.  Two solutions in ten minutes - beauty!!

Lori
>
>> I would like to vertically align and centre some text at the bottom of a
>> division.  In compliant browsers, I can accomplish this by using
>> display: table and display: table-cell with vertical-align: bottom.
>> This works like a charm.
>>
>> However, in IE 6, I have an odd problem.  I 
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertically Aligning Text in Division - IE 6 Problem

[Lori Lay]

[EMAIL PROTECTED] wrote:
> If you change your CSS to the following it will work.
>
> #footer {
>   height:50px;
>   position:relative;
> }
> #footwrap
> {
>   position:absolute;
>   bottom:0;
>   width:100%;
> }
> #footwrap p
> {
>   text-align:center;
> } 
>   

I got this reply off-list.  Changing the code as suggested above and 
adding left: 0; to #footwrap worked like a charm.

Thanks Scott.

> -Original Message-
> From: [EMAIL PROTECTED]
> [mailto:[EMAIL PROTECTED] On Behalf Of Lori Lay
> Sent: Friday, April 27, 2007 5:29 PM
> To: CSS-discuss
> Subject: [css-d] Vertically Aligning Text in Division - IE 6 Problem
>
> ...
> Here's the problem:  the text is properly aligned at the bottom of the
> footer, but only the start of the paragraph is horizontally centred.  As
> you can see, I am using text-align: center to centre the text.  This
> doesn't work in this case (in IE 6 only).  The start of the paragraph is
> correctly centred, but not the whole thing.  So in my example above, the
> word Here seems to be centred, but not the entire line.
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Vertically Aligning Text in Division - IE 6 Problem

[Lori Lay]

Hi,

I would like to vertically align and centre some text at the bottom of a 
division.  In compliant browsers, I can accomplish this by using 
display: table and display: table-cell with vertical-align: bottom.  
This works like a charm.

However, in IE 6, I have an odd problem.  I have read that the 
work-around to IE's lack of display: table support is to use absolute 
positioning.  Here's a mock-up of the code:



  Here is the text I want to centre on the bottom



CSS:

#footer {
text-align: center;
position: relative;
width: 100%;
height: 50px;
clear: both; }

#footwrap {
position: absolute;
bottom: 0; }

Here's the problem:  the text is properly aligned at the bottom of the 
footer, but only the start of the paragraph is horizontally centred.  As 
you can see, I am using text-align: center to centre the text.  This 
doesn't work in this case (in IE 6 only).  The start of the paragraph is 
correctly centred, but not the whole thing.  So in my example above, the 
word Here seems to be centred, but not the entire line.

Does anybody have any ideas?

Thanks,

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

Re: [css-d] IE6 really is dead to me. Here is why.

[Lori Lay]

Dave M G wrote:
> IE6 usage is dropping as people migrate to version 7, and FireFox 
> continues to make incremental gains into Microsoft's market share:
> http://www.w3schools.com/browsers/browsers_stats.asp
>
>
>   

As others have stated, I think your stats are a little skewed.  I think 
the best recommendation I have seen is to view the logs for the visitors 
to your site.  I am fortunate in that I am replacing an existing site, 
so I can look at the logs and have a pretty good idea of who my audience is.

If you are going to go this route, you might try rephrasing your message 
a little.  Ironically my husband came across this site today.  He sent 
me the link even though he knew nothing about the discussion here.  I 
didn't think he was psychic...

http://www.worldwidewords.org/

Have a look at the statement under Technical Information at the bottom 
of the page.  Interestingly enough the site does work under IE6, so I 
guess they've decided not to exclude it yet...

By the way, my husband works for a large American bank and they are 
still running Win 2K with IE 6.  He is fortunate enough that he was able 
to install FF.

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

Re: [css-d] Site check: formever.org

[Lori Lay]

~davidLaakso wrote:
> Dave M G wrote:
>   
>> CSS-d,
>>
>> I've settled on a design that I'm happy with, and I'd like to invite 
>> people to make comments, both technical and artistic.
>>
>> The site is here:
>> http://formever.org
>>   
>> 
> FWIW, a level 2 heading is missing.
> Ditch the validation buttons?
> A little slow loading the image.
> You need a background-color for users at 1280 and up (not everyone sees 
> white beneath the bottom of the image)
> If it is of concern, she overlaps horizontally at 800 in all browsers.
> There is a repeat of the folder image at the bottom right and left 
> corner of the large file folder in IE7--
> look closely at the captures and you'll see it.
>
> Nine captures XP IE 7, Opera 9, and FF 2.
> 
>
>   
I also notice that it takes only one text enlargement (FF 2 Mac) for the 
text to start breaking out of the tabs.  The sliding doors technique had 
some guidelines for allowing the tabs to grow, so you might want to 
check that out.  The side panels seem to survive ok.

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

Re: [css-d] download ie6

[Lori Lay]

jeffrey morin wrote:
> anyone know how i can ie6 and get rid of ie7? with the last windows update
> it installed ie7 and i don't want it.
> is this possible?
>
> Thanks,
> Jeff
>   

Actually if you do a Google on "uninstall ie 7", one of the first links 
that will come up is a very nice page from Microsoft telling you how to 
revert back to IE 6.  Uninstalling IE 7 is the second question in the 
FAQ page that came up when I did this.

I have done this on one of our machines so I can say that it seems to work.

I have naively assumed that you asked this on a CSS list because you 
need IE 6 for all your CSS compatibility testing ;-)

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

Re: [css-d] how do you get rid of spacing between table cells?

[Lori Lay]

Robert Lane wrote:
> I put a border on some td's but am getting a gap between them.  What 
> style gets rid of that?
>
>
>   

Sounds like you need border-collapse: collapse on your table style.

table {border-collapse: collapse;}

for example.

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

Re: [css-d] Text running outside of boundary

[Lori Lay]

Dave M G wrote:
> Based on your advice, I've decided to go with an  tag.  and  
> are definitely already in use in my site, and, well... the line had to 
> be drawn somewhere.
>
>   

I don't quite understand your comment here.  I presume you mean that you 
wanted the headings on your tabs to be a bit smaller than the other 
headings.  If so, then choosing h3 will give you the next size down, as 
it were.  There's no limit to the number of headings you can have in a 
page.  So, if you have several section headings which you want to give 
h3 tags to - go ahead, there's no limit.

> As Lori says, headline elements are "block" elements, and  tags 
> are "inline". But I thought if one specified "display:block" in the CSS 
> for the  element, that would force it to behave as a block 
> element. That's what I tried to do, but obviously it doesn't work like that.
>   

I didn't actually look at your code.  I was only responding to your 
question about heading elements.  I can say that using the display 
attribute is just that.  It doesn't change the nature of the element, 
only the way it is displayed.  This works quite well for lists - using 
display: inline will make them display in a single line instead of in a 
column.  But it doesn't change the nature of the list - it's still a 
block level element.  Perhaps there was something else in your styling 
that meant that the span didn't work as expected.  Or you needed to 
supply a whole bunch more styles to get it to work.  I know that 
removing the padding stopped the heading from overflowing the boundary, 
but I don't know what effect that would have on the rest of the layout.

I know that Georg suggested you use a heading element to get the effect 
you wanted and I went along with that.

Simpler is always better...

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

Re: [css-d] Text running outside of boundary

[Lori Lay]

Dave M G wrote:
> Gunlaug ,
>
> Thank you for responding.
>
> I considered using an  tag or , but isn't it kind of arbitrary 
> as to which number it should be?
>
> I mean, if I do use a headline element, is there a reason to choose  
> instead of , or vice versa? Or , , or ?
>
> The only one I'm pretty sure would definitely be excluded here is . 
> But then again...
>
> I'm afraid I'm not very good at determining what is appropriate semantic 
> markup for this.
>
>   
All of the heading tags are block level elements, so they would work 
better for your purposes than span elements, which are inline.  In terms 
of which one to pick, it is a matter of preference.  The browser will 
render h1 as the largest and h6 as the smallest.  By default, most 
browsers display the contents of h1, h2 and h3 elements larger than the 
default size of the document text.  h4 is usually the same size as the 
default text size and h5 and h6 are smaller than the default text size.  
Unfortunately this is all "usually" and "most" because the user agents 
are left to render these as they choose, but they are pretty consistent 
in the relative sizes.  Of course, you can override all this with your 
own styles if you choose.

The best way to think of the header elements are that they are relative 
in size to your text.

Lori

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

Re: [css-d] image shifted right

[Lori Lay]

Joel D Canfield wrote:
> I can't sort out why the logo in the white box at the top is shifted right 8 
> or 10 px
>
> http://spinhead.info/ah/one/
>
> I've colored the background image yellow to show where the left edge is; the 
> white background of the logo image should cover that, but leave a small dark 
> blue border to the right.
>
> thanks for any suggestions
>
> joel
>
>   
One thing I notice is that the logo division is 178px wide while the 
logo image is only 168px wide.  I used Firebug to change the logo 
division to 168px wide and it seems to display the way you want.  I 
think that the yellow part is actually only 5px wide because the anchor 
is centred in the division per the text alignment on the body.

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

Re: [css-d] IE and CC problem

[Lori Lay]

KJ'[EMAIL PROTECTED] wrote:
> Hi,
>
> On this page http://www.geekministry.com/test/claus/reference1.php I 
> wonder why the CC doesn't kick in. The images are too far right in IE6. 
> Any help appreciated.
>
> Thanks
>   

I don't think your CC is the problem.  I think it's a source code 
issue.  You are importing the style sheet after the CC, so the 
.thumbnail styles in the style sheet are overriding the CC.  Try doing 
the import first, then the CC.


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

Re: [css-d] font smoothing

[Lori Lay]

DJS wrote:
> jeffrey morin wrote:
>   
>>
>>you could even go as far as using ie conditional comments to 
>> deliver text that would look better on a pc than a  mac
>>
>>Jeff
>>
>>
>> 
> Well, it was looking good in IE7 win, just FF win. It's the culprit.
> I was using georgia, which I thought I understood as a font that did 
> have a real italic version.
>
> I've already exchanged it with a background graphic, I'll get back to it 
> later.
>
> Thanks,
>
> Don
>   
Actually that's another point:  are you sure all your users are on IE7?  
If you have some IE6 users, it will look just as crumby to them as it 
does to the FF users...

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

Re: [css-d] font smoothing

[Lori Lay]

DJS wrote:
>>> Italic text: FF Win doesn't smooth the text like IE Win does. (!?)
>>>
>>> Dare I say, the text looks better in IE Win, like it does on my Mac.
>>>
>>> 
>>>   
>> I don't think there's anything you can do in the browser.  Font 
>> smoothing is called the ClearType Tuning tool in Windows and it wasn't 
>> included automatically in IE 6 or Win XP.  It is included automatically 
>> with IE 7.  
>>
>>   
>> 
> I guess it's one of those, "oh well" things.
> I try hard enough to make my site standard compliant, this is trivial.
> It will end up bugging me enough where I'll add it to the header 
> background image and just display:none the real text. 
>
>   
I wonder if defining a font family for this would help.  The first font 
in the family would be the ideal font for the Mac, and if it's something 
that's not available on Windows, then the second font in the family 
would be used.  You might be able to find something that doesn't look 
bad on Windows.

Don't know, just a wild stab out there...

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

Re: [css-d] font smoothing

[Lori Lay]

DJS wrote:
> I find this interesting.
> I work on a Mac 99% of the time doing development, but recently I've 
> started a design for my new site.
>
> Italic text: FF Win doesn't smooth the text like IE Win does. (!?)
>
> Dare I say, the text looks better in IE Win, like it does on my Mac.
>
> I didn't find any setting in FF Win to change this, have I been missing 
> this all along?
>
> - D
>
>   
I don't think there's anything you can do in the browser.  Font 
smoothing is called the ClearType Tuning tool in Windows and it wasn't 
included automatically in IE 6 or Win XP.  It is included automatically 
with IE 7.  This affects the whole OS, not just the browser.  It's a 
utility you can run to customize the settings and makes a big difference 
in viewing text on a LCD.

I just tell my users to get it from Microsoft and install it ;-)

Still not as good as a Mac, but a bit closer :-)


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

Re: [css-d] Fixed Layout in IE 6 - Standards Mode

[Lori Lay]

Gunlaug Sørtun wrote:
> Lori Lay wrote:
>
>> I would like to get this working in standards mode, not in quirks 
>> mode.  Most the of the fixes I have found for this involve putting IE
>>  in quirks mode.  Is there any way to fix this in standards mode?
>>
>> http://www.goethebooks.com/gentest/fixed_header_sidebar.html
>
> You can try with some modifications...
> <http://www.gunlaug.no/tos/alien/test_07_4590.html>
> ...that I think will work acceptable in IE6.
>

Thanks Georg.  That is much better.  I would love to know how setting 
the margin on the content division makes the header go all the way 
across now!  Still one minor detail:  when there is no scrollbar in IE, 
the header still stops as if there is one.  Is there any way to make the 
header span the page when there's no scrollbar, but to adjust properly 
when there is one?

Thanks again.

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

[css-d] Fixed Layout in IE 6 - Standards Mode

[Lori Lay]

Hi,

I have been trying to get a fixed positioning emulation to work in IE 6 
and can't quite get it.  Most of the layout is fine except that the 
header won't extend all the way across the screen.  It stops short by 
150px, or the width of the sidebar.  I would like to get this working in 
standards mode, not in quirks mode.  Most the of the fixes I have found 
for this involve putting IE in quirks mode.  Is there any way to fix 
this in standards mode?

Test page:  http://www.goethebooks.com/gentest/fixed_header_sidebar.html

The CSS is right in the page.  I'm using a conditional comment to make 
the scrolling work properly.

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

Re: [css-d] Centering into the browser

[Lori Lay]

Richard Brown wrote:
>> ...snipped...
>> 
> I think you also need to change your #body declaration to text-align:
> center. WinIE 5 doesn't recognise the margin: auto declaration.
>
> Can anybody confirm this please? Thanks.
>   

He has the text align on the wrapper division.  Since his wrapper 
division encompasses all the remaining content, this works fine.

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

Re: [css-d] Centering into the browser

[Lori Lay]

Daniel Hammond wrote:
> Yes -- top, right, bottom, left -- which is clockwise, not
> counter-clockwise.
>
>   
Beg your pardon.  Too many digital clocks :-)

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

Re: [css-d] Centering into the browser

[Lori Lay]

Dave Pierce wrote:
> Hello Gurus of Great Graphics,
>
> Can someone take a look at this page (I finally got to do one from  
> scratch instead of updating old stuff! ;-)  
> http:www.pierceartanddesign.com/testfiles/ and perhaps point me in  
> the right direction to get the page centered into the browser window?  
> I tried the method described here http://www.bluerobot.com/web/css/ 
> center1.html but it didn't seem to work.
>
>   

It appears that you have the wrapper margin written incorrectly.  The 
order kind of spells TRouBLe - that's TOP, RIGHT, BOTTOM, LEFT, or 
counter-clockwise from the top.  So your wrapper margin should be:

margin: 0 auto 0 auto;

This can be shortened to:

margin: 0 auto;

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

Re: [css-d] Scroll Bar Question

[Lori Lay]

Steve LaBadie wrote:
> Is there a way to have the scrollbar not disappear in Firefox if the
> page height is less than the browser window?
>
>
>   
Set height on body to 101%.

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

Re: [css-d] ie6 png nightmare

[Lori Lay]

jeffrey morin wrote:
>> Yes I ran into this as well.  It turns out that the path for the image
>> loader is relative to the /page/ that the image is being displayed in -
>> not the CSS file.  I had to move this into a conditional comment on each
>> page because I don't have all my pages in one directory, or even at the
>> same level (so I couldn't consistently use ../location-of-image).  Drove
>> me nuts for a while too :-)
>>
>> Lori
>> 
>
>
>
> i am not sure i understand. do i have to move both the png and the blank gif
> into the same folder as my css file then?
>
> Jeff
>   

No.  It's just that the path you specify in the filter has to work for 
all your pages.
Let's say you have the following structure:

/css/styles.css
/images/logo.png
index.html
/pages/books.html

Then, for the image to be loaded into your index.html page, the path 
would be images/logo.png - even though you are specifying this in the 
CSS file.  But for books.html, the path would be ../images/logo.png.  
See what I mean?  If you have all your pages in a directory, like pages, 
then you could set the path to ../images/logo.png and it will work for 
all your pages.  If you have the index page at the root, like I show 
above, then perhaps you could use a conditional comment in just the 
index page to load the image.

I used conditional comments in all my pages because I had several 
nesting levels.


Go to http://beta.goethebooks.com and look at the source.  You can also 
verify your syntax.  Note:  the site is a work in progress :-)

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

Re: [css-d] ie6 png nightmare

[Lori Lay]

jeffrey morin wrote:
> hello again,
>
> i was wondering if anyone knows what is going on with this. i have been
> reading about png support in ie6 and am trying to not use javascript to fix
> it. i have my img src pointing to a blank gif like i was told and have the
> following in my css:
>
> * html #logo{
> background: transparent;
> filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../logo.png",
> sizingMethod="scale");
> }
>
> this points to the png that i want. now it comes up on screen with the
> correct dimensions when i view image dimensions but the image is completely
> missing. does anyone know what is going on here?
>
>   
Yes I ran into this as well.  It turns out that the path for the image 
loader is relative to the /page/ that the image is being displayed in - 
not the CSS file.  I had to move this into a conditional comment on each 
page because I don't have all my pages in one directory, or even at the 
same level (so I couldn't consistently use ../location-of-image).  Drove 
me nuts for a while too :-)

Lori

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

Re: [css-d] TOC for Image Gallery using Ordered List & CSS

[Lori Lay]

ibn Ezra wrote:
> Works great with the latest versions of IE, Firefox, Safari and Opera 
> and without additional mark-up! Don't have IE 6 handy to see what 
> happens (already know the transparent png rollover won't work).
>
> http://richmondesign.com/fsm_portfolio/index4.php
>
> toda raba!
> -iE
>
> .
>
> ibn Ezra
> mailto: [EMAIL PROTECTED]
>
> .
>
>
Looks ok in IE 6 too.  The images look like they do in FF when you hover 
over them, which I think is what you expected.  The only problem is with 
the main title.  In IE the PNG isn't working so the title looks jagged.

You should be able to use browsershots to see what it looks like in IE 6.

http://browsershots.org/

Lori

PS What does "toda raba" mean?  I know what domo arigato means, but 
that's the extent of my Japanese :-)

>
>
> On Apr 13, 2007, at 16:21 PM, Lori Lay wrote:
>
>> ibn Ezra wrote:
>>> Thanks... that moves the text down nicely. Funny that your solution
>>> never crossed of my mind! The only drawback is that it creates a
>>> large (invisible) link area beneath each image which could
>>> potentially compete with content in a different layout (a second row
>>> of gallery images for example).
>>>
>>>
>>
>> Try removing the height from #content #portfolios li a.
>>
>> This seems to work under Firebug in FF.  I'm not sure what this will do
>> to IE.  IE has the same large area under the images, so hopefully
>> removing the height won't cause problems.
>>
>> Lori
>>
>>> Here's the result:
>>> http://richmondesign.com/fsm_portfolio/index2.php
>>>
>>> Thanks again,
>>> -iE
>>>
>>> .
>>>
>>> ibn Ezra
>>> mailto: [EMAIL PROTECTED]
>>>
>>> .
>>>
>>>
>>>
>>>
>>> On Apr 13, 2007, at 15:32 PM, nat parker wrote:
>>>
>>>
>>>> ibn Ezra wrote:
>>>>
>>>>> What I would really like to do is to take the text inside the
>>>>> anchor  and force it to drop below the background image (with
>>>>> appropriate  padding), but it doesn't look like there is a way to
>>>>> 'grab onto' just  the text and do that without adverse side
>>>>> effects. Is this possible?
>>>>>
>>>> If I understand what you are trying to do, you could just add
>>>> padding-top to:
>>>>
>>>> #content #portfolios li a {
>>>> display: block;
>>>> height: 91px;
>>>> width: 147px;
>>>> background: transparent url(../_images/vellum.png) repeat;
>>>> padding-top: 95px;
>>>> }
>>>>
>>>>
>>>> nat
>>>>
>>>
>>> __
>>> css-discuss [EMAIL PROTECTED]
>>> http://www.css-discuss.org/mailman/listinfo/css-d
>>> IE7 information -- http://css-discuss.incutio.com/?page=IE7
>>> List wiki/FAQ -- http://css-discuss.incutio.com/
>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>>
>>>
>> __
>> css-discuss [EMAIL PROTECTED]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> IE7 information -- http://css-discuss.incutio.com/?page=IE7
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] TOC for Image Gallery using Ordered List & CSS

[Lori Lay]

ibn Ezra wrote:
> Thanks... that moves the text down nicely. Funny that your solution  
> never crossed of my mind! The only drawback is that it creates a  
> large (invisible) link area beneath each image which could  
> potentially compete with content in a different layout (a second row  
> of gallery images for example).
>
>   

Try removing the height from #content #portfolios li a.

This seems to work under Firebug in FF.  I'm not sure what this will do 
to IE.  IE has the same large area under the images, so hopefully 
removing the height won't cause problems.

Lori

> Here's the result:
> http://richmondesign.com/fsm_portfolio/index2.php
>
> Thanks again,
> -iE
>
> .
>
> ibn Ezra
> mailto: [EMAIL PROTECTED]
>
> .
>
>
>
>
> On Apr 13, 2007, at 15:32 PM, nat parker wrote:
>
>   
>> ibn Ezra wrote:
>> 
>>> What I would really like to do is to take the text inside the  
>>> anchor  and force it to drop below the background image (with  
>>> appropriate  padding), but it doesn't look like there is a way to  
>>> 'grab onto' just  the text and do that without adverse side  
>>> effects. Is this possible?
>>>   
>> If I understand what you are trying to do, you could just add  
>> padding-top to:
>>
>> #content #portfolios li a {
>>  display: block;
>>  height: 91px;
>>  width: 147px;
>>  background: transparent url(../_images/vellum.png) repeat;
>>  padding-top: 95px;
>> }
>>
>>
>> nat
>> 
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Where is this CSS coming from?

[Lori Lay]

Dave M G wrote:
> CSS Discuss,
>
> Today I discovered a very strange problem with my CSS. I call it strange 
> both because it is completely perplexing to me, and also because I'm 
> sure I'll struggle to describe it properly.
>
> This is happening on my local testing machine, which is not serving any 
> pages to the web. It's just a local LAMP set up for me to test my 
> designs before uploading.
>
> Today when I opened up one of my web sites from a local directory, I was 
> surprised to see that it wasn't showing me any of my CSS at all. But it 
> wasn't completely unstyled either. It was a sort of generic style.
>
> I have FireFox's "Web Developer" toolbar installed, so I used that to 
> look at the CSS. To my surprise, the CSS was some completely different 
> CSS. It said at the top:
> /*
>Base Style Sheet for the W3C CSS validation service
> based on the one for Markup Validation Service.
>Copyright 2000 W3C (MIT, INRIA, Keio). All Rights Reserved.
>See http://www.w3.org/Consortium/Legal/ipr-notice.html#Copyright
>$Id: base.css,v 1.13 2007/03/09 04:40:02 ot Exp $
> */
>
> Huh? I never downloaded or selected at any time to use this style sheet.
>
> My first thought was that maybe somehow I had accidentally copied this 
> CSS down from somewhere and wrote it over my own style sheet. So I 
> located the CSS file in my local directories, and opened it with a text 
> editor.
>
> But it wasn't the CSS I was seeing in FireFox, it was my CSS.
>
> So my next thought was that maybe there's an error in my HTML where I 
> link to the external style sheet. Maybe what I'm seeing is some FireFox 
> default stying for when the CSS isn't found.
>
> After eyeballing the directories and links over and over, I was sure 
> that the path to the CSS file was correct. To experiment for sure, I 
> changed the path in my HTML to something that was definitely wrong, and 
> then reloaded the page.
>
> And this is where it gets really weird. When I broke the link 
> deliberately, the web page showed up without any style sheet at all. 
> Just the default HTML layout.
>
> When I repaired the link to point to the file that I am certain is my 
> own CSS, it went back to this W3C CSS style sheet as above.
>
> So, when the link is incorrect, I get no style sheet at all. When the 
> link is correct, I get some other CSS than my own.
>
> Where the heck is this "W3C" CSS coming from, and why is it over riding 
> my own CSS?
>
> I hope someone can shed some light on this.
>
> Thank you for any information or advice.
>
>   
Not sure that this is really within the purpose of this list, but it 
would seem that you must have something wrong in the path to your style 
sheet.  If the browser can't find your style sheet, it will display the 
page as if there is no style sheet at all, so that part is normal.  Can 
you provide a link to your page?  If not, you should post the code that 
attempts to load the style sheet.

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

Re: [css-d] Question regarding font sizes

[Lori Lay]

Anahita Shafa wrote:
> Hello CSS-D,
>
> My name is Anahita and I am new to css-d. I have been using css for the past 
> 6-7 months only and have fallen in love with it.
>
> I have a question, which hopefully is not too simple of a question for 
> someone to answer me?
>
> When designing web pages, which units is the best choice to be used for 
> fonts: pixels, points or ems? I read somewhere that ems are the best choice.
>
> I wanted to find out what the css-d experts things and sorry if this question 
> is very simple and perhaps seem obvious to most of you. I am still a newbie 
> in the world of web design (since one year only).
>
> Thank you all in advance for your help.
>
> Anahita
>
>   
We usually recommend you set the font size to 100% or 100.1% on the body
element and use percentages or ems from there.  The reason for this is
to ensure cross-browser compatibility and allow the user to resize the
font size to their preference.  If you use pixels, you won't be able to
scale the font in IE.

Have a look at the wiki for some good info on this.  Scroll down to the
Sizing Text section.

http://css-discuss.incutio.com/

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

Re: [css-d] Question regarding font sizes

[Lori Lay]

Anahita Shafa wrote:
> Hello CSS-D,
>
> My name is Anahita and I am new to css-d. I have been using css for the past 
> 6-7 months only and have fallen in love with it.
>
> I have a question, which hopefully is not too simple of a question for 
> someone to answer me?
>
> When designing web pages, which units is the best choice to be used for 
> fonts: pixels, points or ems? I read somewhere that ems are the best choice.
>
> I wanted to find out what the css-d experts things and sorry if this question 
> is very simple and perhaps seem obvious to most of you. I am still a newbie 
> in the world of web design (since one year only).
>
> Thank you all in advance for your help.
>
> Anahita
>
>   
We usually recommend you set the font size to 100% or 100.1% on the body 
element and use percentages or ems from there.  The reason for this is 
to ensure cross-browser compatibility and allow the user to resize the 
font size to their preference.  If you use pixels, you won't be able to 
scale the font in IE.

Have a look at the wiki for some good info on this.  Scroll down to the 
Sizing Text section.

http://css-discuss.incutio.com/

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

Re: [css-d] caption-side

[Lori Lay]

[EMAIL PROTECTED] wrote:
> Does caption-side even work for IE6? Nothing I can find says it doesn't, 
> and yet . . . 
>
>   
To paraphrase Eric's book (CSS - The Definitive Guide):

Styling captions is variable.  Browsers differ in their support of the 
caption attributes and there are also differences in how they calculate 
the width of the caption itself.  He states that "Listing all the 
behaviours would be fruitless, since this is an area where rapid change 
is expected".

So I guess you're discovering one of the variables...

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

Re: [css-d] Nav bar in Firefox on a PC

[Lori Lay]

John M Shepard wrote:
> The Nav Bar in Firefox on my PC is not rendering right??
> http://mypracticesite.com
>
> The Heading on the editable text body is crammed as well.
>
> Looks great on a Mac though.  Any ideas? Much thanks ahead.
>
> John Shepard
>   

I didn't notice too much difference between the two.  One thing to keep 
in mind is that the users' DPI setting really affects this stuff.  The 
one thing I noticed is that you are setting the font to 12px.  This 
prevents font scaling in IE and also introduces discrepancies between 
browsers and OS's.  We usually recommend you set the font size on the 
body element to 100% or even 100.1% and you scale that as required in 
descendant elements, like your nav bar.  If you use em's or percentages, 
your visitors will be able to use the browser to scale the font size as 
required.

Have in look in the wiki - there's lots of stuff on setting the font size.

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

Re: [css-d] Scrollbar In Firefox adjusting layout.

[Lori Lay]

Johnny G's wrote:
> When the page requires a scrollbar firefox pushes the contents of the window
> over.
>
> There was a post a few issues back that suggest this:
>
> html {
> height: 100%;
> margin-bottom: 1px;
> }
>
> this does work, but it permanently adds a scrollbar that scrolls 1px to all
> pages regardless if the contents fit the height of the window.
>
> Is it just me that gets a scrollbar that scrolls 1px?
>
> Is there a way to have no scrollbar when not needed yet the layout not be
> adjusted when Firefox adds one?
>
> Thanks in advance,
>
> John G
>
>   
This is a known problem in FF.  Another solution is to set the height on 
the html element to 101% - then you don't need the bottom margin.  
However you still wind up with a scrollbar that scrolls nowhere :-)

I think your only other option is to let the content flow to the width 
of the browser window.

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

Re: [css-d] Site Check Request

[Lori Lay]

Robert DeLaurentis wrote:
> I would appreciate anyone who takes the time to look at my site and  
> lets me know how its working on their browsers. This is my first all- 
> CSS site. I tried to use minimal number of classes, ids for major  
> layouy divs only, and as little non-standard cruft as possible.
>
> http://sbwc2.bobdel.com/about_director.php
>
> http://sbwc2.bobdel.com/css/main.css
>
> Each page validates XHTML 1.0 Strict (except for a two legacy pages  
> that use frames and a couple that depend on mySQL). CSS also validates.
>
>   

Actually, I get an "unexpected end of XML source" error on line 34 in 
the about_director page and 98 warnings.

> There are several outstanding issues that I know about, and don't yet  
> know how to fix:
>
> In IE 6, the drop down menu, the entire box for the first entry is  
> clickable, yet the subsequent boxes only the text link is hot. Also  
> in IE 6, there is a 1 pixel white line that appears on the right of  
> the header graphic when the window is resized to some, but not all,  
> widths. And finally, I'd like to be able to center the entire nav bar  
> inside its container div, but am not sure how to make that work.
>
> Thank you!
> Bob
>
>   

I think you have to surround the text in the anchors with a span to make 
the entire box clickable in ie.  Do a Google search on "ie clickable 
region fix" and you will get a bunch of links to various solutions.  
There's even been some discussion about this on the list, no surprise there.

Centering block level elements is accomplished by setting the left and 
right margins to auto.  You may have to create another nested division 
in the nav bar to do that.  This doesn't work in IE 6, but you can 
usually accomplish the same thing by doing text-align: center for IE.  
You might want to fix up a few of these issues and then post another 
question for any specific problems that still remain.  I think you 
message may have been lost a bit.  Posting a question to a specific 
problem might generate more replies.

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

Re: [css-d] Web calendar

[Lori Lay]

Chris Rahe wrote:
> I'm pretty new to css, table-less design but I'm trying to get up to speed
> quickly. I had to put a calendar on the web and I tried to come up with a
> useful way to do it using CSS and no tables.
>
> Does anyone mind taking a look at
> http://www.bremenhospital.org/Clinics/0407mos.html and offering some
> feedback? I included the CSS in the HTML page just for simplicity's sake.
>
> Thanks.
>
>   
Looks ok in Firefox and IE 6 & 7.  Your design is a little unusual, but 
hey, it works!  Some of the folks on this list might be tempted to use 
div's for each day and paragraphs for the contents, but that would be 
harder to get working across browser-land.  Maybe something you can play 
with if you have time... and patience :-)

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

Re: [css-d] What's wrong with my line-height calculations?

[Lori Lay]

Chris Hoffman wrote:
> On 4/8/07, Philippe Wittenbergh <[EMAIL PROTECTED]> wrote:
>
>   
>> No, the computed height of the inline element (the amount of
>> background-colour that will be applied) depends on/includes the line-
>> height.
>> 
>
> But If I set line-height to 16px, with font-size remaining at
> 12px, I get a gap between the lines.
>
> and re: setting font-size in pixels: I realize all the potential
> problems, and am very much an em-man myself :).
>
> Chris
>
>   
Line height is not the same as font size.  With a font size of 12 px, 
the line height will be approx. 14.4px, or 1.2 times the font size.  It 
depends on your operating system and user agent, amongst other things.  
You have to allow for the ascenders and descenders in the font, so the 
total line height is more than the font size.  Therefore, setting the 
line height to 14px is actually too small and the text will actually 
overlap a little bit.  Lastly, if you mix bold and regular weight 
elements, the computed line height will be larger to encompass the 
larger elements.  The best way to specify line height is to just specify 
a number, which acts like a scaling factor.

p {
line-height: 1.5;
}


This will always make the line height 1.5 times the font size, even for 
child elements that might inherit other font sizes.  It evens things 
out.  I usually use 1.25 and this gives consistent results across most 
user agents and os's.

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

Re: [css-d] Firefox menu has 1 less pixel...argh!

[Lori Lay]

Tom Dell'Aringa wrote:
> Hi there,
>
> I've mostly got my menu done, but there is one small (1 pixel small)
> problem. Somehow, in FireFox the menu is *1 pixel* shorter in height than in
> IE. I have seen this before but cannot remember, nor figure out how to fix
> it. I can't seem to figure what is causing the one pixel difference. You can
> see an example here:
>
> http://www.pixelmech.com/rev/tabs2.html
>
> CSS is inline, but the pertinent part is typical horizontal menu stuff.
>
> #navbar li {
> float: left;
> margin: 0;padding: 0;
> font-family: Georgia, serif;
> font-size: 90%;
> letter-spacing: 2px;
> text-transform: uppercase; }
>
> #navbar li a {
> float: left;
> padding: 10px 14px;
> text-decoration: none;
> color: #e7e3d9;
> border: none;
> background: #000; }
>
> It seems to me its the A rule where the spacing is set in the padding, with
> 10px padding top and bottom. Possibly coupled with the 90% font size - is
> that the difference?
>
> Normally, I would hardly sweat a 1-pixel issue, except for the fact that a
> background will be spanning the page to make it look the menu bar crosses
> the whole width. As you can see in the example, the green background shows
> up under the menu bar in FireFox. (look closely, it is only 1 pixel).
>
> Even if I make the background the same black, I'm going to have a problem
> because the menu won't be quite "pinned" down to page content, so when a
> white, "selected" tab shows, there will be a black line under it, which
> ruins the whole tab effect of course.
>
> If you have any suggestions, I'd appreciate it - please copy me on any
> replies at pixelmech at gmail dot com.
> Thanks!
>
> Tom
>   
Tom,

You might be right about the 90% font size.  Changing it to .95em 
helped...  If you don't have it already, you might try installing 
Firebug - it allows you to play around with the CSS and see the results 
immediately, right on screen.

http://www.getfirebug.com/

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

Re: [css-d] sliding door: trouble with image

[Lori Lay]

jeffrey morin wrote:
> On 4/3/07, jeffrey morin <[EMAIL PROTECTED]> wrote:
>   
>> hi everyone,
>>
>> i am trying the sliding door method for the the first time and i am
>> hitting a snag. the right image keeps going over the left one causing it to
>> not be rounded like i want. you can actually see the left rounded image over
>> the right image but the right one extends past it causing it to look wrong.
>> does anyone know what is wrong here. i have tried changing padding and it
>> still isn't working.
>>
>> any help would be great! i have a lot of basics down but i am still
>> getting used to the css tricks
>> thanks so much!
>>
>> Jeff
>> 
>
>
> sorry. here is the link
>
> http://votekenmann.com/test/index.htm
>
>   
Jeff,

You are really close.  You have your backgrounds reversed and you need 
to make some adjustments to the padding.

Change to this:

Remove padding from ul.  Use margins to position the ul.

#sitemast li {
background: transparent url(backgrounds/left.gif) no-repeat left top;
float: left;
margin: 0pt;
padding: 0 0 0 16px;  /* the left padding should equal the width of your 
left background image */
}

/* Set right padding to centre text.  Now the left padding = (17px - 
16px = 1px).  The 16px is the left padding on the li */
#sitemast a {
background: transparent url(backgrounds/right.gif) no-repeat right top;
color: #00;
display: block;
padding: 5px 17px 5px 1px;
text-decoration: none;
}


The other thing to remember is that the background will be displayed in 
the padding but it is not extended into the margins, so you have to use 
margins to position the ul, not padding.

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

Re: [css-d] conditional statements question.

[Lori Lay]

Karl Bedingfield wrote:
> Hi all,
>
> I have a style sheet that works for IE5.01 & 5.5. How do I put up one
> link to cover both of these browsers or do I need to add 2 statements?
>
> By the way, I take it that using conditional statements means I have
> to use a full css file for each browser unlike hacks where I only need
> to add the styles that need amending. Correct?
>
> Many thanks
> Karl
>   

Re: [css-d] CSS borders

[Lori Lay]

Doug Niven wrote:
> Hi Folks,
>
> I hate to ask such a seemingly simple question but I've spent a few hours
> trying to make this work and have run out of ideas.
>
> I'm trying to create table borders inside and out 1px thick, like the
> following:
>
> http://stinkyrat.com/css_borders.html
>
> The above is a graphic done in Photoshop, but I'd like to recreate this in
> CSS.
>
> If anyone could help, I'd be much obliged.
>
> Thanks in advance,
>
> Doug
> Santa Cruz, CA
>
>
>   
If you're just looking for the table styles, you have to apply the 
border styles to the table and the table cells.  You also have to set 
border collapse on.  If you want the double border look, remove the 
border-collapse style.

table {
border: solid 1px #C0C0C0;   /* That's silver for the colour - 
substitute with your preference */
border-collapse: collapse;
}
td {
border: solid 1px #C0C0C0;
padding: 3px;
}

I stuck in some padding of 3px as an example.  If that's not what you're 
after, let us know...

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

Re: [css-d] css and DW MX 2004 Styles Panel

[Lori Lay]

[EMAIL PROTECTED] wrote:
> I'm trying to apply what I am learning from this list (which is a lot!), but
> having to use Dreamweaver MX 2004. I can't seem to find how to create 
> the list selector rules suing their CSS styles panel in Deamweaver MX 
> 2004.
>
> I'm wondering; would you advise me to code my style sheet *by hand* and steer
> clear of Dreamweaver MX 2004? (I just purchased DW 8 for home, but haven't
> gotten into it yet and can't access my work website from home anyway).
>
> I don't want to waste a lot of time trying to work with an inferior 
> tool and so
> would appreciate your tips on this.
>
> Thanks, Karen
>
>
>   
Definitely.  I just struggled with trying to get Dreamweaver 8 to 
cooperate.  You can open the style sheet like any other page and edit it 
in Dreamweaver, but it won't help you much.  I was fortunate in that I 
had GoLive to use which has a really nice CSS editor, but Adobe hasn't 
ported it to Dreamweaver yet.

There are some nice text editors out there that have various plug-ins 
and syntax highlighting for style sheets.  I use Textpad on Windows, but 
I'm sure there are lots of others that offer similar features.  If 
you're using a Mac, then TextMate or BBedit are a couple of options.

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

Re: [css-d] IE 6/7 layout issue

[Lori Lay]

Dave Goodchild wrote:
> URL: http://dontjustsitthere.co.uk/stage/
>
> There is a layout issue in IE6/7 - the container holding the T-shirt content
> is dropping. I tried using display:inline and position:relative to appease
> any IE bugs to no avail. Any suggestions?
>
>   

Actually, all of your "homecontent" divisions are happily floating to 
the top and the t-shirt content winds up underneath.  You can see this 
with a high-res monitor and lots of real estate for the view port to 
stretch out :-)   The images remain lined up on the left.

I don't know if this helps you any.  I had a similar layout with a fixed 
width and I'm afraid I'm not sure how to apply it to a fluid layout.  
francky helped me with it and he applied display: inline to the 
containing division (I think that would the "content" div in your case).

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

Re: [css-d] hi im confused

[Lori Lay]

Yup, you found us.  You may have to wait a bit for a reply though, 
depending on timezones and people's schedules...

The contact info is displayed at the bottom of every message, with the 
main list id being the first address.

Lori

sandy. wrote:
> i'd like to ask a question to the community.  i am new.  i am kind of
> confused about the interface.  Do i email my questions to here?
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Layout not quite Working in Opera

[Lori Lay]

Hello all,

I have a three column layout with a fixed header and left column and a 
footer that sits at the bottom of the view port or content, whichever is 
longer.  I have managed to get this working in most browsers - we don't 
have to worry about IE 5.x, fortunately.  However in Opera 9 on Mac OS X 
the footer doesn't sit at the bottom of the view port, it seems to be 
about the depth of the header below the view port instead.  I have 
hunted around but haven't been able to find a fix.  Does anyone know how 
to make Opera behave?

Here's the link: www.goethebooks.com/test 

The styling for the outer and main divisions may be found in: nav.css 


I am also having a problem with the nested floats in NS 6.  I found some 
info on the nested floats issue with Netscape, but couldn't find a 
solution.  If someone knows of a fix for that too, I'd like to have a look.

Thanks,

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

Re: [css-d] Site check in Mac/Linux browsers please (was Help! CSS menu problem)

[Lori Lay]

Looks good in Firefox, Safari, Opera, Camino on Mac OS X.  Footer floats 
to the top so that it's between Home and About in your nav bar in 
Netscape 6.2 and 7.2, although I doubt there are many Mac users running 
NS...  Cascading menus don't work in NS 6.2 - no surprises there.

Nice looking site so far.

Lori Lay


CSS wrote:
> Hello again,
>
> OK, I now seem to have solved my earlier CSS menu rollover problem in IE6 
> see: <http://www.sfep.org.uk/newHP.asp>.
>
> I decided to try and apply the background images to the  elements rather 
> than the  elements, and after a bit of re-classing of the 's that 
> seems to have done the trick -- see: <http://www.sfep.org.uk/newHPa.asp>...
>
> OK, so this now seems to work in Firefox, IE6 and Opera 8 under Win XPH -- 
> I'd appreciate it if anyone out there could give the page a looking at with 
> any Mac or Linux browsers, and let me know if the thing still works
>
>
> Many thanks, in advance
>
>
> J.
> John Marsden
> SfEP webspinner
> Aibidil
> Bolton
> Lancs
>
> W:  www.sfep.org.uk
> E:  <[EMAIL PROTECTED]>
> T:  07092 010469
> F:  07092 010473
> M: 07092 234734
>
>
> __
> 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/