Re: [css-d] Problem with missing form on IE Mac and centering list based menu??

[Philippe Wittenbergh]

On Aug 8, 2006, at 11:00 PM, Julian Voelcker wrote:

> The test page is at http://tinyurl.com/odso4 with the main css file at
> http://tinyurl.com/nwkzw and http://tinyurl.com/hs6jn.
>
> The two problems I am trying to pin down are:
>
> 1. Under IE 5.x on a Mac the search form in the horizontal red menu  
> bar
> at the top disappears.

First, you have series of problems in IE 5 Mac with the header: you  
use a couple of floats where no width has been declared (e.g.  
#localinfo and #frmSiteSearch)
Also, your height declaration on #header is causing problems; remove it.

Second, your page suffers from this bug in IE 5 Mac:

remove the clear:both on #headermenu, that should help clean up a bit.
Then: your search form appears to lack a  tag (and closing ). Not valid HTML.
Next: these two rules makes the fieldset vanish into thin air:
#headermenu fieldset{... /*display:inline;z-index:99;*/} (that is  
an odd IE Mac bug)
Take them out and your form comes back.
>
> 2. The footer is split into three columns with the menu in the middle
> column (#footermiddle) - I am try go get it centred in the middle of
> the page, but cannot find a suitable way of doing it.

1. setting margin and padding to 0 on the ul
2. using li {display:inline} instead of float
Should make it more centred. Fine tune to taste.

Philippe
---
Philippe Wittenbergh





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

[css-d] IE 7 beta 3 and Negative Margin

[Tyson Tate]

I've started testing some pages in IE 7 beta 3 and I've run in to a
problem with negative margins:

Using the following, I should see a red line on top of the black line
below "Blah Blah", but I do not in IE 7 beta 3.


HTML:


Blah blah


CSS:

#foo {
border-bottom: 1px black solid;
padding: 0 10px;
}

#foo p {
margin: 0 0 -1px;

border-bottom: 1px red solid;
}


Is this a known issue or is there a known workaround? My page relies
heavily on this method to put border lines on top of each other, so
I'm really hoping something else is wrong...

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

Re: [css-d] Fluid image backgrounds

[Micky Hulse]

Steve Craig wrote:
> I'm hoping someone can help, I have been looking for an example page  
> that I have previously been too, that showed various ways to deal  
> with header images in fluid sites. It showed examples of images that  
> grow in size or reveal more depending on your preference. For the  
> life of me I cannot remember where it was and I don't seem to have  
> bookmarked it. It was discussing uses of overflows and how they  
> related to images etc.

Hi,

One way you could accomplish this is to make your (for example) header 
background wider than needed, and have it align to the center of the 
fluid div, so when the page gets wider the imgage reveals more.

Also, I have seen folks use javascript, an em-based layout, and 
flash-based header and footer so the layout expanded or shrunk depending 
on window size. I do not have a link, sorry.

This book might help:

CSS Mastery: Advanced Web Standards Solutions (Solutions) (Paperback)


Page 231 shows you how to divide an image into three parts and apply it 
to a fluid-width layout: Left image = photograph of woman with a right 
fade-out, middle image is repeating background, and right image is a 
corner piece with a nice scroll pattern. When applied to page it looks 
like one seamless fluid image.

All I can think of for now.

Gl,
Cheers,
Micky

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

Re: [css-d] CSS Float clear question

[Mark Wheeler]

Thank you so much for the explanation. I understand, now.

Mark

---

On Aug 8, 2006, at 3:27 PM, Gunlaug Sørtun wrote:

Ok, two in one since it is the same case.

Mark Wheeler wrote:
> First off, thank you to Michael for putting my script up on a site.  
> Sorry about that. I forgot that's the way to go. It's been a while  
> since I've been here.
> Second, Gunlaug - That did the trick. I'm still fairly new at css,  
> trial and error and all that. I never would have thought about  
> using the overflow attribute to contain the div. I skimmed through  
> the w3.org info and didn't fully understand it. I need to read it  
> some more I guess. But in a nut shell (If that's possible) why doe  
> the overflow: hidden make the float work as I wanted it to?

Well, the answer is in the text: "... establish new block formatting
context".

That means (among other things) "complete separation" or "isolation"
from its surroundings, while the container itself behaves in the
page-layout as the styling says.

The one I used: 'overflow: hidden;' does just that and nothing else,
which makes it practical in some cases but definitely not in others.

Example: I can't use 'overflow: hidden;' all that often because it would
cut off my many "over the edge" elements like titles and such.
See on:  how that
will turn out.
This example:  use
'display: table/table-cell', but there are some differences between
browsers for that one too.

I use 'float:left/right' whenever I can (or have to), as floats work
quite well across browser-land - even in IE/win. Of course: not
everything can be floated, so the other alternatives are good to have.

Michael Geary wrote:
> So I understand why the "overflow: hidden;" fixed it, but could you  
> explain what the IE-specific "zoom: 1;" is for? I tried leaving it  
> out and IE still looked OK. I put it back in "just in case" but would
>  like to understand what its purpose is. Thanks!

The proprietary 'zoom: 1;' acts as a 'hasLayout' trigger in IE5.5+. It
does (of course) not validate, but it is one of the few triggers that
isn't likely to give negative side-effects - almost regardless of layout
it is used on.

>> 'Not quite the same standard', for IE/win only: > www.satzansatz.de/cssd/onhavinglayout.html> The choice of hack (or  
>> not) depends on entire layout in each case.
> Yes, I've studied that page too - it's a great piece of research.
> In this particular case, my page looked OK in IE but was bad in  
> Firefox, so an IE hack wouldn't have helped - but the overflow trick
>  was just the ticket.

If there's already a 'hasLayout' trigger in place - like 'width' or
'height', then 'zoom: 1;' won't have any additional effect. In such
cases 'zoom: 1;' should not be used.

Note that 'zoom: (any values other than 1 or 100%);' will make IE/win
zoom that container, somewhat like Opera does but Microsoft has taken
an entirely different approach. Thus, be careful with the value :-)

regards
Georg
-- 
http://www.gunlaug.no

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

[css-d] Getting horizontal list to span specific width

[Magenta Placenta]

Is there a way to get a stylized list to span the width of it's parent 
container?  I've tried a width:100% as well as the exact pixel width (784) 
on the , coupled with padding on the anchor tag to give the button text 
some horizontal padding.  This gets me close, but I end up with a slight gap 
on the far right side.

What I ended up doing was classing the first  and applying a pixel width 
to that.  You can see this at: 
http://designs.inherent.com/dynapsis/build/bioserver.cfm

