Re: [css-d] Creeping form controls in IE6/7

[Holly Bergevin]

From: Gunlaug Sørtun <[EMAIL PROTECTED]>

>Scott Sauyet wrote:
>> http://scott.sauyet.com/issues/2008-03-04a/
>
>> In IE7, IE6, and IE5.5, all on XP, I'm seeing something bizarre.
>
>> When you hover onto or off of the top menu item, the text box and 
>> button move down the page.  They keep doing this; it's not a one-time
>>  behavior.  In IE7 they will go on indefinitely.  In IE6 and IE5.5, 
>> they eventually disappear when they fall off the real estate owned by
>>  the menu.
>
>> Has anyone seen this behavior?  Any suggestions for how to get rid of
>>  it?
>
>Alternative solution (in case one is ever needed)...
>
>...based on the effect well-placed 'hasLayout' triggers have on elements
>in IE/win. Otherwise no changes from the original.
>It's perfectly stable in IE6/7, but I can't check in IE5/5.5

Checking Scott's original in IE5.01, I note that it did not have the problem 
that IE5.5 and up had.

I can confirm that the problem is fixed in IE5.5 with your solution, Georg, and 
does no harm in IE5.01 (actually tightens up the display as it does in IE6).

Display in the IE5s is also improved by the addition of 

#main-menu li, #main-menu .menu-group {
margin-left: -16px; /* fix for IE5s */
ma\rgin-left: 0; /* resets it for other browsers */
}

(or these can be placed in the respective selectors already in existence)

~holly 
 
   

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

[css-d] A simple way to display data in a tabular form?

[Sherry Myrow]

Hi everyone,

I'm VERY new to the CSS world and I'm in the process of trying to design a
page but I don't want to use tables.

Logistically it's really simple.  I need to create a page that displays a
bunch of data.  I have a huge list of manufacturers and a long list of model
numbers.   I need to be able to extract the manufacturer name from the
database and display that on screen (so it can be dynamic).  Then underneath
the Manufacturer name i want to show every single model number (again pulled
from the database).  Each model number should be clickable to a page that
shows the corresponding product list for that specific manufacturer and
model number.

I know what I need to do from the data base too.here's my pseudocode:

In some sort of nice css template (that mimics a table) do

while (manufacturer)
{
display manufacturerName; // label
while (model.manufacturer)
{
display modelNumber[i];  // clickable to bulb selection
i++;
}
}



My problem is that I don't know how to mix the php that I need to write to
get the data from the database with the css/html that I need in order to
display the data in a nice way.


And to throw in another twist this data is going to be inserted into a
pre-existing page, and this page is full of nasty nested tables (but I can't
do anything about that) and will specifically get pulled into a .

Can anyone point me in the right direction?  URLs to a good tutorial or page
that explains how to integrate php with css and html would be s
apreciated. I'm finding many articles on line about creating navs and entire
home pages but nothing as simple as what I need.

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

Re: [css-d] The dreaded z-index bug in IE6/7

[Gunlaug Sørtun]

Ian Piper wrote:

Doesn't look like you have found a suitable solution yet.

> Having done some reading I got the impression that one fix was to 
> create a lower z-index for the container div, but that doesn't seem 
> to have made any difference.

That's right, it won't make any difference to IE/win since all container
divs down the page have the _same_ z-index and and IE/win can't free
their absolute positioned children from the parents. Thus, subsequent
container divs, with their content, will be stacked higher and end up in
front.

You'll have to change z-index to a higher one _only_ on :hover, and
that's a bit difficult with your line-up in IE6 and older since they can
only :hover on anchors.

> http://www.tellura.co.uk/fenditching/content/specialist_plant.htm

Here's an alternative method...

...which doesn't use absolute positioning and therefore avoids those
nasty IE/win bugs. The z-index is raised on :hover here too - on the
anchors, but the spans with the big images line up relative to the
container divs since they are floated and controlled by margins.

Ok in all major browsers, except for a slight vertical line-up flaw in
Safari 3(win) that I haven't squashed.

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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Creeping form controls in IE6/7

[Gunlaug Sørtun]

Scott Sauyet wrote:
> http://scott.sauyet.com/issues/2008-03-04a/

> In IE7, IE6, and IE5.5, all on XP, I'm seeing something bizarre.

> When you hover onto or off of the top menu item, the text box and 
> button move down the page.  They keep doing this; it's not a one-time
>  behavior.  In IE7 they will go on indefinitely.  In IE6 and IE5.5, 
> they eventually disappear when they fall off the real estate owned by
>  the menu.

> Has anyone seen this behavior?  Any suggestions for how to get rid of
>  it?

Alternative solution (in case one is ever needed)...

