Re: [css-d] ie not bold on title boxes

[David Laakso]

Sam Leathers wrote:



the url: http://www.magpienet.biz/newmag

I'm completely lost as to whats going on with IE6 ignoring the
font-weight: bold in the title boxes on the left but not having any
problems on the right side.

Sam
 


Sam,
You have a lot of code, so I can't say exactly what to add or change, 
but suggest you find the specific selectors in question, and experiment 
with adding:

font-weight: bold;
or
font-weight: 600;
or
font-weight: 900;
to them.
Trivial pursuits:
-Tidy On line  will correct many if not all 
the errors on your html file.

-Validate your CSS file 
-Feed the javascript stuff via an external file
-Validate the markup
-Consider using relative rather than absolute font sizes(see List 
wiki/FAQ) -- < http://css-discuss.incutio.com/>

Regards,
David Laakso


--
David Laakso
http://www.dlaakso.com/


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

Re: [css-d] ie not bold on title boxes

[dwain]

David Laakso wrote:

Sam Leathers wrote:

I'm completely lost as to whats going on with IE6 ignoring the
font-weight: bold in the title boxes on the left but not having any
problems on the right side.


the bold is not showing at all in ff 1.0.4; but it is in opera 8.01.


-Feed the javascript stuff via an external file


ff is showing that you have javascript errors.

hth,
dwain
--
Dwain Alford
[EMAIL PROTECTED]
http://www.alforddesigngroup.com

"The artist may use any form which his expression demands;
for his inner impulse must find suitable expression."
Wassily Kandinsky, "Concerning The Spiritual In Art"
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Print Stylesheet issues (Repost)

[Robert Neville]

Partially repost

I just began developing the print style sheet for my
web page listed below and have encountered several
difficulties. Apparently, the scenario is more complex
than originally thought. This  sheet scenario has had
me perplexed for several days.  I simplified the html
and removed the JavaScript, which did not bring much
insight. 

http://neville.f2o.org/nifty_DELETE1.html

Now, the page only has the paragraph and heading
elements. If the text occupies a page or less, Firefox
renders the print version as expected. If the text
spans a page or more, then Firefox render the #header;
then a page break; then the text in question; and cut
the text off after a page of so. 

Indeed browser's print engines are not keen on floats,
yet my last print stylesheet did not remove all the
floats. The overflow attributes may contribute to the
scenario as well.  The CSS is extensive (and based off
the link below to test all styles), yet this html does
not have any floats or elements with overflow
attributes. So the problem may lie elsewhere.  

Please let me know if you have ideas for solving the
problem. Here’s a link with most attributes applied.

http://neville.f2o.org/nifty_Simple.html





Start your day with Yahoo! - make it your home page 
http://www.yahoo.com/r/hs 
 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Using of tbody.

[victor NOAGBODJI]

Hello,
What is the advantages of using tbody instead of table, when using CSS?
thanks
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] using of DIVs

[victor NOAGBODJI]

Hello,
AFAIK, DIVs are to section a page (maybe I'm wrong, as i'm still a beginner). 
When learning CSS I use to write things like this:
My Title

One day, I has been told that this is bad, according to web standard 
accessibility (or something like that) so I was told to do this:
My Title

Now I realise that using the later give me more problems. Because when it's a 
Div you have to set many attributes. Whereas h1,h2,h3predifined tags have 
different  preset attributes, that varies even with browsers.
What's do you think of this?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] using float and clear in the same div.

[victor NOAGBODJI]

I have blindly use this trick way back when learning CSS. I have hacked some 
CSS codes from a great designer named Haran. Now that I have a little knowledge 
of CSS. I just wonder how this managed to work before?
I did a #sideBox { float: left; clear: left;  } and it worked.
Now I do #sideBox { float: left } ... . and it works also.

What is the difference, which is better?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] using of DIVs

[Nick Lewis]

 are like alchohol... they have a tendency to be overused, and often 
the very people who abuse them are completely unware of the negative 
effects. Web Standards/Accessibility is probably not the best argument 
against using DIVS. Here is an article that will answer many of your 
questions:

http://www.juicystudio.com/article/div-mania.php DIV-MANIA!

As for your problem with h1,h2,h3,h4 tags, there is a very simple 
one-shot-one-kill solution:

1. Clear all of your header's margins (i.e. h1 {margin:0;} )
2. Now space your headers using padding (i.e. h1 {padding:15px 0 15px 
0;margin:0;})


Consider the example I shared applicable to nearly every situation where 
explorer and firefox disagree. This is your first line of defense against 
most IE 6 bugs. Take it, treasure it, and share it.


Onward,
Nick Lewis
http://nicklewis.smartcampaigns.com


From: "victor NOAGBODJI" <[EMAIL PROTECTED]>
To: 
Sent: Thursday, July 14, 2005 6:01 AM
Subject: [css-d] using of DIVs


Hello,
AFAIK, DIVs are to section a page (maybe I'm wrong, as i'm still a 
beginner). When learning CSS I use to write things like this:

My Title

One day, I has been told that this is bad, according to web standard 
accessibility (or something like that) so I was told to do this:

My Title

Now I realise that using the later give me more problems. Because when it's 
a Div you have to set many attributes. Whereas h1,h2,h3predifined tags 
have different  preset attributes, that varies even with browsers.

What's do you think of this?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Re: using of DIVs

[David Dorward]

On 7/14/05, victor NOAGBODJI <[EMAIL PROTECTED]> wrote:

> AFAIK, DIVs are to section a page (maybe I'm wrong, as i'm still a
> beginner). When learning CSS I use to write things like this:
> My Title

A div is a generic block element. It is used when you have a need to
mark up some content without mentioning any semantics (but you do want
to add style, scripting, or whatnot).

> One day, I has been told that this is bad, according to web standard
> accessibility (or something like that) so I was told to do this:
> My Title

In this case, you have a heading, so the semantics you give to it
should say that it is a heading. Failing to do so introduces problems
for non-CSS browsers, search engine indexers, non-visual browsers,
etc, etc.

> Now I realise that using the later give me more problems. Because when it's
> a Div you have to set many attributes. Whereas h1,h2,h3predifined tags
> have different  preset attributes, that varies even with browsers.
> What's do you think of this?

CSS gives presentational hints. It does not absolutely control the way
content is rendered. This is perfectly fine.

Welcome to the way the web works - it isn't the same as print media.


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

[css-d] Re: Using of tbody.

[David Dorward]

On 7/14/05, victor NOAGBODJI <[EMAIL PROTECTED]> wrote:

> What is the advantages of using tbody instead of table, when using CSS?

You can't use tbody instead of table. Tbody is a child element of
table, used to mark up groups of data (as opposed to thead - for the
main table heading, and tfoot for a footer (e.g. column totals)).

If you are using HTML, then you can't avoid using tbody - its use is
implied by the existance of a table row inside the table (since the
start and end tags for tbody, like  and  are optional).

