Re: [css-d] IE7 Beta goes Public

[felix . zapata]

hi folks! if you don´t want to install the beta 2 of Internet Explorer 7, you
can download beta 1 from this page
http://downloads.skyzyx.com/index.php?fpp=20&did=8&fid=11 and use it with
another versions of Explorer like 5 or 5.5

this is useful for testing but, only works on Window XP



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

Re: [css-d] IE7 Beta goes Public

[Christian Montoya]

On 1/31/06, Al Sparber <[EMAIL PROTECTED]> wrote:
> Double-check for any filter hacks and do note that there are still
> some incomplete areas. Another issue on your page - don't know if you
> want to bother it, but a:hover is not working. This little test suite
> will explain why and how you can fix it (if you want to fix it).
>

Does IE 7 parse rules inside the tan hack?

* html { does IE 7 see this? }

> http://www.projectseven.com/csslab/ie7/import.htm

I'm hoping they'll fix that bug.

I'm also dissappointed that max-width is not supported. Are they not
going to add it?

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

Re: [css-d] Nav Bar Advise

[Christian Montoya]

On 1/31/06, Christian Montoya <[EMAIL PROTECTED]> wrote:
> first:
>
> border: size style color;
>
> so:
>
> border: 7px solid #264073;

whoops, the order might not matter. Please excuse me on that one.

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

Re: [css-d] Nav Bar Advise

[Christian Montoya]

On 1/31/06, Les Mizzell <[EMAIL PROTECTED]> wrote:
> #navigation-top-list li {
>   display: inline;}
>
> #navigation-top-list li#contact { width:74px; margin-left:10px;
> padding-bottom: 4px; border-bottom:7px #264073 solid; }
>
> #navigation-top-list li#news { width:74px; margin-left:10px;
> padding-bottom: 4px; border-bottom:7px #264073 solid; }

first:

border: size style color;

so:

border: 7px solid #264073;

then:

#navigation-top-list { list-style-type:none; }

#nav-top-list li { margin-left:10px; padding-bottom:4px;
border-bottom:7px solid #264073; float:left; }

Also make sure the next element in markup does a clear:left.

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

Re: [css-d] IE7 Beta goes Public

[Al Sparber]

> It's Windows Internet Explorer, not Microsoft Internet Explorer - 
> weird?
>
> If anyone could explain what's happening in IE 7 at the main page of
> http://www.cssliquid.com, I would really appreciate it. It must be 
> an
> inheritance bug? The divs are not being floated like they should.

Hi Christian,

Double-check for any filter hacks and do note that there are still 
some incomplete areas. Another issue on your page - don't know if you 
want to bother it, but a:hover is not working. This little test suite 
will explain why and how you can fix it (if you want to fix it).

http://www.projectseven.com/csslab/ie7/import.htm

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

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




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

Re: [css-d] IE7 Beta goes Public

[Christian Montoya]

It's Windows Internet Explorer, not Microsoft Internet Explorer - weird?

If anyone could explain what's happening in IE 7 at the main page of
http://www.cssliquid.com, I would really appreciate it. It must be an
inheritance bug? The divs are not being floated like they should.

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

Re: [css-d] Nav Bar Advise

[Les Mizzell]

Jonathan Gold wrote:
> I don't understand. If they're all the same why do you style each one
> separately. Won't it work with one declaration:
> 
> #navigation-top-list li { display: inline; width:74px;
> margin-left:10px; padding-bottom: 4px; border-bottom:7px #264073
> solid; }


Doh I left part out - they're NOT all the same width. My mistake...
The bottom border needs to extend for the defined width, regardless of 
how long the text is like:

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

Re: [css-d] Nav Bar Advise

[Jono]

> I'm trying to figure out how to force the width of a list element for a
> top nav bar to look like this:
> 
> http://www.cyndustries.com/navcrap.gif
> 
> Progress so far:
> 

Give this a spin:
http://www.charlestonwebsolutions.com/examples/list_nav_001.html

I applied the border to the  so that you can have a hover effect by
changing the border color and link color on hover.  Widths are set in ems,
but can easily be changed to pixel values if you'd rather go that route.

The "forced" width of each list item is 7em, which is not necessarily forced
- it will increase/decrease in width when the font size is changed - but it
is consistent across all list items.

Is that what you were looking for?

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



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

Re: [css-d] Nav Bar Advise

[Roger Roelofs]

On Jan 31, 2006, at 9:25 PM, Les Mizzell wrote:

> I'm trying to figure out how to force the width of a list element for a
> top nav bar to look like this: http://www.cyndustries.com/navcrap.gif
>
> 
>   Contact Us
>   News
>...and so forth
> 
>
> CSS looks like so far
>
> #navigation-top-list li {
>   display: inline;}   

Inline elements can't have a width specified.  If you want to control 
the width, you will need to float them

#navigation-top-list li {
float: left;
width: 74px;  /* you probably will want to do this in ems instead */
margin-left:10px;
padding-bottom: 4px;
border-bottom:7px #264073 solid;
}

hth
-- 
Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Nav Bar Advise

[Jonathan Gold]

I don't understand. If they're all the same why do you style each one
separately. Won't it work with one declaration:

#navigation-top-list li { display: inline; width:74px;
margin-left:10px; padding-bottom: 4px; border-bottom:7px #264073
solid; }

Or what don't I understand?



On 1/31/06, Les Mizzell <[EMAIL PROTECTED]> wrote:
> I'm trying to figure out how to force the width of a list element for a
> top nav bar to look like this:
>
> http://www.cyndustries.com/navcrap.gif
>
> Progress so far:
>
> Code (abbreviated) looks like...
>
>
> 
>   Contact Us
>   News
>...and so forth
> 
>
> CSS looks like so far
>
> #navigation-top-list li {
>   display: inline;}
>
> #navigation-top-list li#contact { width:74px; margin-left:10px;
> padding-bottom: 4px; border-bottom:7px #264073 solid; }
>
> #navigation-top-list li#news { width:74px; margin-left:10px;
> padding-bottom: 4px; border-bottom:7px #264073 solid; }
>
> ...and so forth
>
> Advise? TIA...

