Re: [css-d] Auto-Sizing a div or span tag

[david]

Bruno Fassino wrote:
> On Jan 8, 2008 10:53 AM wrote:
>> Bruno Fassino wrote:
>>> [EMAIL PROTECTED] wrote:
>>>
 Hmmm, I always thought that "auto" kind of carried the idea of
 "shrink-to-fit"?
>>> width:auto  has much different meanings, depending on the value of other
>>> properties.
>> So, basically, 'auto' means "make it the full available width, but if
>> you don't know what width that is, make it as wide as the content".
> 
> I don't think that the cases where width:auto means "fit the content"
> are related to difficulties in knowing what the "available width" in
> the containing block is  (and anyway the 'available' width takes part
> in the shrink-to-fit computation, whose algorithm is intentionally
> 'not exactly' defined in the CSS 2.1 specs.)

How does the available width take part in that computation beyond 
functioning as the maximum width?

> I think they are simply cases where a different behavior has been
> deemed more useful and natural.  For example floats that would take
> all the available width would defeat their 'floating' behavior, making
> width:auto on them practically useless.

I don't think it would make width:auto on floats useless if 'auto' meant 
shrink-to-fit. I would think the shrink-to-fit algorithm would then 
function as "figure out the size of the content inside the floated 
element, then make the floated element big enough to hold it."

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
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] styling for two monitors

[david]

Rob Emenecker wrote:

> My point is, find out WHY they are maximizing across two monitors, and why
> it is important *and okay* that the problem exists in many circumstances,
> but is unacceptable to them with their site.

I just had a weird thought. Imagine someone using Windows XP who sets 
their desktop to go across both screens (I have my office PC set up that 
way). Imagine that Windows user using the infamous Active Desktop 
feature, and furthermore deciding that they want *their website* to be 
their Active Desktop. So Windows *would* proceed to sprawl the site 
across the full width of the desktop ...

Anyway, when you maximize IE on a Windows setup with dual monitors, it 
only fills one screen, so I think they had to manually size and position 
their browser to go across both screens. Unless there's some silly 
NVidia utility that does that kind of thing ...

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
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] IE Conditional comments - IE import hack

[Alan Gresley]

Michael Adams wrote

> I have been lurking here for the last month and have a question about
> the right way to handle IE using CSS.
> 
> I use a master CSS file with the format as follows. To me, the master
> file method as well as solving the 'old browser' issue, is easier for
> another designer to approach my code.
> 
> /* Master CSS File */
> @import url(layout.css);
> @import url(colour.css);
> @import url(fonts.css);
> @import url(.css) all; 
> /* 
> For the final import line above
> IE and AOL9/Win load a file called "url(.css) all" 
> All other browsers load ".css"
> */
> 
> Is the above IE hack considered the best CSS solution for this method
> of loading CSS? Are there others?
> 
> -- 
> Michael

I would say that there is no universally agreed best method of feeding IE 
alternative styles. The general consensus is not to hack unless you really need 
to. The method that you have shown is actually the IE @import hack [1] and not 
the propriety IE Conditional Comments which are added to the html. There are 
many alternative CSS hacks for IE [2] some of which result in parsing errors 
(invalid hacks) and some of which that don't (valid hacks).

Doing some test [3] with @import hacks I find that they can be very simple, 
scary.

@import ie;

or by directory and file.

@import ../ie/ie;

or

@import ..\ie\ie;

All three can be used to target IE/Win. The use of these hacks are not 
recommended unless you know the full consequences.


1. 
2. 
3. 


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] IE6/7 and Firefox CSS issue driving me mad

[Chris Blake]

Greetings community,

Please can someone help me with this, its been bugging me for ages and now
I`ve found this list where I can hope to get it fixed with someones help.

Please visit this page : http://www.pixcel.co.za/ard/index.php

There is a main div called "content" which is not giving me a white
background all the way to the bottom. It kinda stops around the "Keyword
Search" section.

Here is the CSS I have for that div :

#content
{   
font-size:0.7em;
xleft:0px;
xright:50px;
padding-left:26px;
color: #036;
background-color: #FF; 
position:absolute; 
left:53px; 
top:108px; 
right:55px; 
bottom:0px
}

I`ve been reading from the W3 Schools site and the declarations taken from
there, so I`m thinking its some bug or I`m missing something in my CSS.

If someone has the answer, or can point me in the right direction I would
really appreciate it.

Thank you

Chris

__
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] Auto-Sizing a div or span tag

[Bruno Fassino]

On Jan 9, 2008 10:43 AM, david wrote:
> Bruno Fassino wrote:
>
> How does the available width take part in that computation beyond
> functioning as the maximum width?

It takes part acting as a maximum for the computation, as you say :-)


> > I think they are simply cases where a different behavior has been
> > deemed more useful and natural.  For example floats that would take
> > all the available width would defeat their 'floating' behavior, making
> > width:auto on them practically useless.
>
> I don't think it would make width:auto on floats useless if 'auto' meant
> shrink-to-fit. I would think the shrink-to-fit algorithm would then
> function as "figure out the size of the content inside the floated
> element, then make the floated element big enough to hold it."

width:auto on floats actually means shrink-to-fit in CSS 2.1, and I
believe this a useful thing (I was saying that the opposite would be
less useful.)   So yes, we are agreeing :-)

Kind regards,
Bruno

-- 
Bruno Fassino http://www.brunildo.org/test
__
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 2 column, but with ability to expand horizontally

[Kim Jordan]

Hi all,

I have a requirement that I'm having some difficulty getting a solution 
to - yet I didn't think at the outset it would be that difficult.

The application involves dynamically generated pages, and on some of 
those there is a table that can sometimes easily fit within the 
'content' area, but other times is much wider.
So I need a css template where the main content column can expand to the 
right - and when it does so, I want the 'header' to expand as well in 
sympathy so that all looks nice and not 'broken'.

All I want is a left-hand column/sidebar where the 'menu' items will go 
- a 'header' section, and the main content column.
A footer would be nice, but is not mandatory.
 But it's this fluid expansion to the right that seems to be the issue.

I'd be grateful for any pointers to basic template that would satisfy this.


regards,

Kim Jordan
__
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] Div's not lining up in IE (any :P)

[Alan Gresley]

Sent by Gunlaug_Sørtun on 29 December 2007 13:01

> Mark Henderson wrote:
>>  Alan Gresley wrote:
>>>  Adding padding-top to the #content div will actually accentuate the
>>>  gap though this will even things out across browser-land.

> >>> [...]

>>  ...but that wasn't an intended solution. I'm pretty sure that 
>>  recommendation was made so Mike could see the full margins in effect
>>  and what exactly is going on.

> That's right. Since "collapsing margins" is an often misunderstood or
> totally lost standard behavior made partly useless by IE/win bugs, the
> easiest way to demonstrate and *test* for what's happening is to make
> the involved margin visible by preventing it from escaping its own
> container and collapse into other margins in standard compliant browsers.
> 
> The 1px padding is interpreted the same way by all browsers, and once
> all involved vertical margins are uncollapsed and visible in the actual
> case, one can decide which ones to keep and which ones to change to
> achieve the intended line-up across browser-land.

> For more on the subject, check the linked-in articles/demos in the
> relevant 'hasLayout' subsection...
> 

> regards
>   Georg


The part in the article about how hasLayout affects the collapsing of margins 
between a box and its descendants does not apply in the case. I see no 
connection between this bug case and hasLayout. This bug could still be present 
in IE8.

The bug is setup (see below markup) when you have a container div for a static 
content div and floated side bar. Any top margin on the content div or 
descendant element of this div will only fully collapse into the top margin of 
the container itself when this top margin is equal or greater then any of the 
descendant top margins. The collapsing margin between the container and content 
div are controlled by the width of the container top margin and are alway equal 
to it. So a top margin of 1px on the container will allow margin collapsing of 
only 1px. For this case once 20px is reached then full margin collapsing 
occurred equally across browser-land.

   
div floated left
Heading



Apart from knowing that the trigger for this bug is a float in the source, I am 
at a lost to explain why it happens. I also at a lost to explain why there is a 
difference between the browsers that show the bug. Opera 9.1~9.2, IE7, and 
IE5.5~6 all show the bug in their own individual way [1].

The original case by the original poster had an additional container (inner 
wrapper).

   
div floated left
   
Heading



And what you suggested was.

#spotlight {
margin: 0 40px 0 230px;
}

For testing-purposes, adding...

#content {
padding-top: 1px;
}

without zeroing out the margin-top on #spotlight, will make all
browsers contain the margin and push #spotlight down.
-

Firstly, zeroing out the the top margin of the #spotlight div will make no 
difference across browser-land [2] see example 1a and 1b. Secondly, testing 
with a 1px padding to show the collapsing margin(s) in compliant browsers shows 
no change regardless of if the top margin on the #spotlight div is zero or`20px 
[2] see example 2a and 2b. Thirdly, this make no apparent difference for IE 
since the bug as seen in IE shows a behavior that only happens if padding or a 
border were actually present. This leaves just this.
---
For testing-purposes, adding...