Without that first li classed/width, there is a gap (oh, 10 pixels or so) on 
the far right button, which becomes very obvious when you do a mouseover to 
change the background color.  You can see this at: 
http://designs.inherent.com/dynapsis/build/bioserver2.cfm

Is there an easier way to accomplish what I've done at the first url above?


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

Re: [css-d] CSS Float clear question

[Gunlaug Sørtun]

Ok, two in one since it is the same case.

Mark Wheeler wrote:
> First off, thank you to Michael for putting my script up on a site. 
> Sorry about that. I forgot that's the way to go. It's been a while 
> since I've been here.
> 
> Second, Gunlaug - That did the trick. I'm still fairly new at css, 
> trial and error and all that. I never would have thought about using 
> the overflow attribute to contain the div. I skimmed through the 
> w3.org info and didn't fully understand it. I need to read it some 
> more I guess. But in a nut shell (If that's possible) why doe the 
> overflow: hidden make the float work as I wanted it to?

Well, the answer is in the text: "... establish new block formatting
context".

That means (among other things) "complete separation" or "isolation"
from its surroundings, while the container itself behaves in the
page-layout as the styling says.

The one I used: 'overflow: hidden;' does just that and nothing else,
which makes it practical in some cases but definitely not in others.

Example: I can't use 'overflow: hidden;' all that often because it would
cut off my many "over the edge" elements like titles and such.
See on:  how that
will turn out.
This example:  use
'display: table/table-cell', but there are some differences between
browsers for that one too.

I use 'float:left/right' whenever I can (or have to), as floats work
quite well across browser-land - even in IE/win. Of course: not
everything can be floated, so the other alternatives are good to have.

Michael Geary wrote:
> So I understand why the "overflow: hidden;" fixed it, but could you 
> explain what the IE-specific "zoom: 1;" is for? I tried leaving it 
> out and IE still looked OK. I put it back in "just in case" but would
>  like to understand what its purpose is. Thanks!

The proprietary 'zoom: 1;' acts as a 'hasLayout' trigger in IE5.5+. It
does (of course) not validate, but it is one of the few triggers that
isn't likely to give negative side-effects - almost regardless of layout
it is used on.

>> 'Not quite the same standard', for IE/win only: 
>>  The choice of 
>> hack (or not) depends on entire layout in each case.
> 
> 
> Yes, I've studied that page too - it's a great piece of research.
> 
> In this particular case, my page looked OK in IE but was bad in 
> Firefox, so an IE hack wouldn't have helped - but the overflow trick
>  was just the ticket.

If there's already a 'hasLayout' trigger in place - like 'width' or
'height', then 'zoom: 1;' won't have any additional effect. In such
cases 'zoom: 1;' should not be used.

Note that 'zoom: (any values other than 1 or 100%);' will make IE/win
zoom that container, somewhat like Opera does but Microsoft has taken
an entirely different approach. Thus, be careful with the value :-)

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

Re: [css-d] Get my DIVs in a row.

[Travis Killen]

Don Miller wrote:
> - Original Message -
> From: "Dave Goodchild" <[EMAIL PROTECTED]>
> To: "Travis Killen" <[EMAIL PROTECTED]>
> Cc: 
> Sent: Tuesday, August 08, 2006 2:31 PM
> Subject: Re: [css-d] Get my DIVs in a row.
>
>
> | On 08/08/06, Travis Killen <[EMAIL PROTECTED]> wrote:
> | >
> | > Hello all,
> | >
> | > I am having trouble with my DIVs.  How can I make them all appear on the
> | > same row?
> | > http://oit.sfasu.edu/test/getstart.html
> | >
> | > Thanks - TK
> | >
> | > Float them?
> | >
> | Do you mean ROW or COLUMN
> |
> | Row - I don't think you have to anything so long as they fit in your
> wrapper.
> Column  - float left with position top to separate.
>
> Don
>
>
> | --
> | http://www.web-buddha.co.uk
> | http://www.projectkarma.co.uk
> | __
> | css-discuss [EMAIL PROTECTED]
> | http://www.css-discuss.org/mailman/listinfo/css-d
> | IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> | List wiki/FAQ -- http://css-discuss.incutio.com/
> | Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> |
> |
> |
> | --
> | No virus found in this incoming message.
> | Checked by AVG Free Edition.
> | Version: 7.1.394 / Virus Database: 268.10.8/413 - Release Date: 8/8/2006
> |
> |
>
>
>
>   
OK - so now I have firefox issues.  the wrapper (threemenu) is floating 
left also.

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

Re: [css-d] Get my DIVs in a row.

[Don Miller]

- Original Message -
From: "Dave Goodchild" <[EMAIL PROTECTED]>
To: "Travis Killen" <[EMAIL PROTECTED]>
Cc: 
Sent: Tuesday, August 08, 2006 2:31 PM
Subject: Re: [css-d] Get my DIVs in a row.


| On 08/08/06, Travis Killen <[EMAIL PROTECTED]> wrote:
| >
| > Hello all,
| >
| > I am having trouble with my DIVs.  How can I make them all appear on the
| > same row?
| > http://oit.sfasu.edu/test/getstart.html
| >
| > Thanks - TK
| >
| > Float them?
| >
| Do you mean ROW or COLUMN
|
| Row - I don't think you have to anything so long as they fit in your
wrapper.
Column  - float left with position top to separate.

Don


| --
| http://www.web-buddha.co.uk
| http://www.projectkarma.co.uk
| __
| css-discuss [EMAIL PROTECTED]
| http://www.css-discuss.org/mailman/listinfo/css-d
| IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
| List wiki/FAQ -- http://css-discuss.incutio.com/
| Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
|
|
|
| --
| No virus found in this incoming message.
| Checked by AVG Free Edition.
| Version: 7.1.394 / Virus Database: 268.10.8/413 - Release Date: 8/8/2006
|
|



-- 
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.10.8/413 - Release Date: 8/8/2006

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

Re: [css-d] Get my DIVs in a row.

[Dave Goodchild]

On 08/08/06, Travis Killen <[EMAIL PROTECTED]> wrote:
>
> Hello all,
>
> I am having trouble with my DIVs.  How can I make them all appear on the
> same row?
> http://oit.sfasu.edu/test/getstart.html
>
> Thanks - TK
>
> Float them?
>



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

[css-d] Get my DIVs in a row.

[Travis Killen]

Hello all,

I am having trouble with my DIVs.  How can I make them all appear on the 
same row?
http://oit.sfasu.edu/test/getstart.html

Thanks - TK

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

