Re: [css-d] UL and LI Borders question

[Fred Janon]

Sorry, forgot to send my reply to the list as well...

Hello from Australia!

On 1/27/07, Fred Janon <[EMAIL PROTECTED]> wrote:
>
> I love it! So simple of a solution! How didn't I think of it! Great,
> thanks Zoe! By the way the negative margin or padding doesn't work in IE,
> depending on what doctype you use, the results are totally different an
> erratic!
>
> Brilliant, it works just right!
>
> Fred
>
>
>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
> http://www.w3.org/1999/xhtml";>
> 
> 
> 
> ul {
>list-style: none;
>border-bottom: 1px solid blue;
>}
> li {
>border: 1px solid red;
>border-bottom: 0px;
>}
>
> 
> 
> 
>
> 
> 01
> 02
> 03
> 04
> 05
> 
>
> 
> 
>
>
>  On 1/27/07, Zoe M. Gillenwater <[EMAIL PROTECTED]> wrote:
> >
> > Fred Janon wrote:
> > > I have a UL with some LIs. I want a 1px border around all the LIs with
> > no
> > > 2px border between the LIs. I have been fiddling around with the UL
> > and LIs
> > > borders but I can't find a simple solution to it. My best solution so
> > far is
> > > to have no border on the UL and the top, left, right borders for all
> > the LIs
> > > except the last one which has all 4 borders to get the bottom border.
> > >
> >
> > Depending on the styles on your ul, you could simply assign the bottom
> > border to the ul. This would allow you to avoid having to put a class on
> > the last li.
> >
> > The other ideas about negative top margins are fine as well; I just
> > wanted to throw another option out there.
> >
> > Zoe
> >
> > --
> > Zoe M. Gillenwater
> > Design Services Manager
> > UNC Highway Safety Research Center
> > http://www.hsrc.unc.edu
> >
> >
> > __
> > css-discuss [EMAIL PROTECTED]
> > http://www.css-discuss.org/mailman/listinfo/css-d
> > IE7 information -- http://css-discuss.incutio.com/?page=IE7
> > List wiki/FAQ -- http://css-discuss.incutio.com/
> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> >
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Browser alignment differences

[Matt Dawson]

Still, if you ever end up with a page where there is a small amount of
content - especially on a big screen - that container will still stretch to
the bottom of the page, leaving a largely empty column.

...but I'm glad it's working!

Try adding...
>
> html, body {height: 100%;}
> #container {min-height: 100%;}
> * html #container {height: 100%;}
>
> ...and restyle the background to avoid visible overflow...
>
> html, body {background: #fff url(../images/bg.jpg) center repeat-y; }
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Need help with fixed width floats

[Christine Masters]

 http://cmasters.townnews.com/entertainment/

>> Is there any way to make my columns line up in IE quirks mode the 
>> same as they are lining up in Firefox? What is IE quirks mode 
>> calculating differently in the box model other than padding?

>Your layout is "pixel-tight" without a single pixel to spare in width.
>IE in quirks mode also puts any borders on the inside of declared width
>instead of adding them to the width. This makes those column-floats run
>out of space (inside the bordered "page") a bit earlier in IE.

>Try adding...

>#tnent_rightadvertising {margin-right: -3px;}

That worked great Georg! I actually was able to get it to work with just 5
px margin now that I know how the math works.

Thanks again! Note to self: Avoid "pixel-tight" layouts. =)

Christine




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

Re: [css-d] Horizontal navigation styling

[Robyn M. Smith]

Thank you very much. This is something I haven't tried yet. I'm new to 
CSS and don't think of these solutions very easily. I know there must be 
a way!
I'll try this out.

Robyn

~davidLaakso wrote:
> Robyn M. Smith wrote:
>> I'm trying to find a way to have a two-color horizontal navigation 
>> area: for example, a yellow background on the left half and a blue 
>> background on the right half.
>> Robyn Smith
>>   
> Simple is difficult. Complicated is easy. And if you are even nicer to 
> Opera, all /may/ be well :-) .
> css
> html,body{ background-color: #fff; color: #000; margin: 0; padding: 0; }
> body{font: 100% arial, sans-serif; }
> div#wrapper{float:left;width:100%;margin-left:-50%; }
> div#left{ background-color: yellow; color: #000; margin-left:50%; }
> div#right{background-color: blue; color: #fff; float:right;width:49.9%; }
> ul {padding: .2em 0;margin: 0; list-style-type: none; width: 100%; 
> text-align: center; }
> li { display: inline; margin: 0 1em; }
> @media screen and (min-width: 0px){
> div#right{ width: 50%; }
> } /*be even nicer to opera and mind the last brace*/
>
> html
> 
> 
> 
> 
> Item one
> Item two
> Item three
> Item four
> Item five
> 
> 
> 
> 
> 
> Item one
> Item two
> Item three
> Item four
> Item five
> 
> 
> 
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Horizontal navigation styling

[Robyn M. Smith]

Thanks to all.

Sorry if I'm looking for answers in the wrong place. I'm new to CSS and 
perhaps don't use all the proper terms.
This is not a structural division. It's just a presentational issue.
I don't have a url, I've been testing locally. But to try and explain 
what I mean:  some sites have their About Us and Contact links off in a 
corner off the main navigation bar, usually in their own div or link 
style. I was thinking of keeping them in the same line of vision as the 
main navigation, same size, only offset them visually by background color.

Robyn

Chris Pallé wrote:
>
>
> On Jan 26, 2007, at 6:04 PM, Schalk wrote:
>
>> Create two unordered lists and float them next to each other calling the 
>>
>> one red and the other yellow:
>>
>> 
>>
>> 
>>
>> 
>>
>> 
>>
>> 
>>
>> 
>>
>> 
>>
>> 
>>
>>
>> #red-nav, #red-nav ul {
>>
>> position:relative;
>>
>> float:left;
>>
>> }
>>
>> #yellow-nav, #yellow-nav ul {
>>
>> position:relative;
>>
>> float:left;
>>
>> }
>>
>>
>> or, use a class on the li's you want a different color, for example:
>>
>>
>> 
>>
>> 
>>
>> 
>>
>> 
>>
>> 
>>
>> 
>>
>
> I'm fairly certain you can get away from "presentational" names for 
> the classes and ids. I agree with the main structuring, though. 
>
> I would favor the latter. Use a single , then, use labels that 
> make sense to the content within on the s. This will help with 
> readability. 
>>
>>> I'm trying to find a way to have a two-color horizontal navigation area:
>>> for example, a yellow background on the left half and a blue background
>>> on the right half. I've tried using nested divs to divide a navbar area
>>> into two regions with their own styling. It works, but, of course, this
>>> falls apart in older browsers, so I was looking to see if there's a way
>>> to accomplish it using the unordered list. Then I would have two style
>>> sheets.
>>>
>
> Think about the context of your content. Does it make sense to have 
> two areas from a structural standpoint? if the content is 
> significantly different from one to the other (e.g. A global 
> navigation vs. a local) then yes, go with two divs.
>
> OTH, if it's only to change presentation, keep one structural block 
> and differentiate in the properties. Just don't use presentational 
> names like hues, placement on the screen (header, footer,etc.), or 
> direction (upper, lower, right, left, etc.). Favor names that describe 
> the content being contained. 
>
> Is this valid conversation for this list? Kind of a semantics/mark-up 
> discussion Sorry if I'm OT.
>
>>> I haven't been successful yet and thought maybe this has already been
>>> done in CSS somewhere. I saw something similar at designdetector.com,
>>> but I'm only looking to do two colors. From what I can see of that
>>> source code, it looks a bit complicated.
>>>
>>> Of course, I could create a table, which might be easier, but do I want
>>> to do that?
>
> NO. Don't do that... that sounds more like a threat. ;-)
>
>>>
>>> Any tips, suggestions, alternatives are greatly welcomed.
>>>
>
> Do you have link we can look at?
>
>>> Robyn Smith
>
>
> chris.pallé, interactive media designer
> 
> [EMAIL PROTECTED] 
> 
>
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Inline Pseudo-Classes/Elements