#content {
padding-top: 1px;
}

will make all browsers contain the margin and push #spotlight down.
---

This will work for the compliant browsers at least, not IE or Opera 9.1~9.2. I 
have done further test that includes an inner wrapper with various methods of 
containing all involved margins. Compliant browsers will show consistently. 
Opera 9.1~9.2, IE7, and IE5.5~6 all show particular examples in their own 
individual way.

1 
2 


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] styling for two monitors

[Sandy]

>>a sample page is here
>>http://bradtrent.com/gallery3/gallery312.html

> I hope that's not your client. :-0
thank goodness, no, or I would be scared to tell him what I think I need 
to tell him - which is that it's his problem, and he should  just shrink 
his browser window.

He's here, sitting next to whatever celebrity the script is rotating him 
through
http://bradtrent.com/bio.html

> That scared my dog.
sorry.

Sandy

> I have three monitors and I never have a problem like you described 
> except for javascript, so I suspect that this is a local to your 
> client thing.
> 
> For example, my browser (Safari) always opens a window where the last 
> window was, so I don't have any problems with any site opening 
> between screens nor have I see this happen in any browser that runs 
> on the Mac.
> 
> HTH's
> 
> Cheers,
> 
> tedd
> 
__
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] Ie6 and 7 *still* giving me fits when I try to make something flush - please help if you can

[Scott Thigpen]

Okay, so after many attempts I decided to nix the fluid look because I could
NOT get it to work right, so I decided with just a fixed with.  All works
well now, but when I try to insert a nav bar, I can't get it to push down
just my logo.  It works in Firefox (of course) but I can't get it to work in
IE6 and 7.  Any help you can throw my way would be MUCH appreciated as I am
just stumped (and have a profound hatred to css)

here is the site: http://www.sthig.com/photo/test.html

here is my css:

> 
> body,td,th {
> font-family: Geneva, Arial, Helvetica, sans-serif;
> font-size: 85%;
> color: #FF;
> text-align: center;
> background-color: #00;
> }
>
> #wrapper {
> width: 1024px;
> margin-left: auto;
> margin-right: auto;
> }
>
> #n1 {
> float: left;
> height: 50px;
> width: 280px;
> margin-top: 150px;
> }
>
> #navcontainer {
> float: left;
> display: inline;
> margin-top: 15px;
> margin-left: -15px;
> }
>
> #navlist ul
> {
> margin-left: 0;
> padding-left: 0;
> white-space: nowrap;
> }
>
> #navlist li
> {
> display: inline;
> list-style-type: none;
> }
>
> #navlist a {
> padding-top: 0px;
> padding-right: 10px;
> padding-bottom: 0px;
> padding-left: 10px;
> }
>
> #navlist a:link, #navlist a:visited
> {
> color: #fff;
> text-decoration: none;
> }
>
> #navlist a:hover
> {
> color: #049CB2;
> text-decoration: none;
> }
>
>
> #n2 {
> float: left;
> height: 50px;
> width: 402px;
> margin-top: 150px;
> }
>
>
> #n3 {
> float: left;
> height: 50px;
> width: 341px;
> margin-top: 150px;
> background-image: url(images/navBG.jpg);
> background-repeat: no-repeat;
> background-position: right bottom;
> }
>
> #content {
> background-color: #049CB2;
> width: 1024px;
> float: left;
> }
>
> #c1 {
> float: left;
> height: 250px;
> width: 280px;
> }
>
> #logoImg {
> float: left;
> margin-left: 5px;
> }
>
> #c2 {
> float: left;
> height: 250px;
> width: 402px;
> }
>
> #hello {
> margin-top: 110px;
> margin-right: 75px;
> }
>
> #c3 {
> float: left;
> height: 250px;
> width: 341px;
> background-image: url(images/picBG.jpg);
> background-repeat: no-repeat;
> background-position: right top;
> }
>
> 
>

-- 
S c o t t  T h i g p e n
Illustrative Designer
art: http://www.sthig.com
design: http://www.thigpendesigns.com
Phone: 770.527.3958
__
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] styling for two monitors

[Sandy]

> So you're client is maximizing (or manually sizing) their browser window to
> span multiple monitors.
> 
> First, your site is not the ONLY one that they are going to have this
> complaint about. 
> 
> Second, if the client is doing this, then they are already used to the
> visual "break" from left-to-right on spreadsheets, documents, web pages, and
> everything else. 
> 
> What do they really want? Do they want you to anchor it to the left-side of
> the browser? What about dynamically centering it up to a certain width.
> Someone else suggested using max-width. 
> 
> I'd probably probe further to make sure the "centering" is their *real*
> complaint. The "centering" might only be a poor explanation on their part.
> For example, do they really mean that they would like it to be liquid and
> expand to fill their screen. 
> 
> Think about WHY someone would maximize a browser window across multiple
> screens. 
> 
> Visual impairment? If so, then restricting your page to ~1000 pixels width
> and fixed pixel sizes might be more of the problem.
> 
> Do they simply like to ogle their amazing web site? 
> 
> My point is, find out WHY they are maximizing across two monitors, and why
> it is important *and okay* that the problem exists in many circumstances,
> but is unacceptable to them with their site.
> 
> You may also want to explain that most users -- even those of us that are
> lucky enough to have multiple monitors, DON'T TYPICALLY expand the browser
> windows across multiple monitors. 
> 
> Think about that for a second. 
> 
> Even the best liquid layout would be visually hosed when you viewed it
> across 3800+ pixels. All of the text would run up into a few lines that
> would give you a migraine trying when trying to read 2 or 3 lines of text
> spanning horizontally across 2 or more monitors. Then you'd still have
> vertical stacks down the left (and right) sides of images, nav bars, etc.
> 
> Just tell them that you'd be happy to fix the problem, but it goes OUTSIDE
> of standard web design practices and it will be a considerable cost
> increase. 

Hey Rob,

I don't think the problem is visual impairment - the client is a 
photographer. There is almost no text on the site, so it's not that he 
is increasing his font size 'til it overflows the monitor. I think he 
just, as you suggested, simply likes to ogle his amazing web site.

The next version of this site will probably have images that are sized 
to 90% of the browser window height, so that it gets really BIG for the 
really big monitors. I'm pretty sure I'll be in touch with you guys for 
help with that!

OK, I'm going to write and ask what he's really after.

Thanks a million, everybody!

Sandy
__
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] styling for two monitors

[Sandy]

> On Jan 9, 2008, at 3:21 AM, Sandy wrote:
> 
>> I have a site that is set up to center in the middle of a screen.
>> The content is 880px wide, and it has a negative left margin
>> margin-left: -440px;
>>
>> http://bradtrent.com/bradtrent.css
>>
>> This was all hunky dory but my client has now has two monitors, and is
>> complaining
>>
>>> on my computer where I'm running two  monitors, when the page loads
>>> it opens up over both monitors, half on  one and half on the other.
>>
>>
>> Is there a way to tell the site that
>> margin-left: -440px;
>> means from the middle of *ONE* monitor, not from the middle of the  two?
>>
>> a sample page is here
>> http://bradtrent.com/gallery3/gallery312.html
> 
> 
> So the client maximises his/her browser over 2 monitors ? Sounds  
> completely crazy, but I stopped being surprised by clients.
> 
> body{max-width:1280px; margin:0} /* for good browsers */
> see
> 
> for IE 6 and max-width

Philippe

Thanks!
This is usable, and maybe something I can propose to the guy.

The shortcoming is that it may not take into account the monster size 
monitors of his most important clients - art directors. Is there a way 
of saying "max-width:one monitor" instead of "max-width:1280px;"?

Sandy
__
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] styling for two monitors

[Don Miller]

You might want to check what happens if you resize the browser window in the 
vertical direction.  I had the same problem on a site and had to remove the 
centering css so it could be viewed on monitors or hand held devices that 
have short screens in the vertical direction.

Don

- Original Message - 
From: "Sandy" <[EMAIL PROTECTED]>
To: "Philippe Wittenbergh" <[EMAIL PROTECTED]>; "CSS discuss" 

Sent: Wednesday, January 09, 2008 8:34 AM
Subject: Re: [css-d] styling for two monitors


>
>> On Jan 9, 2008, at 3:21 AM, Sandy wrote:
>>
>>> I have a site that is set up to center in the middle of a screen.
>>> The content is 880px wide, and it has a negative left margin
>>> margin-left: -440px;
>>>
>>> http://bradtrent.com/bradtrent.css
>>>
>>> This was all hunky dory but my client has now has two monitors, and is
>>> complaining
>>>
 on my computer where I'm running two  monitors, when the page loads
 it opens up over both monitors, half on  one and half on the other.