Re: [css-d] site check revised site please

[David Laakso]

Kim Brooks Wei wrote:
> I've been doing some major revisions to this site and still have some 
> cleanup work to do - checking links and whatnot. I'd like to know how 
> the site is looking in various browsers. I have the Mac OS X browsers 
> covered, so I need feedback from PC browsers and OS 9.
>
> http://www.thewei.com/carolisol/public_html/index.html
>
> An issue I could use help with, is I'm trying to bring the back, next 
> and to top links to the side of the page and have them fixed in 
> position. Is there an easy way to do this without using many hacks?
>
> TIA,
> Kimi
>   

In win/ie the content p is flush left against the left rail(instead of 
centered in the window). Your file is in quirks mode. I think you'll 
need to change the body declaration text-align: justify; to text-align: 
center; to center the block on the page. The selector that controls that 
block is now set to text-align: justify; To avoid the rivers you're 
getting in those blocks of text, I'd think about setting that selector 
to  text-align: left;

With regard the links at the bottom, I seem to recall(but may be wrong) 
ie only honors position: fixed; (if that's what you meant by 'fixed') on 
the body declaration-- so that may be a problem for you, or someone else 
on the list to contend with..

There are a couple of css errors to correct.

I find the navigation bar links, and the links at the bottom of the 
page,  really difficult to read (but then no two monitors on the face of 
the earth render color the same). It is not a font size issue, but one 
of  value, saturation, hue.
bEST,
~dL
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Sliding door rounded corner boxes

[francky]

Nick Fitzsimons wrote:

>Pete Home wrote:
>  
>
>> I thought I had followed the research to the letter, but I still
>>cannot get 'nested' boxes to work.
>>
>>Basically I want a outline around 2 divs when one of then has a box
>>within it.
>>
>>Here's the code and CSS links;
>>
>>www.cityboxer.com/gambling/betting.htm and
>>www.cityboxer.com/gambling/newcss.css
>>
>>The outline box seems to work on 3 of 4 sides in ie6 and the inner
>>box with the video is correct. In FF1.5 it's a complete mess (even
>>though the outline box works, it doesn't encompass the inner divs)
>>and the inner box is a complete hash.
>>
>>
>First rule of CSS development: if it looks right in IE6, it's (usually) 
>broken :-)
>  
>
Hi Pete,
Agree! ;-)

>Within the inner box you have two divs, "section_content" and "video", 
>which are floated left and right respectively. When an element is 
>floated, it is taken out of the normal document flow - in other words, 
>the block that contains it acts as if it isn't there. _Not_ honouring 
>this rule is one of the major bugs in IE6, and is one of the primary 
>reasons why testing in IE6 should only be done after you've got it 
>looking right in Firefox, Opera, Safari and suchlike standards-compliant 
>browsers. If you do this then it'll probably look broken in IE6, but 
>then you can apply various workarounds and hacks to bring IE6 into line.
>  
>
Adding just a clearing  after closing the  will 
help all browsers, even IE. :-)

>In this case, have a look at:
>
>which should help you sort it out. Note that IE7 fixes the float 
>container bug, so you'll need to check the layout in that, too: if you 
>have problems, somebody here will help :-)
>
>Cheers,
>Nick.
>  
>
The black top bar in the #video background, appearing in FF: this is due 
to the default margin for the h2 below; IE is (against css-rules) 
extending the box, so it seems IE = right. But adding a {margin: 0;} is 
helping, even without collapsing IE.

See also source code in: testpage 
. 
:-)

Greetings,
francky

btw 1: Check the html-validator 

 
and also the css-validator 

 
every now and then; there are some errors and typo's (which can give 
strange effects in one or more browsers).
btw 2:
You are using quite big images for the corners. A small combined image 
for the boxborder (743 bytes):
http://home.tiscali.nl/developerscorner/css-discuss/images/cityboxer-boxborder.gif
and a small one for the video-box (377 bytes):
http://home.tiscali.nl/developerscorner/css-discuss/images/cityboxer-blkbox.gif
can be enough; with some background positioning all corners can be put 
in the right place.
See for instance: 
http://home.tiscali.nl/developerscorner/liquidcorners/liquid-corners-playgarden-01.htm

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

[css-d] IE7 Problem

[mark brailsford]

The home page at http://www.facilityplanners.com/ has an element that floats
up under the banner. It works fine in FireFox and IE6.

The relevant css is in http://www.facilityplanners.com/css/global.css and
http://www.facilityplanners.com/css/home.css

The misbehaving div's css is

#divAnnounce{
POSITION: relative;
TOP: 5px;
left: 10px;
MARGIN: 0px;
PADDING: 5px 5px 0 0;
FLOAT: right;
WIDTH: 290px;
}

IE7 is rendering it offsett from the top of the page. Not its containing
div.

-- 
/Mark Brailsford
mailto:[EMAIL PROTECTED]
blog: http://brailm.blogspot.com/

"Any fool can make things bigger, more complex, and more violent. It takes a
touch of genius-and a lot of courage-to move in the opposite direction."
--Albert Einstein
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Float clear question

[Michael Geary]

> > From: Mark Wheeler and Michael Geary
> >
> > [Float clearing problems on these pages causing elements
> > to be pushed down on the page:]
> > http://mg.to/test/float.html
> > http://blog.zvents.com/

> From: Gunlaug Sørtun
> 
> Solution (one of many) is to isolate the container: keep the 
> clear from acting on elements outside the container.
> 
>  SOME TEXT GOES HERE...

Bingo! Thank you very much, Gunlaug.

For the event list widget on http://blog.zvents.com/ I added the "overflow:
hidden; zoom: 1;" to a div that already wrapped each event, and it took care
of the problem perfectly.

(For anyone who didn't see the page when it was broken, in the event list on
the right, the first event extended all the way to the bottom of the main
content section, pushing any other events in the list below that.)

Mark, let us know if this trick works for your page as well.

> Containing and isolating floats will also isolate any 
> 'clear'. Thus, the relevant information is found here:
> 
> 'Block formatting contexts' in all standard compliant browsers:
> 
> The choice of style (float/CSS-table/overflow) to achieve the 
> right effect, depends on entire layout in each case.

Thanks, that's very informative. I'd read that section before but didn't
connect it in my mind to this problem. Reading it again now makes things a
lot more clear.

So I understand why the "overflow: hidden;" fixed it, but could you explain
what the IE-specific "zoom: 1;" is for? I tried leaving it out and IE still
looked OK. I put it back in "just in case" but would like to understand what
its purpose is. Thanks!