[David Dorward]

On 26/01/07, Jonathan Berry <[EMAIL PROTECTED]> wrote:
> Hello all,
> I found this on a W3C working draft (http://www.w3.org/TR/css-style-attr),
> but it doesn't seem to be supported by either Mozilla or IE. Any knowledge
> of this, Oh CSS gurus?

It was an idea that was thrown about a few years ago. Nothing came of it.

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

Re: [css-d] Need help with fixed width floats

[Gunlaug Sørtun]

Christine Masters wrote:

>>> http://cmasters.townnews.com/entertainment/

> Is there any way to make my columns line up in IE quirks mode the 
> same as they are lining up in Firefox? What is IE quirks mode 
> calculating differently in the box model other than padding?

Your layout is "pixel-tight" without a single pixel to spare in width.
IE in quirks mode also puts any borders on the inside of declared width
instead of adding them to the width. This makes those column-floats run
out of space (inside the bordered "page") a bit earlier in IE.

Try adding...

#tnent_rightadvertising {margin-right: -3px;}

...any value from -1px to -10px will probably be ok.
This will pull in the 'backside margins' on that floating element and it
will be calculated that much narrower than it really is - giving IE its
much needed space.

No need to hide this addition from other browsers, as they could all do
with a bit of extra space in that layout and such a negative backside
margin won't show up _there_. Don't put such a 'negative backside
margin' on other elements in that layout though, as that will definitely
have a negative effect on alignment.

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

Re: [css-d] Horizontal navigation styling

[~davidLaakso]

Robyn M. Smith wrote:
> I'm trying to find a way to have a two-color horizontal navigation area: 
> for example, a yellow background on the left half and a blue background 
> on the right half. 
>
> Robyn Smith
>   
Simple is difficult. Complicated is easy. And if you are even nicer to 
Opera, all /may/ be well :-) .
css
html,body{ background-color: #fff; color: #000; margin: 0; padding: 0; }
body{font: 100% arial, sans-serif; }
div#wrapper{float:left;width:100%;margin-left:-50%; }
div#left{ background-color: yellow; color: #000; margin-left:50%; }
div#right{background-color: blue; color: #fff; float:right;width:49.9%; }
ul {padding: .2em 0;margin: 0; list-style-type: none; width: 100%; 
text-align: center; }
li { display: inline; margin: 0 1em; }
@media screen and (min-width: 0px){
div#right{ width: 50%; }
} /*be even nicer to opera and mind the last brace*/

html




Item one
Item two
Item three
Item four
Item five





Item one
Item two
Item three
Item four
Item five




-- 
http://chelseacreekstudio.com/

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

[css-d] IE 5.5 & 6.0 render problem. Stumped.

[Jeroen]

I've been editing a theme for my gallery software to my liking, and
think I understand the CSS that it's using. However i have render
problems in IE 5.5 and 6 which i just can't fix. I haven't got a clue
what's causing it.

The URL is: http://jg.intellit.nl/cm

Problem is that IE adds about 20-30px spacing on the right. I really
have no clue where to look for, AFAIK everything is ok. It's does not
validate 100% but i don't think that's the problem.

If someone would have a look i would be very grateful ;)

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

[css-d] Inline Pseudo-Classes/Elements

[Jonathan Berry]

Hello all,
I found this on a W3C working draft (http://www.w3.org/TR/css-style-attr),
but it doesn't seem to be supported by either Mozilla or IE. Any knowledge
of this, Oh CSS gurus?

http://www.w3.org/"; style="{color: #900} :link {background:
#ff0} :visited
{background: #fff} :hover {outline: thin red solid} :active {background:
#00f}::first-letter {color: #900}">...

Thanks in advance.

-- 
Jonathan Berry, M.A.
IT Consultant
619.306.1712(m)
[EMAIL PROTECTED]
www.mindarc.com

---

This E-mail is covered by the Electronic Communications Privacy Act, 18
U.S.C. ?? 2510-2521 and is legally privileged.
This information is confidential information and is intended only for
the use of the individual or entity named above. If the reader of this
message is not the intended recipient, you are hereby notified that any
dissemination, distribution or copying of this communication is strictly
prohibited.

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

Re: [css-d] Need help with fixed width floats

[Christine Masters]

> Christine Masters wrote:
> > Anyway, I've gotten it to work well in Firefox, but I'm having some 
> > trouble working with IE.
 
> > http://cmasters.townnews.com/entertainment/
 
> The line-up will be improved in IE6 when the 'margin-doubling on floats'
> bug is "killed".
 
> The addition of...
 
> #tnent_movies_container, #tnent_fun_container, #tnent_food_container {
> display: inline;
> }

>...should take care of what you have there now.

Hi everyone!

I have made these changes (adding display: inline; to all of my container
floats) and it still has a display problem in IE. For some reason, IE
calculates my columns to be wider and it ends up kicking my far right column
down.

Unfortunately my content management system adds a comment before the doctype
declaration, and we're unable to change it. So, it seems I will always be
working with IE in quirks mode.

Is there any way to make my columns line up in IE quirks mode the same as
they are lining up in Firefox? What is IE quirks mode calculating
differently in the box model other than padding?

Thanks so much in advance!

Christine Masters


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

Re: [css-d] Horizontal navigation styling

[Schalk]

Robyn,

I guess you can go one of two ways:

Create two unordered lists and float them next to each other calling the 
one red and the other yellow:









#red-nav, #red-nav ul {
position:relative;
float:left;
}
#yellow-nav, #yellow-nav ul {
position:relative;
float:left;
}