>>>
>>>
>>> Is there a way to tell the site that
>>> margin-left: -440px;
>>> means from the middle of *ONE* monitor, not from the middle of the  two?
>>>
>>> a sample page is here
>>> http://bradtrent.com/gallery3/gallery312.html
>>
>>
>> So the client maximises his/her browser over 2 monitors ? Sounds
>> completely crazy, but I stopped being surprised by clients.
>>
>> body{max-width:1280px; margin:0} /* for good browsers */
>> see
>> 
>> for IE 6 and max-width
>
> Philippe
>
> Thanks!
> This is usable, and maybe something I can propose to the guy.
>
> The shortcoming is that it may not take into account the monster size
> monitors of his most important clients - art directors. Is there a way
> of saying "max-width:one monitor" instead of "max-width:1280px;"?
>
> Sandy
> __
> 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/
>
>
>
> -- 
> No virus found in this incoming message.
> Checked by AVG Free Edition.
> Version: 7.5.516 / Virus Database: 269.17.13/1214 - Release Date: 1/8/2008 
> 1:38 PM
>
> 

__
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] styling for two monitors

[Sandy]

> You might want to check what happens if you resize the browser window in 
> the vertical direction.  I had the same problem on a site and had to 
> remove the centering css so it could be viewed on monitors or hand held 
> devices that have short screens in the vertical direction.

hey Don,

Nope, vertical centring is  here to stay. We aren't considering the 
needs of people with small monitors, just big ones.

The target audience of this site is art directors, and they all have 
great, big monitors. They have tiny little web browsers, too, but if 
they are seriously considering my client for the job they aren't going 
to look at his site on the  phone.

Anyone who doesn't have a minimum 1024 x 768 monitor is going to need to 
scroll like crazy to see the site.

Standing firm on this one!
Sandy
__
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] styling for two monitors

[Sandy]

>> Anyone who doesn't have a minimum 1024 x 768 monitor is going to  need to
>> scroll like crazy to see the site.
> 
> 
> You might want to google for "vertical centering with a shim div".  Nice 
> article which keeps the top part of your site from being cut off  if the 
> visitor has resized their browser to a vertical height less  than ~800px.
> 


That  sounds really useful - thanks!
Sandy
__
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] Need advices for IE/Firefox/Safari website compliant (didli)

[didli]

Hi everyone ! I'm going into a lot of trouble as I'm trying to make a 
website that must look the same in IE/Firefox/Safari.
Could you please have a look to http://mediaklan.homelinux.com/work/web 
and give me some pieces of advice and knowledge ?
I will be very pleased ;).
Now you can go and see screenshots if you want here (taken from 
Browsershots) in order to understand the problems I met  : 
http://designed2.free.fr/screenshots/browsershots/
And here's a resume :
- In Safari, all mac versions, the main part at center showing my images 
goes down
under the left thumbs menu (a float element). And the main logo in 
top-left corner is showing
a background color that should not be seen...
- In IE 5.5, navigation words ("precedente" "[x sur x]" "suivante") came 
one under the others
(they normally went aligned), then the main image part goes down.
- In IE 6.0, everything seems almost fine, except from the main part 
that is slightly shifted (margin/padding box problem ?)
- In IE 7.0, everything seems almost fine but the navigation words above 
the main image part are missing.
- Firefox, all versions from mac to PC and Linux, is doing very well 
(damn how much I love this browser !)
You can access xhtml (in text format) and CSS files here :
http://mediaklan.homelinux.com/_css/template.txt (elements marked like 
 are normal, it's for the php photo script)
http://mediaklan.homelinux.com/_css/galerie.css
Thank you very much in advance, and a happy new year from France !
- didli
__
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] styling for two monitors

[Rahul Gonsalves]

On 09-Jan-08, at 10:19 PM, Sandy wrote:

> Anyone who doesn't have a minimum 1024 x 768 monitor is going to  
> need to
> scroll like crazy to see the site.

You might want to google for "vertical centering with a shim div".  
Nice article which keeps the top part of your site from being cut off  
if the visitor has resized their browser to a vertical height less  
than ~800px.

Best,
  - Rahul.
__
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] Ie6 and 7 *still* giving me fits when I try to make something flush - please help if you can

[Rick Faircloth]

Hi, Scott...

I guess you got everything straightened out?
Everything looks the same in IE6, IE7, and FF.

Rick

> -Original Message-
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
> Behalf Of Scott Thigpen
> Sent: Wednesday, January 09, 2008 11:15 AM
> To: css-d
> Subject: [css-d] Ie6 and 7 *still* giving me fits when I try to make 
> something flush - please
> help if you can
> 
> Okay, so after many attempts I decided to nix the fluid look because I could
> NOT get it to work right, so I decided with just a fixed with.  All works
> well now, but when I try to insert a nav bar, I can't get it to push down
> just my logo.  It works in Firefox (of course) but I can't get it to work in
> IE6 and 7.  Any help you can throw my way would be MUCH appreciated as I am
> just stumped (and have a profound hatred to css)
> 
> here is the site: http://www.sthig.com/photo/test.html
> 
> here is my css:
> 
> > 
> > body,td,th {
> > font-family: Geneva, Arial, Helvetica, sans-serif;
> > font-size: 85%;
> > color: #FF;
> > text-align: center;
> > background-color: #00;
> > }
> >
> > #wrapper {
> > width: 1024px;
> > margin-left: auto;
> > margin-right: auto;
> > }
> >
> > #n1 {
> > float: left;
> > height: 50px;
> > width: 280px;
> > margin-top: 150px;
> > }
> >
> > #navcontainer {
> > float: left;
> > display: inline;
> > margin-top: 15px;
> > margin-left: -15px;
> > }
> >
> > #navlist ul
> > {
> > margin-left: 0;
> > padding-left: 0;
> > white-space: nowrap;
> > }
> >
> > #navlist li
> > {
> > display: inline;
> > list-style-type: none;
> > }
> >
> > #navlist a {
> > padding-top: 0px;
> > padding-right: 10px;
> > padding-bottom: 0px;
> > padding-left: 10px;
> > }
> >
> > #navlist a:link, #navlist a:visited
> > {
> > color: #fff;
> > text-decoration: none;
> > }
> >
> > #navlist a:hover
> > {
> > color: #049CB2;
> > text-decoration: none;
> > }
> >
> >
> > #n2 {
> > float: left;
> > height: 50px;
> > width: 402px;
> > margin-top: 150px;
> > }
> >
> >
> > #n3 {
> > float: left;
> > height: 50px;
> > width: 341px;
> > margin-top: 150px;
> > background-image: url(images/navBG.jpg);
> > background-repeat: no-repeat;
> > background-position: right bottom;
> > }
> >
> > #content {
> > background-color: #049CB2;
> > width: 1024px;
> > float: left;
> > }
> >
> > #c1 {
> > float: left;
> > height: 250px;
> > width: 280px;
> > }
> >
> > #logoImg {
> > float: left;
> > margin-left: 5px;
> > }
> >
> > #c2 {
> > float: left;
> > height: 250px;
> > width: 402px;
> > }
> >
> > #hello {
> > margin-top: 110px;
> > margin-right: 75px;
> > }
> >
> > #c3 {
> > float: left;
> > height: 250px;
> > width: 341px;
> > background-image: url(images/picBG.jpg);
> > background-repeat: no-repeat;
> > background-position: right top;
> > }
> >
> > 
> >
> 



__
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] styling for two monitors

[Gunlaug Sørtun]

Sandy wrote:
> The next version of this site will probably have images that are 
> sized to 90% of the browser window height, so that it gets really BIG
>  for the really big monitors. I'm pretty sure I'll be in touch with 
> you guys for help with that!
> 
> OK, I'm going to write and ask what he's really after.

Ask him which browser he prefers too. Maybe mediaqueries are supported
well enough to check for device-width / -height / -aspect-ratio.

I use some of those queries at my end, so I can make full use of my
own triple-monitor set-ups - apart from switching stylesheets for some
of the latest browsers on really small devices.

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] Ie6 and 7 *still* giving me fits when I try to make something flush - please help if you can

[Rick Faircloth]

I hear you.

 

Now, I'm a pragmatist, not an idealist, when it comes to designing

for various browsers and since 98% of my site visitors use IE6, IE7, or FF

that's all I check when I'm designing.

 

That being said, I've taken what I consider to be the easiest route to

cross-browsers issues. I just design for FF, then go straight to

conditional stylesheets for IE6 and IE7.

 

Why bother with hours of time spent trying to find a hack or code that will

work the same in all three?  Hacking isn't future proof, because the browsers

change and become more css-compatible all the time.  IE8 will be more 
css-compatible

and will work with css in more ways that IE7, as IE7 has than IE6.

 

So, if I have IE6 or IE7 hacks in my code and IE8 comes out and it doesn't work

with the hacks, I've got to re-code everything that doesn't work.  Going 
straight