--
Jonathan
Berkeley, CA
http://home.pacbell.net/jonnygee/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Nav Bar Advise

[Les Mizzell]

I'm trying to figure out how to force the width of a list element for a 
top nav bar to look like this:

http://www.cyndustries.com/navcrap.gif

Progress so far:

Code (abbreviated) looks like...



  Contact Us
  News
   ...and so forth


CSS looks like so far

#navigation-top-list li {
  display: inline;} 

#navigation-top-list li#contact { width:74px; margin-left:10px; 
padding-bottom: 4px; border-bottom:7px #264073 solid; }

#navigation-top-list li#news { width:74px; margin-left:10px; 
padding-bottom: 4px; border-bottom:7px #264073 solid; }

...and so forth

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

Re: [css-d] Print bug in Moz

[Brandon Oto]

On Jan 31, 2006, at 5:28 PM, Holly Bergevin wrote:
> The problem element isn't floated in the first place, so adding  
> float: none to it did not have the desired result, obviously.  
> Brandon, your friend needs to override the absolute positioning of  
> - #textblocki - in his/her style sheet. Have him/her add the  
> following -

Thanks a bunch, Holly :-D Works good here.

Back to the bit mines...

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

Re: [css-d] Print bug in Moz

[Holly Bergevin]

From: Brandon Oto <[EMAIL PROTECTED]>

>"I'm trying to build a print style sheet for a new site; I'm running up
>against a Mozilla bug. I know about the float bug - and thought I'd  
>worked
>around it (by adding a float: none; to all blocks that normally  
>floated).

>Anyway - the problem is simple: When printed content is more than one  
>page
>long, any Mozilla-based browser (Firefox, Mozilla, Camino, Netscape)  
>prints
>only the first page. 

>http://iche-idaho.org/highschool.html

The problem element isn't floated in the first place, so adding float: none to 
it did not have the desired result, obviously. Brandon, your friend needs to 
override the absolute positioning of - #textblocki - in his/her style sheet. 
Have him/her add the following - 

#textblocki {position: static;}

Actually, there's little use for most of the properties that are listed in the 
- #textblock, #textblocki - selector. I'd change it instead to the following - 

#textblock, #textblocki {
width: auto; 
color: black;
background: transparent;
position: static; /* this is the important part */
margin-top: 75px; /* adjust to suit */
}

{float: none;} can be removed from the body and #main selectors, as well. 

I hope that helps,

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

Re: [css-d] Background image duplicated when page is scrolled in IE6/win

[Jono]

> Hi
>  Webpage link = http://www.2gee.com/business.html
> 
> If you visit this page in IE6/win and scroll the page down to the bottom and
> then scroll back up you should see that the background image located at the
> top of the LH column has been duplicated.

Appears to be fixed, I do not see that happening in my version of IE 6 for
XP Home.


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



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

Re: [css-d] IE7 Beta goes Public

[Ingo Chao]

Eric A. Meyer wrote:
> And always remember that this is a 
> beta!


They probably will fix their position:absolute bugs in gamma or delta.

Absolutely positioned element and percentage width
http://www.satzansatz.de/cssd/tmp/apboxpercentagewidth.html
wrong

Absolutely positioned box and lost next margin
http://www.brunildo.org/test/IEWapie2.html
wrong

z-index on a.p. elements within r.p.parents
http://www.satzansatz.de/cssd/escher.html
wrong

Absolutely positioned element with auto offset: the static position
http://www.satzansatz.de/cssd/apstaticposition.html
wrong

http://www.brunildo.org/test/IE_rel_abs.html
absolute positioning inside a relative element
first block wrong

Floats and disappearing absolutely positioned divs
http://www.brunildo.org/test/IE_raf3.html
wrong in Example 1,2, 15 / corrected in Example 6,7


If someone could check these too before I add them to the Wiki, I'd 
appreciate it.


IE7b2 still has no clue what a containing block is, and z-index seems to 
be difficult to read in the specs.

And the 'layout' problem still wins over the specs.

Ingo


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

Re: [css-d] Correcting for spacing difference in Opera

[Gunlaug Sørtun]

Iorhael wrote:
> http://www.drkdesign.com/LVS/phpintro/
> 
> Do you know of a specific fix for Opera?

Sure. A heavy one is part of this collection[1], but I won't recommend
it. It's so heavy that even the validator has serious problems handling
it, although it looks like a copy from the CSS3 specs.
Advice: _don't_ use browser-hacks for anything serious.


Instead, try adding this little style-set...

html body p.date {margin: 0; top: auto; bottom: -22px;}
#banner {position: relative;}

...and see if that cures the problem across browser-land. Looking pretty
good at my end.

I use override (placing my styles after yours) since I didn't have time
to go through your stylesheet, but the solution above simply position
the 'p.date' relative to the bottom of banner - instead of relative to
the top of the page. That's a much more cross-browser stable solution.

Note that all such absolute-positioning of text tends to fail slightly
if font-resizing is applied at the user-end. That can also be
"corrected" to a degree by adding negative margins to the mix, but try
out the plain version first and see if that's close enough.

regards
Georg

[1]http://www.gunlaug.no/contents/styles/target-browser.css
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Correcting for spacing difference in Opera

[Iorhael]

> Zero out default-margins before positioning, and most differences will
> be gone.

hupon re-opening Opera, the date stamp position looks just fine 
now...thanks again Georg! I must not have refreshed after making the change.

Debbie 

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

Re: [css-d] background image peeking out from behind DIV - rounding error?

[Ingo Chao]

I still don't understand why Safari and Opera show the 'rounding error' 
at 800px and lower, as I have described.

And with regard to my first posting: I have suggested to move the bg 
image from body to #wrap.

Ingo

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

Re: [css-d] background image peeking out from behind DIV - rounding error?

[francky]

Roger Roelofs wrote:

>This same question came up a week or so ago and the resolution was  
>the same.  Put the bg image on the container centered with margin: 0  
>auto; instead of on its parent.
>  
>
Yes, that's what  I replied this morning in a mail to Don which by 
accident didn't go to the list (wrong alias...):