or, use a class on the li's you want a different color, for example:








This has not been tested so I may be off here, but it makes sense.

HTH

Robyn M. Smith wrote:
> I'm trying to find a way to have a two-color horizontal navigation area: 
> for example, a yellow background on the left half and a blue background 
> on the right half. I've tried using nested divs to divide a navbar area 
> into two regions with their own styling. It works, but, of course, this 
> falls apart in older browsers, so I was looking to see if there's a way 
> to accomplish it using the unordered list. Then I would have two style 
> sheets.
>
> I haven't been successful yet and thought maybe this has already been 
> done in CSS somewhere. I saw something similar at designdetector.com, 
> but I'm only looking to do two colors. From what I can see of that 
> source code, it looks a bit complicated.
>
> Of course, I could create a table, which might be easier, but do I want 
> to do that?
>
> Any tips, suggestions, alternatives are greatly welcomed.
>
> Robyn Smith
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
>   

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

[css-d] IE 6 rendering problem.

[Scott Wolff]

I am having a problem rendering a CSS styled unordered list in IE 6. 
 
I'm using the list as a navigation system, and I've also used a javascript 
library to make a "flyout" menu from the list.  You can browse the site using 
the following site (you'll only see the problem if you're using IE 6):
 
http://healthfirs1.web140.discountasp.net
 
I'm by no means a css expert, but it seems that something is happening to 
prevent the styles from being applied to the list elements.
 
Is there a way to work around this problem, or am I doing something wrong?
 
You can inspect the two css files here:
 
fonts: http://healthfirs1.web140.discountasp.net/css/all.css
 
layout: http://healthfirs1.web140.discountasp.net/css/main-page.css
 
Any help is appreciated!
 
Sincerely, 
Scott
 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Horizontal navigation styling

[Robyn M. Smith]

I'm trying to find a way to have a two-color horizontal navigation area: 
for example, a yellow background on the left half and a blue background 
on the right half. I've tried using nested divs to divide a navbar area 
into two regions with their own styling. It works, but, of course, this 
falls apart in older browsers, so I was looking to see if there's a way 
to accomplish it using the unordered list. Then I would have two style 
sheets.

I haven't been successful yet and thought maybe this has already been 
done in CSS somewhere. I saw something similar at designdetector.com, 
but I'm only looking to do two colors. From what I can see of that 
source code, it looks a bit complicated.

Of course, I could create a table, which might be easier, but do I want 
to do that?

Any tips, suggestions, alternatives are greatly welcomed.

Robyn Smith

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

[css-d] Image height ignored for div height in IE6

[Aleve Sicofante]

Hi,

I'm experiencing a problem with IE6. I have a div that takes its size from
its content, which is both text and one image. In Firefox and IE7 the height
of the div is properly calculated, but in IE6 only text is taken into
account.

You can see the effect here: http://www.vieira.es/test/index.html