> 'Not quite the same standard', for IE/win only:
> 
> The choice of hack (or not) depends on entire layout in each case.

Yes, I've studied that page too - it's a great piece of research.

In this particular case, my page looked OK in IE but was bad in Firefox, so
an IE hack wouldn't have helped - but the overflow trick was just the
ticket.

Thanks again,

-Mike

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

Re: [css-d] CSS Float clear question

[Mark Wheeler]

First off, thank you to Michael for putting my script up on a site.  
Sorry about that. I forgot that's the way to go. It's been a while  
since I've been here.

Second, Gunlaug - That did the trick. I'm still fairly new at css,  
trial and error and all that. I never would have thought about using  
the overflow attribute to contain the div. I skimmed through the  
w3.org info and didn't fully understand it. I need to read it some  
more I guess. But in a nut shell (If that's possible) why doe the  
overflow: hidden make the float work as I wanted it to?

Thanks,

Mark

--

On Aug 8, 2006, at 11:37 AM, Gunlaug Sørtun wrote:

Michael Geary wrote:
>> From: Mark Wheeler
>>
>> I have a little problem I can't seem to figure out.

> http://mg.to/test/float.html
>
> When I load the page in IE, the "MORE TEXT GOES HERE" is below the
> red box, just like in Firefox.

Solution (one of many) is to isolate the container: keep the clear from
acting on elements outside the container.


SOME TEXT GOES HERE...

...and so on. Se below for references.

> I ran into what looks like the same problem this morning. On the
> right side of this page is a calendar widget and event list:
>
> http://blog.zvents.com/

Similar problem, and similar solution.

> http://www.zvents.com/widgets/calendar/2/zvents-calendar-fancy.html

Similar problem, and similar solution.

> Is there a reference that anyone can recommend that would help
> explain this kind of problem?

Containing and isolating floats will also isolate any 'clear'. Thus, the
relevant information is found here:

'Block formatting contexts' in all standard compliant browsers:

The choice of style (float/CSS-table/overflow) to achieve the right
effect, depends on entire layout in each case.


'Not quite the same standard', for IE/win only:

The choice of hack (or not) depends on entire layout in each case.

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

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

[css-d] opera sizing problems

[Matt McKeon]

Not sure if this went through yesterday as I was not getting any 
messages, but I'm still stuck with this problem:

I'm working on a layout and everything looks fine in PC- FF 1.5.0.6, IE
6, but in O9 the main grey square holding the main content is
considerably smaller. It is set in em's currently, but I set it using px
then the right column listing the games doesn't butt up to the left content.

I could some assistance trying to figure out what is going on here in
Opera. Here's the links:
page: http://ww20.freearcade.com/myarcade/dynlayout.php?nick=q
css: http://ww20.freearcade.com/myarcade/myarcade-red-grey.css


Thanks in advance,
  Matt

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

Re: [css-d] background image center in FireFox

[[EMAIL PROTECTED]]

html {
background: #00 url('500.jpg') no-repeat center center;
height: 100%;
}


[EMAIL PROTECTED] wrote:
> here is the url
> 
> http://constructweb.com/temp/back.html
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 
> 
> 
> 

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

Re: [css-d] site check revised site please

[Dave Goodchild]

On 08/08/06, Kim Brooks Wei <[EMAIL PROTECTED]> wrote:
>
> I've been doing some major revisions to this site and still have some
> cleanup work to do - checking links and whatnot. I'd like to know how
> the site is looking in various browsers. I have the Mac OS X browsers
> covered, so I need feedback from PC browsers and OS 9.
>
> http://www.thewei.com/carolisol/public_html/index.html
>
> An issue I could use help with, is I'm trying to bring the back, next
> and to top links to the side of the page and have them fixed in
> position. Is there an easy way to do this without using many hacks?


Why not float them?




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

[css-d] site check revised site please

[Kim Brooks Wei]

I've been doing some major revisions to this site and still have some 
cleanup work to do - checking links and whatnot. I'd like to know how 
the site is looking in various browsers. I have the Mac OS X browsers 
covered, so I need feedback from PC browsers and OS 9.

http://www.thewei.com/carolisol/public_html/index.html

An issue I could use help with, is I'm trying to bring the back, next 
and to top links to the side of the page and have them fixed in 
position. Is there an easy way to do this without using many hacks?

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

Re: [css-d] background image center in FireFox

[neal]

here is the url

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

Re: [css-d] background image center in FireFox

[Gunlaug Sørtun]

[EMAIL PROTECTED] wrote:

> I can put up a url if needed

Yes, please :-)

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

[css-d] background image center in FireFox

[neal]

Hello all

trying to center a background in firefox - -dead center seems this all
works on IE

this:
background: #00 url('/images/500.jpg')   no-repeat center center;

or this:
background: #00 url('/images/500.jpg')   no-repeat 50% 50%;


FireFox seems to have a problem - anyone else havve this issue ?

Thanks

I can put up a url if needed

Neal



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

Re: [css-d] CSS Float clear question

[Gunlaug Sørtun]

Michael Geary wrote:
>> From: Mark Wheeler
>> 
>> I have a little problem I can't seem to figure out.

> http://mg.to/test/float.html
> 
> When I load the page in IE, the "MORE TEXT GOES HERE" is below the 
> red box, just like in Firefox.

Solution (one of many) is to isolate the container: keep the clear from
acting on elements outside the container.


SOME TEXT GOES HERE...

...and so on. Se below for references.

> I ran into what looks like the same problem this morning. On the 
> right side of this page is a calendar widget and event list:
> 
> http://blog.zvents.com/

Similar problem, and similar solution.

> http://www.zvents.com/widgets/calendar/2/zvents-calendar-fancy.html

Similar problem, and similar solution.

> Is there a reference that anyone can recommend that would help 
> explain this kind of problem?

Containing and isolating floats will also isolate any 'clear'. Thus, the
relevant information is found here:

'Block formatting contexts' in all standard compliant browsers:

The choice of style (float/CSS-table/overflow) to achieve the right
effect, depends on entire layout in each case.


'Not quite the same standard', for IE/win only:

The choice of hack (or not) depends on entire layout in each case.

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

[css-d] Default Checkbox Styles for IE 6

[Ryan Keefer]

Hey everyone,

Don't have a public URL to post this to yet, but I've got a form with  
a checkbox. The checkbox looks fine in Safari 2 and Firefox 1.5, but  
in IE, the checkbox is barely visible. The top gray lines and bottom  
gray line of the checkbox are visible. Are there some default  
attribute settings that I can get IE 6 to look correct using the star  
hack? I've played around with border: and color:/background-color:  
but those don't seem to be the problem.

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