| Hi Don,
| Because you have a fixed width and height of the header, why not use 
| a (combined) background-image 
|  
| (not in the body, but) as bg-image in the top of the #wrap ? The he will 
| shrink and expand just exactly with the rest of the wrap: the white or 
| other colored background of the content.

In the meantime, I tried a testpage 
 - no more 
problems in IE.

As far as the theoretical discussion ("why, o IE, why?") I'm guessing that
the reason was: every now and then IE can have a rounding-off difference 
between the centering position of a bg-image in the body, and the centering 
position of a wrapper, when the window is made smaller.
Indication: when good looking, you see not only the right side is peeking 
out with 1px, but at the same moment the left side is also jumping with 1px
to the right.

So I made a quick testpage with an image of 760px in the background (same 
size as the wrapper), to see if that would solve the problem. Result 
: no!
Now we see it is very systematic. Every time we move (in IE) the window
1px smaller, first the wrapper goes 1px left (bg-image stays in position 
and is peeking out at the right side), next step of 1px moves the bg-img 
1px left (and wrapper stays in position), and so on, just in turn...

francky









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

Re: [css-d] lte IE 6 - correct coding?

[Holly Bergevin]

From: "Smith, Sarah" <[EMAIL PROTECTED]>

> my stylesheet comment:
>
>Is getting picked up by [IE7]. Do I have the right syntax/coding/wording on
>the comment? 

Well, if the syntax you posted above is what you have on your page, then 
according to Microsoft's information about Conditional Comments [1], you are 
not using the correct syntax. There needs to be a space between IE and the 
version number you are targeting.

I hope that helps,

~holly

[1] 
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp
 
 
   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Correcting for spacing difference in Opera

[Iorhael]

Zero out default-margins before positioning, and most differences will
> be gone.

Georg,

Thanks for that ...that eliminated the difference between IE and Firefox, so
I don't need the html>body hack anymore. However, the Opera still brings in
the date stamp lower.

http://www.drkdesign.com/LVS/phpintro/

Do you know of a specific fix for Opera?

Debbie 

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

Re: [css-d] IE7 Beta goes Public

[James Conley]

I am *assuming* that it will ALSO be available on Windows XP Service
Pack 2 systems even though that's not listed in the  "will ultimately be
available on" list.

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Eric A. Meyer
Sent: Tuesday, January 31, 2006 4:00 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] IE7 Beta goes Public

At 3:20 PM -0500 1/31/06, Bryce Fields wrote:

>Test those sites now.
>
>http://www.microsoft.com/windows/ie/default.mspx

Oh, now this is interesting:

"Internet Explorer 7 Beta 2 Preview will only run on Windows(r) XP
Service Pack 2 (SP2) systems, but will ultimately be available for
Windows Vista, Windows XP Professional x64 Edition, and Windows Server
2003."
-- http://www.microsoft.com/windows/ie/ie7/ie7betaredirect.mspx

So it will not be available for Windows 2000, it would seem.  That's
going to complicate the picture a bit.
I think what would serve the list best would be a wiki page with a
bunch of links to tests of known IE6 bugs or support gaps that are
supposed to be fixed in IE7.  For example, listing test pages for all
the various float bugs (doubled margin, etc.), CSS2.1 selectors, CSS
hacks (star-html, etc.) and so on.  The wiki would be a great place to
collect all those and to share testing results.
I'm advocating putting that on the wiki because it will keep the
information in one public place, so that non-members can make use of the
links and see the results of tests, and to avoid having the list drowned
by IE7 testing results and related traffic.
There is no doubt in my mind that IE7 traffic will become dominant
over the next several months, especially once it goes final, as people
work to deal with changes on their sites.  Providing a solid context for
those discussion with a wiki page strikes  me as a good way to go about
it.
So:

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

But please let's not start a round of "hacks are breaking! hacks are
necessary! hacks are evil!" on the list, especially not now.  Let's find
out what we have first, and let the dust settle a bit before we worry
about which way to jump.  And always remember that this is a beta!

-- 
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
   -- Martina Kosloff (http://mako4css.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE Layout Problem

[Gunlaug Sørtun]

Martin Davis III wrote:
> my website works perfectly in Firefox. Then I load it in IE and the 
> boarders don't show up. Any suggestions?
> 
> http://www.swilly.tk/~martin/

Well, nothing has changed since last time you asked that question - 2
days ago.
Here's the same answer...

Try adding:
.article,.gallery {height: 100%; overflow: hidden;}
...which will fix both problems in the mentioned browsers. All in
accordance with [1][2].

regards Georg

[1]http://www.satzansatz.de/cssd/onhavinglayout.html
[2]http://www.w3.org/TR/CSS21/visuren.html#q15
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE Layout Problem

[James Conley]

In IE7 the red borders show up but then break into pieces when I scroll
the page. 

james c

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Martin Davis
III
Sent: Tuesday, January 31, 2006 5:03 PM
To: [css-d] CSS-Discuss.org
Subject: [css-d] IE Layout Problem

my website works perfectly in Firefox. Then I load it in IE and the
boarders don't show up. Any suggestions?

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

[css-d] IE Layout Problem

[Martin Davis III]

my website works perfectly in Firefox. Then I load it in IE and the
boarders don't show up. Any suggestions?

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

Re: [css-d] IE7 Beta goes Public

[Tony Crockford]

Eric A. Meyer wrote:

> But please let's not start a round of "hacks are breaking! hacks are 
> necessary! hacks are evil!" on the list, especially not now.  Let's 
> find out what we have first, and let the dust settle a bit before we 
> worry about which way to jump.  And always remember that this is a 
> beta!


can we discuss things we find don't work?  in the hope that we can get 
to a solution to write up the wiki?

for example most of my recently created sites no longer have any link 
hover effects in IE7 and as expected elements with fixed height no 
longer expand automatically, so, other than a conditional comment to 
override the "setting a value for height to get a min-height" just for 
IE7 are there any other solutions?

;o)


-- 
Join me: http://wiki.workalone.co.uk/
Thank me: http://www.amazon.co.uk/gp/registry/1VK42TQL7VD2F
Engage me: http://www.boldfish.co.uk/portfolio/

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