...based on the effect well-placed 'hasLayout' triggers have on elements
in IE/win. Otherwise no changes from the original.
It's perfectly stable in IE6/7, but I can't check in IE5/5.5.

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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Quickly Removing Formatting from an Element

[Felix Miata]

On 2008/03/04 20:11 (GMT-0500) Rob Emenecker apparently typed:

> Felix Miata wrote:

>> Anyone have any insight on why the specs don't provide such a capability?

> Insight? No. But, to me common sense dictates that if you don't want an item
> styled, then you don't style it to begin with.

Those who have replied to my question so far have failed to take into account
that the page author's CSS is not the ultimate authority on styles applicable
to any given page, element, class or id. According to Philippe's response it
looks like FF3 will provide some sorely need defensive power for the inane
presumption that color: #333 is preferable to #000 on background-color: #FFF.
-- 
"Let us not love with words or in talk only.
Let us love by what we do." 1 John 3:18 NLV

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

Felix Miata  ***  http://mrmazda.no-ip.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Creeping form controls in IE6/7

[Holly Bergevin]

From: Scott Sauyet <[EMAIL PROTECTED]>

>Hi, I haven't been around these parts much lately, but some of you might 
>remember me from a few years ago.  ("Anyone?  Anyone?  Bergevin?")

Ahem!  You rang? ;) 

Hi Scott! 

It's great to see your name back on this board.

> http://scott.sauyet.com/issues/2008-03-04a/

>In IE7, IE6, and IE5.5, all on XP,
> When you hover onto or off of the top menu item, the text box and 
>button move down the page.  They keep doing this; 


It seems I've come late to the bug-squashing party. Darn.


>Has anyone seen this behavior?  

Yes, probably, based on your description only. I may have even kept the page 
somewhere. I don't think there was ever a solution found for the other case 
I've seen. I will have to hunt around my computer and see what I can find, and 
see if Alan's fix works for that version (assuming I have it, that is).

I'm glad you got a solution for your problem. Now don't be a stranger!

~holly

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

[css-d] Quickly Removing Formatting from an Element

[Rob Emenecker]

> Anyone have any insight on why the specs don't provide such a capability?

Insight? No. But, to me common sense dictates that if you don't want an item
styled, then you don't style it to begin with.

Now in this case someone is asking for a "default" style, however my gut
reaction is that they don't truly comprehend that "default" varies based on
browser and user settings (as Jukka pointed out). 

My "guess" is that if you styled a button based on the "default" style OF
THEIR BROWSER they would be satisfied. I find it hard to believe that one
user/manager/whomever would actually test the button on multiple browsers
and platforms in a side-to-side comparison with an 
that is in a bare XHTML page.

...Rob


Rob Emenecker @ Hairy Dog Digital
www.hairydogdigital.com
 

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

Re: [css-d] Quickly Removing Formatting from an Element

[Philippe Wittenbergh]

On Mar 5, 2008, at 2:04 AM, Jukka K. Korpela wrote:

> There is no way to "undo" things in CSS in general. You can override a
> setting for a property by setting it to a specific value, but you  
> cannot
> tell browsers to apply their defaults, against any settings that might
> exist elsewhere in stylesheets.

CSS 3, the 'initial' keyword as value for (any) property: uses the UA  
defaults.
That is implement for nearly all properties in FX 3b (with the the - 
moz- prefix).
http://www.w3.org/TR/css3-values/#keywords
http://developer.mozilla.org/en/docs/CSS:initial
(won't help the OP...)

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/




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

Re: [css-d] Site Check in IE5/Mac http://css-class.com/test/beta-0-1ie5-mac.htm

[Philippe Wittenbergh]

On Mar 5, 2008, at 4:04 AM, David Laakso wrote:

> http://css-class.com/test/beta-0-1.htm
>
> .
> Mac
> IE/5.2 screenshot:
> 
> I can only suggest you seek a fix at Code Bitch or Philippe
> Wittenbergh's site (and validate some of the CSS).
> (btw, the pink band is a no-show in Mac/FF)

the 'text-overlap' (or column overlap) is doe to the width applied to  
the . IE Mac not liking this. And no need for width anyway.

---
Philippe Wittenbergh
http://l-c-n.com/




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

Re: [css-d] Suckerfish IE misalignment madness!

[Alan Gresley]

Matt wrote:

> Thanks, Alan...
> 
> Your suggested changes seem to work... at least in FF and Safari.


As they mostly always do. :-)

 
> On IE6, though, the nav seems to break now with the LI's grouped together
> and floating left for some reason, and the submenus seem to have vanished.
> On IE7, it looks good, although the pulldown still shifts to the right...
> See the updated link here:
> 
> http://mattmedia.net/aegis-b/a-navtest.htm
> 
> I tried adding "ul#navlist li {position: relative}" as you suggested, but
> that seemed to move the pulldown items BEHIND the main nav bar...
> 
> Any other suggestions?
> 
> 
> Thanks in advance...
> - Matt