XHTML 1.0 fudged this by allowing tr elements to be children of table
directly so that people could convert from HTML easily. Not a great
design choice IMO.

The main uses for tbody with CSS (and JavaScript) are dynamically
showing and hiding blocks of data in a table (e.g. a tbody for each
region containing several one row per office would let you do client
side filtering to show only one specific region). In theory you could
also use tbody to have the data in a table scroll without moving the
headings about - browsers mean this doesn't work in practise.

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

[css-d] vertical centering text in Internet Explorer

[dimpie]

Is it possible to center text vertically in a div  in Internet Explorer.
I managed to make it work in FireFox and Opera by applying the following:

div {
display: table-cell;
vertical-align: middle;
   }

but I can't get it to work in IE.

Any help would be appreciated.
Thanks in advance.

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

Re: [css-d] vertical centering text in Internet Explorer

[Ingo Chao]

dimpie schrieb:

Is it possible to center text vertically in a div  in Internet Explorer.


See Bruno Fassino's solution:
http://www.brunildo.org/test/vertmiddle.html
http://www.brunildo.org/test/img_center.html


Ingo


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

Re: [css-d] using of DIVs

[Arlen Walker]

On Jul 14, 2005, at 6:01 AM, victor NOAGBODJI wrote:


Hello,
AFAIK, DIVs are to section a page (maybe I'm wrong, as i'm still a  
beginner). When learning CSS I use to write things like this:

My Title

One day, I has been told that this is bad, according to web  
standard accessibility (or something like that) so I was told to do  
this:

My Title

Now I realise that using the later give me more problems. Because  
when it's a Div you have to set many attributes. Whereas  
h1,h2,h3predifined tags have different  preset attributes, that  
varies even with browsers.

What's do you think of this?


Not the best reason to take that approach.

The reason you should use h1 id="title" instead of div id="title" is  
semantic. What's in the (X)HTML doc should relate only to the logical  
structure of the document and have nothing to do with the  
presentation. Therefore you should use h1 if "My Title" is (as it  
seems to be) the main headline of the document. Then you attach  
whatever CSS you need to that id (or even just to h1, which is the  
way I'd prefer to do it).





Have Fun,
Arlen

--
In God we trust, all others must supply data

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

Re: [css-d] using float and clear in the same div.

[Arlen Walker]

On Jul 14, 2005, at 6:05 AM, victor NOAGBODJI wrote:


I did a #sideBox { float: left; clear: left;  } and it worked.
Now I do #sideBox { float: left } ... id="sideBox">. and it works also.


What is the difference, which is better?


First method: Place sideBox on the left edge, below any previous  
boxes that were floated left.


Second method: Extend the bottom of sideBox to one line beyond the  
bottom of any box within sideBox that has been floated left.


Which is better? Depends on what effect you're trying for. They do  
different things.


Have Fun,
Arlen

--
In God we trust, all others must supply data

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

Re: [css-d] Site Check Please

[Andree Hollander]

Matthew Ohlman:

I just finished designing this site with a CSS layout, and I was hoping 
you guys could take a look at it and tell me what you think:

http://pictures.ohlman.com/tnbidco/index.html


You forgot to specify a background color for the page (like so many do).

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

Re: [css-d] extra space around a table inside a div

[Anthony Morales]

Bob,
Thanks, we figured that out, but we will also have paragraphs,  
lists, and well, any other kind of text that we'd like to be away  
from that div. A negative margin on the table doesn't seem to work on  
the right side. The only thing we can think of is to add another div  
around the table and set it's left/right margins to -12px and  
everything else to 0, like you have below.


thanks,
ant

On Jul 13, 2005, at 8:01 PM, Bob Easton wrote:


Anthony Morales wrote:


Bob,
I've created a clean workpage and that shows that weird layout  
(I've  tested Firefox and Safari on Mac 10.4 so far).

http://anthonymorales.com/test.html

The padding on .rbox is producing the space. To get the table to  
fill the div:

set .rbox padding:0;
set .rbox table margin:0;

BTW, put all the 

[css-d] Several quirks

[Tanya Renne]

Hello all - I'm new to think list so please be forgiving if I over-step 
my bounds ... I have a site that is being converted to a CSS2 
environment. I've got most of the conversion done but there is one area 
that is still giving me fits:


We're converting http://www.ewriteonline.com to 
http://dev.ewriteonline.com ... I'm having trouble getting the yellow 
bar to behave.


1) on Mac IE the yellow bar is long and correctly aligned but the 
navigation on it is shoved to the right and piled on top of itself.
2) NS on the mac has the yellow bar extend from the keyboard image but 
only until after the e-write logo itself - no further - the navigation 
inside it is stacked due to the space.
3) on PC IE and Firefox the green and yellow bars start to the right of 
the e-write logo together - they are a bit long too so they are 
stretching out the sitecontainer
4) In firefox the foldouts are too narrow - they need to be auto sized 
to accomodate different widths of text
5) In PC NS the green and yellow bar are shoved to the right under the 
keyboard altogether.


Suggestions?

-- Tanya

Orchid Suites, Inc.
Modular Web Solutions Customized for Special Markets
-- We Give You the Power to Connect, Communicate and Deliver
http://www.orchidsuites.net 
(202) 545-0219


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

[css-d] IE MAC hack

[Michael Cassidy]

I though this was a work around for IE MAC, has it been fixed!!??:

@import("iemac.css");


Jazz is freedom. - T. Monk
 www.panix.com/~cassidy
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Site Check and problems with nav elements

[Richard Brown]

Hi All

I have uploaded a new design to:



Css is at:



The nav container is placing itself at the bottom of the page when it 
should be above the page title and below the header. Does anybody know 
why this is happening please?


Also I want the description, the nav and the footer elements to stretch 
right across to the left column but they don't. I can't see why, can 
anybody help.


Could anybody viewing the site in Win I.E. please send me a picture so 
I can see how the site looks?


Thanks very much.

Rich

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

[css-d] One page weirdness

[Judith Taylor]

Hey all,

I am having fits with one page on my site in IE6. Of course, it works 
fine in both FF 1.0.4 and Opera 8.


Anyway, the problem is my sidebar on this page 
. The only real difference with 
this page from the rest of the site is that I have two floated divs to 
create a mid-page two column effect, followed by a clear:both to return 
to a single column. On the page in question, the sidebar navigation is 
appearing at the bottom of the content, in it's proper "column". I have 
tried relocating where it is called to no avail (and weird effects). I 
have the feeling it's some (relatively) obscure IE hack/problem that I 
haven't ever had to deal with before.


My css is located http://www.acvna.org/acvna.css. My css validates with 
one error (Line: 16 Context : #header #logotext Parse Error - [empty 
string]) that I can't figure out, but my XHTML validates to 1.0 
Transitional with no errors.