Re: [css-d] Site Check please

[David Laakso]

Oliver Saager wrote:
> I just finished my first big CSS-Website...
>
> May I kindly ask you to have a look at it? Any comments are highly
> welcome... I am sure I missed something.
>
> Here's the link: http://www.haasfischer.com
> Thank you very much, Oliver
You have done well, Oliver...although, it took me the longest time(I am 
a little slow) to realize that there is more than an index page. The 
next step, if you want to raise the bar, is to make the site so that it 
is not image dependent. For example, use text rather than knocking type 
out of the image on the home page And replace all text-images with text, 
throughout all pages. You would wind up with the only images on the site 
being the painter's paintings and the map. The text also needs to scale 
in IE(she can't zoom pixel based fonts). This would make for a more 
usable and accessible site :-) . Understanding CSS is one thing. But it 
is attempting to use CSS  to enhance, embrace, and participate with 
abandon in the fluid nature of the Web that drives some of us nuts, too.
Best,
~dL
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Float clear question

[Michael Geary]

> From: Mark Wheeler
> 
> I have a little problem I can't seem to figure out. Below is 
> a sample code of some floated divs. It all is as I would like 
> it, except the div that contains "MORE TEXT GOESE HERE...". I 
> want that to clear the previously floated divs that contain 
> dates and prices, not the red bordered div. This way, the div 
> containing "MORE TEXT GOES HERE..."  
> will end up  underneath the previous four floated divs. I put 
> that section in a div by itself, thinking that clearing the 
> final float would only clear within the containing div, but 
> it's not doing that.  
> It seems to work fine in IE/Win, but not in Firefox or 
> Safari. Any help would be appreciated. Here's the sample code.
> 
> ...

Before anybody says "You'll get more replies if you post a URL," I did that
for you:

http://mg.to/test/float.html

When I load the page in IE, the "MORE TEXT GOES HERE" is below the red box,
just like in Firefox.

I ran into what looks like the same problem this morning. On the right side
of this page is a calendar widget and event list:

http://blog.zvents.com/

The event list contains two events, and in Firefox the second event is way
down by the bottom of the page. This is caused by the ".ZventsEventSeparator
{ clear: both; }" rule in zvents.calendar.css - if I take that out the event
list displays as expected. It's also OK if I change it to clear:right. It
looks fine in IE with or without the clear.

I added that clear to deal with floated images in this version of the event
list:

http://www.zvents.com/widgets/calendar/2/zvents-calendar-fancy.html

Without the clear, the images don't line up. clear:right works here as well,
but I did the clear:both because people using this widget might float the
images left instead of right.

I guess I am fairly confused about floats and clears, and especially how I
can use them in an embeddable widget without interfering with (or being
affected by) other layout on the page.

Is there a reference that anyone can recommend that would help explain this
kind of problem?

Many thanks,

-Mike

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

[css-d] CSS Float clear question

[Mark Wheeler]

Hi,

I have a little problem I can't seem to figure out. Below is a sample  
code of some floated divs. It all is as I would like it, except the  
div that contains "MORE TEXT GOESE HERE...". I want that to clear the  
previously floated divs that contain dates and prices, not the red  
bordered div. This way, the div containing "MORE TEXT GOES HERE..."  
will end up  underneath the previous four floated divs. I put that  
section in a div by itself, thinking that clearing the final float  
would only clear within the containing div, but it's not doing that.  
It seems to work fine in IE/Win, but not in Firefox or Safari. Any  
help would be appreciated. Here's the sample code.















SOME TEXT GOES HERE...



DATE
DATE



CATEGORY

$PRICE
$PRICE




CATEGORY

$PRICE
$PRICE




CATEGORY

$PRICE
$PRICE




MORE TEXT GOES HERE...







---

Thanks,

Mark

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

Re: [css-d] Sliding door rounded corner boxes

[Nick Fitzsimons]

Pete Home wrote:
>  I thought I had followed the research to the letter, but I still
> cannot get 'nested' boxes to work.
> 
> Basically I want a outline around 2 divs when one of then has a box
> within it.
> 
> Here's the code and CSS links;
> 
> www.cityboxer.com/gambling/betting.htm and
> www.cityboxer.com/gambling/newcss.css
> 
> The outline box seems to work on 3 of 4 sides in ie6 and the inner
> box with the video is correct. In FF1.5 it's a complete mess (even
> though the outline box works, it doesn't encompass the inner divs)
> and the inner box is a complete hash.
> 

First rule of CSS development: if it looks right in IE6, it's (usually) 
broken :-)

Within the inner box you have two divs, "section_content" and "video", 
which are floated left and right respectively. When an element is 
floated, it is taken out of the normal document flow - in other words, 
the block that contains it acts as if it isn't there. _Not_ honouring 
this rule is one of the major bugs in IE6, and is one of the primary 
reasons why testing in IE6 should only be done after you've got it 
looking right in Firefox, Opera, Safari and suchlike standards-compliant 
browsers. If you do this then it'll probably look broken in IE6, but 
then you can apply various workarounds and hacks to bring IE6 into line.

In this case, have a look at:

which should help you sort it out. Note that IE7 fixes the float 
container bug, so you'll need to check the layout in that, too: if you 
have problems, somebody here will help :-)

Cheers,

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


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

Re: [css-d] Problem with missing form on IE Mac and centering listbased menu??

[Julian Voelcker]

Hi Angie,

> but why bother trying to make the site 
> look okay in IE for Mac?

Because that is what the client uses and also it is good to support the 
older browsers where possible.

Don't forget there are still a stack of mac users using pre OSX 10 or 
what ever it is that don't have safari and haven't been introduced to 
Firefox.

In relation to the problem, I only have a missing form on IE5.x Mac, 
the problem with centering the list based menu is across the board.
-- 
Cheers,

Julian Voelcker
Cirencester, United Kingdom


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

[css-d] Tables, Print Styles and IE7

[L. Robinson]

Hi all,

I came upon a Firefox bug when a 7-page order came out as 3 pages when 
printed. Gunlaug had the answer with table,td { height: 100%; } here: 
http://archivist.incutio.com/viewlist/css-discuss/76423

With this fix, though, when the same order is printed in IE7, each row 
of the table prints on a page by itself.

IE7 (according to the blog) is "layout-complete" and will be released as 
an automatic update for XP users in the last quarter of the year. True: 
This may be a known issue that's fixed before then, but - if not - we'll 
need a workaround for that, too.

Has anyone else run into this?