This should help.

http://css-class.com/x/testmenu.htm

The CSS with comments are embedded in the header. You have given heights in 
pixels to various elements in the menu. You can not do this with Suckerfish 
menus since they are based on ems and percent. I don't know how that  will help 
with your rounded corners. You may want to wrap another div around the 
navigation and use a vertical sliding door technique for the rounded corners. I 
hope this helps.


Alan

http://css-class.com/

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

Re: [css-d] Creeping form controls in IE6/7

[Alan Gresley]

Scott Sauyet wrote:

> Alan Gresley wrote:
> >> This looks pretty close to what I want in FF:
> >>
> >> http://scott.sauyet.com/issues/2008-03-04a/
> >>
> >> When you hover onto or off of the top menu item, the text box and
> >> button move down the page. They keep doing this; it's not a one-time
> >> behavior. In IE7 they will go on indefinitely.
> > 
> > It's not the Guillotine bug. Somehow IE is transferring the padding below 
> > the list items. The fix which looks the same for Firefox, and OK for IE is.
> > 
> > #main-menu .menu-group {
> > border-bottom: 1px solid #858585;
> > margin: 0; /* DELETE */
> > padding: .25em 0;  /* DELETE */
> > padding: 0; /* ADD */
> > margin: .25em 0; /* ADD */
> > }
> > 
> > You may want to feed IE a few different rules to get it right.
> 
> Thank you very much.  I hope to get a few minutes in the next several 
> days to write up this bug.  Wow!!!
> 
> Just out of curiosity, what is your technique for finding this one?  I 
> was really stymied.
> 
>-- Scott


Hello Scott. Once I relised that it was not a Guillotine bug (no floats 
present) I saved the page offline and looked for any padding or margins which 
IE commonly has trouble with. I then deleted this line

padding: .25em 0;  /* DELETE */

and saw that the IE bug was squashed. When you have a IE bug with padding on an 
element you simply remove the padding and apply a margin instead on the same 
element and hope that you don't trigger other bugs that IE has with margins.

margin: .25em 0; /* ADD */


The basic approach for tackling a mystery bug

http://www.positioniseverything.net/articles/mys-bug.html


I will do a offline demo for you breaking down the original bug to help you 
with your write up. Do you have a name for it yet? :-)

Alan

http://css-class.com/


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

Re: [css-d] Suckerfish IE misalignment madness!

[Matt]

Thanks, Alan...

Your suggested changes seem to work... at least in FF and Safari.

On IE6, though, the nav seems to break now with the LI's grouped together
and floating left for some reason, and the submenus seem to have vanished.
On IE7, it looks good, although the pulldown still shifts to the right...
See the updated link here:

http://mattmedia.net/aegis-b/a-navtest.htm

I tried adding "ul#navlist li {position: relative}" as you suggested, but
that seemed to move the pulldown items BEHIND the main nav bar...

Any other suggestions?


Thanks in advance...
- Matt

On Tue, Mar 4, 2008 at 9:33 AM, Alan Gresley <[EMAIL PROTECTED]> wrote:

> Matt wrote:
>
> > So this suckerfish-based navigation is working beautifully in Firefox
> and
> > Safari.  In IE, though, the drop-downs are shifting over to the right of
> > where they should be.  I've Googled and searched the CCS-D archives for
> a
> > solution, but nothing seems to work without creating screwing up the
> overall
> > behavior of the navigation...
>
> > Thanks in advance,
> > - Matt
>
> > http://mattmedia.net/aeg-2/a-navtest.htm
>
>
> IE can not properly position offset 'auto' so left:auto will position a
> dropdown more to the right in IE compared to other browsers. I doing a new
> test case for this offline, but currently this page will help you.
>
> http://css-class.com/test/bugs/ie/recalculatedoffsetbug.htm
>
> Note the first example "Setup" and how good browsers will place the a.p.
> element under the text "container" where IE instead places the a.p.
> element to the right of the text "container." There's your bug.
>
> Working through your CSS and it's IE buggy parts.
>
> /* CSS Nav */
>
> /*second level nav */
>
> ul#navlist li ul {
>  position: absolute;
>  left: -999em; /* CHANGE to  -% to make the menu work again in IE7
> after you changed the top offset below  */
>  text-indent:0;
>  top:129px; /* CHANGE to  top:auto;  */
>  background:#bbccdc;
>  margin:7px 0 0 0; padding:6px 0 6px 0
>  }
>
> Adding the below may also help IE.
>
> ul#navlist li {
>  position: relative;
>  }
>
> I currently having firewall troubles at this moment so I have limited
> internet access.
>
> Alan
> http://css-class.com/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Creeping form controls in IE6/7