Re: [css-d] IE7 Beta goes Public

[Eric A. Meyer]

At 3:20 PM -0500 1/31/06, Bryce Fields wrote:

>Test those sites now.
>
>http://www.microsoft.com/windows/ie/default.mspx

Oh, now this is interesting:

"Internet Explorer 7 Beta 2 Preview will only run on Windows® XP 
Service Pack 2 (SP2) systems, but will ultimately be available for 
Windows Vista, Windows XP Professional x64 Edition, and Windows 
Server 2003."
-- http://www.microsoft.com/windows/ie/ie7/ie7betaredirect.mspx

So it will not be available for Windows 2000, it would seem.  That's 
going to complicate the picture a bit.
I think what would serve the list best would be a wiki page with a 
bunch of links to tests of known IE6 bugs or support gaps that are 
supposed to be fixed in IE7.  For example, listing test pages for all 
the various float bugs (doubled margin, etc.), CSS2.1 selectors, CSS 
hacks (star-html, etc.) and so on.  The wiki would be a great place 
to collect all those and to share testing results.
I'm advocating putting that on the wiki because it will keep the 
information in one public place, so that non-members can make use of 
the links and see the results of tests, and to avoid having the list 
drowned by IE7 testing results and related traffic.
There is no doubt in my mind that IE7 traffic will become dominant 
over the next several months, especially once it goes final, as 
people work to deal with changes on their sites.  Providing a solid 
context for those discussion with a wiki page strikes  me as a good 
way to go about it.
So:

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

But please let's not start a round of "hacks are breaking! hacks are 
necessary! hacks are evil!" on the list, especially not now.  Let's 
find out what we have first, and let the dust settle a bit before we 
worry about which way to jump.  And always remember that this is a 
beta!

-- 
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
   -- Martina Kosloff (http://mako4css.com/)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Print bug in Moz

[Brandon Oto]

Folks,

Passing this along on behalf of a friend. Is this a known bug? It  
sounds vaguely familiar, but I can't seem to find any references.

"I'm trying to build a print style sheet for a new site; I'm running up
against a Mozilla bug. I know about the float bug - and thought I'd  
worked
around it (by adding a float: none; to all blocks that normally  
floated).
In fact, when I hit the problem, I even added a full-page wrapper  
that wasn't
there before, and defloated THAT. (It doesn't affect view in any  
browser,
that I can tell - except maybe IE 5, which I just looked at for the  
first
time; it can't even SEE the site. Weird. Irrelevant, though, because  
it's a
dead browser.)

Anyway - the problem is simple: When printed content is more than one  
page
long, any Mozilla-based browser (Firefox, Mozilla, Camino, Netscape)  
prints
only the first page. All other browsers (Mac/Win) seem fine with  
printing
as many pages as they are. (Thank goodness for print preview, or I'd  
be out
of paper by now. :) )"

http://iche-idaho.org/highschool.html

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

Re: [css-d] background image peeking out from behind DIV - rounding error?

[Roger Roelofs]

Ingo,

On Jan 31, 2006, at 7:05 AM, Ingo Chao wrote:

> Roger Roelofs wrote:
>> Ingo,
>> On Jan 31, 2006, at 4:53 AM, Ingo Chao wrote:
>>> Don Hinshaw wrote:
 The basic page is here: http://66.117.159.181/ 
 for_retailers_contact.php
>>> Centering a bg-img with background-position: center top is  
>>> apparently
>>> different to centering a div with margin: 0 auto 0 auto,  
>>> especially when
>>> the viewport is sized to the width of the bg-img, or smaller.
>> Doesn't the spec say that background images which are centered  
>> will be cropped on either side if the container is smaller than  
>> the image?  Conversely, elements that are centered via margin: 0  
>> auto; remain centered until they are wider than their container at  
>> which point they act as though they were left aligned??
>>
>
> Hmm.
>
> Don's bg image is center/top-positioned with regard to body. It is  
> wider than it looks, there is 20px of green on both sides.
> http://66.117.159.181/images/bkg_home.gif
> w:800px h:200px
>
> The browsers are showing a different behavior when the viewport  
> gets smaller than 800px:

This same question came up a week or so ago and the resolution was  
the same.  Put the bg image on the container centered with margin: 0  
auto; instead of on its parent.

Roger,
-- 
Roger Roelofs
[EMAIL PROTECTED]



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

[css-d] IE7 Beta goes Public

[Bryce Fields]

Test those sites now.

http://www.microsoft.com/windows/ie/default.mspx

--
Bryce Fields
www.royalrodent.com

"Do or do not! There is no try!" -- Yoda

DISCLAIMER: All opinions expressed herein are mine, except for the ones I stole.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Table Caption Disappears - Opera 8.5

[bill]

To summarize, you need to feed Opera a 0px margin-left value via a hack,
since IE and Firefox probably need that -1px setting due to rounding
errors.

Regards,
Ron

Hi Ron and others,

What kind of hack would that be that is read by Opera but not other
browsers? I'm not exactly a newbie and I've given up (thankfully) the notion
that pages must look the same in all browsers, but but I'm still having
problems figuring out how to get pages to *layout* the same.

Thanks for any help!
Bill



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

Re: [css-d] Table Caption Disappears - Opera 8.5

[Pringle, Ron]

> To summarize, you need to feed Opera a 0px margin-left value 
> via a hack,
> since IE and Firefox probably need that -1px setting due to rounding
> errors.
> 
> Regards,
> Ron
> 
> Hi Ron and others,
> 
> What kind of hack would that be that is read by Opera but not other
> browsers? I'm not exactly a newbie and I've given up 
> (thankfully) the notion
> that pages must look the same in all browsers, but but I'm 
> still having
> problems figuring out how to get pages to *layout* the same.
> 
> Thanks for any help!
> Bill

Bill-

I'm not very familiar with the various hacks that can be fed to the
different browsers, but after much poking around and some feedback from
others, I ended up using the "@ media" hack to feed the alternate values
to Opera 6 and above.

The hack and how to apply it in this particular instance are detailed on
my test page [0].