(This will be noticed in 1280 x 1024 or higher full screen. Lower
resolutions won't show the issue.)

Do you guys know why and how can this be solved?

Thanks for any help.

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

Re: [css-d] not stretching to accomodate inline element heights

[Ed Seehouse]

On 1/26/07, martin f krafft <[EMAIL PROTECTED]> wrote:

> >  li a  {display: block;}

> If I do this, then the entire navigation bar will be horizontal all
> of a sudden:

I don't see why.  All that rule says is that every a element inside an
li element should be displayed in block format.

Oh ... wait, I see you are lining up your li elements horizontally by
giving them display: inline;  rule. Yeah, that would cause a problem
with my suggestion alright.

But  I suggest it's better to do it by floating the li elements left.
That's much more flexible for styling purposes, and if you do that you
should make the a elements render as blocks as suggested in my
original reply.  Block level elements are more flexible and easier to
style in my experience.


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

Re: [css-d] Using CSS for inline formatting

[Ed Seehouse]

On 1/26/07, Zoe M. Gillenwater <[EMAIL PROTECTED]> wrote:

> No offense to the microformats advocates, but I think this data ought to
> be in a table. It will be much more accessible that way, and easier for
> you to style to boot.

Agreed.  It's tabular in nature and each column has a distinct
meaning.  Semantically it belongs in a table.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Browser alignment differences

[Daniel Hammond]

| Try adding...
| html, body {height: 100%;}
| #container {min-height: 100%;}
| * html #container {height: 100%;}
| ...and restyle the background to avoid visible overflow...
| html, body {background: #fff url(../images/bg.jpg) center repeat-y; }

Perfect. That took care of both of my issues. Thanks so much, Georg.

Daniel Hammond
2227 Dunseath Ave.
Atlanta, GA 30318
770-842-8817
www.objectivedesigns.com


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

[css-d] three issues: div to align bottom, firefox: text not placed correctly unless you refresh, and ie has the text run outside of div

[Copeland]

http://www.copelandcasati.com/test/steelisgreen/about.htm 

 

Three issues, any help is VALUABLE!

1.  I want the sun to align to the bottom of that leftnav bar and can't
achieve it
2.  in Firefox the text has huge gaps in it next to photos UNTIL you hit
"refresh"
3.  In IE (I don't know it was at a clients today but I suspect it's 7
as it looked kinda Mac-ish) the text runs down over the bottom div, it's as
if it has a minimum height that doesn't expand with the amount of content.

 

Any help is appreciated!!

 

 

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

Re: [css-d] IE 6 & 7 css problems

[Jesse Skinner]

John M Shepard wrote:
> I have a problem with a practice site I put up at: www.mypracticesite.com.
> There seems to be a problem in the css for the subpages rendering properly
> in IE 6 & 7 on a Windows based machine.

I believe you have one too many  tags immediately before the 
element . Remove one and it seems to work ok.

Cheers,

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

Re: [css-d] not stretching to accomodate inline element heights

[martin f krafft]

also sprach Zoe M. Gillenwater <[EMAIL PROTECTED]> [2007.01.26.1952 +]:
> Give the ul the same amount of top and bottom padding. That's how 
> padding works on inline elements -- it pushes out content to the left 
> and right, but not above and below. The linebox doesn't expand to hold 
> that padding. So you have to expand the linebox yourself.

You got it. Thanks a lot!

-- 
martin;  (greetings from the heart of the sun.)
  \ echo mailto: !#^."<*>"|tr "<*> mailto:"; [EMAIL PROTECTED]
 
spamtraps: [EMAIL PROTECTED]
 
"arguments are extremely vulgar,
 for everyone in good society
 holds exactly the same opinion."
-- oscar wilde


signature.asc
Description: Digital signature (GPG/PGP)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Inline CSS - affecting elements

[Ryan Keefer]

Hey all, I've got a template where I've got to use only inline CSS  
*sigh* with no style sheet reference in the  tag.

Obviously, this has some limitations. Is there a way to affect all  
tags in a given area with inline CSS?

Example.

I basically want the effect of this:

#header p
{
margin: 5px 0;
background: #fff;
color: #000;
}

except inline. Is that possible?

I don't have the option of putting it inline in each  tag  
individually like this:



Paragraph #1



Paragraph #2



Any ideas or suggestions?

Thanks,
Keefer


Ryan Keefer
Developer
Ulanguzi Creative Strategies
www.ulanguzi.com



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

Re: [css-d] Using CSS for inline formatting

[Zoe M. Gillenwater]

Christina Hope wrote:
> Basically this is close...I probably should explain it a bit better.
> Basically I'm looking for the "look of tables" but without using tables.
> So I need everything that should be a column ex - fn, department, role,
> note etc. to left align in what would be the cell in the table. 

No offense to the microformats advocates, but I think this data ought to 
be in a table. It will be much more accessible that way, and easier for 
you to style to boot.

Zoe

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


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

Re: [css-d] not stretching to accomodate inline element heights

[Zoe M. Gillenwater]

martin f krafft wrote:
>   http://seamus.madduck.net/~madduck/abacons6/leistungen/1.html
>   http://seamus.madduck.net/~madduck/abacons6/css/screen.css
>
> If you look at the top menu bar as well as the subcategories below
> the page's , you'll see how the vertical padding on the 
> elements (as well as ) I was using to try to make the
> navigation bars a bit thicker doesn't actually do what I want.
>
> How can I ensure that the  (which has the outside border)
> stretches vertically to accomodate the taller  elements it
> contains?
>   

Give the ul the same amount of top and bottom padding. That's how 
padding works on inline elements -- it pushes out content to the left 
and right, but not above and below. The linebox doesn't expand to hold 
that padding. So you have to expand the linebox yourself.

Zoe

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


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

[css-d] Styling a code listing

[Thierry Koblentz]

My apologies for cross-posting

I'd appreciate any comment that would help me improve this article:
http://www.tjkdesign.com/articles/how_to_style_a_code_listing.asp

Thanks.
---
Regards,
Thierry | www.TJKDesign.com

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

Re: [css-d] Browser alignment differences

[Zoe M. Gillenwater]

Daniel Hammond wrote:
> Sadly, none of that did anything to fix the problem. Any ideas on making the
> container extend down to 100% of the vertical space?

Keep in mind that once you have content in the page this will probably 
become a non-issue. I wouldn't worry about it.

Zoe

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


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

Re: [css-d] not stretching to accomodate inline element heights

[martin f krafft]

> "A" is an inline element and so of course rules designed for
> application to block elements won't work.  Fortunately you can make
> them work with "display: block;" - for example
> 
>  li a  {display: block;}

If I do this, then the entire navigation bar will be horizontal all
of a sudden:

  http://seamus.madduck.net/~madduck/abacons6/leistungen/1.html

Thanks Ed for your response. Is there anything else I can try?

I don't quite understand why an inline element's height wouldn't
force the enclosing element's height but rather overflow...

-- 
martin;  (greetings from the heart of the sun.)
  \ echo mailto: !#^."<*>"|tr "<*> mailto:"; [EMAIL PROTECTED]
 
spamtraps: [EMAIL PROTECTED]
 
"wenn elephanten tanzen leidet das gras."
 -- die vogelpredigt


signature.asc
Description: Digital signature (GPG/PGP)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floats and 100% height ...

[Zoe M. Gillenwater]

Grady Kelly wrote:
> I am building a UI for a web application.  I am using 100% heights for a lot
> of the outer elements, like this:
>
>  - this has 100% height
>  - this has 100% height
>  - this has 100% height
>  - this has 100% height
> 
>
> this works all fine and dandy.  the problem that I am having however, is
> with divs inside div1, div2 and div3.  When I give these divs 100% height,
> they end up being 100% the height of the browser window, not the containing
> div.  When viewed in a browser, I end up with a certain number of pixels
> whitespace at the bottom of the page.  That make sense?  Is there a way to
> give divs 100% height of their parent?
>   

That's what they are doing. Their parents have a height equivalent to 
the browser viewport because *their* parents (wrapper, and then body, 
and then html) have a height equivalent to the browser viewport because 
that's what 100% equals when there's no parent with a height other than 
"viewport" set. They each fill up their parent, and you haven't told any 
of them to *not* be the height of the viewport. We'll need to see a page 
to figure out what height you really want and help you set it.

Zoe

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


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

[css-d] test

[KJ'[EMAIL PROTECTED]]

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

Re: [css-d] CSS and 508 compliance

[Zoe M. Gillenwater]

Jim wrote:
> Would anyone in the U.S. have any tips regarding Section 508 compliance, or 
> any links to sites that may have CSS tips?
>   

Section 508 and CSS have very little to do with one another. The only 
Section 508 requirements with a CSS implication is the rule to not have 
information conveyed only in color, and of course the rule to make sure 
sites are readable without CSS. This, however, is mainly accomplished 
with proper markup and logical source order. An easy way to test it is 
to view your page in a text browser or with the styles turned off (using 
the Web Developer toolbar or similar tools).

Now, if you're talking about accessibility in general, not just 508 
(which is really the bare minimum), there are more CSS implications, but 
most of it has to do with markup and scripting. I don't really know what 
you are specifically looking for, so I'll just recommend the book Web 
Accessibility from friendsofed as a good source.

Zoe

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


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

Re: [css-d] New With Problems

[Zoe M. Gillenwater]

Marian,

One thing to note about all your pages: they contain a number of 
validation errors, and cleaning these up first should be done before any 
of the other things I mention. It's the best start towards a well 
rendering page.

Marian Rosenberg wrote:
> http://www.anandatour.com.cn/test/index.html
> Looks great in Mozilla.  Text can be scaled up/down with no problems.  For
> some reason, however, IE refuses to align my 3 columns correctly.  I keep
> getting 2 columns + 1.  I thought the problem was that div id=main has
> margins of 4% and it isn't accepting that these divs are inside that div so
> is adding the percents together.  But, when I get rid of main altogether and
> change the column widths in the CSS so that it definitely adds up to 100% it
> still won't line up right.
>   

IE has problems computing percentages when the parent element doesn't 
have a width declared (which is what the percentage widths are based 
on). Try declaring a width on #main.

If that doesn't work, I would suggest simplifying the layout you have 
now. If it's an acceptable source order, I'd move the left column first 
in the source and float it left with an assigned width and no margins. 
Move the third column second in the source and float it right with an 
assigned with and no margins. Then just let the third column be in the 
flow with no width declared so it just takes up the rest of the space. 
Give it some side margins to keep it from touching the side columns. 
Leaving this column flexible should leave room for IE to get dimensions 
wrong without falling apart.

> http://www.anandatour.com.cn/test/beachinfo.html
> My nemesis.  Looks great in Mozilla.  Internet Explorer insists on having
> the table start right under the end of the paragraph introducing people to
> the beaches.  I had kept tables here in the first place because it was the
> only way I could figure out how to have "Sanya" start underneath the picture
> of the woman on the beach.
>   

I don't know how to work with tables any more, but I know that if I was 
going to recreate this page with CSS, I'd float the Hainan image left 
and add a float containment method 
(http://css-discuss.incutio.com/?page=ClearingSpace) to the Hainan div. 
Then I'd just add a clear to the Sanya header and it would start below 
the Hainan image.

> http://www.anandatour.com.cn/test/hotel.html
> Hey, this one actually works in both browsers!  Yay!
> And it looks cool too.
>   

The only thing I want to say about this page is *please* remove all that 
redundant and useless alt text on that sliced map image. It is making 
your page less accessible, not more: imagine using a text browser or 
screen reader and having to see or hear the text "clickable sliced map 
of Hainan" over and over again. It has nothing to do with CSS, I just 
noticed it and wanted to point it out.

Zoe

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


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

Re: [css-d] UL and LI Borders question

[Zoe M. Gillenwater]

Fred Janon wrote:
> I have a UL with some LIs. I want a 1px border around all the LIs with no
> 2px border between the LIs. I have been fiddling around with the UL and LIs
> borders but I can't find a simple solution to it. My best solution so far is
> to have no border on the UL and the top, left, right borders for all the LIs
> except the last one which has all 4 borders to get the bottom border.
>   

Depending on the styles on your ul, you could simply assign the bottom 
border to the ul. This would allow you to avoid having to put a class on 
the last li.

The other ideas about negative top margins are fine as well; I just 
wanted to throw another option out there.

Zoe

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


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

Re: [css-d] Ahhh! Why can't I find you? Degrading Popup (CSS only?)

[Andy Harrison]

I stand corrected; thanks for the reference.  :-)

Andy

On 1/26/07, Chris Ovenden <[EMAIL PROTECTED]> wrote:
>
> IE doesn't get thrown into quirks mode just becuase it finds some tag soup
> in the body. The switch is in the 
>
> http://en.wikipedia.org/wiki/Quirks_mode#Triggering_different_rendering_modes
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Browser alignment differences

[Gunlaug Sørtun]

Daniel Hammond wrote:

> Any ideas on making the container extend down to 100% of the vertical
>  space?

Try adding...

html, body {height: 100%;}
#container {min-height: 100%;}
* html #container {height: 100%;}

...and restyle the background to avoid visible overflow...

html, body {background: #fff url(../images/bg.jpg) center repeat-y; }


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

[css-d] IE 6 & 7 css problems

[John M Shepard]

Hi there.

I have a problem with a practice site I put up at: www.mypracticesite.com.
There seems to be a problem in the css for the subpages rendering properly
in IE 6 & 7 on a Windows based machine.

Any help would be great.

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

Re: [css-d] Browser alignment differences

[Matt Dawson]

>
> Sadly, none of that did anything to fix the problem. Any ideas on making
> the
> container extend down to 100% of the vertical space?



Well, for starters, you might want to think about changing your use of that
background image. If you make the container div wide enough to contain the
image bg image(looks to be approx. 750px?), tile the image down that, and
then wrap the content in another div, you'll have more flexibility.
Ultimately, you probably won't want the shadow to tile all the way down to
the bottom of the page if the content isn't long enough to fill the screen.
If that's the case, you'll want to learn how to clear a container (
http://www.quirksmode.org/css/clearing.html). Clearfixing (google it) is
another option.

This is also likely to fix your current borders problem.

IMO, it's hard to do too much layout testing until you have more dummy
content on the page. You may want to beef up your html with some more test
material (like columns, images, text, etc)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Browser alignment differences

[Daniel Hammond]

| ...place your text-align: center 
| declaration on the body, not on the container. (That is, I 
| think you intend to use this to correctly center your layout 
| for IE 5. If that's the case, put it on the body element
| instead.) That *might* fix your problem.
| 
| ...shrink the image by two pixels, and 
| bring your border inside the body background image
| ...overlapping like this makes things unnecessarily 
| complicated and might also be contributing to this problem 
| you're seeing in IE.

Sadly, none of that did anything to fix the problem. Any ideas on making the
container extend down to 100% of the vertical space?

Daniel Hammond
2227 Dunseath Ave.
Atlanta, GA 30318
770-842-8817
www.objectivedesigns.com

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

Re: [css-d] 3 Column Layout, first 2 Columns fixed width?

[Grady Kelly]

Thanks Everyone for the help!

I was able to tweak Chris's example to accomplish the layout that I am
needing.

I think that because I was just starting using floats for positioning, that
I did not even thing to absolute position them.

Thanks Again!

Grady

On 1/25/07, Chris Pallé <[EMAIL PROTECTED]> wrote:
>
> On Jan 25, 2007, at 5:26 PM, Grady Kelly wrote:
>
> > The design is basically a 3 column layout, the first two columns
> > have fixed
> > widths, and the third column is liquid, or rather, its width takes
> > up the
> > rest of the window.
> >
> > I tried floating them in a wrapper div, and of course, I can do it,
> > but I
> > cannot seem to get the third column to be liquid.  If I give it a
> > width of
> > 100% it craps out on me.
> >
> > Am I overlooking something?
>
> A link would be helpful.
>
> My first thought is that the third col. would 100% of it's container
> element. it's going to have issues if it's up against the others
> inside the same wrapper.
>
> I would think that since the first two are fixed, you should
> absolute: position them and try letting the third just occupy the
> remaining space. Applying styles to taste on the inside elements of
> the third.
>
> Whether you float or absolute position, they will be out of the
> document flow. So, you will need to position the third equal to the
> two widths (don't forget margins and padding of the first two columns)
>
> I would need to see the context in which you're trying accomplish
> this to see if this is a fit, though.
>
> Here: http://bfi.blueflameinteractive.com/3_col_3rd_Slider.htm
>
> chrispallé, interactive media designer
> 
> [EMAIL PROTECTED]
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>



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

Re: [css-d] Follow up/heads-up on url(.css) screen hack

[Gunlaug Sørtun]

Chris Ovenden wrote:
> Some may disagree, but I feel "* html" is completely safe and 
> future-proof. We know precisely which browsers it hits, and their 
> behaviour is frozen forevermore.

I agree :-)
...we know - now!

To quote myself from back in 2005:
 "I see the arrival of IE7 as an opportunity to put IE6 amongst the
dead browsers. “Hacking the dead” is a great pass-time activity for
bored web carpenters – once the living have received proper attention."[1]

However, some may remember all the fuss back when the IE-team decided to
make that "* html" hack fail in IE7' 'standard mode'. Some clearly
wasn't prepared for the loss of what they thought was "a future-safe IE
hack", and some found it frustrating when their hacking-strategy "failed".
This will happen again, and again, and again.

regards
Georg

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

Re: [css-d] Site Check please

[Arthur Maloney]

Hello Taryn,

Friday, January 26, 2007, 1:33:55 PM, you wrote:

> Hi everyone-

> Can I please get a site check on http://ifpsm.ism.ws/

> Especially on a mac and IE 7.

using:
Laptop 1680x1050 132% normal Size (127 dpi)Windows XP SP2
IE7

Note I'm using a laptop contrast light Grey/white for reading not to good

Other than contrast looks OK. Officer picture gallery looks good,
navigates simply and well

no infelicities spotted

It works for me.

-- 
Best regards,
 Arthurmailto:[EMAIL PROTECTED]

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

Re: [css-d] Browser alignment differences

[Matt Dawson]

I'm not sure if this will actually fix your problem, but I think you
intended to place your text-align: center declaration on the body, not on
the container. (That is, I think you intend to use this to correctly center
your layout for IE 5. If that's the case, put it on the body element
instead.) That *might* fix your problem.

Also not a direct answer, but I notice that in FF, the black 1px border on
your h1 overlaps your body background image by one pixel on each side.
Wouldn't it be easier to shrink the image by two pixels, and bring your
border inside the body background image? I've found that overlapping like
this makes things unnecessarily complicated - and might also be contributing
to this problem you're seeing in IE.

Let us know if that helps.

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

Re: [css-d] IE6 Problem: an overflow:auto; width:100% inside a 100% table gets Bugy

[Shlomi Asaf]

for some reasons the links havent been pasted corectly:
me inside a table >
http://www.webcssdesign.34sp.com/me/flashoo/mePoorTable.html
me without table >
http://www.webcssdesign.34sp.com/me/flashoo/meWithoutTable.html

thanks for whom who will help

Neo

On 1/26/07, Shlomi Asaf <[EMAIL PROTECTED]> wrote:
>
> Hi
> here r two pages:
> me without table & me inside a table
> as u can see, the PRE element is OverFlow:Auto inside a 95% width table
> displays worse. (in IE6 (haven't tested on IE7))
> why is that? can i correct this bug?
>
> thanks a lot
>
> NeoSwf
>
> --
> www.webcssdesign.34sp.com




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

Re: [css-d] not stretching to accomodate inline element heights

[Ed Seehouse]

On 1/26/07, martin f krafft <[EMAIL PROTECTED]> wrote:
> Dear list,

> If you look at the top menu bar as well as the subcategories below
> the page's , you'll see how the vertical padding on the 
> elements (as well as ) I was using to try to make the
> navigation bars a bit thicker doesn't actually do what I want.

"A" is an inline element and so of course rules designed for
application to block elements won't work.  Fortunately you can make
them work with "display: block;" - for example

 li a  {display: block;}

That will fix up all "a" elements nested inside an "li" element.

For ie it's best to give "a" elements inside "li" elements a "height:
100%;" rule, too.

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

Re: [css-d] Site Check please--taryn regish

[~davidLaakso]

Taryn Regish wrote:
> Can I please get a site check on http://ifpsm.ism.ws/
> Especially on a mac and IE 7.
re: xp

Performed well for me in ie/7.0 through ie/5.01. FWIW, there are 
vertical gaps between the menu items in ie/5.01, but the menu and pages 
are perfectly usable. There is an interesting optical illusion (at least 
for me) when the pages are viewed at 1280 and up. At those higher 
resolutions there is a subtle illusion that the pages are broken. This 
is because the primary content block and the body background-color are 
both #fff. Changing the body background-color to #ddd (or whatever does 
it for you) corrects this. It bothered me a little that it seemed the 
only way to get back to the parent file is via the back button.

Best,
~dL

-- 
http://chelseacreekstudio.com/

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

[css-d] not stretching to accomodate inline element heights

[martin f krafft]

Dear list,

I am fighting with

  http://seamus.madduck.net/~madduck/abacons6/leistungen/1.html
  http://seamus.madduck.net/~madduck/abacons6/css/screen.css

If you look at the top menu bar as well as the subcategories below
the page's , you'll see how the vertical padding on the 
elements (as well as ) I was using to try to make the
navigation bars a bit thicker doesn't actually do what I want.

How can I ensure that the  (which has the outside border)
stretches vertically to accomodate the taller  elements it
contains?

Thanks for any tips,

-- 
martin;  (greetings from the heart of the sun.)
  \ echo mailto: !#^."<*>"|tr "<*> mailto:"; [EMAIL PROTECTED]
 
spamtraps: [EMAIL PROTECTED]
 
fighting for peace is like screwing for virginity.
 -- the irish times, washington dc


signature.asc
Description: Digital signature (GPG/PGP)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Browser alignment differences

[Daniel Hammond]

Here's the URL:
www.objectivedesigns.com/2

Everything is correct in FF and Opera, but IE shifts the container/header
one pixel to the left. You can see it if you look closely and compare the
edges in relation to the background gradients.

Also, I want the black left and right borders of the container to extend all
the way to the bottom of the screen. Would that be a min-height issue?

Daniel Hammond
2227 Dunseath Ave.
Atlanta, GA 30318
770-842-8817
www.objectivedesigns.com


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

Re: [css-d] Site Check please

[Chris Ovenden]

Seems fine in IE7

On 1/26/07, Taryn Regish <[EMAIL PROTECTED]> wrote:
>
> Hi everyone-
>
> Can I please get a site check on http://ifpsm.ism.ws/
>
> Especially on a mac and IE 7.
>
>
-- 
Chris Ovenden

http://thepeer.blogspot.com
"Imagine all the people / Sharing all the world"
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Follow up/heads-up on url(.css) screen hack

[Chris Ovenden]

Some may disagree, but I feel "* html" is completely safe and future-proof.
We know precisely which browsers it hits, and their behaviour is frozen
forevermore.

On 1/26/07, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:
>
>
> There's no such thing as a 'safe bug/hack', only some that are a bit
> safer than others.
>
>
-- 
Chris Ovenden

http://thepeer.blogspot.com
"Imagine all the people / Sharing all the world"
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Site Check please

[George Ornbo]

> Hi everyone-
>
> Can I please get a site check on http://ifpsm.ism.ws/
>
> Especially on a mac and IE 7.
>
> Thanks.

No problems in Safari, Camino and FF on Mac.

Cheers
George

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

[css-d] Site Check please

[Taryn Regish]

Hi everyone-

Can I please get a site check on http://ifpsm.ism.ws/

Especially on a mac and IE 7.

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

[css-d] IE6 Problem: an overflow:auto; width:100% inside a 100% table gets Bugy

[Shlomi Asaf]

Hi
here r two pages:
me without 
table&
me
inside a 
table
as u can see, the PRE element is OverFlow:Auto inside a 95% width table
displays worse. (in IE6 (haven't tested on IE7))
why is that? can i correct this bug?

thanks a lot

NeoSwf

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

Re: [css-d] Follow up/heads-up on url(.css) screen hack

[Gunlaug Sørtun]

Barney Carroll wrote:
> The syntax for @import is pretty unique for CSS, to be fair to IE 
> (we're always so patronising).

Well, @import has been around for a while...
It has also been used as a filter to block out old browsers, for years -
without the media-attribute.

> I google searched the w3.org but couldn't find a list of recognised 
> media types. Does 'all' come into it? Would be better than 'screen',
>  seeing as IE cannot discriminate in this respect.

We can use 'all'...

...but I haven't tested if IE handles that differently. Other browsers
won't.

I can switch media-attribute today, because I am using @media rules
inside my stylesheets anyway. That's also a standard rule that
conveniently doubles as a hack/blockage against old browser-versions.

> I still think the advantage of being able to specify, in one line, 
> one stlyesheet to be read /exclusively/ by compliant browsers and 
> another to be read /exclusively/ by IE is priceless. Something that 
> conditional comments can't do is to tell IE not to read a stylesheet,
>  but let it through to the rest.

We have some valid variants of the "down-level conditional comment", so
sure we can exclude IE/win that way.

> There's something dangerously beautiful about a statement which makes
>  two convenient kinds of sense.

It is indeed a convenient solution :-)
It _is_ also a dangerous one - especially for the less experienced, so
I'll still hold up a warning sign.

Now, go look for any traps that we may not have uncovered so far.

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

Re: [css-d] Follow up/heads-up on url(.css) screen hack

[Barney Carroll]

Gunlaug Sørtun wrote:
> The IE-bug that makes the '@import hack' work, also prevents proper use
> of attributes on a standardized property. This means it put limitations
> on future use of same property, and will continue to do so for as long
> as our support for those same buggers is a necessary part of web design.

The syntax for @import is pretty unique for CSS, to be fair to IE (we're 
always so patronising).

I google searched the w3.org but couldn't find a list of recognised 
media types. Does 'all' come into it? Would be better than 'screen', 
seeing as IE cannot discriminate in this respect.

I still think the advantage of being able to specify, in one line, one 
stlyesheet to be read /exclusively/ by compliant browsers and another to 
be read /exclusively/ by IE is priceless. Something that conditional 
comments can't do is to tell IE not to read a stylesheet, but let it 
through to the rest.

There's something dangerously beautiful about a statement which makes 
two convenient kinds of sense.

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

Re: [css-d] Ahhh! Why can't I find you? Degrading Popup (CSS only?)

[Chris Ovenden]

IE doesn't get thrown into quirks mode just becuase it finds some tag soup
in the body. The switch is in the http://en.wikipedia.org/wiki/Quirks_mode#Triggering_different_rendering_modes

Chris

On 1/26/07, james shannon <[EMAIL PROTECTED]> wrote:
>
> I'd imagine Andy meant that IE won't internally be able validate it
> (because it "sees through" the comments to something that's invalid)
> -- thus IE will degrade to quirks mode and a lot of other things you
> had designed under the assumption that IE would be in standards mode
> will be "off".
>
> james
>
>
> On Jan 25, 2007, at 3:53 PM, muskokee wrote:
>
> > Hmm.  When I use the validation tools, the xhtml (strict) validates
> > and the
> > css would validate (except for the "hand" cursor property which
> > doesn't
> > exist) in firefox 2.0, 1e6 and ie7.
> >
> >
> > On 1/25/07, Andy Harrison <[EMAIL PROTECTED]> wrote:
> >>
> >> On 1/25/07, muskokee <[EMAIL PROTECTED]> wrote:
> >>>
> >>> Take a look at this page.
> >>>
> >>> http://www.cssplay.co.uk/menu/balloons.html
> >>>
> >>> This is an excellent css pop-up.
> >>>
> >>
> >> This is a surprising solution!  I personally wouldn't use it since
> >> the
> >> conditional comments make the HTML invalid when using IE --
> >> there's tables
> >> inside hyperlinks -- hence it's forced into quirks mode.
> >>
> >> Andy
> >>
> > __
> > css-discuss [EMAIL PROTECTED]
> > http://www.css-discuss.org/mailman/listinfo/css-d
> > IE7 information -- http://css-discuss.incutio.com/?page=IE7
> > List wiki/FAQ -- http://css-discuss.incutio.com/
> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>



-- 
Chris Ovenden

http://thepeer.blogspot.com
"Imagine all the people / Sharing all the world"
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Need help with fixed width floats

[Gunlaug Sørtun]

Christine Masters wrote:
> Anyway, I've gotten it to work well in Firefox, but I'm having some 
> trouble working with IE.

> http://cmasters.townnews.com/entertainment/

The line-up will be improved in IE6 when the 'margin-doubling on floats'
bug is "killed".

The addition of...

#tnent_movies_container, #tnent_fun_container, #tnent_food_container {
display: inline;
}

...should take care of what you have there now.

Floats are 'block-elements' and can't become 'inline', so this "bug
killer" hack will only affect those browser-versions that have this
particular bug.


Regarding the box model: both IE6 and IE7 will go into 'standard mode'
and use the W3C box model if you delete the comment you have placed
above the doctype declaration. Won't experience any difference between
Firefox' and IE7' rendering then, and IE6 will also behave well when its
margin-bug is dealt with.
Better place that comment somewhere else in the document - if at all
possible.

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

[css-d] Need help with fixed width floats

[Christine Masters]

Hi everyone!

 

I could use a little help with a layout I'm working on. It is my first
tableless CSS site, so I'm possibly missing some obvious things. Thanks in
advance for any advice!

 

Anyway, I've gotten it to work well in Firefox, but I'm having some trouble
working with IE.

 

Here is my page: http://cmasters.townnews.com/entertainment/

 

If it helps, this is the page I'm trying to recreate in CSS:
http://cmasters.townnews.com/entertainment_mockups/entertainment.jpg

 

(I know this isn't a CSS-friendly design!)

 

I've got some "faux columns" in my background and I'd like, if possible, for
my columns to line up with those columns as closely as possible.

 

I've done the math, and the columns should calculate like this:

 

980 pixels wide total content div, total (with a 1px border)

Then, from left to right:

- 10px margin

- 370px content (with a 1px border on the background)

- 10px margin

- 200px content (with a 1px border on the background) - in my code I
subtracted 1px here to account for the border around my total content div

- 10px margin

- 200px content (with a 1px border on the background) - in my code I
subtracted 1px here to account for the border around my total content div

- 10px margin

- 160px ad spot

- 10px margin

 

Again, this works perfectly in Firefox, but in IE the ads on the right kick
down below my content due to lack of space. I know that the box model in IE
is calculated differently, so I avoided padding my container elements in the
hopes of making it work, but instead it is not working correctly. Are
borders calculated the same in IE?

 

I've fixed any IE double margin bugs that I can find, so I don't think
that's it.

 

Can anyone point out my error, or perhaps point to a page on the Web that
could help? Is it possible to be this precise or am I kidding myself? =)

 

I also have one more question: I've done some fun stuff with unordered lists
and my story headlines to make the second line indented. Is there a way to
increase the space between the individual headlines themselves without
increasing the space between the actual lines of text? To clarify, I'd like
to have more space between each headline element, and less leading between
the first and second lines of the headlines that wrap. I've tried
line-height, padding, margin, etc., but everything seems to affect both the
leading and the space between headline elements. Let me know if there is
anything else I can try. (Maybe a margin-top on .first letter?)

 

(PS: I'm working with a content management template here, in case any of my
code is confusing.)

 

Thanks so much in advance!

 

---

Christine Masters

Senior Project Manager

[EMAIL PROTECTED]

TownNews.com

"Online solutions. Bottom-line results."

 

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

Re: [css-d] Follow up/heads-up on url(.css) screen hack

[Gunlaug Sørtun]

Thierry Koblentz wrote:
> Gunlaug Sørtun wrote:
>> Guess I shouldn't say this, but, FWIW: It is good to have options 
>> and know how they work an/or how to make them work. However, I 
>> don't see much point in switching hacking-strategy if one has a 
>> working and well-tested method in place.

> For layout, I used to have a "working and well-tested method in 
> place", but I'm glad I tried something else :)

Got your point. I did the same, but before I switched I looked at the
evolution of layout-methods. Then I went for one that at least had the
potential to grow - not one that was doomed to become obsolete :-)

Browser-hacking as such will probably never become obsolete. However,
the "art" of hacking is neither progressive nor reliable, so a suitable
*warning* should follow all bug based options.


The IE-bug that makes the '@import hack' work, also prevents proper use
of attributes on a standardized property. This means it put limitations
on future use of same property, and will continue to do so for as long
as our support for those same buggers is a necessary part of web design.

So, we may as well exploit the bug in the mean time, but by doing so we
may also help to _preserve_ the bug - and may never get rid of it. Not
much progression in that.

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