And the wheel goes round and round,

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

Re: [css-d] Site Check please

[Ian Young]

Hello everybody!

I just finished my first big CSS-Website...

May I kindly ask you to have a look at it? Any comments are highly
welcome... I am sure I missed something.

Here's the link: http://www.haasfischer.com

Thank you very much, Oliver


Had a quick look in Windows XP (1024 x 768) and 98 (800x 600) with IE6 FF
1.05.3 and Opera.

Seems fine from a css point of view.  Apart from text doesn't zoom. Not at
all in IE and only the author's name in FF, I guess because you have set
your font-size in px.

Apart from that, it is a nice clean site (needs text tho or search engines
will never find it).

Ian
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.10.7/410 - Release Date: 05/08/2006

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

Re: [css-d] Problem with missing form on IE Mac and centering list based menu??

[A. Herrera]

I'm not sure about anyone else, but why bother trying to make the site
look okay in IE for Mac? IE/Mac has been deprecated - Microsoft no
longer develops or supports it (as of january of this year). Most
developers - including experienced, well known ones -  ignore it
completely since most Mac users (such as myself) will use Safari or
Firefox (or some other alternative). That is, unless a client
specifically requests it. I point this out because you may just be
wasting time.

Hope that helps in some way. :)

Angie
http://fourtwentydesign.com


On 8/8/06, Julian Voelcker <[EMAIL PROTECTED]> wrote:
> Hi,
>
> I am trying to tidy up the coding and styles on an old site I did and
> am struggling in a couple of areas where I have moved from spaced out
> formatted text for horizontal menu to list based menus.
>
> The test page is at http://tinyurl.com/odso4 with the main css file at
> http://tinyurl.com/nwkzw and http://tinyurl.com/hs6jn.
>
> The two problems I am trying to pin down are:
>
> 1. Under IE 5.x on a Mac the search form in the horizontal red menu bar
> at the top disappears.
>
> 2. The footer is split into three columns with the menu in the middle
> column (#footermiddle) - I am try go get it centred in the middle of
> the page, but cannot find a suitable way of doing it.
>
> I have spent a few hours messing about with these without much luck
> mainly due to lack of experience with this, so any pointers would be
> appreciated.
>
> Thanks.
>
> --
> Cheers,
>
> Julian Voelcker
> Cirencester, United Kingdom
>
>

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

[css-d] Site Check please

[Oliver Saager]

Hello everybody!

I just finished my first big CSS-Website...

May I kindly ask you to have a look at it? Any comments are highly
welcome... I am sure I missed something.

Here's the link: http://www.haasfischer.com

Thank you very much, Oliver

PS: The Print-CSS is not completely done... So ignore that please.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] min-width/masx-width and IE

[Zoe M. Gillenwater]

Gunlaug Sørtun wrote:
> Zoe M. Gillenwater wrote:
>   
>> I have never in my whole life been able to get those IE expressions 
>> to work, strangely. So I recommend just using JavaScript.
>> 
>
> Properly written and implemented IE expressions work every time at my end.
>   

Good for you. :-) Like I said, I've never gotten them to work on my 
pages. I didn't say that they don't work, just that they don't work for 
me, so I just recommend JavaScript. If you can get them to work, go 
ahead and use them if you like.

>> I'm pretty sure IE expressions don't work unless JavaScript is on 
>> anyway (someone correct me if I'm wrong), so you're not losing any 
>> audience by using JavaScript for this.
>> 
>
> You're perfectly right... :-)
> ...so they both need a fall-back.
>   

Yeah, I never worry much about this, since (at least on my sites) min- 
and max-width has always been a nice to have, not an essential. As long 
as the site can still be used with JavaScript off, even if it doesn't 
look as nice, I'm happy.

Zoe

--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu


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

Re: [css-d] min-width/masx-width and IE

[Shelly]

I'm sorry - I always forget that on this list, you have to "reply ALL" 
to get it out to the list.  I need to stamp this on my forehead or 
something.

Thanks for the advice - Georg's conditional comment/expression thing 
worked like a charm.  Zoe - I was having the same problem - the 
expression wouldn't work no matter what I did.  But Georg's was 
different, and by God it works wonderfully.

Again, though - thanks for the help - you all rock :)

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

Re: [css-d] min-width/masx-width and IE

[Gunlaug Sørtun]

Zoe M. Gillenwater wrote:
> I have never in my whole life been able to get those IE expressions 
> to work, strangely. So I recommend just using JavaScript.

Properly written and implemented IE expressions work every time at my end.

IE expressions are based on javascript, but "disguised" as CSS. Using
Javascript to simulate what IE/win lacks in CSS-support is fine, with
one exception: none of the Javascript solutions I've seen works "in
sync" with the browser and its CSS support, so you tend to get a time-lag.
IE expressions do work "in sync", so they tend to act smoother.