Another pair of eyes looking this over would be greatly appreciated, as 
well as general comments on the site. I do realize that the top 
navigation doesn't work well when increasing the text size, that will be 
my next hurdle if I decide to tackle it. Since I have my font-size set 
to 100% and don't really mess with it too much, I'm not overly 
concerned, but I know that it would be good practice to get the whole 
thing working "theory perfect."


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

Re: [css-d] IE MAC hack

[Justin Reid]

Michael Cassidy
> 
> I though this was a work around for IE MAC, has it been fixed!!??:
> @import("iemac.css");



I'm not sure if that was fixed, though I doubt it as Microsoft stop 
development on that browser over 2 years ago. Try reading this article 
instead:
http://www.stopdesign.com/examples/ie5mac-bpf/

Hope this helps ; )
-Justin Reid
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Site Check and problems with nav elements

[Rahul Gonsalves]

Richard Brown wrote:


Hi All

Could anybody viewing the site in Win I.E. please send me a picture so 
I can see how the site looks?


http://www.flickr.com/photos/[EMAIL PROTECTED]/25916809/

http://www.flickr.com/photos/[EMAIL PROTECTED]/25916796/

In IE (XP_SP2) the nav bar is above the content, but all the content has 
been pushed down. Also on text-resize, the left hand content spills over.


I'm the least capable person to advise you, but I would suggest using 
one of the faux-columns methods - check the wiki. That should help you 
at least with the footer / description stretching.



Hope this helps,
Cheers,
Rahul.


--
.
Rahul Gonsalves

[EMAIL PROTECTED]
.

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

[css-d] IE Displays Sometimes - Other Times Does Not

[George Smyth]

I have a strange problem.  The code below works exactly the way I want
in Firefox and IE.  However, with IE, sometimes some of the text within
the second  is not displayed.  If I play around with the size of
the browser, then some of the lower text will magically appear or
disappear>

  
  
SACC
AUSTIN, TX
10-11 November 2005
Hyatt Regency Austin
208 Barton Springs
Austin, Texas 78704
512-477-1234
http://www.hyatt.com";>Hyatt Website
  

Does anyone have an idea as to what might be going on?  Am I doing
something that is causing this strange behavior?

Thanks for your help.

Cheers -

george

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

Re: [css-d] IE Displays Sometimes - Other Times Does Not

[Steve Clason]

On 7/14/2005 9:03 AM George Smyth wrote:


However, with IE, sometimes some of the text within
the second  is not displayed.  If I play around with the size of
the browser, then some of the lower text will magically appear or
disappear>



Does anyone have an idea as to what might be going on?  Am I doing
something that is causing this strange behavior?


Hard to tell for sure without seeing the page but it sounds like the 
peekaboo bug. See:


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

--
Steve Clason
Web Design and Development
Boulder, Colorado, USA
www.topdogstrategy.com
(303)818-8590

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

[css-d] Help with boxpunch spanning 2 columns

[John Grohol PsyD]

I recently came across Eric Meyer's excellent boxpunch examples, but 
wanted to adapt something like this to create a content box that would 
span two content columns (in a standard 3 column CSS design). Here's 
where I'm at now:


http://grohol.com/tt/b.htm

As you can see from the example, I would ideally like the text in column 
2 to wrap around the boxpunch. Ideally, I'd like to have the actual box 
not need to have to be in the middle of the content column (as in the 
original boxpunch examples), but rather at the bottom of Column 1 or the 
top of Column 2.


Thanks for any suggestions or advice on how I might best proceed!

Best,
John


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

[css-d] small space between image and border

[Scot Schlinger]

This is my first message as I am new to the list and using css
completely without tables.  Please pardon my e-mail and, more than
likely, poor quality css.  Please feel free to make comments as I need
to learn.

 

My page looks fine in windows ff 1.0.4 but I am having problems with
windows ie 6.x (nothing different then most of the e-mails I have read
over the past two weeks).  The problem: there is a small space (I
thought this was related to the 3px bug, but couldn't figure this out on
my page) between an image and a 1px border below it.  

 

I have added pink to the background so that it is easier to see.  Since
the page is currently in development the css is in the page.

 

url: http://www.rell.com/test/index.html

 

Thank you for your time and consideration,

Scot

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

[css-d] horizontal "tabed" css menu - need help

[cappellano]

Hi list!

I´m trying to make an horizontal "tabbed" menu. No problems on making
the tabs only using lists and css. But I´d like to add images for it
to have a better look.

The image would be this one: 
http://www.arcbr.org/imgs/bg_up.png

I thought about using it as a background on the lists, but it didnt
work properly (the text wasnt well centered). So, any other
suggestion?

thanks! 
 
-- 
http://www.arcbr.org - blog sobre rpg, hq´s, ccg´s, livros, filmes...
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] small space between image and border

[Matthew Ohlman]

Scot Schlinger wrote:


This is my first message as I am new to the list and using css
completely without tables.  Please pardon my e-mail and, more than
likely, poor quality css.  Please feel free to make comments as I need
to learn.


 


Welcome.  I'm sure that you will find that this list is a great resource.


My page looks fine in windows ff 1.0.4 but I am having problems with
windows ie 6.x (nothing different then most of the e-mails I have read
over the past two weeks).  The problem: there is a small space (I
thought this was related to the 3px bug, but couldn't figure this out on
my page) between an image and a 1px border below it.  
 

It looks to me like you are experincing the IE "3px Jog" bug.  You can 
read about it here:

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

What you can do is add the following hack into your css.  That will 
close up the gap in IE.


* html #header img {
   margin-bottom: -3px;
}

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

Re: [css-d] small space between image and border

[Steve Clason]

On 7/14/2005 10:32 AM Scot Schlinger wrote:


My page looks fine in windows ff 1.0.4 but I am having problems with
windows ie 6.x (nothing different then most of the e-mails I have read
over the past two weeks).  The problem: there is a small space (I
thought this was related to the 3px bug, but couldn't figure this out on
my page) between an image and a 1px border below it.  



url: http://www.rell.com/test/index.html


Add this to your styles:

#mosaic img{
   display: block;
}

Images by default are in-line elements, like text, and the little space 
below the image is for text descenders like the tail on a "g". Changing 
the display to "block" removes the possibility of descenders and so the 
need for the space.


You could also make the text-size on #mosaic tiny (1px, say) to make the 
space for the descenders disappear.


--
Steve Clason
Web Design and Development
Boulder, Colorado, USA
www.topdogstrategy.com
(303)818-8590

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

Re: [css-d] Site Check Please - THANKS

[Matthew Ohlman]

I just wanted to say many thanks to all of you that helped me out both 
on and off-list.  I appreciate all of your comments and have made all of 
the suggested changes.  I don't know how I would get by without you 
guys! :-)


Thanks again,
Matthew Ohlman

Matthew Ohlman wrote:


Hey List:

I just finished designing this site with a CSS layout, and I was 
hoping you guys could take a look at it and tell me what you think:

http://pictures.ohlman.com/tnbidco/index.html