to conditional stylesheets, the hacks are isolated and won't cause conflicts in 
the future.

 

Just a few thoughts as I wrestle with the inconsistencies of the browser world.

 

Rick

 

From: Scott Thigpen [mailto:[EMAIL PROTECTED] 
Sent: Wednesday, January 09, 2008 1:16 PM
To: Rick Faircloth
Subject: Re: [css-d] Ie6 and 7 *still* giving me fits when I try to make 
something flush - please
help if you can

 

yeah I got it, but not until it had me stressed out beyond belief.  the more I 
web design, the more
I *hate* IE

On Jan 9, 2008 1:03 PM, Rick Faircloth < [EMAIL PROTECTED] 
> wrote:

Hi, Scott...

I guess you got everything straightened out? 
Everything looks the same in IE6, IE7, and FF.

Rick


> -Original Message-
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
> Behalf Of Scott Thigpen
> Sent: Wednesday, January 09, 2008 11:15 AM
> To: css-d
> Subject: [css-d] Ie6 and 7 *still* giving me fits when I try to make 
> something flush - please 
> help if you can
>
> Okay, so after many attempts I decided to nix the fluid look because I could
> NOT get it to work right, so I decided with just a fixed with.  All works
> well now, but when I try to insert a nav bar, I can't get it to push down 
> just my logo.  It works in Firefox (of course) but I can't get it to work in
> IE6 and 7.  Any help you can throw my way would be MUCH appreciated as I am
> just stumped (and have a profound hatred to css) 
>
> here is the site: http://www.sthig.com/photo/test.html
>
> here is my css:
>
> >  
> > body,td,th {
> > font-family: Geneva, Arial, Helvetica, sans-serif;
> > font-size: 85%;
> > color: #FF;
> > text-align: center;
> > background-color: #00; 
> > }
> >
> > #wrapper {
> > width: 1024px;
> > margin-left: auto;
> > margin-right: auto;
> > }
> >
> > #n1 {
> > float: left; 
> > height: 50px;
> > width: 280px;
> > margin-top: 150px;
> > }
> >
> > #navcontainer {
> > float: left;
> > display: inline;
> > margin-top: 15px;
> > margin-left: -15px;
> > }
> >
> > #navlist ul
> > {
> > margin-left: 0;
> > padding-left: 0;
> > white-space: nowrap; 
> > }
> >
> > #navlist li
> > {
> > display: inline;
> > list-style-type: none;
> > }
> >
> > #navlist a {
> > padding-top: 0px; 
> > padding-right: 10px;
> > padding-bottom: 0px;
> > padding-left: 10px;
> > }
> >
> > #navlist a:link, #navlist a:visited
> > {
> > color: #fff; 
> > text-decoration: none;
> > }
> >
> > #navlist a:hover
> > {
> > color: #049CB2;
> > text-decoration: none;
> > }
> >
> > 
> > #n2 {
> > float: left;
> > height: 50px;
> > width: 402px;
> > margin-top: 150px;
> > }
> >
> >
> > #n3 {
> > float: left; 
> > height: 50px;
> > width: 341px;
> > margin-top: 150px;
> > background-image: url(images/navBG.jpg);
> > background-repeat: no-repeat;
> > background-position: right bottom; 
> > }
> >
> > #content {
> > background-color: #049CB2;
> > width: 1024px;
> > float: left;
> > }
> >
> > #c1 {
> > float: left; 
> > height: 250px;
> > width: 280px;
> > }
> >
> > #logoImg {
> > float: left;
> > margin-left: 5px;
> > }
> >
> > #c2 { 
> > float: left;
> > height: 250px;
> > width: 402px;
> > }
> >
> > #hello {
> > margin-top: 110px;
> > margin-right: 75px;
> > } 
> >
> > #c3 {
> > float: left;
> > height: 250px;
> > width: 341px;
> > background-image: url(images/picBG.jpg);
> > background-repeat: no-repeat; 
> > background-position: right top;
> > }
> >
> > 
> >
>




__ 
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/




-- 
S c o t t  T h i g p e n
Illustrative Designer
art: http://www.sthig.com
design: http://www.thigpendesigns.com
Phone: 770.527.3958 

[css-d] standard minimum font

[Bob Meetin]

html, body { font-size: 100%;}

body{ font-size: .85em; }



Hi, been using the above CSS to set up standard font for my sites. Seemed fine 
but 
then I messed with my Firefox minimum font in my Firefox properties. I believe 
the
minimum was set by default to 10. If I reset to 'no minimum' the font is 
now unacceptably small, at least for my aged eyes.

Is there any general assumption regarding browser minimum default font size or 
should
I change the base CSS to something like:

body{ font-size: 1.0em; }  

Or undefined?  -Bob






__
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] standard minimum font

[Gunlaug Sørtun]

Bob Meetin wrote:
> html, body { font-size: 100%;}
> 
> body{ font-size: .85em; }

> Is there any general assumption regarding browser minimum default 
> font size or should I change the base CSS to something like:
> 
> body{ font-size: 1.0em; }
> 
> Or undefined?  -Bob

You already have 'html, body { font-size: 100%;}', which means
"browser-medium" and/or "user preference".
100% = 1em, and if you're happy with that then there's no need to
declare a new font-size on body.

Since not all browsers adjust "medium" to go with different
screen-resolutions (DPI) the same way - or at all, and different
font-families will _appear_ to have different sizes, any assumption of
what's a reasonable 'smallest font size' for viewing at the user-end
will end up as a "best guess" anyway.

I stay at or close to the 100% font-size whenever clients allow me, and
if they don't then they usually want to make the font-size "slightly
larger" one or more times - once they have received some feedback, until
we're back at close to the 100% I started out with.

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] IE6/7 and Firefox CSS issue driving me mad

[Kepler Gelotte]

Hi Chris,

Try this:

#content {
background-color:#FF;
bottom:0px;
color:#003366;
font-size:0.7em;
margin:0 50px;
position:relative;
}

By defining #content as position: absolute; you were taking the  out of
the normal flow. Read Andy Budd's "CSS Mastery" for an excellent description
of positioning.

Regards,
Kepler Gelotte
http://www.neighborwebmaster.com


-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Chris Blake
Sent: Wednesday, January 09, 2008 8:24 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] IE6/7 and Firefox CSS issue driving me mad

Greetings community,

Please can someone help me with this, its been bugging me for ages and now
I`ve found this list where I can hope to get it fixed with someones help.

Please visit this page : http://www.pixcel.co.za/ard/index.php

There is a main div called "content" which is not giving me a white
background all the way to the bottom. It kinda stops around the "Keyword
Search" section.

Here is the CSS I have for that div :

#content
{   
font-size:0.7em;
xleft:0px;
xright:50px;
padding-left:26px;
color: #036;
background-color: #FF; 
position:absolute; 
left:53px; 
top:108px; 
right:55px; 
bottom:0px
}

I`ve been reading from the W3 Schools site and the declarations taken from
there, so I`m thinking its some bug or I`m missing something in my CSS.

If someone has the answer, or can point me in the right direction I would
really appreciate it.

Thank you

Chris

__
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] styling for two monitors

[Rob Emenecker]

 
> Anyway, when you maximize IE on a Windows setup with dual monitors, it 
> only fills one screen, so I think they had to manually size and position 
> their browser to go across both screens. 

I concur. I run dual 20" monitors at 1600x1200 for Windows XP Pro (SP2) and
Mac OS X. On Windows the desktop is sewt to extend onto the second monitor.
Regardless, when you maximize a window, the window fills and snaps to ONLY
the monitor that contains the majority of the window. So even if the window
is straddling both monitors, when click Maximize, it will snap to ONLY one
of the monitors, not span both.

I cannot speak for Active Desktop, but I do know that backgrounds are also
sized to each monitor, they do not stretch horizontally across the monitors.
Mebbe' Active Desktop is different, but I would be surprised if it was.


__
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] IE Conditional comments - IE import hack

[Nancy Johnson]

I have a question related to the same issue.

I am converting a very poorly constructed table based site to CSS.

It is a tight fixed width site. Since it is a child of a larger site,
I don't feel I can convert to a more fluid site or change the look and
feel.

I have used
/*** IE Fix ***/
* html

to acommodate  both IE6 and IE7 issues which seem to work.

My more recent readings indicate that this method isn't isn't
recommended as a css fix and doesn't fix IE7, although it seemed to in
most instances


I also had one instance where IE6 needed fixing and not IE7.  *html fixed both.

Is @import?

or



a better way?

Thanks in advance,

Nancy