> I'm pretty sure IE expressions don't work unless JavaScript is on 
> anyway (someone correct me if I'm wrong), so you're not losing any 
> audience by using JavaScript for this.

You're perfectly right... :-)
...so they both need a fall-back.

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

Re: [css-d] Problems with elastic layout

[Gunlaug Sørtun]

Dave Goodchild wrote:
> http://s172075788.websitehome.co.uk/stage/
> 
> ...following some sound advice I have not enforced a font size,
> allowing the user to view the site through their default or change
> font-size as required. However, a larger font sizes on 600x800 the
> content expands past the browser window, and I do want to set a
> max-width to that screen size as I know that doesn't work in IE and I
> also want to cater for larger resolutions without the wrapper
> appearing small and isolated.
> 
> Am I going down the right path? Any suggestions at this point, as we
> are in demo and firm commitments to the design have yet to be made!

Quick look shows that you are mixing up some values in the...
* html body #displayads {
/* simulate max-width and min-width for IE */

You want it to stay at 25% between min and max, so the last value in
that expression should be 25% - not 99%. Otherwise it will break IE
because of its 'auto-expand' bug.

BTW: although it is fine to leave text at browser-default, you can set
any font-size without disturbing the min/max expressions.
You just have to start by applying 'font-size: 100%' on containers
*inside* the wrapper (or on the wrapper itself), and adjust to whatever
font-size you want on elements further in.

Example: 
...with a few variations as demo1, 2 & 3.

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

[css-d] Problem with missing form on IE Mac and centering list based menu??

[Julian Voelcker]

Hi, 
 
I am trying to tidy up the coding and styles on an old site I did and 
am struggling in a couple of areas where I have moved from spaced out 
formatted text for horizontal menu to list based menus. 
 
The test page is at http://tinyurl.com/odso4 with the main css file at 
http://tinyurl.com/nwkzw and http://tinyurl.com/hs6jn. 
 
The two problems I am trying to pin down are: 
 
1. Under IE 5.x on a Mac the search form in the horizontal red menu bar 
at the top disappears. 
 
2. The footer is split into three columns with the menu in the middle 
column (#footermiddle) - I am try go get it centred in the middle of 
the page, but cannot find a suitable way of doing it. 
 
I have spent a few hours messing about with these without much luck 
mainly due to lack of experience with this, so any pointers would be 
appreciated. 
 
Thanks. 

-- 
Cheers,

Julian Voelcker
Cirencester, United Kingdom


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

Re: [css-d] firefox layout bug - nested floats

[cj]

On 8/7/06, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
> thx - your solution was the best solution i could come up with too -
>
> sorry 'bout the inline css - messy i realize.
>
> only problem with above is i wanted the elements within the floated right
> yellow div to align right as well - and that's
> exactly where all the problems popped up in firefox - and ie to a certain
> extent.

easy.  change the floated right div to be:




all i did was add "text-align: right;".
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Sliding door rounded corner boxes

[Pete Home]

 I thought I had followed the research to the letter, but I still
cannot get 'nested' boxes to work.

Basically I want a outline around 2 divs when one of then has a box
within it.

Here's the code and CSS links;

www.cityboxer.com/gambling/betting.htm and
www.cityboxer.com/gambling/newcss.css

The outline box seems to work on 3 of 4 sides in ie6 and the inner
box with the video is correct. In FF1.5 it's a complete mess (even
though the outline box works, it doesn't encompass the inner divs)
and the inner box is a complete hash.

This is only my second full CSS page, the first worked fine in both
browsers, but this is a disaster.

Pointers in the right direct really appreciated.

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

Re: [css-d] Win browser alternative?

[Christian Heilmann]

> Hi listers,
>
> FYI, here's another one to test for!
>
> http://www.getwebkit.org/
>
> Interesting... even if it is only alpha at the moment...

Has some differences to Safari, but at least there is a chance to
check for the basics.
If you cannot install the download, be sure to run the following patch first:
http://faux.warwickcompsoc.co.uk/vcredist/

That did it for me.

regards
Chris

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Win browser alternative?

[Tom Livingston]

Hi listers,

FYI, here's another one to test for!

http://www.getwebkit.org/

Interesting... even if it is only alpha at the moment...

;-)

-- 


Tom Livingston | Senior Multimedia Artist | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] min-width/masx-width and IE

[Zoe M. Gillenwater]

Shelly wrote:
> Hey all -
>
> I'm in need of some help here.  I'm working on a site that I need to 
> have a minimum width of 960px, and a max-width of 1280px - centered 
> horizontally on the screen and with 3 columns.  (If I can also 
> accomplish a "sticky footer", that's be awesome, as well - not 
> necessary, but I have an image that need to stay at the bottom of the 
> content if it's longer than the screen - or at the bottom of the screen 
> if the content isn't long enough to push it down.)
>
> I can make all of these requirements function fine in everything but IE 
> (are we surprised?) - I've even tried implementing the expression 
> "script" in a conditional comment that's common to use, but as soon as I 
> do, the three-column layout goes wonky (header disappears, left column 
> disappears, right column drops to the bottom of the screen!)
>   

Shelly,

I have never in my whole life been able to get those IE expressions to 
work, strangely. So I recommend just using JavaScript. I'm pretty sure 
IE expressions don't work unless JavaScript is on anyway (someone 
correct me if I'm wrong), so you're not losing any audience by using 
JavaScript for this. I recommend either the PVII or doxdesk scripts:
http://www.projectseven.com/tutorials/css/minwidth/index.htm
http://www.doxdesk.com/software/js/minmax.html

Our wiki page could use some fleshing out, but there are a couple other 
things there:
http://css-discuss.incutio.com/?page=MinWidth

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu


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

Re: [css-d] Problems with elastic layout

[Adam McGrath]

Hi Dave,

Using an elastic layout and allowing users to change font size is
good, so I'd say you're on the right track, just a couple of things
from glancing at your page though:

1) Your background image needs to repeat along the x axis (and can be
a lot thinner)

background: #fff url(/images/bg.gif) repeat-x top left;

2) Your using relative positioning to center the page, which is not
well suited for elastic layouts as text can flow out of the window on
the left, try using the text-align method

check web-graphics.com for a good/simple example of centered elastic layouts

cheers
ad

On 8/8/06, Dave Goodchild <[EMAIL PROTECTED]> wrote:
> Hi all. I have mocked up an elastic layout at the following site:
>
> http://s172075788.websitehome.co.uk/stage/
>
> ...following some sound advice I have not enforced a font size, allowing the
> user to view the site through their default or change font-size as required.
> However, a larger font sizes on 600x800 the content expands past the browser
> window, and I do want to set a max-width to that screen size as I know that
> doesn't work in IE and I also want to cater for larger resolutions without
> the wrapper appearing small and isolated.
>
> Am I going down the right path? Any suggestions at this point, as we are in
> demo and firm commitments to the design have yet to be made!
>
> Many thanks in advance.
>
> --
> http://www.web-buddha.co.uk
> http://www.projectkarma.co.uk
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Content Displaces Itself for Unknown Reason

[Zoe M. Gillenwater]

Chris Akins wrote:
in regards to www.springfieldmogov.org/founders/newContent.html 

> Not sure when you reviewed the page

One minute before I wrote to the list. :-)

> 'cause I've been editing it live since I posted, but it's actually 
> working much better now than it was.  It was dropping the float even 
> at much wider window sizes UNTIL I changed the h1,h2 rule by taking 
> out width:65% and adding margin-right:325px
>
> That's now a head scratcher.  Don't have any idea why IE doesn't like 
> the 65% width on the h1, h2 tags.  But it didn't.

I'm sure that none of the browsers did -- it's just that when something 
is too big to fit in other browsers, it overflows, but in IE, it pushes 
out the container. Also, IE can incorrectly calculate percentage widths 
and margins when the container doesn't have a width itself. I'm not sure 
exactly what IE bug was causing the problem since you've now changed 
your page. If you're interested in learning why the bugs happen, it's 
best to leave your page untouched while the list members play with it. 
If you want to keep working on the page, I recommend starting a new 
version of it. This also ensures that list members don't waste their 
time trying to fix a page that you've already fixed. If you've fixed 
something, please post to the list to let us all know. Thanks. :-)