I need to know how it shapes up on some other browsers, especially 
those on Mac.  I've checked (800x600) in IE6, Mozilla 1.7, and FF.  
Any suggestions would be greatly appreciated, along with 
accessibility, coding comments and download time.


Thanks!
Matthew Ohlman


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

[css-d] Site Check: stephenjoneslaw.com

[Jeff Clark]

Hi list-

I'd like as many people as possible to see this before I submit it to
the client, so a site check would be very much appreciated! 
(especially if you're on a Mac or using a browser that isn't FF or IE)

http://www.stephenjoneslaw.com/home

*the "home" link on the site isn't active for obvious reasons, but you
can get to the index by using the above link!

Anything is appreciated.  Thanks!

Jeff
-- 
The name's Jeff.  I've got a website.
http://www.vacantcanvas.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [work] [css-d] Site Check: stephenjoneslaw.com

[Hershel Robinson]

http://www.stephenjoneslaw.com/home



Anything is appreciated.  Thanks!


IMHO the main part of the page is quite skinny. Furthermore, on my 17" 
1024 pixel monitor, the text at default size on FF is very small. Much 
smaller than is comfortable for me to read.


Also is lacks a Contact Us page.

Aside from that, the size overall looks very good to me.

Hershel

PS: Nice picture at the top. Who's that girl with the hat?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Site Check: stephenjoneslaw.com

[Bart Hook]

Mac Safari 2.0 and Firefox looks great. Nice job.

Bart


On 7/14/05 1:56 PM, "Jeff Clark" <[EMAIL PROTECTED]> wrote:

> Hi list-
> 
> I'd like as many people as possible to see this before I submit it to
> the client, so a site check would be very much appreciated!
> (especially if you're on a Mac or using a browser that isn't FF or IE)
> 
> http://www.stephenjoneslaw.com/home
> 
> *the "home" link on the site isn't active for obvious reasons, but you
> can get to the index by using the above link!
> 
> Anything is appreciated.  Thanks!
> 
> Jeff

-
Bart Hook
Lead Designer

The Archer Group
www.archer-group.com
p: 302.429.9121*207
f: 661.457.3260

The Simplicity of Success
-


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

Re: [css-d] Site Check: stephenjoneslaw.com

[Sam Leathers]

Wow!!! that looks pretty sweet in firefox/konqueror/lynx viewed on Linux
(Ubuntu Hoary)

Sam

Jeff Clark wrote:
> Hi list-
> 
> I'd like as many people as possible to see this before I submit it to
> the client, so a site check would be very much appreciated! 
> (especially if you're on a Mac or using a browser that isn't FF or IE)
> 
> http://www.stephenjoneslaw.com/home
> 
> *the "home" link on the site isn't active for obvious reasons, but you
> can get to the index by using the above link!
> 
> Anything is appreciated.  Thanks!
> 
> Jeff

-- 
in life, direction is everything, distance is secondary--so keep your
bearings!

[KJV] Luke 5:16 And he withdrew himself into the wilderness, and prayed.

Get Firefox!!!
http://www.spreadfirefox.com/?q=affiliates&id=13731&t=1
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [work] [css-d] Site Check: stephenjoneslaw.com

[David Merchant]

At 09:19 PM 7/14/2005 +0300, you wrote:

http://www.stephenjoneslaw.com/home



Anything is appreciated.  Thanks!


IMHO the main part of the page is quite skinny. Furthermore, on my 17" 
1024 pixel monitor, the text at default size on FF is very small. Much 
smaller than is comfortable for me to read.


Aye, I have to agree with that.

The overall look is great. Checked with Opera 7.54 PC (WindowsXP SP2).

My biggest feedback is that there is no consistency for determining what is 
a link. For instance: some white text will be linked, other white text is 
not, so I can't tell until I mouse over. Some linked text is dark green 
(the mouseover green of the green colored linked text matches the green of 
text that are just headers and are not links). Some linked text is 
underlined. This makes me think that any colored text might be a link, but 
I discover that isn't always true. The biggest confusion for me is the 
white text. I finally realize that if the white text is bolded, it probably 
isn't a link. Sorry, I just like a link theme/style that is consistent and 
one I can quickly identify. So many sites have so many different styles of 
indicating linked text that it gets wearisome for me to have to spend too 
much time figuring out a new site's link theme/style.


Otherwise, again, the overall design looks great.

TTFN,
David

Director of Integrated Technology
CATALyST
Louisiana Tech University
Carson Taylor Hall, Rm. 130
Adams Street (PO Box 3179)
Ruston, LA 71272
Tel: (318) 257-4772
Fax: (318) 257-3852
catalyst.latech.edu

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

Re: [css-d] Site Check: stephenjoneslaw.com

[Tom Livingston]

On Thu, 14 Jul 2005 13:56:08 -0400, Jeff Clark <[EMAIL PROTECTED]> wrote:


(especially if you're on a Mac or using a browser that isn't FF or IE)

http://www.stephenjoneslaw.com/home

Jeff


Mac Opera 8.01 looks good. This is good stuff. Text is smaller than you  
normally see, but very readable to me and it's nice to see something  
unique for a change. Screenie available upon request. There is some  
overlapping that may be intentional, but not sure. Near the top right  
corner of the green phone number area - the bevel/shadow effect on the  
photo is getting "cut" and doesn't flow down nice along edge of the white  
copy area. Follow that? ;-)


Nice!

--
Tom Livingston
Senior Multimedia Artist
Media Logic
www.mlinc.com

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/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Text Positioning

[Shaun Saxon]

How do I get a  or  element to display the same distance from the top
of cells and/or divs in both IE and Firefox?

On this page  in particular, I want each
browser to begin the paragraph the same distance below the banner image.
(text in a table cell)

I'm also having the same problem on a page with no image at all. IE wants to
display text much lower on the page--even with a padding attribute set. 

Thanks, 

Shaun


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

[css-d] Two Column Layout

[Richard Brown]

Hi All

I want to get hold of a two column fixed width layout. The left column 
is meant to stretch the full length of the site. The right column is to 
contain a nav bar at the top followed by a header, content and a 
footer.


Could someone point me to a suitable tutorial or design that I could 
look at for help.


Thanks

Rich

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

[css-d] Link issue with firefox

[d.williams]

Hi, all,

I have a pure css page with an unordered list serving as the main
navigation.  I have most things working, but I'm having a really odd
problem in Firefox.  For some reason the links aren't clickable and
don't respond to hover changes.  It seems like there's a div or
something which is covering them, but i can't seem to figure out what
it is.  The page works in IE and Opera, but not Firefox.  And if
someone wouldn't mind checking in Safari, I sure would appreciate it!

link:  http://www.distantelegy.net/clients/avery/new/

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

[css-d] Problems with a:hover over an image in (surprise!) IE

[jason zietz]

This has been bugging me for a while now and I can't seem to fix it.  
Here's the relevant CSS:


a {
   color: #000;
   font-weight: bold;
   text-decoration: underline;
}