[Scott Sauyet]

Alan Gresley wrote:
>> This looks pretty close to what I want in FF:
>>
>> http://scott.sauyet.com/issues/2008-03-04a/
>>
>> When you hover onto or off of the top menu item, the text box and
>> button move down the page. They keep doing this; it's not a one-time
>> behavior. In IE7 they will go on indefinitely.
> 
> It's not the Guillotine bug. Somehow IE is transferring the padding below the 
> list items. The fix which looks the same for Firefox, and OK for IE is.
> 
> #main-menu .menu-group {
> border-bottom: 1px solid #858585;
> margin: 0; /* DELETE */
> padding: .25em 0;  /* DELETE */
> padding: 0; /* ADD */
> margin: .25em 0; /* ADD */
> }
> 
> You may want to feed IE a few different rules to get it right.

Thank you very much.  I hope to get a few minutes in the next several 
days to write up this bug.  Wow!!!

Just out of curiosity, what is your technique for finding this one?  I 
was really stymied.

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

Re: [css-d] Creeping form controls in IE6/7

[Alan Gresley]

Scott Sauyet wrote


> Hi, I haven't been around these parts much lately, but some of you might
> remember me from a few years ago. ("Anyone? Anyone? Bergevin?") I
> got stuck on something today, and was hoping this group might have seen
> it before, or be able to offer some direction.
>
> This looks pretty close to what I want in FF:
>
> http://scott.sauyet.com/issues/2008-03-04a/
>
> When you hover onto or off of the top menu item, the text box and
> button move down the page. They keep doing this; it's not a one-time
> behavior. In IE7 they will go on indefinitely.
>
> -- Scott Sauyet

It's not the Guillotine bug. Somehow IE is transferring the padding below the 
list items. The fix which looks the same for Firefox, and OK for IE is.

#main-menu .menu-group {
border-bottom: 1px solid #858585;
margin: 0; /* DELETE */
padding: .25em 0;  /* DELETE */
padding: 0; /* ADD */
margin: .25em 0; /* ADD */
}


You may want to feed IE a few different rules to get it right.


Alan

http://css-class.com/

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

Re: [css-d] Creeping form controls in IE6/7

[Alan Gresley]

Scott Sauyet wrote


> Hi, I haven't been around these parts much lately, but some of you might 
> remember me from a few years ago.  ("Anyone?  Anyone?  Bergevin?")  I 
> got stuck on something today, and was hoping this group might have seen 
> it before, or be able to offer some direction.
> 
> This looks pretty close to what I want in FF:
> 
>  http://scott.sauyet.com/issues/2008-03-04a/
> 
>   When you hover onto or off of the top menu item, the text box and 
> button move down the page.  They keep doing this; it's not a one-time 
> behavior.  In IE7 they will go on indefinitely.
> 
>-- Scott Sauyet


IE7 is total crazy. How can an element continuously move down the page like 
that (but only with the first four links being hovered).

Anyhow this could be the Guillotine bug, either one I not sure.


http://www.positioniseverything.net/explorer/guillotine.html

http://css-class.com/articles/explorer/guillotine/index.htm


I am debugging this one to see why IE is so magic :-)

Alan

http://css-class.com/

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

Re: [css-d] Site Check in IE5/Mac http://css-class.com/test/beta-0-1ie5-mac.htm

[David Laakso]

Alan Gresley wrote:
>
> http://css-class.com/test/beta-0-1ie5-mac.htm
>
> It will work if IE/Mac uses this import
>
> @import("test-ie.css");
>
> and will show the h1 heading with a green background. I have used absolute 
> positioning on the header area div to hopefully salvage IE/Mac. Has it 
> worked? Can I please have a site check?
>   


http://css-class.com/test/beta-0-1.htm

.
Mac
IE/5.2 screenshot:

I can only suggest you seek a fix at Code Bitch or Philippe 
Wittenbergh's site (and validate some of the CSS).
(btw, the pink band is a no-show in Mac/FF)


>
> The normal long content page is working ok now.
>
> http://css-class.com/test/beta-0-1.htm
>   


In Mac IE/.2 it looks similar to the above sceenshot.


>
> Alan
>
>   


Best,
~dL

-- 
http://chelseacreekstudio.com/

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

Re: [css-d] Quickly Removing Formatting from an Element

[Michael Adams]

On Tue, 04 Mar 2008 11:10:57 -0600
Jack Timmons wrote:

> Jukka,
> 
> I had a spelling error in "borders"; it is incorrect, but is just an
> example.
> 
> And simply put, she wanted an easy method for saying "I don't want
> this button to have any of the previous global formatting applied to
> it."
> 

Using an ID on an element such as a button lets you compose CSS for that
element independant from the rest of the website.
http://www.google.com/search?hl=en&q=css+specificity+tutorial