I also recommend not settings widths on headers, as you've seen. Set 
widths on as few elements as possible. If you can let an element inherit 
its width from its parent, do so.

> Now my issue is that the floated column isn't regarding my 190px width 
> - just in IE again.  Don't have a clue as to why.

You mean the right column? It's the same width in IE and FF right now. 
Looks like you've fixed this too. :-)

By the way, please be sure to trim out all text from the old messages to 
which you are not directly replying. Then place your reply above 
(discouraged) or below (strongly encouraged) the text you are replying 
to. Thanks!

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu


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

[css-d] Fluid image backgrounds

[Steve Craig]

Hi

I'm hoping someone can help, I have been looking for an example page  
that I have previously been too, that showed various ways to deal  
with header images in fluid sites. It showed examples of images that  
grow in size or reveal more depending on your preference. For the  
life of me I cannot remember where it was and I don't seem to have  
bookmarked it. It was discussing uses of overflows and how they  
related to images etc.

Does anyone have a link to some examples?

Cheers

Steve Craig - Asylum Interactive Ltd
Tel +44 1330 860550 Fax +44 1330 860880

http://www.asylumweb.com
Email: [EMAIL PROTECTED]
Skype: s.craig - iChat: steve.craig





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

[css-d] Problems with elastic layout

[Dave Goodchild]

Hi all. I have mocked up an elastic layout at the following site:

http://s172075788.websitehome.co.uk/stage/

...following some sound advice I have not enforced a font size, allowing the
user to view the site through their default or change font-size as required.
However, a larger font sizes on 600x800 the content expands past the browser
window, and I do want to set a max-width to that screen size as I know that
doesn't work in IE and I also want to cater for larger resolutions without
the wrapper appearing small and isolated.

Am I going down the right path? Any suggestions at this point, as we are in
demo and firm commitments to the design have yet to be made!

Many thanks in advance.

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

Re: [css-d] Form pain

[Martin Heiden]

Mark,

on Tuesday, August 8, 2006 at 13:15 Mark Fellowes wrote:

> ?I'm unsure how to validate XHTML with Rails.  Since I'm working in
> development mode the app is not online somewhere, just using
> localhost.  Also many rhtml files are just snippets of what the
> entire page will comprise with Rails output.

You can use the webdeveloper toolbar for firefox:

http://chrispederick.com/work/webdeveloper/

There you can choose: Tools->Validate local HTML

For Windows exists an extension based on tidy which validates all the
pages you visit.

The third way is to use copy&paste and the input-box at
http://validator.w3.org/. Open the page, view source, mark all, copy
and paste it into the "direct imput" box...

regards

  Martin

 



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

Re: [css-d] Form pain

[Mark Fellowes]

I'm unsure how to validate XHTML with Rails.  Since I'm working in development 
mode the app is not online somewhere, just using localhost.  Also many rhtml 
files are just snippets of what the entire page will comprise with Rails output.

Stuart


-Original Message-
From: [EMAIL PROTECTED]
Sent: Monday, August 7, 2006 6:16 PM -07:00
To: Mark Fellowes [EMAIL PROTECTED];CSS List [EMAIL PROTECTED]
Subject: [css-d] Form pain

Hi,
First, the fieldset/form tags are improperly nested.   You need to have
valid HTML for your CSS to work right. You can use
http://validator.w3.org/ to check if you HTML is valid.

I assume you are trying to have a grid type layout where the label and
fields line up horizontally and vertically. 
The problem is that your labels are shrinking down to the size of the
text inside because they are floats.  Email looks misaligned because it
is noticeably shorter and wasn't pushing the text box over as far as
first name, last name,  password and account type.

A quick way get a grid like layout is:

label {float:left; clear:left; width:15em;}
input, select { display:block; margin-left:16em; }

Hope that helps!

-Mark



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

Re: [css-d] IE6 ignores CSS

[Kelly]

IE doesn't understand the display values you're using, and dumps the whole 
entry because of it.

On Tuesday, August 8, 2006 5:17 am, Alexander Munro wrote:
> The problem is that IE ignores all three classes. For example, the
> font-weight property isn't honoured, however if I add font-weight to
> #div_commentary, then it works (all child divs are affected of
> course). Oh, and all divs except the most outer one are created
> dynamically.
>
> Please help me. Thanks in advance.

-- 
http://www.mozilla.org/products/firefox/ - Get Firefox! 
http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! 
 
Please avoid sending me Word or PowerPoint attachments. 
See http://www.gnu.org/philosophy/no-word-attachments.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE6 ignores CSS

[Alexander Munro]

Hi. I have a problem with IE6 (and possibly other versions but I
tested it only on v6. The HTML is:


  




  


and the CSS is:

#div_commentary {
  overflow: auto;
  height: 440px;
}

.div_commentary_item {
  display: table-row;
}

.div_commentary_time {
  display: table-cell;
  font-weight: bold;
  font-size: 12px;
  padding: 0px 0px 5px 0px;
}

.div_commentary_text
{
  display: table-cell;
  padding: 0px 0px 5px 5px;
  font-size: 12px;
}

The problem is that IE ignores all three classes. For example, the
font-weight property isn't honoured, however if I add font-weight to
#div_commentary, then it works (all child divs are affected of
course). Oh, and all divs except the most outer one are created
dynamically.

Please help me. Thanks in advance.

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

Re: [css-d] Dreaded CSS Validator

[Micky Hulse]

Micky Hulse wrote:
> something, but forgot to specify a number... or you used "px" for some 
> value that does not accept *px* for a value.

That should read: ...for some *property* that does not accept *px* for a 
value.

The validator is trying to tell you that it does not like how you are 
using "px"... not that you should be using "px" as a fix. The validator 
is not that smart. Hehe.  :)



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

Re: [css-d] Dreaded CSS Validator

[Micky Hulse]

[EMAIL PROTECTED] wrote:
> needs to be changed. For example, I have received a parse error  which merely 
> says: "Parse Error - px;". I have tried all kinds  of corrections involving 
> px to no avail. It is equally frustrating when the line  referenced is blank, 
> making it difficult to know the exact source of the  errors...arrgghh!

Hi,

Not sure about a resource for helping interpret error messages (this 
list is a good place to ask)...

But, I can tell you that when you get an error, and the line it 
points-out is blank, you should look at the lines directly above and/or 
below the error message.

As far as your example goes, it sounds like you specified "px" for 
something, but forgot to specify a number... or you used "px" for some 
value that does not accept *px* for a value.

Can't really help without seeing the code though.

I am sure you will get some folks on this list with good links/answers.

Gl,
Cheers,
Micky
__
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/