On Jan 9, 2008 6:50 AM, Alan Gresley <[EMAIL PROTECTED]> wrote:
> Michael Adams wrote
>
> > I have been lurking here for the last month and have a question about
> > the right way to handle IE using CSS.
> >
> > I use a master CSS file with the format as follows. To me, the master
> > file method as well as solving the 'old browser' issue, is easier for
> > another designer to approach my code.
> >
> > /* Master CSS File */
> > @import url(layout.css);
> > @import url(colour.css);
> > @import url(fonts.css);
> > @import url(.css) all;
> > /*
> > For the final import line above
> > IE and AOL9/Win load a file called "url(.css) all"
> > All other browsers load ".css"
> > */
> >
> > Is the above IE hack considered the best CSS solution for this method
> > of loading CSS? Are there others?
> >
> > --
> > Michael
>
> I would say that there is no universally agreed best method of feeding IE 
> alternative styles. The general consensus is not to hack unless you really 
> need to. The method that you have shown is actually the IE @import hack [1] 
> and not the propriety IE Conditional Comments which are added to the html. 
> There are many alternative CSS hacks for IE [2] some of which result in 
> parsing errors (invalid hacks) and some of which that don't (valid hacks).
>
> Doing some test [3] with @import hacks I find that they can be very simple, 
> scary.
>
> @import ie;
>
> or by directory and file.
>
> @import ../ie/ie;
>
> or
>
> @import ..\ie\ie;
>
> All three can be used to target IE/Win. The use of these hacks are not 
> recommended unless you know the full consequences.
>
>
> 1. 
> 2. 
> 3. 
>
>
> 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/
>



On Jan 9, 2008 6:50 AM, Alan Gresley <[EMAIL PROTECTED]> wrote:
> Michael Adams wrote
>
> > I have been lurking here for the last month and have a question about
> > the right way to handle IE using CSS.
> >
> > I use a master CSS file with the format as follows. To me, the master
> > file method as well as solving the 'old browser' issue, is easier for
> > another designer to approach my code.
> >
> > /* Master CSS File */
> > @import url(layout.css);
> > @import url(colour.css);
> > @import url(fonts.css);
> > @import url(.css) all;
> > /*
> > For the final import line above
> > IE and AOL9/Win load a file called "url(.css) all"
> > All other browsers load ".css"
> > */
> >
> > Is the above IE hack considered the best CSS solution for this method
> > of loading CSS? Are there others?
> >
> > --
> > Michael
>
> I would say that there is no universally agreed best method of feeding IE 
> alternative styles. The general consensus is not to hack unless you really 
> need to. The method that you have shown is actually the IE @import hack [1] 
> and not the propriety IE Conditional Comments which are added to the html. 
> There are many alternative CSS hacks for IE [2] some of which result in 
> parsing errors (invalid hacks) and some of which that don't (valid hacks).
>
> Doing some test [3] with @import hacks I find that they can be very simple, 
> scary.
>
> @import ie;
>
> or by directory and file.
>
> @import ../ie/ie;
>
> or
>
> @import ..\ie\ie;
>
> All three can be used to target IE/Win. The use of these hacks are not 
> recommended unless you know the full consequences.
>
>
> 1. 
> 2. 
> 3. 
>
>
> 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] managing long options

[Derrick Knight]

Hi,

I am working on a site with extremely long options and would like to 
wrap the text of each option to fit within the width of the parent 
container (a div for now) or within the width specified for the option. 
I can truncate to a fixed width without any problem. Is anyone familiar 
with any tricks to WRAP the option contents?

Thanks,
Derrick

-- 
FreeRangeMinds, LLC
Derrick Knight
[EMAIL PROTECTED]
(858) 794-0790

__
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] standard minimum font

[David Laakso]

Bob Meetin wrote:
> html, body { font-size: 100%;}
>
> body{ font-size: .85em; }
>
> 
>
> Hi, been using the above CSS to set up standard font for my sites. Seemed 
> fine but 
> then I messed with my Firefox minimum font in my Firefox properties. I 
> believe the
> minimum was set by default to 10. If I reset to 'no minimum' the font is 
> now unacceptably small, at least for my aged eyes.
>
> Is there any general assumption regarding browser minimum default font size 
> or should
> I change the base CSS to something like:
>
> body{ font-size: 1.0em; }  
>
> Or undefined?  -Bob
>
>
>
>   


I'd simply use

html, body { font-size: 100%;}

and not feed anything differently to IE.

Children of all ages will appreciate you.

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] IE Conditional comments - IE import hack

[Alan Gresley]

Nancy Johnson wrote:> I have a question related to the same issue.> > I am 
converting a very poorly constructed table based site to CSS.> > It is a tight 
fixed width site. Since it is a child of a larger site,> I don't feel I can 
convert to a more fluid site or change the look and> feel.> > I have used> /*** 
IE Fix ***/> * html> > to acommodate  both IE6 and IE7 issues which seem to 
work.> > My more recent readings indicate that this method isn't isn't> 
recommended as a css fix and doesn't fix IE7, although it seemed to in> most 
instances> > I also had one instance where IE6 needed fixing and not IE7.  
*html fixed both.> > Is @import?> > or> > > > a better way?> > Thanks in advance,> > NancyHi Nancy. This 
is a hotly disputed topic with a myriad of threads in the list archives and a 
special page in this list's wiki "To hack or not to hack" [1] or there is also 
much debate whether to use CSS hacks or IE Conditional Comments in the html. If 
you are working for a client and delivering a product which you will not be 
around to maintain, then the safest method is to use IE Conditional Comments. 
This could be done also by.and separating the particular versions of IE 
in the one stylesheet. This above import filter will be hidden from IE 4. A 
full list of import hacks [2] show various methods.If the pages are always 
maintained by yourself. This method may work better for you.* html #content 
{...}This will target IE 5~6 and IE 7 in quirks mode [3] and for IE 7 in 
standards mode [3] this works.*+html /* target IE 7 without the xml prolog 
*/*:first-child+html /* target IE 7 with the xml prolog */Note that with the 
xml prolog, Opera will also be targeted by similar hacks meant only for IE 
[3].Hacks like.*html #content {...}or #content {*background:red;}cause parsing 
errors so whatever style declarations are included may not be able to be 
validated.All the import hacks that only target IE are invalid so use with 
caution. When using any hacks it is wise to know the full consequence of the 
method used. Some of the hacks that target IE/win 5~6 may also target IE/mac. 
There is one well know method to hide these rules from IE/mac or only show 
rules for IE/mac. When using any hacks it is good practice to comment what 
browsers are targeted and why the have been used. A good is resource of many 
methods with the pro and cons are found here [4].There is also the common 
inappropriate use of hacks. Some authors will go straight for a hack if a part 
of a page layout has a few pixels in difference. Browsers default settings are 
always slightly difference. There could also be a scenario like...#sidebar 
{float:left;}#content {width:600px;margin-left:200px;}Instead of hacking, one 
solution is to avoid the effects of hasLayout [4] in IE by removing the 
haslayout trigger of width.#content {margin-left:200px;}I personally use * html 
and *:first-child+html since I prefer to keep the hacks together with the rules 
they relate to. I use the xml prolog to send IE 6 into quirks mode so I do not 
have to hack for IE 5 separately. I generally find that I do "not" have to hack 
for IE7, but this also means that I am also coding to keep IE happy. This is 
something I'm slowly moving away from though.I finding early 2008 to be very 
hacky time, but with the coming release of IE8 early this year. This could 
become very important. Good luck with your project.1. 
2. 
3. 
4. 
Alanhttp://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] IE Conditional comments - IE import hack

[Alan Gresley]

Please let me apologize for my last message, my webmail time out.

Nancy Johnson wrote:

> I have a question related to the same issue.
> 
> I am converting a very poorly constructed table based site to CSS.
> 
> It is a tight fixed width site. Since it is a child of a larger site,
> I don't feel I can convert to a more fluid site or change the look and> feel.
> 
> I have used
> /*** IE Fix ***/
> * html
> 
> to acommodate both IE6 and IE7 issues which seem to work.
> 
> My more recent readings indicate that this method isn't isn't
> recommended as a css fix and doesn't fix IE7, although it seemed to in
> most instances
> 
> I also had one instance where IE6 needed fixing and not IE7. *html fixed both.
> 
> Is @import?
> 
> or
> 
> 
> 
> a better way?
> 
> Thanks in advance,
> 
> Nancy

Hi Nancy. This is a hotly disputed topic with a myriad of threads in the list 
archives and a special page in this list's wiki "To hack or not to hack" [1] or 
there is also much debate whether to use CSS hacks or IE Conditional Comments 
in the html. If you are working for a client and delivering a product which you 
will not be around to maintain, then the safest method is to use IE Conditional 
Comments. This could be done also by.



and separating the particular versions of IE in the one stylesheet. This above 
import filter will be hidden from IE 4. A full list of import hacks [2] show 
various methods. If the pages are always maintained by yourself. This method 
may work better for you.

* html #content {...}

This will target IE 5~6 and IE 7 in quirks mode [3] and for IE 7 in standards 
mode [3] this works.

*+html /* target IE 7 without the xml prolog */

*:first-child+html /* target IE 7 with the xml prolog */