It could also be that i have totally misread your needs.

-- 
Michael

All shall be well, and all shall be well, and all manner of things shall
be well

 - Julian of Norwich 1342 - 1416
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Site Check in IE5/Mac http://css-class.com/test/beta-0-1ie5-mac.htm

[Alan Gresley]

Hi everyone.

Thank you David and Robin for your help so far.

I have removed the height and negative margin from the problematic clearing 
element and now have a browserland friendly site. I have fixed up IE/Win enough 
so my main concern is with IE?mac now.

http://css-class.com/test/beta-0-1ie5-mac.htm

It will work if IE/Mac uses this import

@import("test-ie.css");

and will show the h1 heading with a green background. I have used absolute 
positioning on the header area div to hopefully salvage IE/Mac. Has it worked? 
Can I please have a site check?

The once problematic clearing element now is seen with a pink background in the 
test. What I would like to achieve is giving an image to this element that 
always extends below the viewpoint. Can anyone see a way to do this?

The normal long content page is working ok now.

http://css-class.com/test/beta-0-1.htm

But IE/Mac will show the header background image and menu at the bottom of the 
page thus the need for the salvage in the first place. :-) 


Alan

http://css-class.com/

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

Re: [css-d] Help, please! Div behavior in IE 6.0 and 7.0

[David Laakso]

clanmesa.earthlink wrote:
> Well, I had to set the nav type as pixels to make sure it didn't get  
> too big in IE6, but I set it to 16px, so it should still be readable  
> to most.
>
> I removed most the margins and padding  from the center elements, but  
> I had to put some back in to make the divs go where they should.
>
> Now the page is displaying more or less properly on IE 6 & 7, and in  
> FF and Safari.
>
> Thanks for your help!
>
>
>   
>>> http://mdh-test.com/ieresidential
>>> http://mdh-test.com/ieresidential/ierc.css
>>>
>>>   


The reason it "gets to big" in IE is a bug. When you set em on the body, 
you need to declare 100% on the html to squelch it.
html {font-size: 100%;}<--- :: add ::
body {font-size: 1em; }

#list-menu {
/*font-size: 16px; delete this and it will inherit 1em from the body*/
}

Best,
~dL

-- 
http://chelseacreekstudio.com/

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

Re: [css-d] Quickly Removing Formatting from an Element

[Felix Miata]

On 2008/03/04 19:04 (GMT+0200) Jukka K. Korpela apparently typed:

> There is no way to "undo" things in CSS in general. You can override a 
> setting for a property by setting it to a specific value, but you cannot 
> tell browsers to apply their defaults, against any settings that might 
> exist elsewhere in stylesheets.

Anyone have any insight on why the specs don't provide such a capability?
-- 
"Let us not love with words or in talk only.
Let us love by what we do." 1 John 3:18 NLV

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

Felix Miata  ***  http://mrmazda.no-ip.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Quickly Removing Formatting from an Element

[Jukka K. Korpela]

Scott Sauyet wrote:

> We could try to reset every property to its defaults, but I wouldn't
> recommend it.

Neither would I, especially since it would _not_ undo the formatting.

If by "defaults" you mean initial values as specified in CSS specs, then 
the idea fails, even in principle, because
a) not all initial values are fixed (e.g., font-family is 
browser-dependent)
b) initial values need not be the same as browser defaults, and they 
very often aren't for form fields.

If you mean "browser defaults", then the idea fails because we don't 
know them, in a reliable way.

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/ 

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

Re: [css-d] Help, please! Div behavior in IE 6.0 and 7.0

[clanmesa.earthlink]

Well, I had to set the nav type as pixels to make sure it didn't get  
too big in IE6, but I set it to 16px, so it should still be readable  
to most.

I removed most the margins and padding  from the center elements, but  
I had to put some back in to make the divs go where they should.

Now the page is displaying more or less properly on IE 6 & 7, and in  
FF and Safari.

Thanks for your help!


On Mar 4, 2008, at 7:48 AM, Jack Timmons wrote:

> Theresa,
>
> Sorry my help is incomplete. I'm working on a project myself and  
> can't spend too much time at once working on it.
>
> First, after you replace the  tag where it should be, remove  
> all the margins and padding from the two center elements. Also, get  
> rid of the height: 100% doesn't work right across browsers right  
> now. I'd just get rid of it, or put in conditional statements for  
> the vagrities in IE/FF.
>
> -Jack Timmons
>
> On Tue, Mar 4, 2008 at 9:40 AM, clanmesa.earthlink <[EMAIL PROTECTED] 
> > wrote:
> Duh. I didn't even stop to think to validate my code. I'll do that
> right now.
>
> >
> > http://mdh-test.com/ieresidential
> > http://mdh-test.com/ieresidential/ierc.css
> >
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Quickly Removing Formatting from an Element