Regards,
Ron

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

Re: [css-d] CSS and e-mail clients

[Jan Brasna]

I often refer to these resources:

http://www.alistapart.com/articles/cssemail/
http://css-discuss.incutio.com/?page=StyleInEmail
http://www.wilsonweb.com/wmt6/email-client-summary.htm
http://www.wilsonweb.com/wmt8/email_format_preferences.htm
http://www.mailchimp.com/resources/gen_email_design.phtml
http://www.campaignmonitor.com/blog/archives/2005/08/optimizing_css_1.html
http://www.campaignmonitor.com/blog/archives/2005/11/html_email_desi.html
http://www.stonehenge.com/merlyn/UnixReview/col37.html

-- 
Jan Brasna :: www.alphanumeric.cz | www.janbrasna.com | www.wdnews.net
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] lte IE 6 - correct coding?

[Nick Fitzsimons]

> Hi all,
> Just giving IE7 a ride and my stylesheet comment:
> 
> Is getting picked up by it. Do I have the right syntax/coding/wording on
> the comment? I know the browser is beta and not "perfect" yet, but I
> wanted to make sure.

It's possible that the relevant component of the Beta hasn't been changed
yet. If this is the just-released IE7 Beta Public Preview [1] then you
should report this to MS [2]; it's definitely something they should have
got right, given their exhortations to use CCs [3].

[1] http://www.microsoft.com/windows/ie/ie7/
[2] http://blogs.msdn.com/ie/archive/2006/01/31/520817.aspx
[3] http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx

regards,

Nick.
-- 
Nick Fitzsimons
http://www.nickfitz.co.uk/

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

Re: [css-d] lte IE 6 - correct coding?

[Al Sparber]

From: "Smith, Sarah" <[EMAIL PROTECTED]>
> Hi all,
> Just giving IE7 a ride and my stylesheet comment:
> 
> Is getting picked up by it. Do I have the right 
> syntax/coding/wording on
> the comment? I know the browser is beta and not "perfect" yet, but I
> wanted to make sure.
> Thanks!

Hi Sarah,

I would wait for the public beta - at least :-) I'm sure - in fact, 
I'd bet the ranch, that "if lte IE6" will not be picked up by the 
finished product. If you are concerned, you might want to post on a 
Microsoft newsgroup or one of the MSDN blogs or lists. In the unlikely 
event, you have an "unofficial" beta, then I wouldn't post :-)

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

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






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

Re: [css-d] Table Caption Disappears - Opera 8.5

[Pringle, Ron]

lr wrote:

> What is it about this CSS...
> 
> caption, caption a { background: url(/images/caption.gif) 
> #69c; color: 
> #eee; font-weight: bold; margin-left: -1px; padding: 5px; border: 1px 
> solid #69c; }
> 
> ...that makes Opera 8.5 refuse to show the caption - at all?
> 
> lr

Its the margin-left: -1px that's doing it.

See ex.02 on this page for more details and a good test page.

http://www.aurora-il.org/table_test.htm


To summarize, you need to feed Opera a 0px margin-left value via a hack,
since IE and Firefox probably need that -1px setting due to rounding
errors.

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

[css-d] lte IE 6 - correct coding?

[Smith, Sarah]

Hi all,
Just giving IE7 a ride and my stylesheet comment:

Is getting picked up by it. Do I have the right syntax/coding/wording on
the comment? I know the browser is beta and not "perfect" yet, but I
wanted to make sure.
Thanks!

Sarah


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

[css-d] Table Caption Disappears - Opera 8.5

[L. Robinson]

What is it about this CSS...

caption, caption a { background: url(/images/caption.gif) #69c; color: 
#eee; font-weight: bold; margin-left: -1px; padding: 5px; border: 1px 
solid #69c; }

...that makes Opera 8.5 refuse to show the caption - at all?

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

Re: [css-d] centering drop down menu or not

[David Laakso]

Ian Young wrote:
> I have used the drop down menu from
> http://koivi.com/css-menus/
> Looks fine in FF and Opera. Also managed to change the colour of upper menu
> using a class on the . However,
> cannot get it to centre in IE. Any thoughts?
> Ian
> Sorry been an idiot. draft site at http://www.venachar.org.uk/members-new/
> style at http://www.venachar.org.uk/members/includes/style.css
Ian,  while the menu does not center as you would like in IE, that is a 
relatively minor issue. You may want to view your page at 800 in FF. I did not 
look at it closely, but setting a fixed width on the containing division, and 
zeroing out the margin on that division and the body may be a starting point.
Regards,
~davidLaakso

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

Re: [css-d] centering drop down menu or not

[cj]

> >>>this isn't a fix for your ie problem (which i can't see),
> The menu isn't centred in IE but almost is, you need to look closely

http://sltclan.com/images/cj/dinghy.png


> >>>but the page
> took well over 10 seconds to show up in firefox, and on first view in
> ie it actually timed out.  a refresh of ie also took a long time to
> load the page at all but it did work this second time.>>>
>
> Wow!
>
> Certainly doesn't do that in any of the browsers that I have used or had it 
> checked with.
>
> the page is only 3kb so that is really odd.

your pictures aren't 3kb, and i was loading them for the first time. 
i don't think the size of your pictures should have been that big of a
deal however, and certainly shouldn't have caused ie to time out for
me.  this part is well beyond being out of my league, though.



> >>>the second level being centered leads me to assume that no other menu
> items pop out for a third level, but they do and it threw me off. >>>
>
> Why?
> this might be a personal way of thinking, so take it how you will.

when you center links, i don't expect more links to jump out of the
SIDE of those links.  your main menu (where you have the top links
centered) doesn't throw me off when it jumps out because the links
underneath are in the middle of the top menu.  it still "fits" to me.

having a centered menu with popups underneath that are also centered
that *then* have *sideways* jumping out throws me off because the text
i was just looking at was centered.  i could just be weird.  like i
said, this might be a personal way of thinking so take it how you
will.


> >>i get horizontal scrolling in both ie and ff.  my browser window is
> always set to 800x600.>>
>
> At the market at which this site is aimed, I will be very surprised if anyone 
> uses 800 x 600.
>
> However, with an image size of 770px I guess that is ound to happen.

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

Re: [css-d] centering drop down menu or not

[Ian Young]

>>>my ie shows your menu items centered on all three levels.


>>>this isn't a fix for your ie problem (which i can't see), 
The menu isn't centred in IE but almost is, you need to look closely