Note that with the xml prolog, Opera will also be targeted by similar hacks 
meant only for IE [3].

Hacks like.

*html #content {...}

or 

#content {*background:red;}

cause parsing errors so whatever style declarations are included may not be 
able to be validated.

All the import hacks that only target IE are invalid so use with caution. When 
using any hacks it is wise to know the full consequence of the method used. 
Some of the hacks that target IE/win 5~6 may also target IE/mac. There is one 
well know method to hide these rules from IE/mac or only show rules for IE/mac. 
When using any hacks it is good practice to comment what browsers are targeted 
and why the have been used. A good is resource of many methods with the pro and 
cons are found here [4].

There is also the common inappropriate use of hacks. Some authors will go 
straight for a hack if a part of a page layout has a few pixels in difference. 
Browsers default settings are always slightly difference. There could also be a 
scenario like.

.
.

#sidebar {float:left;}

#content {width:600px;margin-left:200px;}

Instead of hacking, one solution is to avoid the effects of hasLayout [4] in IE 
by removing the haslayout trigger of width.

#content {margin-left:200px;}

I personally use * html and *:first-child+html since I prefer to keep the hacks 
together with the rules they relate to. I use the xml prolog to send IE 6 into 
quirks mode so I do not have to hack for IE/win 5 separately. I generally find 
that I do "not" have to hack for IE7, but this also means that I am also coding 
to keep IE 7 happy. This is something I'm slowly moving away from though.

I finding early 2008 to be very hacky time, but with the coming release of IE8 
early this year. This could become very important issue. Good luck with your 
project.

1. 
2. 
3. 
4. Alanhttp://css-class.com/

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] still more issues

[Lisa G. Wilcox]

I’m having the following issues with HYPERLINK
"http://www.familyfirstdocs.com"www.familyfirstdocs.com
 
Top Navbar does not auto-align itself on browser window size changes in IE7
Unknown property "behavior" on line 76 in screen.css
Top Navbar color changes on hover randomly fail, and do so fairly often, in
both IE and FF
 
I have looked this stuff over so much, I’m crossed eyed. If someone has some
suggestions I’d love to hear them. I’m frustrated. I have tried all I can
think of.
Thanks
Lisa
 
 
 
 

No virus found in this outgoing message.
Checked by AVG Free Edition. 
Version: 7.5.516 / Virus Database: 269.17.13/1214 - Release Date: 1/8/2008
1:38 PM
 
__
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] Background inheritance

[jasonite]

Hello, all. I'm having an issue with the wrapper div inheriting the background 
color of the body, but that isn't what I want, as you can see below. 

I am new to web design, so if I'm missing something obvious I apologize, but I 
can't figure out what is wrong here. Thank you in advance.

=== 

body {
background-color: #00;
margin: 0;
padding: 0;
text-align: center;
}
#wrapper {
background-color: #33;
width: 760px;
margin: 0 auto;
color: #FF;
font-family: OCR A std;
font-size: 14px;
text-align: left;
letter-spacing: -1px;
word-spacing: -2px;
}
__
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] Background inheritance

[Jukka K. Korpela]

[EMAIL PROTECTED] wrote:

> Hello, all. I'm having an issue with the wrapper div inheriting the
> background color of the body, but that isn't what I want, as you can
> see below.

Normally, it is best to post the URL of a demo page to illustrate the 
problem (and to mention the browser(s) used for testing), when you have 
a specific problem.

> background-color: #00;
...
> background-color: #33;

Probably you just see #33 as similar to #00. They aren't that 
far from each other. If you modify the color codes somewhat, you'll 
probably notice that your backgrounds _are_ applied.

Backgrounds don't inherit, except via the explicit value of inherit (and 
even then only on supporting browsers, excluding IE). The initial value 
for background-color is transparent, which may cause the illusion of 
inheritance. So _if_ the latter declaration were somehow incorrect, e.g. 
with a malformed color value, so that the declaration would be ignored, 
the inner element would have a transparent background (unless some other 
style sheet sets a background for it), and this could be misinterpreted 
as inheritance.

But your style sheet is formally correct and the background _will_ be 
applied (with the usual CSS caveats) to the applicable element. However, 
it is so dark that it might be mistaken for black.

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] Background inheritance

[David Laakso]

[EMAIL PROTECTED] wrote:
> Hello, all. I'm having an issue with the wrapper div inheriting the 
> background color of the body, but that isn't what I want, as you can see 
> below. 
>
> I am new to web design, so if I'm missing something obvious I apologize, but 
> I can't figure out what is wrong here. Thank you in advance.
>
> === 
>
> body {
>   background-color: #00;
>   margin: 0;
>   padding: 0;
>   text-align: center;
> }
> #wrapper {
>   background-color: #33;
>   width: 760px;
>   margin: 0 auto;
>   color: #FF;
>   font-family: OCR A std;
>   font-size: 14px;
>   text-align: left;
>   letter-spacing: -1px;
>   word-spacing: -2px;
> }
>   

As far as the rendering of the background-color is concerned, there is 
nothing wrong with what you have. /That is unless you have added no text 
in #wrapper/, in which case you'll only see a black screen. If this does 
not answer the question you have, put the page on your server and 
provide a clickable link to it.

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] Ie6 and 7 *still* giving me fits when I try to make something flush - please help if you can

[Highpowered]

Scott Thigpen wrote:
> Okay, so after many attempts I decided to nix the fluid look because I could
> NOT get it to work right, so I decided with just a fixed with.  All works
> well now, but when I try to insert a nav bar, I can't get it to push down
> just my logo.  It works in Firefox (of course) but I can't get it to work in
> IE6 and 7.  Any help you can throw my way would be MUCH appreciated as I am
> just stumped (and have a profound hatred to css)
>
>   
>
I thought a bit more about what it is you were trying to do. What you 
need to do is simplify your XHTML markup some, use a mixture of fixed 
and relative units of measurement  as well as make good use of your 
right margins to accomplish your goal,.

I think the bulk of the difficulty of implementing your initial design 
was that you were trying to pull off both fluid horizontal layout with 
vertical and horizontal centering simultaneously. It can be done, and 
it's cool when it works. The key is to provide a smidge of fixed width 
on the left side of your structure to act as an anchor point for the 
whole design, setting off the relatively-dimensioned elements to the 
right of it with a fixed margin-right value.

Think of an accordion, or a bellows, and how the inner folds are fluid 
while the ends are rigid.

Of course, the whole thing would be easier if all browsers behaved the 
same way, but the underlying principles remain the same.
__
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] still more issues

[Highpowered]

Lisa G. Wilcox wrote:
> I’m having the following issues with HYPERLINK
> "http://www.familyfirstdocs.com"www.familyfirstdocs.com
>  
> Top Navbar does not auto-align itself on browser window size changes in IE7
> Unknown property "behavior" on line 76 in screen.css
> Top Navbar color changes on hover randomly fail, and do so fairly often, in
> both IE and FF
>  
> I have looked this stuff over so much, I’m crossed eyed. If someone has some
> suggestions I’d love to hear them. I’m frustrated. I have tried all I can
> think of.
> Thanks
> Lisa
> rted by evolt.org -- http://www.evolt.org/help_support_evolt/
Try adding {position:relative} to #bmission.
__
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] Background inheritance

[David Dorward]

On 09/01/2008, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:

> Hello, all. I'm having an issue with the wrapper div inheriting the
> background color of the body, but that isn't what I want, as you can see 
> below.

URLs are much easier to debug then fragments of CSS, but I'll take a
shot in the dark. Are you floating all the content of the element with
the id wrapper? If so, that element will have a height of 0. It isn't
inheriting the background colour of the body, it just doesn't have any
presence to cover up that background with.

Why that is the case: http://complexspiral.com/publications/containing-floats/
Techniques for dealing with it: http://www.ejeliot.com/blog/59
> font-size: 14px;

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

-- 
David Dorward 
__
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] css tooltip doesn't work in Opera

[Giuseppe Craparotta]

Hello there,
if you go to this page:

http://www.giuseppecraparottacv.co.uk/TRY2.html

and hover on "Let me tell you something more about it", you'll see a 
pure css tooltip.
It works fine in all browsers, apart from Opera.
It is a real pity, 'cause I think that the tooltip is a very good 
communication tool.
But really I can't figure out how to make it work in Opera 9.10...

thanks much,
G

p.s.: Georg, can you give a help with this?
__
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] page is broken AGAIN in IE6, please, please help!

[Scott Thigpen]

This webpage has just caused me all sorts of grief all things IE.

It works fine in IE7, FF and Safari but not in IE6.

If you will point your browsers here:
http://www.sthig.com/photo/index.html

You will see that all is laid out nice and neat

But when you go here in IE6
http://www.sthig.com/photo/contact.php

The picture of the rooster is knocked down.  Can someone PLEASE tell me
what's going on here?

CSS is here:
http://www.sthig.com/photo/css/photo.css