[Scott Sauyet]

Jukka K. Korpela wrote:
> There is no way to "undo" things in CSS in general. You can override a 
> setting for a property by setting it to a specific value, but you cannot 
> tell browsers to apply their defaults, against any settings that might 
> exist elsewhere in stylesheets.

We could try to reset every property to its defaults, but I wouldn't 
recommend it.  There are also Javascript techniques for this, such as

 http://labs.gandrew.com/drupal/files/forcestyle.js.txt

But I think other posters are correct that you really need to apply your 
formatting more selectively rather than try to remove it later.

Good luck,

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

Re: [css-d] Quickly Removing Formatting from an Element

[Jack Timmons]

Jukka,

I had a spelling error in "borders"; it is incorrect, but is just an
example.

And simply put, she wanted an easy method for saying "I don't want this
button to have any of the previous global formatting applied to it."

I truly understand that global formatting like that is erroneous, but
because I try to be a good guy, I offered to ask you all, since to my
knowledge there was no way.

-Jack Timmons

On Tue, Mar 4, 2008 at 11:04 AM, Jukka K. Korpela <[EMAIL PROTECTED]>
wrote:

>
> That sounds odd and may cause rather unpredictable results (especilly if
> you actually have "border", not "borders", which does not exist in CSS),
> unless you have rules that set backgrounds and borders for input
> elements that need them.
>
> I beg your pardon? That would involve something external to CSS, either
> client-side or server-side scripting.
>
> Or do you mean that he or she wants to have a submit button _for which_
> some previously formatting is not applied?
>
> There is no way to "undo" things in CSS in general. You can override a
> setting for a property by setting it to a specific value, but you cannot
> tell browsers to apply their defaults, against any settings that might
> exist elsewhere in stylesheets.
>
> Jukka K. Korpela ("Yucca")
> http://www.cs.tut.fi/~jkorpela/ 
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Quickly Removing Formatting from an Element

[Jukka K. Korpela]

Jack Timmons wrote:

> Because of the way this site I work with and the CSS was coded, we
> have a statement like:
>
> input {background: none;borders: none;}

That sounds odd and may cause rather unpredictable results (especilly if 
you actually have "border", not "borders", which does not exist in CSS), 
unless you have rules that set backgrounds and borders for input 
elements that need them.

> A coworker wishes to have a submit button that removes any of the
> previous formatting done.

I beg your pardon? That would involve something external to CSS, either 
client-side or server-side scripting.

Or do you mean that he or she wants to have a submit button _for which_ 
some previously formatting is not applied?

There is no way to "undo" things in CSS in general. You can override a 
setting for a property by setting it to a specific value, but you cannot 
tell browsers to apply their defaults, against any settings that might 
exist elsewhere in stylesheets.

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/ 

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

Re: [css-d] Quickly Removing Formatting from an Element

[Geoffrey Hoffman]

The C in CSS stands for Cascade. It's inherently designed to, uh, cascade.

Though it makes your life more difficult, I think your best bet may be to
declare all your rules with explicit selectors:

e.g. for every other thing on the page, do...

#path .to .item input { }

...not just a blanket...

input { }

otherwise the main rule overrides.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Creeping form controls in IE6/7

[Scott Sauyet]

Hi, I haven't been around these parts much lately, but some of you might 
remember me from a few years ago.  ("Anyone?  Anyone?  Bergevin?")  I 
got stuck on something today, and was hoping this group might have seen 
it before, or be able to offer some direction.

This looks pretty close to what I want in FF:

 http://scott.sauyet.com/issues/2008-03-04a/

(I'm just trying to match the look of an existing site right now, so no 
comments about the ugliness, okay?  :-) )

In IE7, IE6, and IE5.5, all on XP, I'm seeing something bizarre.  The 
initial rendering is okay, but as you hover over the elements in the 
menu, the bottom of the menu seems to expand and contract a bit.  But 
the really odd thing is the form controls.  There are a few form 
controls in the second menu section, a label, a text box, and a button. 
  When you hover onto or off of the top menu item, the text box and 
button move down the page.  They keep doing this; it's not a one-time 
behavior.  In IE7 they will go on indefinitely.  In IE6 and IE5.5, they 
eventually disappear when they fall off the real estate owned by the 
menu.  (Or maybe it's just that the page doesn't extend to hold them as 
the menu is the only thing on the page so far.)

Has anyone seen this behavior?  Any suggestions for how to get rid of it?

Thanks for your help,

   -- Scott Sauyet

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

[css-d] Quickly Removing Formatting from an Element

[Jack Timmons]

Hey all,

While I'm sure this isn't possible, for the sake of harmony in the workplace
I'm posing this problem:

Because of the way this site I work with and the CSS was coded, we have a
statement like:

input {background: none;borders: none;}

A coworker wishes to have a submit button that removes any of the previous
formatting done. I can't think of a method to do so (namely because I use
selective formatting and should never need to undo formatting like that). If
any of you have an example, line etc I'd appreciate it. Maybe I'll learn
something new!

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

Re: [css-d] What is the difference between "float:left" and "overflow:hidden"?

[Gunlaug Sørtun]

5h4rk @ gmail wrote:
> Hi all, in order for a parent element to wrap a floating child 
> element correctly, I used to use either "overflow:hidden" or 
> "float:left" or "float:right" for the parent element, both work fine 
> for me, but I'd like to know the difference between them and when to 
> use what.

Any 'property: value' that establishes a new "block formatting
context"[1] will make an element "expand in height to contain floating
children" - if left with an unrestricted height (default = auto).

In addition to that: all 'property: value' combinations do of course
also have their own, distinct, effects on the elements they are declared
on, which makes them different and more or less suited to achieve
"expand to contain floats" depending on the case at hand.

For some examples on suitable - and some not so suitable - ways to
"contain floats" - depending on case, see links under *containing
floats* on this page...

It should be clear that all methods have strong and weak sides, apart
from varying support across browser-land.

-

For details:
See "floating a box"[2] for how a float behaves and its intended use.
See "Overflow: the 'overflow' property"[3] for that property and its
alternative values and intended use.
They are indeed very different, even though they may sometimes be used
to achieve the same effect when it comes to "containing floats".

regards
Georg

[1]http://www.w3.org/TR/CSS21/visuren.html#block-formatting
[2]http://www.w3.org/TR/CSS21/visuren.html#comp-float
[3]http://www.w3.org/TR/REC-CSS2/visufx.html#overflow
-- 
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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Help, please! Div behavior in IE 6.0 and 7.0

[clanmesa.earthlink]

Duh. I didn't even stop to think to validate my code. I'll do that  
right now.

On Mar 4, 2008, at 5:15 AM, Jack Timmons wrote:

> Theresa,
>
> First step is ending a closing div tag for the header.
>
> I'd offer more, but have to head out to work!
>
> -Jack Timmons
>
> On Mon, Mar 3, 2008 at 11:20 PM, clanmesa.earthlink <[EMAIL PROTECTED] 
> > wrote:
> I am working on a site:
>
> http://mdh-test.com/ieresidential
> http://mdh-test.com/ieresidential/ierc.css
>
> The header is a background image so that the navigation in the upper
> right hand corner can be placed there. The box for the navigation is
> also a background image so the links can go on top.
>
> In FF on the PC and Mac and on Safari on the Mac, the content div (the
> blue div, for purposes of this discussion - it will not be staying
> blue - I discovered a background color does not take up pixels like
> borders do) is acting correctly, although I don't know why the text is
> aligning to the bottom of the div. The images are not tiling. That is
> good.
>
> In IE 6.0, the header background image and nav background image are
> tiling all over the place and the content div is not where it's
> supposed to be. Also, the text on the nav box is huge.
>
> In IE 7.0, the background images are behaving, but the content div is
> being pushed down to below the nav but over to the right, like it's
> supposed to be.
>
> I am really rusty at this!! I'm trying to read through my O'Reilly CSS
> Definitive Guide book by Eric Meyers (which I realized is 3 years old
> and pre-IE7 and possibly pre-IE6!!) as quickly as possible, but I am
> stumped and need to make some progress on this site!
>
> Can anyone help me? Please? I never have been able to get the hang of
> Z-Indexes.
>
> Theresa Mesa
>
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> 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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] What is the difference between "float:left" and "overflow:hidden"?

[Louise Lawrance]

Overflow auto on the container element always works well for me.


Blake wrote:
> On Tue, Mar 4, 2008 at 4:07 PM, 5h4rk @ gmail <[EMAIL PROTECTED]> wrote:
>   
>> Hi all, in order for a parent element to wrap a floating child element
>>  correctly, I used to use either "overflow:hidden" or "float:left" or
>>  "float:right" for the parent element, both work fine for me, but I'd
>>  like to know the difference between them and when to use what.
>> 
>
> Well float obviously floats the element, so it prevents you from
> keeping that element centred. So you can't use float in a situation
> like that.
>
> overflow: hidden; can also be inconvenient if you want to have
> elements outside the bounds of their container. Also IIRC overflow:
> hidden; doesn't make the element wrap around the height of it's
> children in IE6, so it's best to use float: left; for that purpose in
> my experience.
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
> (Scanned by Sigmer MailScanner and believed to be clean)
>   

-- 
*Louise Lawrance*
Designer