>>>but the page
took well over 10 seconds to show up in firefox, and on first view in
ie it actually timed out.  a refresh of ie also took a long time to
load the page at all but it did work this second time.>>>

Wow!

Certainly doesn't do that in any of the browsers that I have used or had it 
checked with.

the page is only 3kb so that is really odd.


>>other notes:

>>>the second level being centered leads me to assume that no other menu
items pop out for a third level, but they do and it threw me off. >>>

Why?
this might be a personal way of thinking, so take it how you will.

>>i get horizontal scrolling in both ie and ff.  my browser window is
always set to 800x600.>>

At the market at which this site is aimed, I will be very surprised if anyone 
uses 800 x 600.

However, with an image size of 770px I guess that is ound to happen.

Thanks for input.

Ian

-- 
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.375 / Virus Database: 267.14.25/246 - Release Date: 30/01/2006
 

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

Re: [css-d] centering drop down menu or not

[cj]

On 1/31/06, Ian Young <[EMAIL PROTECTED]> wrote:
> I have used the drop down menu from
> http://koivi.com/css-menus/
>
> Looks fine in FF and Opera. Also managed to change the colour of upper menu
> using a class on the . However,
> cannot get it to centre in IE. Any thoughts?

http://www.venachar.org.uk/members-new/
>
> style at http://www.venachar.org.uk/members/includes/style.css

my ie shows your menu items centered on all three levels.


this isn't a fix for your ie problem (which i can't see), but the page
took well over 10 seconds to show up in firefox, and on first view in
ie it actually timed out.  a refresh of ie also took a long time to
load the page at all but it did work this second time.


other notes:

the second level being centered leads me to assume that no other menu
items pop out for a third level, but they do and it threw me off. 
this might be a personal way of thinking, so take it how you will.

i get horizontal scrolling in both ie and ff.  my browser window is
always set to 800x600.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] centering drop down menu or not

[Ian Young]

I have used the drop down menu from
http://koivi.com/css-menus/

Looks fine in FF and Opera. Also managed to change the colour of upper menu
using a class on the . However,
cannot get it to centre in IE. Any thoughts?

Ian

IY e-Solutions

Sorry been an idiot. draft site at http://www.venachar.org.uk/members-new/

style at http://www.venachar.org.uk/members/includes/style.css
-- 
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.375 / Virus Database: 267.14.25/246 - Release Date: 30/01/2006

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

[css-d] centering drop down menu or not

[Ian Young]

I have used the drop down menu from
http://koivi.com/css-menus/

Looks fine in FF and Opera. Also managed to change the colour of upper menu
using a class on the . However,
cannot get it to centre in IE. Any thoughts?

Ian

IY e-Solutions

--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.375 / Virus Database: 267.14.25/246 - Release Date: 30/01/2006
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] framed image problems in FF

[David Laakso]

Augusto Murri wrote:
> http://www.augustomurri.it//workBoard/MUSEI/scheda_museo.php#
> Looking this in FF the bottom frame of imgs is largely than the others..
> .img_container2 {
>   float: left;
>   border: 1px solid #D1E1EE;
>   text-align: center;
>   margin: 0px 3px 3px 0px;
> }
>
> .img_container2 img {
>   margin: 2px;
> }/* general */
> .left {
>   float: left;
> }and HTML is :  src="img/img_museo_prova4.jpg" width="130" height="106" alt="Immagine 2" 
> />Anyone can help me?Tnx a lot! Augusto
>   
Hmm. Strange...
They seem closer to equal with this change:
.img_container2 img { margin: 2px 3px 0 3px; }
Regards,
~davidLaakso
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Correcting for spacing difference in Opera

[Gunlaug Sørtun]

Iorhael wrote:
> Hi, I am trying to line up the date stamp with the menu links on this
>  site, but there is a vertical spacing difference between IE, 
> Firefox, and Opera. I have coded for the IE difference but am not 
> sure how to code for the Opera difference.
> 
> http://www.drkdesign.com/LVS/phpintro/

Zero out default-margins before positioning, and most differences will
be gone.

Like so...

p.date {margin: 0;}

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

[css-d] framed image problems in FF

[Augusto Murri]

Hi all,
i've a little problem putting frames around images here :

http://www.augustomurri.it//workBoard/MUSEI/scheda_museo.php#

Looking this in FF the bottom frame of imgs is largely than the others..

I'm using this css :

.img_container2 {
float: left;
border: 1px solid #D1E1EE;
text-align: center;
margin: 0px 3px 3px 0px;
}

.img_container2 img {
margin: 2px;
}/* general */
.left {
float: left;
}and HTML is : Anyone can help me?Tnx a lot! Augusto
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] background image peeking out from behind DIV - rounding error?

[Ingo Chao]

Roger Roelofs wrote:
> Ingo,
> 
> On Jan 31, 2006, at 4:53 AM, Ingo Chao wrote:
> 
>> Don Hinshaw wrote:
>>> The basic page is here: 
>>> http://66.117.159.181/for_retailers_contact.php
>> Centering a bg-img with background-position: center top is apparently
>> different to centering a div with margin: 0 auto 0 auto, especially 
>> when
>> the viewport is sized to the width of the bg-img, or smaller.
> 
> Doesn't the spec say that background images which are centered will be 
> cropped on either side if the container is smaller than the image?  
> Conversely, elements that are centered via margin: 0 auto; remain 
> centered until they are wider than their container at which point they 
> act as though they were left aligned??
>

Hmm.

Don's bg image is center/top-positioned with regard to body. It is wider 
than it looks, there is 20px of green on both sides.
http://66.117.159.181/images/bkg_home.gif
w:800px h:200px

The browsers are showing a different behavior when the viewport gets 
smaller than 800px:

- Safari does not center the image like the others do, the image does 
not "move" relatively to the menu while the window is sized, like Opera 
and Fx do.

- When you resize the window to about 500px, and scroll horizontally to 
the right, Safari aligns the 760px blue bubbles part of the bg-image 
with the menu, but not Opera nor Fx. And the 20px of green is cropped, 
as you've said.

I must say I have always difficulties in interpreting what I see within 
the range of a window: do I see the body, the html, or something else?

I'd expect Opera and Safari shouldn't show any difference between the 
center-positioning of the bg-img and the margin: 0 auto; of a div when 
the window gets smaller than 800px, but they do center different, 0-1px off.

So sorry, I don't have an answer. Maybe I am just plain wrong.

Ingo

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

Re: [css-d] Form Layout - better table or CSS for this one?

[Roger Roelofs]

Chris,

On Jan 31, 2006, at 2:33 AM, Chris Ovenden wrote:

> I don't know if you tried your first example in Firefox, but it worked
> just fine. IE sometimes goes haywire on all-floated layouts, however,
> and putting each line inside a block element was a pretty good cure.
> The inputs don't need to be floated, however, and the number of divs
> can be slimmed down a bit, like this:
>
> 
>
>Label 1:
> id="input1" />
>Label 2:
> id="input2" />
>
> 

A slightly more semantic choice (with similar css applied) might be...



Label1:
...

I sometimes use a table anyway for the benefit of browsers that aren't 
css capable, but it depends on the form and the audience.

hth
-- 
Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Correcting for spacing difference in Opera

[Iorhael]

Hi, I am trying to line up the date stamp with the menu links on this site, but 
there is a vertical spacing difference between IE, Firefox, and Opera. I have 
coded for the IE difference but am not sure how to code for the Opera 
difference. Can someone help me out with this or direct me to a link? I run 
across this problem quite a lot with vertical spacing in my sites.

http://www.drkdesign.com/LVS/phpintro/


/*date stamp*/

p.date {
   position: absolute;
   top: 129px; /*for IE6*/
   left: 8px;
   text-align: left;
   color: #fff;
   font-size: 65%;
}

html>body p.date {
   position: absolute;
   top: 119px; /*for all other browers*/
   left: 6px;
   text-align: left;
   color: #fff;
   font-size: 65%;
}

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

Re: [css-d] background image peeking out from behind DIV - rounding error?

[Roger Roelofs]

Ingo,

On Jan 31, 2006, at 4:53 AM, Ingo Chao wrote:

> Don Hinshaw wrote:
>> The basic page is here: 
>> http://66.117.159.181/for_retailers_contact.php
>
> Centering a bg-img with background-position: center top is apparently
> different to centering a div with margin: 0 auto 0 auto, especially 
> when
> the viewport is sized to the width of the bg-img, or smaller.

Doesn't the spec say that background images which are centered will be 
cropped on either side if the container is smaller than the image?  
Conversely, elements that are centered via margin: 0 auto; remain 
centered until they are wider than their container at which point they 
act as though they were left aligned??

-- 
Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] 3-column lay-out and FF-problems

[In Tel webdesign]

I need help to solve some problems in my three column layout

(#foto-container #content #menu-blok)

1. When I put more text in the content-div, this flows right under the 
fotocontainer on the left

2. In firefox my menu items are dispayed without any space between them
3. In firefox my h1 border goes right over the foto-container-div

http://www.doenenlaten.com/test-nieuw/
http://www.doenenlaten.nl/test-nieuw/css/doen-en-laten-4.css

Met vriendelijke groeten

Adrie den Hertog
In tel webdesign
www.in-tel.nl


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

Re: [css-d] CSS and e-mail clients

[Ian Anderson]

Sander van Surksum wrote:

> Is there a guideline or a website that can show/tell me how css will
> display in the most common e-mailclients.

Try these for information:

http://www.alistapart.com/articles/cssemail/

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

Also, these guys have a good reputation as a service:
http://www.campaignmonitor.com/

HTH

Cheers

Ian

-- 
_
zStudio - Web development and accessibility
http://zStudio.co.uk

Snippetz.net - Online code library
File, manage and re-use your code snippets & links
http://snippetz.net

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

Re: [css-d] background image peeking out from behind DIV - rounding error?

[Ingo Chao]

Don Hinshaw wrote:
> I have a background image on my body tag that is ostensibly the same 
> width as the DIV that contains the main body of text and sits partially 
> on top of the background image.
> The problem is that when I resize IE/Win (and Opera 8.5) to right around 
> 850px wide, the DIV becomes i pixel narrower and the background image 
> peeks out along the right edge creating an unsightly line. Smaller and 
> larger viewports cause the line to disappear.
> 
> The basic page is here: http://66.117.159.181/for_retailers_contact.php

The problem does show up in Safari, IEMac, Opera9Mac, too.
Actually, at around 800px, which would be the width of your 
background-image.

In my IE/Win, the problem is present regardless of the width.

Centering a bg-img with background-position: center top is apparently 
different to centering a div with margin: 0 auto 0 auto, especially when 
the viewport is sized to the width of the bg-img, or smaller.

It so happens that you have another margin-centered div #wrap, so I 
think you could crop your image and position it at left top.

#wrap { margin: 0 auto; text-align: left; width: 760px;
background: url(bkg_home.gif) no-repeat -20px top; }

Ingo

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

[css-d] CSS and e-mail clients

[Sander van Surksum]

Hello,
 
Is there a guideline or a website that can show/tell me how css will
display in the most common e-mailclients.
 
I whanna make an html newsletter with a repeated background but will it
work in e-mailclients? 
 
Or most I avoid css in e-mailclient?
 
http://www.johnsten.com/test/news.html
 
Regards,
 
Sander
 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] why does right column drop

[Peter Lindstrom]

I am a decent PHP coder but a lousy html/css layout guy. Since I have on
numerous occasions spent many many hours trying to get my table cells to be
right for my page layouts; I thought I would start trying to transition to
CSS layout. 