Thank you for your help!

Best
Scott

-- 
S c o t t  T h i g p e n
Illustrative Designer
art: http://www.sthig.com
design: http://www.thigpendesigns.com
Phone: 770.527.3958
__
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] page is broken AGAIN in IE6, please, please help!

[Gunlaug Sørtun]

Scott Thigpen wrote:

> http://www.sthig.com/photo/contact.php
> 
> The picture of the rooster is knocked down.  Can someone PLEASE tell 
> me what's going on here?

IE6 is 1px off at both sides of the rooster image container, and you're
running a tight fit with no room for errors. IE6 has numerous
calculation-errors resulting in +-1px off, and it doesn't respect
declared dimensions.

I didn't check where IE6 miscalculated, but adding...

* html #c3 {margin: 0 -1px;}

...will just barely create enough space and correct the position in that
browser.
I advice against such tight fit, and it would also be a good idea to
keep the bubble whole - as part of #c3 - so you don't have to hit that
exact.

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] display CSS graph inline

[Duncan Hill]

> I tried but it doesn't seem like the percent filled in the bar graph  
> changes.
>
> This markup is generated dynamically so want to be able to set a
> percentage and display the graph filled in by that percentage.
>
> 
> 
> 22%
> 
> 
>
Bill

sorry I am so late offering any ideas but I'll show it anyway.
I don't know what control you have over the generated code but instead of  
trying to make the div appear inline you could do this with a couple of  
basic images. One for a 'placeholder' and appears in the html, and one as  
a background image that is treated like a sprite, the graph is displayed  
by adjusting the position of the background image.
In the code below, the two images are "trans.gif" and "graph.gif", on the  
code they are both simple gifs at 100x20 pixels, trans is fully  
transparent and serves to give the graph its 'space', graph is solid white.
The basic css is embedded in a style block, you need to feed the inline  
"background-position" with the value of the bar and the span for the text  
value, the span has a negative margin applied to place the text over the  
bar image.
As it stands, it needs the bar position fed in pixels, it should work in %  
but it didn't first time round and I ran out of time sorry.
The sizes are fixed as far as display is concerned and will not scale with  
the text and the 100 px sizing was just to simplify things, obviously it  
can be juggled to suit.
For multiple graphs on one page, the inline background-position that is  
generated for each means that they can all use the same images and css.
To test you will need to make the couple of images, I didn't have anywhere  
to post it at short notice.
The code will take a strict xhtml 1.0 doctype but I cut it in case it  
messes any email around.
  Page Title
 
 
 
 
 
 .graph{
  background-image: url("graph.gif");
  background-repeat: no-repeat;
  background-color:yellow;
  border:green 1px solid;
  }
  .graphtext{
  margin-left:-95px;
  margin-right: 70px;
  vertical-align:top;
  }
 
   
   
 
Lorem ipsum dolor sit amet consectetuer nunc sem eget diam  
lobortis. Neque vitae eros enim semper amet Integer massa nulla In  
interdum.
 
 
   66%
  Id laoreet congue mauris est sed felis Praesent neque  
convallis tellus. Nisl commodo a non et Curabitur Vestibulum Aenean montes  
at orci. Tristique nibh orci dictum tristique scelerisque metus lacus  
Maecenas at pellentesque. Lacinia orci dictumst Aenean nec.
   
 
   


best wishes

Duncan

-- 
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
__
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] page is broken AGAIN in IE6, please, please help!

[Kepler Gelotte]

> This webpage has just caused me all sorts of grief all things IE.
> It works fine in IE7, FF and Safari but not in IE6.

Hi Scott,
Try setting the default padding/margins by adding this to the top of your
CSS:

* { padding: 0; margin: 0; }

Not all browsers start with all elements having no padding and no margins.
If you still have problems try shaving a few pixels off of #n3/#c3's width.

Regards,
Kepler Gelotte

__
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] display CSS graph inline

[Stephan Wehner]

On Jan 5, 2008 6:40 AM, Bill Moseley <[EMAIL PROTECTED]> wrote:
> I have a css generated simple bar graph below.
>
> How can I make it display inline, for example, placed in the middle of
> a paragraph of text and have it flow with the text?
>
> I tried adding a display: inline wrapper, but no luck.
>

Sounds like a case for inline-block.

See the nice displays at http://www.quirksmode.org/css/display.html

Except there are some warnings about browser support.

Stephan
__
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] Ie6 and 7 *still* giving me fits when I try to make something flush - please help if you can

[Rick Faircloth]

My users run about 95% IE, 3% FF, and 2% "Other".

 

With that user base, I'd target IE7 first if it weren't for the

fact that conditional stylesheet code only works for IE.  So I'm

forced to code for FF first, not because it adheres to standards,

but because I can't code alternate stylesheet for it.

 

But anyway, are you asking about an example of conditional stylesheet code?

Maybe not.  But if not, then just choose any IE6 or IE7 hack that's currently

employed in a main stylesheet.  Then along comes IE8 and the hack causes 
problems.

Now all the hacks have to be "re-hacked" somehow for IE6 (hopefully it'll be 
gone),

IE7, and IE8.  But if all IE6 and IE7 CSS is in browser specific stylesheets, 
then

it won't matter what IE8 works, because it'll never see the IE6 and IE7 
stylesheets.

 

No more having to accommodate IE6's lack of "exactness" with pixels and widths, 
etc.

Just give IE6 exactly what it wants to make your site look good in its own 
stylesheet.

I've actually found it saves time that way and my sites' looks aren't 
compromised

trying to avoid alternative stylesheets.

 

Rick

 

 

 

From: Scott Thigpen [mailto:[EMAIL PROTECTED] 
Sent: Wednesday, January 09, 2008 2:03 PM
To: Rick Faircloth
Subject: Re: [css-d] Ie6 and 7 *still* giving me fits when I try to make 
something flush - please
help if you can

 

I've never thought of that.  Can you show me an example of what you are talking 
about?  I usually
design for FF too as that's most of my visitors, but I try to make it browser 
safe for that one or
two peoples that refuse to use Firefox.  Like, take my mom for instance, 
anytime I go home for the
holidays, I try to get her to get on FF.  But someone once told her that FF 
contains viruses, so she
won't use it and won't believe me.  

scott

On Jan 9, 2008 1:58 PM, Rick Faircloth <[EMAIL PROTECTED]> wrote:

I hear you.



Now, I'm a pragmatist, not an idealist, when it comes to designing

for various browsers and since 98% of my site visitors use IE6, IE7, or FF

that's all I check when I'm designing. 



That being said, I've taken what I consider to be the easiest route to

cross-browsers issues. I just design for FF, then go straight to

conditional stylesheets for IE6 and IE7.



Why bother with hours of time spent trying to find a hack or code that will

work the same in all three?  Hacking isn't future proof, because the browsers

change and become more css-compatible all the time.  IE8 will be more 
css-compatible 

and will work with css in more ways that IE7, as IE7 has than IE6.



So, if I have IE6 or IE7 hacks in my code and IE8 comes out and it doesn't work

with the hacks, I've got to re-code everything that doesn't work.  Going 
straight 

to conditional stylesheets, the hacks are isolated and won't cause conflicts in 
the future.



Just a few thoughts as I wrestle with the inconsistencies of the browser world.



Rick



From: Scott Thigpen [mailto:[EMAIL PROTECTED]
Sent: Wednesday, January 09, 2008 1:16 PM
To: Rick Faircloth
Subject: Re: [css-d] Ie6 and 7 *still* giving me fits when I try to make 
something flush - please 
help if you can




yeah I got it, but not until it had me stressed out beyond belief.  the more I 
web design, the more
I *hate* IE

On Jan 9, 2008 1:03 PM, Rick Faircloth < [EMAIL PROTECTED] 

> wrote:

Hi, Scott... 

I guess you got everything straightened out?
Everything looks the same in IE6, IE7, and FF.

Rick


> -Original Message-
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
> Behalf Of Scott Thigpen
> Sent: Wednesday, January 09, 2008 11:15 AM 
> To: css-d
> Subject: [css-d] Ie6 and 7 *still* giving me fits when I try to make 
> something flush - please
> help if you can
>
> Okay, so after many attempts I decided to nix the fluid look because I could 
> NOT get it to work right, so I decided with just a fixed with.  All works
> well now, but when I try to insert a nav bar, I can't get it to push down
> just my logo.  It works in Firefox (of course) but I can't get it to work in 
> IE6 and 7.  Any help you can throw my way would be MUCH appreciated as I am
> just stumped (and have a profound hatred to css)
>
> here is the site: http://www.sthig.com/photo/test.html
>
> here is my css:
>
> > 
> > body,td,th {
> > font-family: Geneva, Arial, Helvetica, sans-serif; 
> > font-size: 85%;
> > color: #FF;
> > text-align: center;
> > background-color: #00;
> > }
> >
> > #wrapper {
> > width: 1024px; 
> > margin-left: auto;
> > margin-right: auto;
> > }
> >
> > #n1 {
> > float: left;
> > height: 50px;
> > width: 280px;
> > margin-top: 150px; 
> > }
> >
> > #navcontainer {
> > float: left;
> > display: inline;
> > margin-top: 15px;
> > margin-left: -15px;
> > }
> > 
> > #navlist ul
> > {
> > margin-left: 0;
> > padding-left: 0;
> > white-space: nowrap;
> > }
> >
> > #navlist li
> > {
> > display: inline; 
> > list-style-type: non

[css-d] IE 5, 6, dropdown display issue

[Rebecca Richter]

Hi!

I've got these dropdown menus working pretty slick at 
http://www.makemyhousegreen.com/index1.html (roll over "projects", 
"services", or "publications"); however, in IE 5 and 6, there is much more 
top and bottom padding than there should be. What do do about this?