#previewPanel a:hover img.previewPic {
   border: 1px dashed #000;
}

and the html:

width="100" alt="alt tag" />


The hover works in Firefox but not in IE.  Here's what I've found: if I 
have the color of a:visited to be declared as a different color than the 
hover color, the hover works in IE.  I'd like my visited color to be 
#000, so that's not a solution.  Another thing: when I click the link, 
the dashed border appears.  Also, if I hover over an image before the 
page finishes loading, the dashed border appears properly.  Once the 
page finishes loading, the border disappears.


Any help would be greatly appreciated.  Thanks!

jason



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

Re: [css-d] Using of tbody.

[Justin Makeig]

tbody, thead, and tfoot give the data more semantics and allow one to  
operate on logically grouped rows. One CSS application that comes to  
mind is:


thead th {
/* style column headers here */
}
tbody th:first-child {
/* style row headers here */
}

I've found the real advantage of packaging table rows into thead and  
tbody containers comes when I manipulate table data with ECMAScript  
(JavaScript) via the DOM. I'm easily able to find the table data (and  
not headers) by looping through the tr children of the tbody element 
(s), for example.


- Justin

On Jul 14, 2005, at 3:53 AM, victor NOAGBODJI wrote:


Hello,
What is the advantages of using tbody instead of table, when using  
CSS?

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



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

[css-d] Stretching wider then the view port.

[Ian Skinner]

Is there a way to get a div to stretch wider then the view port to match the 
arbitrary width of a large table that is wider then the screen without making 
the div part of the table, or somehow defining the width of the table instead 
of letting it auto fit the data?  That works in IE6?  

I tried width 100%, but apparently that is 100% of the view port not 100% of 
the body for IE6 at least.