My first attempt is a standard 3 column layout with an expanding center
column. I found a great tutorial on this technique at www.glish.com . After
more or less following the example there I get something very close to being
correct.. but not quite. The example at the site is abs top:0 based; whereas
I am using the technique to try to simply add 3 images (as backgrounds) to a
footer for my page – as a result I can not set abs top = 0.

This shows the image that I get at the bottom of my page (same result in FF
1.5 and IE 6):  www.allanalog.com/1.htm.jpg 

The code that I have is:

#leftcontent {
position: absolute; left:0;width:372px; height:57px;
background-image:url(footer_left.jpg); background-repeat:no-repeat;
padding: 30px 0 0 40px;}
#centercontent {
margin-left: 372px; margin-right:371px; height:57px ;
background-image:url(footer_spacer.jpg);
}
html>body #centercontent {
   margin-left: 372px;
   margin-right:371px;
}
#rightcontent {
position:absolute; width:371px; right:0px; height:57px;
background-image:url(footer_right.jpg); }

I suspect something simple – but I have tried numerous variations of floats,
clears, etc with no luck.

Any pointers would be greatly appreciated.

cheers,

Peter Lindstrom
All Analog - Technical Design Consulting
Ottawa, ON
Voice:  613-612-1419
Email:  [EMAIL PROTECTED]
Web:www.allanalog.com  
 



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

Re: [css-d] Form Layout - better table or CSS for this one?

[Chris Ovenden]

(Taking it back onto the list, as others might be interested)

I don't know if you tried your first example in Firefox, but it worked
just fine. IE sometimes goes haywire on all-floated layouts, however,
and putting each line inside a block element was a pretty good cure.
The inputs don't need to be floated, however, and the number of divs
can be slimmed down a bit, like this:


   
   Label 1:
   
   Label 2:
   
   


Chris

On 1/30/06, Paul Kahl <[EMAIL PROTECTED]> wrote:
> Actually, ignore my first email. This solution works great:
>
> 
> 
> 
> Label 1:
>  id="input1" value="1"/>
> 
> 
> Label 2:
>  id="input2" value="2"/>
> 
> 
> 
>

On 1/30/06, Paul Kahl <[EMAIL PROTECTED]> wrote:
> How would you go about doing this? I haven't used the Clear property before,
> and I've always had issues with Float.
>
> I tried this:
>
> 
> 
> Label 1:
>  id="input1"/>
> Label 2:
>  id="input2"/>
> 
> 
>
> but I wound up with "Label" and both input fields on one line, and "Label2"
> on the next line.
>
> How would I set that up, without having to do absolute positioning, just
> with float and clear, so that Label and Label 2, and their respective
> inputs, were on a total of two lines, like:
>
> Label: input1
> Label2: input2
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why does right column drop

[Christian Montoya]

On 1/31/06, Peter Lindstrom <[EMAIL PROTECTED]> wrote:
> My first attempt is a standard 3 column layout with an expanding center
> column. I found a great tutorial on this technique at www.glish.com . After
> more or less following the example there I get something very close to being
> correct.. but not quite. The example at the site is abs top:0 based; whereas
> I am using the technique to try to simply add 3 images (as backgrounds) to a
> footer for my page – as a result I can not set abs top = 0.

I think the right column drops because you aren't using top:0, plain
and simple. The right column starts below the other two, where it
would automatically, and since you aren't changing the vertical
location, it stays at that level.

My recommendation is set the footer div to position:relative, then the
items in the footer will be positioned relative to the footer div, and
you can get the look you want with top:0 and your layout won't break.

I did this in the footer here, if you want an example:
http://www.rso.cornell.edu/prssa/

CSS:

#footer { clear:both; border-top:1px solid #fff; color:#02489d;
position:relative;

  padding:10px 0 5px 0; background:#fff; }

#foottag { text-align:center; }

#footstyle { position:absolute; top:5px; left:10px; }

#footcite { position:absolute; top:5px; right:10px; }

Hope it helps.

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

Re: [css-d] why does right column drop

[Peter Lindstrom]

oops.. and I guess I should include how it used in my page:

some text here
 


Peter Lindstrom
All Analog - Technical Design Consulting
Ottawa, ON
Voice:  613-612-1419
Email:  [EMAIL PROTECTED]
Web:www.allanalog.com   
 


::-Original Message-
::From: Peter Lindstrom [mailto:[EMAIL PROTECTED]
::Sent: Tuesday, January 31, 2006 2:35 AM
::To: 'css-d@lists.css-discuss.org'
::Subject: why does right column drop
::
::I am a decent PHP coder but a lousy html/css layout guy. Since I have on
::numerous occasions spent many many hours trying to get my table cells to
::be right for my page layouts; I thought I would start trying to transition
::to CSS layout.
::
::My first attempt is a standard 3 column layout with an expanding center
::column. I found a great tutorial on this technique at www.glish.com .
::After more or less following the example there I get something very close
::to being correct.. but not quite. The example at the site is abs top:0
::based; whereas I am using the technique to try to simply add 3 images (as
::backgrounds) to a footer for my page – as a result I can not set abs top =
::0.
::
::This shows the image that I get at the bottom of my page (same result in
::FF 1.5 and IE 6):  www.allanalog.com/1.htm.jpg
::
::The code that I have is:
::
::#leftcontent {
::position: absolute; left:0;width:372px; height:57px;
::background-image:url(footer_left.jpg); background-repeat:no-
::repeat;
::padding: 30px 0 0 40px;}
::#centercontent {
::margin-left: 372px; margin-right:371px; height:57px ;
::background-image:url(footer_spacer.jpg);
::}
::html>body #centercontent {
::   margin-left: 372px;
::   margin-right:371px;
::}
::#rightcontent {
::position:absolute; width:371px; right:0px; height:57px;
::background-image:url(footer_right.jpg); }
::
::I suspect something simple – but I have tried numerous variations of
::floats, clears, etc with no luck.
::
::Any pointers would be greatly appreciated.
::
::cheers,
::
::Peter Lindstrom
::All Analog - Technical Design Consulting
::Ottawa, ON
::Voice:  613-612-1419
::Email:  [EMAIL PROTECTED]
::Web:www.allanalog.com
::
::


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