Also, I haven't been able to figure out how to change the color of the 
"topnav" or "parent" class on rollover. I tried ".parent li:hover 
{background: #c90;}", and that hasn't done a thing.

Thanks :)

Becca 

__
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] IE Conditional comments - IE import hack

[Michael Adams]

On Wed, 09 Jan 2008 13:32:39 -0500
Nancy Johnson wrote:

[snip]

> 
> Is @import?
> 
> or
> 
> 
> 
> a better way?
> 

Conditional comments are by far the safer and generally more preferred
method.

However, my personal preference is for the @import hack:
FOR
 * The CSS stays in the css files (doesn't cause you to hack the header)
 * Create code for the standards compliant browsers then hack for IE
 * All IE hacks are in a seperate file
 * It may not need to work for IE8 and above
 * comment conditional code is _ugly_ HTML
 * no javascript engine required

AGAINST
 * It is a non-standard hack
 * It may not work with IE8 and above
 * Extra CSS file on server - 1 extra dowload (usually <1kb)

Others may add to this list

[snip]

-- 
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/

Re: [css-d] IE Conditional comments - IE import hack

[Michael Adams]

On Wed, 09 Jan 2008 04:50:22 -0700
Alan Gresley wrote:

> Michael Adams wrote
> 
> > I have been lurking here for the last month and have a question
> > about the right way to handle IE using CSS.
> > 
> > I use a master CSS file with the format as follows. To me, the
> > master file method as well as solving the 'old browser' issue, is
> > easier for another designer to approach my code.
> > 
> > /* Master CSS File */
> > @import url(layout.css);
> > @import url(colour.css);
> > @import url(fonts.css);
> > @import url(.css) all; 
> > /* 
> > For the final import line above
> > IE and AOL9/Win load a file called "url(.css) all" 
> > All other browsers load ".css"
> > */
> > 
> > Is the above IE hack considered the best CSS solution for this
> > method of loading CSS? Are there others?
> > 
> > -- 
> > Michael
> 
> I would say that there is no universally agreed best method of feeding
> IE alternative styles. The general consensus is not to hack unless you
> really need to. The method that you have shown is actually the IE
> @import hack [1] and not the propriety IE Conditional Comments which
> are added to the html. There are many alternative CSS hacks for IE [2]
> some of which result in parsing errors (invalid hacks) and some of
> which that don't (valid hacks).

Sorry, had been reading about IE Conditional Comments before wondering
if there was a newer method totally workable within CSS, hence the off
title. 

> Doing some test [3] with @import hacks I find that they can be very
> simple, scary.
> 

Scary because they are so simple or scary dangerous? 

-- 
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/

Re: [css-d] IE 5, 6, dropdown display issue

[David Laakso]

Rebecca Richter wrote:
> I've got these dropdown menus working pretty slick at 
> http://www.makemyhousegreen.com/index1.html (roll over "projects", 
> "services", or "publications"); however, in IE 5 and 6, there is much more 
> top and bottom padding than there should be. What do do about this?
>
>
> Becca 
>
>   



Add this declaration to styles for ie:
.nav a {
 height: 1%;
}

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] css tooltip doesn't work in Opera

[Luc]

Hello Giuseppe, 
It was foretold that on 09/01/2008 @ 22:28:55 GMT+ (which was
20:28:55 where I live) Giuseppe Craparotta would write:



> if you go to this page:

> http://www.giuseppecraparottacv.co.uk/TRY2.html

> and hover on "Let me tell you something more about it", you'll see a 
> pure css tooltip.
> It works fine in all browsers, apart from Opera.

Is this what you're after:

http://www.dzinelabs.com/Pages/rollovers.htm

works in opera.

 
-- 
Best regards,
 Luc
_

http://www.dzinelabs.com

Powered by The Bat! version 3.99.29 with Windows XP (build 2600),
version 5.1 Service Pack 2 and using the best browser: Opera.

"They say that money isn't everything in life. Of course, they are
talking about the money of others." - Sacha Guitry (French comedian) 


__
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] IE6/7 and Firefox CSS issue driving me mad

[David Laakso]

Chris Blake wrote:
> Please can someone help me with this, its been bugging me for ages and now
> I`ve found this list where I can hope to get it fixed with someones help.
>
> Please visit this page : http://www.pixcel.co.za/ard/index.php
>
>   

How about taking the time to see if one of the 57 markup validation 
errors and several CSS validation errors might be giving the software a 
problem? If it still does not work cross-browser the way you intend even 
with valid files, bring it back.

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/

[css-d] disappearing menu div

[Tom Bond]

 
Hi there folks,
 
This is not completely easy to describe so forgive me if it's longish.
 
I'm trying to get a menu to sit up in the head of the page. The site will 
eventually be dynamic with the client able to add/subtract pages, which will 
dynamically alter the menu. The design is by the clients daughter who is a 
print designer for whom the grid is all (fair enough), so I want to deliver on 
it but without getting semantically funky.
 
In the unlikely event the menu grows or shrinks via client whim, It needs to do 
so from it's own baseline... (that's the part that makes it a little tricky for 
me)
 
The mark-up is 'content first' so the menu is an absolutely positioned list in 
another absolutely positioned, 1 pixel high div so that the menu overflows 
upwards out of it.
 
This works in Firefox, IE6, and even IE5.5 but the whole menu (both elements) 
disappears completely in IE7. I'm a bit stumped.. here's the link:
 
http://www.atomdesign.co.nz/rh-art/a-shell.htm 
 
I've added an outline around the div/ul in question.
 
Anybody got some ideas for me?
 
Mucho thanks in advance.
 
Tom.
__
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] probably a common IE6 issue

[Julian Tulip's Licorice]

Hello,

http://johnkehm.com/hana

If you look at this page on IE6, the top nav bar has a pretty tall
bottom margin.
I put a green border around it (border may not show in IE7 or Firefox).

It may be a error on my part, but in any case can someone point me to
a good solution?

Any help would be great.

j

Here's the nav css:

/* nav */
.nav{
width: 798px;
height: 51px;
margin: 4px 0 0 0;
padding: 0;
background: url(images/navGradient.gif) top left repeat-x;
border: solid 1px green;
}

.nav ul{
width: 798px;
height: 51px;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
color: #000;
font-weight: bold;
list-style: none;
margin: 0;
padding: 0;
}

.nav ul li{
height: 51px;
margin: 0;
padding: 0;
float: left;
overflow: visible;
background: url(images/navGradientBars.gif) no-repeat;
}

.nav ul li a{
height: 51px;
font-size: 12px;
color: #000;
text-decoration: none;
display: block;
float: left;
padding: 18px 21px 0 21px; /* watch the padding */
margin: 0;
overflow: visible;
}

.nav ul li a.last, .nav ul li a:hover.last{
height: 51px;
padding: 18px 24px 0 24px;
margin: 0;
overflow: visible;
}

.nav ul li a:hover{
height: 51px;
font-size: 12px;
color: #000;
text-decoration: none;
background: url(images/navGradientOver2.gif) top left no-repeat;
display: block;
float: left;
padding: 18px 21px 0 21px; /* watch the padding */
margin: 0;
}

.nav ul li.first{
background: none;
margin: 0;
padding: 0;
}

.nav ul li.first a:hover{
background: url(images/navGradientOver.gif) top left repeat-x;
margin: 0;
padding: 0;
}

a{
font-family: arial, helvetica, sans-serif;
font-size: 11px;
color: #000;
text-decoration: underline;
margin: 0;
padding: 0;
}
__
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] italics and fixed width

[Julian Tulip's Licorice]

Hello,

I have another question about the nav bar on this site:

http://johnkehm.com/hana

when I make the link text  italic, the width of the containing boxes
vary on Firefox and IE, making my fixed width bar break apart.
I thought I read about this somewhere but I am not sure.

I tried a few fixes and got it to work on Firefox and IE6 but not IE7.

Is there anyone who has experienced this and can perhaps lend some knowledge?

As always,
J
__
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/