(It's a large report, the users want it this way, what can I say?)


--
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA
 
"C code. C code run. Run code run. Please!"
- Cynthia Dunning

Confidentiality Notice:  This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message. 


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

[css-d] three-column layout question

[saul]

Hello,

I'm having a bear of a time getting the three columns to function 
correctly. I've looked at a number of suggested ways to achieve this, 
but cannot get it to work correctly.


Any assistance would be appreciated.

http://inventionshow.com/development/home.html

Thanks,

Saul

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

Re: [css-d] three-column layout question

[saul]

Yeah, that's what I'm trying to achieve. I've seen a number of sites 
that have done it and looked at their CSS (including those in the 
WIKI). They use inner- and outer Containers. I just can't seem to get 
them set up properly.


Saul

On Jul 14, 2005, at 5:07 PM, jason zietz wrote:


Saul,

It looks like it's working as it should.  What are you having problems 
with?  Keep in mind that the column heights won't match unless they 
have the same amount of content or you use some Javascript:


http://www.paulbellows.com/getsmart/balance_columns/


jason


saul wrote:


Hello,

I'm having a bear of a time getting the three columns to function 
correctly. I've looked at a number of suggested ways to achieve this, 
but cannot get it to work correctly.


Any assistance would be appreciated.

http://inventionshow.com/development/home.html

Thanks,

Saul

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





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

[css-d] Safari :: Zapfino

[David Laakso]

Browsercam shows Zapfino going out of its little gourd in Safari. 
Seeking a fast and dirty fix (or maybe just better to switch to 
TNR--Times?).


Thanks.
David Laakso

--
David Laakso
http://www.dlaakso.com/


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

Re: [css-d] Stretching wider then the view port.

[Keith Sader]

On 7/14/05, Ian Skinner <[EMAIL PROTECTED]> wrote:
> Is there a way to get a div to stretch wider then the view port to match the 
> arbitrary width of a large table that is wider then the screen without making 
> the div part of the table, or somehow defining the width of the table instead 
> of letting it auto fit the data?  That works in IE6?
> 
> I tried width 100%, but apparently that is 100% of the view port not 100% of 
> the body for IE6 at least.
> 
> (It's a large report, the users want it this way, what can I say?)

Well if I understand your question correctly, you can exploit a bug in
IE6's float behavior to get this type of 'functionality'

http://ksader.100free.com/css/userHome.html
http://ksader.100free.com/css/style.css

Do you want the effect of the green bordered content?

#mainContainer - relative postion but no float
  #workArea - relative, float right
  #rightColumn - relative, float left

If so, float the table, but don't float the containing block, instant
margin over-run.

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

Re: [css-d] Two Column Layout

[Keith Sader]

A good place to start is on the wiki

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

> 
> I want to get hold of a two column fixed width layout. The left column
> is meant to stretch the full length of the site. The right column is to
> contain a nav bar at the top followed by a header, content and a
> footer.
> 
> Could someone point me to a suitable tutorial or design that I could
> look at for help.
> 
-- 
Keith Sader
[EMAIL PROTECTED]
http://www.saderfamily.org/roller/page/ksader
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] three-column layout question

[Sam Leathers]

of all the 3 column layout tutorials I like this one the best:
http://glish.com/css/7.asp

Sam

saul wrote:
> Hello,
> 
> I'm having a bear of a time getting the three columns to function
> correctly. I've looked at a number of suggested ways to achieve this,
> but cannot get it to work correctly.
> 
> Any assistance would be appreciated.
> 
> http://inventionshow.com/development/home.html
> 
> Thanks,
> 
> Saul
> 
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 

-- 
in life, direction is everything, distance is secondary--so keep your
bearings!

[KJV] Luke 5:16 And he withdrew himself into the wilderness, and prayed.

Get Firefox!!!
http://www.spreadfirefox.com/?q=affiliates&id=13731&t=1
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

RE: [css-d] Stretching wider then the view port.

[Ian Skinner]

Well actually that is the effect I currently have with no floats involved.  The 
table is not in the div, it is below it.  What I want is the div to stretch to 
the same width as the table, without defining the table width or including the 
div in the table or I suppose enclosing the table in the div.


Some top of page stuff


data





My goal is to have the div as wide as the table.  I would presume that the 
"body" is wide as the table in order to encompass it, so if one declared the 
div to be 100%; it would be as wide as body and thus the table.  But that does 
not work, at least not in IE6.

--
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA
 
"C code. C code run. Run code run. Please!"
- Cynthia Dunning

...-Original Message-
...From: Keith Sader [mailto:[EMAIL PROTECTED]
...Sent: Thursday, July 14, 2005 2:35 PM
...To: Ian Skinner
...Cc: css-d@lists.css-discuss.org
...Subject: Re: [css-d] Stretching wider then the view port.
...
...On 7/14/05, Ian Skinner <[EMAIL PROTECTED]> wrote:
...> Is there a way to get a div to stretch wider then the view port to
...match the arbitrary width of a large table that is wider then the screen
...without making the div part of the table, or somehow defining the width
...of the table instead of letting it auto fit the data?  That works in IE6?
...>
...> I tried width 100%, but apparently that is 100% of the view port not
...100% of the body for IE6 at least.
...>
...> (It's a large report, the users want it this way, what can I say?)
...
...Well if I understand your question correctly, you can exploit a bug in
...IE6's float behavior to get this type of 'functionality'
...
...http://ksader.100free.com/css/userHome.html
...http://ksader.100free.com/css/style.css
...
...Do you want the effect of the green bordered content?
...
...#mainContainer - relative postion but no float
...  #workArea - relative, float right
...  #rightColumn - relative, float left
...
...If so, float the table, but don't float the containing block, instant
...margin over-run.
...
...--
...Keith Sader
[EMAIL PROTECTED]
...http://www.saderfamily.org/roller/page/ksader

Confidentiality Notice:  This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message. 


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

RE: [css-d] Stretching wider then the view port.

[Paul Novitski]

Ian,

I'd mark it up this way:


Some top of page stuff
...


The outer div, if you don't constrain its width, will stretch as far as it 
has to to enclose its descendants, and the top-of-page-stuff div, being a 
block element, will expand to the width of its container.  So the table 
stretches the container and the top of page div fills that width.


Paul



At 02:52 PM 7/14/2005, Ian Skinner wrote:
Well actually that is the effect I currently have with no floats 
involved.  The table is not in the div, it is below it.  What I want is 
the div to stretch to the same width as the table, without defining the 
table width or including the div in the table or I suppose enclosing the 
table in the div.



Some top of page stuff


data





My goal is to have the div as wide as the table.  I would presume that the 
"body" is wide as the table in order to encompass it, so if one declared 
the div to be 100%; it would be as wide as body and thus the table.  But 
that does not work, at least not in IE6.


--
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA

"C code. C code run. Run code run. Please!"
- Cynthia Dunning

...-Original Message-
...From: Keith Sader [mailto:[EMAIL PROTECTED]
...Sent: Thursday, July 14, 2005 2:35 PM
...To: Ian Skinner
...Cc: css-d@lists.css-discuss.org
...Subject: Re: [css-d] Stretching wider then the view port.
...
...On 7/14/05, Ian Skinner <[EMAIL PROTECTED]> wrote:
...> Is there a way to get a div to stretch wider then the view port to
...match the arbitrary width of a large table that is wider then the screen
...without making the div part of the table, or somehow defining the width
...of the table instead of letting it auto fit the data?  That works in IE6?
...>
...> I tried width 100%, but apparently that is 100% of the view port not
...100% of the body for IE6 at least.
...>
...> (It's a large report, the users want it this way, what can I say?)
...
...Well if I understand your question correctly, you can exploit a bug in
...IE6's float behavior to get this type of 'functionality'
...
...http://ksader.100free.com/css/userHome.html
...http://ksader.100free.com/css/style.css
...
...Do you want the effect of the green bordered content?
...
...#mainContainer - relative postion but no float
...  #workArea - relative, float right
...  #rightColumn - relative, float left
...
...If so, float the table, but don't float the containing block, instant
...margin over-run.
...
...--
...Keith Sader
[EMAIL PROTECTED]
...http://www.saderfamily.org/roller/page/ksader

Confidentiality Notice:  This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message.


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



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

Re: [css-d] Stretching wider then the view port.

[Ingo Chao]

Ian Skinner schrieb:

What I want
is the div to stretch to the same width as the table, without
defining the table width or including the div in the table or I
suppose enclosing the table in the div.
My goal is to have the div as wide as the table.  I would presume
that the "body" is wide as the table in order to encompass it, so if
one declared the div to be 100%; it would be as wide as body and thus
the table.  But that does not work, at least not in IE6.


The problem in IE is the expand to fit does not inform the children 
about the resulting width.


.wrapper {width: 500px; background: yellow;border:1px solid 
black;padding:1em 0;}


.default {width:100%; background: green;}
.wide {width:750px; background: red;}


 Some top of page stuff
 Some wide stuff
 Some bottom of page stuff


In IE, the .wide stuff let the .wrapper expand from 500px to 750px, that 
is not CSS, but MS.
Now, .default does not calculate its 100% width with respect to the 
resulting width of the wrapper, but to its original width.


Sorry, I fear the expand-to-fit does not do what you want.

Ingo

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

Re: [css-d] Stretching wider then the view port.

[Gunlaug Sørtun]

Ian Skinner wrote:
My goal is to have the div as wide as the table.  I would presume 
that the "body" is wide as the table in order to encompass it, so if

 one declared the div to be 100%; it would be as wide as body and
thus the table.  But that does not work, at least not in IE6.


This should work pretty well across browser-land:



Some top of page stuff


data






...exploiting 'display: table' to mimic 'hasLayout' on an outer container.

Tested in: Opera 8, Safari 1.2.4, Firefox 1.0 and IE6.

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

RE: [css-d] Stretching wider then the view port.

[Paul Novitski]

Oops, sorry, I didn't realize that effect terminated at the screen edge.
Paul


At 03:29 PM 7/14/2005, I wrote:

Ian,

I'd mark it up this way:


Some top of page stuff
...


The outer div, if you don't constrain its width, will stretch as far as it 
has to to enclose its descendants, and the top-of-page-stuff div, being a 
block element, will expand to the width of its container.  So the table 
stretches the container and the top of page div fills that width.


Paul



At 02:52 PM 7/14/2005, Ian Skinner wrote:
Well actually that is the effect I currently have with no floats 
involved.  The table is not in the div, it is below it.  What I want is 
the div to stretch to the same width as the table, without defining the 
table width or including the div in the table or I suppose enclosing the 
table in the div.



Some top of page stuff


data





My goal is to have the div as wide as the table.  I would presume that 
the "body" is wide as the table in order to encompass it, so if one 
declared the div to be 100%; it would be as wide as body and thus the 
table.  But that does not work, at least not in IE6.


--
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA

"C code. C code run. Run code run. Please!"
- Cynthia Dunning

...-Original Message-
...From: Keith Sader [mailto:[EMAIL PROTECTED]
...Sent: Thursday, July 14, 2005 2:35 PM
...To: Ian Skinner
...Cc: css-d@lists.css-discuss.org
...Subject: Re: [css-d] Stretching wider then the view port.
...
...On 7/14/05, Ian Skinner <[EMAIL PROTECTED]> wrote:
...> Is there a way to get a div to stretch wider then the view port to
...match the arbitrary width of a large table that is wider then the screen
...without making the div part of the table, or somehow defining the width
...of the table instead of letting it auto fit the data?  That works in IE6?
...>
...> I tried width 100%, but apparently that is 100% of the view port not
...100% of the body for IE6 at least.
...>
...> (It's a large report, the users want it this way, what can I say?)
...
...Well if I understand your question correctly, you can exploit a bug in
...IE6's float behavior to get this type of 'functionality'
...
...http://ksader.100free.com/css/userHome.html
...http://ksader.100free.com/css/style.css
...
...Do you want the effect of the green bordered content?
...
...#mainContainer - relative postion but no float
...  #workArea - relative, float right
...  #rightColumn - relative, float left
...
...If so, float the table, but don't float the containing block, instant
...margin over-run.
...
...--
...Keith Sader
[EMAIL PROTECTED]
...http://www.saderfamily.org/roller/page/ksader

Confidentiality Notice:  This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message.


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



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



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

Re: [css-d] Two Column Layout

[David Laakso]

Richard Brown wrote:


Hi All

I want to get hold of a two column fixed width layout. The left column 
is meant to stretch the full length of the site. The right column is 
to contain a nav bar at the top followed by a header, content and a 
footer.


Could someone point me to a suitable tutorial or design that I could 
look at for help.


Thanks

Rich




Rich,
I have no idea what you mean. This is a very good 2col layout that is 
stable and works cross browser. If you prefer a fixed width layout, rap 
the entire thing in a fixed width container division of approx 776px.


Regards,
David Laakso


--
David Laakso
http://www.dlaakso.com/


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

Re: [css-d] Link issue with firefox

[Valette Ragland]

On 7/14/05, d.williams <[EMAIL PROTECTED]> wrote:
> It seems like there's a div or
> something which is covering them, but i can't seem to figure out what
> it is.

Using the Aardvark extension [1], I can see that the #content div is
covering the #header div.  Because of the #header's absolute
positioning, it takes the div completely out of the normal flow of the
document, so the #content starts at the top of the page.  Giving the
#header a z-index number should help.

[1] http://www.karmatics.com/aardvark/

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

Re: [css-d] three-column layout question

[saul]

Thank you everyone for the links and the article. Yeah, the code is a 
bit confusing. I've sort of cobbled it together from articles and 
tutorials. Next step is simplification.


Saul

On Jul 14, 2005, at 7:32 PM, David Laakso wrote:


saul wrote:


Hello,

I'm having a bear of a time getting the three columns to function 
correctly. I've looked at a number of suggested ways to achieve this, 
but cannot get it to work correctly.


Any assistance would be appreciated.

http://inventionshow.com/development/home.html

Thanks,

Saul



Saul,
Nothing wrong with the layout you are using, I just find it 
particularly complicated and somewhat confusing. In all likelihood 
someone on the list will come up with a fix. In the meantime, this may 
be of interest: . It's 
a demo done for someone else on another list-- based on this article: 
. I added the 
double h-nav bars for that demo-- might come in handy for you as 
you're trying to cram a lot into one bar now? The vertical col. widths 
can be whatever you like. Background images produce the fake same 
height cols. Read the article. Your welcome to my demo if it helps...

Hang in there!
Regards,
David Laakso

--
David Laakso
http://www.dlaakso.com/




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

[css-d] Re: another a:hover jumping problem

[Carol Doersom]

Carol Doersom wrote:  Hovering on any of the links in IE6 causes all the 
text below that link to jump down a pixel or two. 
http://www.blinn.edu/sbdc/test-bus_conn.htm


David Laasko wrote:
>An interesting concept, Carol-- but not user friendly on my 
end(XP_SP2). Seems screen >resolution dependent. Difficult to hold and 
click(assuming that's the goal(?), throwing >an h-scroll bar below 1280. 
Worked best in Deer Parl Alpha1 at 1280; cool but impossible >in 
Moz1.7.8, and Opera8+.




David:  That's odd because everything fits nicely even when I resize to 
800x600--no h.scroll bar. And it works here in Opera7.54 and 
Mozilla1.7.5. Must be something else going on.


I do intend for people to click on the links, but not the images that 
appear. That is probably confusing. Those hover images are just a way to 
provide more info without anyone having to scroll down. Thanks for the 
feedback...it's appreciated!


Carol

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

[css-d] Re: another a:hover jumping problem

[Carol Doersom]

Carol Doersom schrieb:
...Hovering on any of the links in IE6 causes all the 
text below that link to jump down a pixel or two


http://www.blinn.edu/sbdc/test-bus_conn.htm



Ingo Chao wrote:

haven't had a thorough look, but you are serving
http://www.blinn.edu/sbdc/template_nn-css.css
and
http://www.blinn.edu/sbdc/template_css.css 
to all browsers?
Disabling the NN4 sheet seems to stop the jump on a local copy, can you 
confirm? So there are some conflicts in overwriting the NN4 
declarations, I assume.  Ingo



Yes, you're right. It works fine when I disable the netscape4 
style sheet. I'm now in the process of dismantling it---we don't
have that many visitors using nn4 and it's too hard debugging with 
more than one sheet. Still haven't come across whatever it is 
that's causing the text to jump...yet.  Thanks, Ingo!


Carol






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

Re: [css-d] Print Stylesheet issues (Repost)

[Robert Neville]

-- Robert Neville <[EMAIL PROTECTED]>
wrote:

> I just began developing the print style sheet for my
> web page listed below and have encountered several
> difficulties. Apparently, the scenario is more
> complex
> than originally thought. This  sheet scenario has
> had
> me perplexed for several days.  I simplified the
> html
> and removed the JavaScript, which did not bring much
> insight. 
> 
> http://neville.f2o.org/nifty_DELETE1.html
> 
> Now, the page only has the paragraph and heading
> elements. If the text occupies a page or less,
> Firefox
> renders the print version as expected. If the text
> spans a page or more, then Firefox render the
> #header;
> then a page break; then the text in question; and
> cut
> the text off after a page of so. 

http://neville.f2o.org/nifty_DELETE1.html

Let me follow-up my post in case anybody else
encounters these situations with print style sheets.
The scenario was attributed to the media type in the
html header. The style sheet that preceded the print
sheet needed media="screen." Then the previous styles
do not interfere with the print stylesheet. Now,
everything seems in working order.

ORIGINAL HTML




CHANGED HTML




__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

RE: [css-d] Stretching wider then the view port.

[Paul Novitski]

I had some little luck by declaring body {display: table} which makes the 
header div extend the full width of the table in Firefox, but IE still 
stops the div at the window width:

http://novitskisoftware.com/demos/horizontalStretch/

Paul


At 03:29 PM 7/14/2005, I wrote:

Ian,

I'd mark it up this way:


Some top of page stuff
...


The outer div, if you don't constrain its width, will stretch as far as it 
has to to enclose its descendants, and the top-of-page-stuff div, being a 
block element, will expand to the width of its container.  So the table 
stretches the container and the top of page div fills that width.


Paul



At 02:52 PM 7/14/2005, Ian Skinner wrote:
Well actually that is the effect I currently have with no floats 
involved.  The table is not in the div, it is below it.  What I want is 
the div to stretch to the same width as the table, without defining the 
table width or including the div in the table or I suppose enclosing the 
table in the div.



Some top of page stuff


data





My goal is to have the div as wide as the table.  I would presume that 
the "body" is wide as the table in order to encompass it, so if one 
declared the div to be 100%; it would be as wide as body and thus the 
table.  But that does not work, at least not in IE6.


--
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA

"C code. C code run. Run code run. Please!"
- Cynthia Dunning

...-Original Message-
...From: Keith Sader [mailto:[EMAIL PROTECTED]
...Sent: Thursday, July 14, 2005 2:35 PM
...To: Ian Skinner
...Cc: css-d@lists.css-discuss.org
...Subject: Re: [css-d] Stretching wider then the view port.
...
...On 7/14/05, Ian Skinner <[EMAIL PROTECTED]> wrote:
...> Is there a way to get a div to stretch wider then the view port to
...match the arbitrary width of a large table that is wider then the screen
...without making the div part of the table, or somehow defining the width
...of the table instead of letting it auto fit the data?  That works in IE6?
...>
...> I tried width 100%, but apparently that is 100% of the view port not
...100% of the body for IE6 at least.
...>
...> (It's a large report, the users want it this way, what can I say?)
...
...Well if I understand your question correctly, you can exploit a bug in
...IE6's float behavior to get this type of 'functionality'
...
...http://ksader.100free.com/css/userHome.html
...http://ksader.100free.com/css/style.css
...
...Do you want the effect of the green bordered content?
...
...#mainContainer - relative postion but no float
...  #workArea - relative, float right
...  #rightColumn - relative, float left
...
...If so, float the table, but don't float the containing block, instant
...margin over-run.
...
...--
...Keith Sader
[EMAIL PROTECTED]
...http://www.saderfamily.org/roller/page/ksader

Confidentiality Notice:  This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message.


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



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



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

[css-d] nav button help

[Steve]

I am trying this  navigation from the book stylin` with CSS a
designer`s guide by charles Wyke-Smith but some things don`t work 
what am I missing ?..
Safari = ok
Firefox(mac) = ok
IE(mac)(only the first  link rolls over) ?
am I going in the right direction ?



<{ HTML ]>




1
2
3
4
5
6
mailto:[EMAIL PROTECTED]"
title="Contact">Contact me




<[ CSS]>

div.button { width: 126px; height: 24px; top: 0px; left: 0px;
margin-top: 22px; padding: 3px;}

a.roll  { width: 126px; height: 24px; display:block; padding-top: 2px;
padding-bottom: 2px; font: bold 12pt; text-align: center; background:
url(graphics/blue_grd_R.gif) 0px 0px no-repeat #000; }

.button a.roll:link { background-image: url(graphics/blue_grd_L.gif)
0px 0px no-repeat #000; text-decoration: none; }

.button a.roll:hover { color: #000; text-decoration: none;
background-image: url(graphics/blue_grd_L.gif);}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Opera overlap and Win IE 6 problems in divs

[susan]

I have 2 problems with this one-page site.
http://www.thewinenotes.com
css: http://www.thewinenotes.com/0_styles/base705.css

1. Opera v 7.1 & 8 (for Mac) is positioning the div #wcncl (colored 
background with text) on top of the photo division (#btl). It doesn't 
matter if I have z-index specified or not {i.e.   #blt z-index=1;   
#wcncl z-index=2}

screenshots:
Firefox, Safari, IE Mac, NS, iCab, Camino  -- 
http://www.thewinenotes.com/screenshotFF.jpg -- correct
Opera 7.1 & 8.0 Mac -- http://www.thewinenotes.com/screenshotOpera.jpg 
-- incorrect


I can't seem to figure out a solution for this one. Is it a 'bug' in 
Opera with having divisions overlapping? Is there a workaround other 
than making one division as I mention below?


2. no screen shot available for PC  IE 6
but colored background div (#wcncl) positioned 0px left and photo div 
(#btl) way off to right - not "centered" on #wcncl  as desired.  The PC 
users can see this problem easily for yourselves.  I use an old PC 
laptop with Win ME and it's version of IE 6 on it for seeing what a PC 
browser looks like. Win FFox looks fine (as shown in the FF screenshot 
on the Mac). I don't have Opera on the PC, but I suspect the same thing 
may be happening as on the Opera Mac versions.


I've tried various combinations of float and no float, and positioning 
absolute v relative -- nothing seems to work without making the body 
(#bdy) div move out of alignment.


Any suggestions on how to fix the Opera and the IE 6 (PC) problems

I know I have a mix of relative and absolute positions for the header 
and body - something I didn't want to do but can't seem to work around 
it and get the text and head logo image as well as the bottle pic and 
'block' text to work.
This page has to match the client's sales hand out sheet as closely as 
possible.


I can get the look I need by creating one div on the left and having 
the photo and background color in one pic
(background color and transparancy) as background url and photo of wine 
bottle as  but I thought it might make the load time too long.


The page validates for both transitional xhtml and css.

I'm experimenting with changing the font text on all the sites I have 
from px to em & percentages to make the sites more felxible, and 
started with the revisions on this one-pager before I work on those 
sites which run into 100+ pages. So you'll see a mix of em and 
percentages used for font sizes.


Thanks for your help --
Susan Welter

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

[css-d] @charset "utf-8"

[jfletcher4]

Does anyone know why the w3c validator seems to choke over the declaration 
@charset "utf-8"; at the top of a css file?

It still seems to work ok, but it forgets to put in the title "Valid CSS 
information" and then echos out "utf-8"; followed by all your css, as if 
it didn't really understand that line.

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

Re: [css-d] Opera overlap and Win IE 6 problems in divs

[Gunlaug Sørtun]

susan wrote:
I have 2 problems with this one-page site. 
http://www.thewinenotes.com


1. Opera v 7.1 & 8 (for Mac) is positioning the div #wcncl (colored 
background with text) on top of the photo division (#btl).


Opera has a bug, which makes layering of floats with 'position:
relative; z-index: nn;' useless.

Workaround: layer the element _inside_ the float (see below).

2. no screen shot available for PC  IE 6 but colored background div 
(#wcncl) positioned 0px left and photo div (#btl) way off to right -

 not "centered" on #wcncl  as desired.


The margin-doubling bug at play.

Cure: 'display: inline' in this case.
-

CSS (both fixes):
#btl {
width: 215px;
height: 390px;
float: left;
padding: 0px;
margin: 0px 0px 0px 30px;
display: inline;
}

#btl img {
position: relative;
z-index: 1;
}

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

Re: [css-d] Two Column Layout

[Richard Brown]

Hi David and All

Thanks for the responses. My question is built around the site I asked 
a question about yesterday. If you look at:




I am hoping you'll see what I mean. I have stripped all the css out and 
left it to bare minimum. It is at:




What I was hoping to do is have the left column extend all the way 
down. However the footer extends across the bottom. I presume if the 
left column was longer it might be alright but I don't know. Has anyone 
got any ideas how I can have the two columns working correctly?


Thanks

Rich

On 15 Jul 2005, at 00:41, David Laakso wrote:


Rich,
I have no idea what you mean. This is a very good 2col layout that is 
stable and works cross browser. If you prefer a fixed width layout, 
rap the entire thing in a fixed width container division of approx 
776px.


Regards,
David Laakso


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