T: +44 (0) 1273 669 700
F: +44 (0) 1273 669 701
E: [EMAIL PROTECTED] 
W: www.sigmer.com 

*Sigmer Technologies Ltd*
The Sussex Innovation Centre
University of Sussex, Falmer
Brighton, East Sussex
BN1 9SB

*/considered IT solutions/*
 

LEGAL DISCLAIMER: This message and its attachments are confidential and 
may be privileged or otherwise protected from disclosure. If you are not 
the intended recipient or the person responsible for delivering the 
message to the intended recipient, please telephone or email the sender 
and delete this message and any attachments from your system. Further, 
you should not disclose, copy, distribute or use this message and its 
attachments. Whilst any attachments may have been checked for viruses, 
you should rely on your own virus checker and procedures. If you contact 
us by e-mail, we will store your name and address to facilitate 
communications.

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

Re: [css-d] Suckerfish IE misalignment madness!

[Alan Gresley]

Matt wrote:

> So this suckerfish-based navigation is working beautifully in Firefox and 
> Safari.  In IE, though, the drop-downs are shifting over to the right of 
> where they should be.  I've Googled and searched the CCS-D archives for a
> solution, but nothing seems to work without creating screwing up the overall
> behavior of the navigation...

> Thanks in advance,
> - Matt

> http://mattmedia.net/aeg-2/a-navtest.htm


IE can not properly position offset 'auto' so left:auto will position a 
dropdown more to the right in IE compared to other browsers. I doing a new test 
case for this offline, but currently this page will help you.

http://css-class.com/test/bugs/ie/recalculatedoffsetbug.htm

Note the first example "Setup" and how good browsers will place the a.p. 
element under the text "container" where IE instead places the a.p. element to 
the right of the text "container." There's your bug.

Working through your CSS and it's IE buggy parts.

/* CSS Nav */

/*second level nav */

ul#navlist li ul {
 position: absolute;
 left: -999em; /* CHANGE to  -% to make the menu work again in IE7 after 
you changed the top offset below  */
 text-indent:0;
 top:129px; /* CHANGE to  top:auto;  */
 background:#bbccdc;
 margin:7px 0 0 0; padding:6px 0 6px 0
 }

Adding the below may also help IE.

ul#navlist li {
 position: relative;
 }


I currently having firewall troubles at this moment so I have limited internet 
access.

Alan
http://css-class.com/

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

[css-d] Suckerfish IE misalignment madness!

[Matt]

[Apologizes in advance if this a re-post... I think my previous email
got bounced for including HTML]


So this suckerfish-based navigation is working beautifully in Firefox and
Safari.  In IE, though, the drop-downs are shifting over to the right of
where they should be.  I've Googled and searched the CCS-D archives for a
solution, but nothing seems to work without creating screwing up the overall
behavior of the navigation...

Can anyone help? I've been bashing my head against the desk for two days
with this and can't find a solution to get IE to render this the way it does
in FF or Safari

Thanks in advance,
- Matt


Here's the working example:
http://mattmedia.net/aeg-2/a-navtest.htm

Here's my navigation CSS: http://mattmedia.net/aeg-2/aegis.css

/* CSS Nav */
#navcontainer {
 text-indent:0;
 float:right;
 background:url(navigation-full.gif) top left no-repeat ;
 height:30px;
 margin:88px 0 0 0;
 padding:0 0 0 6px;
 }

#navcontainer ul {margin:0; padding:0}

ul#navlist {
 background:url(navigation-full.gif) top right no-repeat;
 margin-right: 12px;
 padding:0 6px 0 0;
 height:30px;
 list-style: none;
 white-space: nowrap;
 }

ul#navlist li {
 float: left;
 height:21px;
 font-family: verdana, arial, sans-serif;
 font-size: .93em;
 margin: 0;
 padding: 5px 4px 4px 0;
 background:url(navigation-back.gif) repeat-x #003e7e;
 list-style:none;
 list-style-image:none;
 }

#navlist a{
 margin: 0;
 padding: 5px 9px 4px 9px;
 color: #fff;
 text-decoration: none;
 }

#navlist a:hover {
 background:url(navigation-back-hover.gif) repeat-x #4c78a4;
 }


/*second level nav */

ul#navlist li ul {
 position: absolute;
 left: -999em;
 text-indent:0;
 top:129px;
 background:#bbccdc;
 margin:7px 0 0 0; padding:6px 0 6px 0
 }

ul#navlist li:hover ul, ul#navlist li.sfhover ul {left: auto; z-index: 100;
}

#navlist li li {background:none; width:18em; display:block; float:none;
padding:0; border-right: none; height:auto; }

#navlist li li a {border-right:none; color:#036; background:none; }

#navlist li li a:hover {text-decoration:underline; color:#333;
background:none; }
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/