Sent by CSSHelp on 30 August 2007 01:01
Hello All,
I have create a layout in CSS but the drop down menu doesn't stay open long
enough for a person to select a submenu option. It works in Mozilla, IE7
and Opera, but it does not work in IE6. Can you help me fix it so it works
in IE6 as well? Below is the link to the development website.
http://ferg.isa-geek.com/dsg/default.asp
Thank you in advance.
Shawn M. Ferguson
-----Original Message-----
From: [EMAIL-REMOVED]
[EMAIL-REMOVED]] On Behalf Of
[EMAIL-REMOVED]
Sent: Monday, August 27, 2007 3:55 PM
To: [EMAIL-REMOVED]
Subject: css-d Digest, Vol 57, Issue 29
Send css-d mailing list submissions to
[EMAIL-REMOVED]
To subscribe or unsubscribe via the World Wide Web, visit
http://lists.css-discuss.org/mailman/listinfo/css-d
or, via email, send a message with subject or body 'help' to
[EMAIL-REMOVED]
You can reach the person managing the list at
[EMAIL-REMOVED]
When replying, please edit your Subject line so it is more specific
than "Re: Contents of css-d digest..."
Today's Topics:
1. Re: css-d Digest, Vol 57, Issue 28 [EMAIL-REMOVED])
2. Re: color consistency, accuracy (Listsmem)
3. Re: Beginner Layout suggestions (E Michael Brandt)
4. Re: color consistency, accuracy (David Laakso)
5. Re: color consistency, accuracy (Listsmem)
6. [ADMIN - OFF TOPIC] Re: color consistency, accuracy
(Alex Robinson)
7. Re: align image to bottom right corner (David Merchant)
8. A solution (Re: align image to bottom right corner)
(David Merchant)
9. <li> second line outdenting, how do you get it flush left?
(Robert Lane)
10. Re: <li> second line outdenting, how do you get it flush
left? (Jukka K. Korpela)
11. Re: Differing font-sizes between operating systems
(Jukka K. Korpela)
12. CSS shadows for centered images (Dan Craciun)
13. Re: color consistency, accuracy (Rafael)
14. css positioning (Christopher King)
15. Re: css positioning (David Laakso)
16. Noob: hover thru back color (Ingo)
17. some IE 6 problems (Christian Kirchhoff)
18. reg:Debugging CSS with apache in cygwin (bhaskar)
19. why does main content float to bottom in IE? (H. Dean Hua)
20. Re: alignment & position - liquid layout issues (Ray Leventhal)
21. Re: alignment & position - liquid layout issues (E Michael Brandt)
22. Re: why does main content float to bottom in IE? (Gunlaug S?rtun)
23. Re: why does main content float to bottom in IE? (H. Dean Hua)
----------------------------------------------------------------------
Message: 1
Date: 26 Aug 2007 15:36:01 -0700
From: [EMAIL-REMOVED]
Subject: Re: [css-d] css-d Digest, Vol 57, Issue 28
To: [EMAIL-REMOVED]
Message-ID: [EMAIL-REMOVED]>
Content-Type: text/plain; charset="UTF-8"
I will be away on vacation until September 4th. I will reply to requests on
my return.
Best regards,
Terri Phillips
------------------------------
Message: 2
Date: Sun, 26 Aug 2007 19:06:50 -0400
From: Listsmem [EMAIL-REMOVED]>
Subject: Re: [css-d] color consistency, accuracy
To: CSS List [EMAIL-REMOVED]>
Message-ID: [EMAIL-REMOVED]>
Content-Type: text/plain; charset=US-ASCII; delsp=yes; format=flowed
Thanks for the feedback...
After some further research, I've discovered some other issues:
yes, the photoshop color settings were wrong on all my machines, they
were set for print production and not for web and after changing
those settings things did improve some. The problem of metering a
jpeg in photoshop vs. metering in a browser virtually went away. BTW,
I think this has nothing to do with web-safe, web-safe is an old
concept that came from the 8-bit color era, now with 16 and 24 bit
color, the concept of web safe has been essentially deprecated.
The main problem I have discovered is that the Photoshop PSD color
space and the jpeg color space are different. So the major problem
occurs when you save a photoshop file or section for web as jpeg. A
major color shift happens regardless of color profile settings/
calibration, etc. For some reason, this is not true of PNG files
which maybe have the same color space as Photoshop files or has color
correction built into the file format?
Anyway, clients tend to give me layered photoshop and illustrator
files and I need to spit out web graphics. So I guess one solution is
to force the client to spit out their own jpegs and color correct
them before they give them to me. This can be a hassle too though
since sometimes I need to remove copy and overlapping elements and
put them back as separate elements, which is easier with a layered file.
~BL
On Aug 26, 2007, at 7:00 PM, Rafael wrote:
> If I recall correctly, this is an old issue, and the reason why
> there were "web-safe colors". Basically, it was said that different
> software may threat images differently because of "inexact" colors
> and/or different platforms --I don't recall the exact reason, though.
>
> Do you have the image and color at hand? Maybe this could be
> more clear if we compare them in our computers and software and
> tell you whether their the same or not (with platform & software
> details).
------------------------------
Message: 3
Date: Sun, 26 Aug 2007 19:13:26 -0400
From: E Michael Brandt [EMAIL-REMOVED]>
Subject: [css-d] Re: Beginner Layout suggestions
To: css d [EMAIL-REMOVED]>
Message-ID: [EMAIL-REMOVED]>
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
I have found this to be a great resource for modern CSS page layouts,
and it's free!
http://blog.html.it/layoutgala/
--
E. Michael Brandt
www.divaHTML.com
divaPOP : standards-compliant popup windows
divaGPS : you-are-here menu highlighting
divaFAQ : FAQ pages with pizazz
www.valleywebdesigns.com
JustSo PictureWindow
JustSo PhotoAlbum
--
------------------------------
Message: 4
Date: Sun, 26 Aug 2007 19:15:41 -0400
From: David Laakso [EMAIL-REMOVED]>
Subject: Re: [css-d] color consistency, accuracy
To: Listsmem [EMAIL-REMOVED]>
Cc: CSS List [EMAIL-REMOVED]>
Message-ID: [EMAIL-REMOVED]>
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Listsmem wrote:
> Has anyone else noticed this problem before? [trimmed]
>
> ~Ben
>
Yes.
But since it is not necessarily a specific css related problem, you may
(?) find <http://webdesign-l.com/> a better place to seek an answer.
Best,
~dL
--
http://chelseacreekstudio.com/
------------------------------
Message: 5
Date: Sun, 26 Aug 2007 19:26:51 -0400
From: Listsmem [EMAIL-REMOVED]>
Subject: Re: [css-d] color consistency, accuracy
To: CSS List [EMAIL-REMOVED]>
Message-ID: [EMAIL-REMOVED]>
Content-Type: text/plain; charset=US-ASCII; delsp=yes; format=flowed
Hi David,
Thanks for the link, I'll definitely check it out. I *do* think this
is a CSS related problem just because we are so often trying to match
text, borders, blocks of background color (all specified with CSS) to
images which are generated from some image editing program or another.
I found this article by heavyweight Dave Shea-
http://www.mezzoblue.com/archives/2007/06/18/shifting_bac/
It was really helpful and I think covers about 90% of what I am
trying to figure out. Hope it helps anyone else out there struggling
with this.
BL
On Aug 26, 2007, at 7:15 PM, David Laakso wrote:
>
>
> Yes.
>
> But since it is not necessarily a specific css related problem, you
> may (?) find <http://webdesign-l.com/> a better place to seek an
> answer.
>
> Best,
>
> ~dL
>
------------------------------
Message: 6
Date: Mon, 27 Aug 2007 00:55:36 +0100
From: Alex Robinson [EMAIL-REMOVED]>
Subject: [css-d] [ADMIN - OFF TOPIC] Re: color consistency, accuracy
To: Listsmem [EMAIL-REMOVED]>, CSS List
[EMAIL-REMOVED]>
Message-ID: <p06230902c2f7bf40dead@[192.168.1.65]>
Content-Type: text/plain; charset="us-ascii" ; format="flowed"
>I *do* think this
>is a CSS related problem just because we are so often trying to match
>text, borders, blocks of background color (all specified with CSS) to
>images which are generated from some image editing program or another.
Off topic - no more on this subject please (except that as I'm
already cluttering your inboxes...)
The bottom line for making sure that your images will display
consistently is an issue of using the right colour profile in your
image editing program and/or embedding the relevant profile info in
your image. Hence the safest policy (usually) is just to stick to the
basic RGB profile. Your photoshop is probably using sRGB by default
(thanks Adobe).
In the future, when CSS3 becomes a reality then colour will become a CSS
issue
http://www.w3.org/TR/2003/CR-css3-color-20030514/
And proper colour management is arriving in browsers...
http://blogs.adobe.com/jnack/2007/06/safari_brings_c.html
.... although that may create more problems than it solves if past
form is anything to go by
http://hsivonen.iki.fi/png-gamma/
Anyhow, start here
http://en.wikipedia.org/wiki/Color_management
But none of this is really on topic for a list about the nitty gritty
of using CSS.
So no more discussion of this on list though please. Unless anyone
has anything constructive to say about the CSS3 color module...
Alex
css-d moderator
------------------------------
Message: 7
Date: Sun, 26 Aug 2007 19:17:11 -0500
From: David Merchant [EMAIL-REMOVED]>
Subject: Re: [css-d] align image to bottom right corner
To: [EMAIL-REMOVED]
Message-ID:
[EMAIL-REMOVED]>
Content-Type: text/plain; charset="iso-8859-1"; format=flowed
I already have a background image, a "paper"
background. However, your post got me thinking, I
can have another div inside, and set the file
cabinet picture as the background to it. After a
couple of minutes I got that working nicely.
Except the text overlaps the image, so now I'm
working at getting the paragraph tags to have
enough padding or margin on the right that they
won't overlap the image, but so far I can't seem
to override the inherited styles for the paragraphs.
TTFN,
David
At 09:32 PM 8/25/2007, Rafael wrote:
> If all you want to do is put an image at
> that position, set it as the background, i.e.
> background: #fff url(path/to/image) right bottom no-repeat;
>? #fff is the background color, it can be
>omitted or set to 'transparent' (without the quotes)
>? 'url' is an actual keyword, and the path should not be between quotes
>? reference:
><http://www.w3.org/TR/CSS1#background>http://www.w3.org/TR/CSS1#background
------------------------------
Message: 8
Date: Sun, 26 Aug 2007 19:25:19 -0500
From: David Merchant [EMAIL-REMOVED]>
Subject: [css-d] A solution (Re: align image to bottom right corner)
To: [EMAIL-REMOVED]
Message-ID:
[EMAIL-REMOVED]>
Content-Type: text/plain; charset="iso-8859-1"; format=flowed
Silly me, I didn't put the period before my cabinet style
.cabinet { margin-right: 7em; }
works a lot better than
cabinet { margin-right: 7em; }
As an English instructor, I should be more careful about my punctuation :-).
I'm able to have the paragraphs have a large
enough right margin to not overwrite the cabinet
image. Thanks Raphael, your suggestion put me on
the right track. It looks and works great (even
if I resize the browser window).
TTFN,
David
At 09:32 PM 8/25/2007, Rafael wrote:
> If all you want to do is put an image at
> that position, set it as the background, i.e.
> background: #fff url(path/to/image) right bottom no-repeat;
>? #fff is the background color, it can be
>omitted or set to 'transparent' (without the quotes)
>? 'url' is an actual keyword, and the path should not be between quotes
>? reference:
><http://www.w3.org/TR/CSS1#background>http://www.w3.org/TR/CSS1#background
------------------------------
Message: 9
Date: Sun, 26 Aug 2007 21:38:40 -0700
From: Robert Lane [EMAIL-REMOVED]>
Subject: [css-d] <li> second line outdenting, how do you get it flush
left?
To: Css-Discussion Group [EMAIL-REMOVED]>
Message-ID: [EMAIL-REMOVED]>
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
I put a list together for a staff directory and one of them has a much
too long title.
I decided to use a <br> to move the title to the second line but now it
outdents it
I have it coded like this:
<ul id="staff1" class="nobullet">
<li><strong>Admin
Staff</strong></li>
<li>Chuck Lindley,
Administrator</li>
<li>Joanne Beasley, Comptroller</li>
<li>Kathy de Domingo, <br>
Director of Performance
Improvement</li>
</ul>
The style is set for:
ul.nobullet { margin: 0; list-style: none inside}
Is there some selector to get rid of the outdenting?
------------------------------
Message: 10
Date: Mon, 27 Aug 2007 08:15:54 +0300 (EEST)
From: "Jukka K. Korpela" [EMAIL-REMOVED]>
Subject: Re: [css-d] <li> second line outdenting, how do you get it
flush left?
To: Css-Discussion Group [EMAIL-REMOVED]>
Message-ID: [EMAIL-REMOVED]>
Content-Type: TEXT/PLAIN; charset=US-ASCII; format=flowed
On Sun, 26 Aug 2007, Robert Lane wrote:
> I put a list together for a staff directory
It seems that wish to make the list unbulleted and indented just a little.
The style sheet
ul.nobullet { margin: 0; list-style: none inside}
is somewhat unsafe for the purpose. Different browsers have different
default rendering for lists. Or, rather, they might have roughly the same
rendering but achieved in different methods in terms of CSS. The browser
default style sheets might do the indent using left margin _or_ left
padding for the list _or_ for the list items. So if you wish to get any
indentation (or non-indentation) different from the default, it's best to
start by killing all indents, e.g.
ul.nobullet, ul.nobullet li { margin: 0; padding: 0; }
and then add a setting for the _desired_ indentation.
> and one of them has a much
> too long title.
>
> I decided to use a <br> to move the title to the second line but now it
> outdents it
This seems to result from your use of the value inside. It means that the
list bullet appears inside the list item box, not to the left of it, so
some space is reserved for it - even when there is no bullet.
Consequently, subsequent lines start at the left with no indentation (on
browsers on which your margin: 0 setting kills the default indentation).
So the situation is a bit confusing. It's better to create the desired
indentation directly using margin or padding, rather than nonexistent
inside bullets. This also gives you better control over the _amount_ of
indentation.
Moreover, I suspect that you will later wish to have the continuation line
of a list item indented more than the initial line. Otherwise, in the
absence of bullets, it will be difficult to see that a title relates to
the preceding name instead of being an item in the list. One way of
achieving such indentation is to use text-indent with a negative value.
Example:
ul.nobullet { margin: 0 0 0 1.5em;
padding: 0;
list-style: none; }
ul.nobullet li { margin: 0; padding: 0; }
ul.nobullet li { text-indent: -0.5em; }
This results in a 1em (1.5em - 0.5em) indentation of the items and 1.5em
indentation of their continuation lines.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
------------------------------
Message: 11
Date: Mon, 27 Aug 2007 10:02:25 +0300 (EEST)
From: "Jukka K. Korpela" [EMAIL-REMOVED]>
Subject: Re: [css-d] Differing font-sizes between operating systems
To: [EMAIL-REMOVED]
Message-ID: [EMAIL-REMOVED]>
Content-Type: TEXT/PLAIN; charset=US-ASCII; format=flowed
On Sat, 25 Aug 2007, Felix Miata wrote:
> Note the M$ Vista monospace font Consolas is smaller than traditional
> monospace fonts, similar in apparent size to TNR. In fact, all the Vista
> fonts are closer together in apparent size than the traditional M$ web
fonts.
Although that's good for word processor users, it's a problem to web
authors. As I mentioned (somewhat indirectly), there's actually a good
reason for the (little known) default font size reduction for elements
like pre and code on IE: without the reduction, the default monospace font
would look too big as compated with the default copy text font.
Due to such effects, authors who set font size need to use something like
pre, code, samp, kbd, tt { font-size: 90%; }
if they want a typical monospace font look compatible in size with a
typical sans-serif font, not to mention typical serif fonts.
Now if we decide to use Vista fonts as the primarily suggested fonts on
our web pages (and I expect authors often will, as they learn about these
fonts), then we are in trouble. If we use Consolas as the monospace font
and have a reduction rule like the above, it becomes too small. Without
the reduction rule, monospace fonts will look big on systems that lack the
Vista fonts. The font-size-adjust property was designed to fix such
problems, but it only works on Mozilla browsers.
I have no good solution to this, but I thought the problem should be
mentioned, since it is relevant to people who use monospace fonts
(typically for displaying computer code). Maybe they should ignore Vista
fonts in designing their CSS style, for now. On the other hand, the effect
is not _too_ bad - at least if the factor is kept at about 90% and not
e.g. 83.3%.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
------------------------------
Message: 12
Date: Mon, 27 Aug 2007 11:35:55 +0300
From: Dan Craciun [EMAIL-REMOVED]>
Subject: [css-d] CSS shadows for centered images
To: CSS List [EMAIL-REMOVED]>
Message-ID: [EMAIL-REMOVED]>
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
I'm using Gallery 2.2 and the old slider theme. I'm trying to modify it
so it shows a shadow with the main img. (10 px shadow on the right and
bottom, gif created in photoshop).
For 3 hours now I can't convince the shadow div ("umbra") to collapse
*and* keep it's alignment centered (both vertical and horizontal).
Here's the link:
http://nuntidigitale.ro/galerie/v/foto/1/
and the css:
http://nuntidigitale.ro/galerie/themes/slider/theme.css
Any ideas?
Thank you!
Best regards,
Dan Craciun
http://www.cadourinorocoase.ro
------------------------------
Message: 13
Date: Sun, 26 Aug 2007 18:00:07 -0500
From: Rafael [EMAIL-REMOVED]>
Subject: Re: [css-d] color consistency, accuracy
To: Listsmem [EMAIL-REMOVED]>
Cc: CSS List [EMAIL-REMOVED]>
Message-ID: [EMAIL-REMOVED]>
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
If I recall correctly, this is an old issue, and the reason why
there were "web-safe colors". Basically, it was said that different
software may threat images differently because of "inexact" colors
and/or different platforms --I don't recall the exact reason, though.
Do you have the image and color at hand? Maybe this could be more
clear if we compare them in our computers and software and tell you
whether their the same or not (with platform & software details).
Listsmem wrote:
> Has anyone else noticed this problem before? Open a solid color jpeg
> in photoshop and use a digital color meter to read its hex value.
> Then drag and drop the same jpeg file into a web browser and then
> meter it again. The color values aren't the same. I've found that the
> browser tends to render it lighter, requiring adjustments to the jpeg
> before posting to the web. Is this because of the browser, operating
> system, monitor calibration (gamma) or some other factor? Clients are
> frequently asking me why the color of the site I build is slightly
> different than the color of the mockup they give me, even jpeg
> mockups. Thanks for any help with this matter, especially a technical
> discussion of why this occurs and any best practices to alleviate
> this issue.
>
> ~Ben
> ______________________________________________________________________
> css-discuss [EMAIL-REMOVED]]
> 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/
>
>
------------------------------
Message: 14
Date: Sun, 26 Aug 2007 21:22:02 -0400
From: Christopher King [EMAIL-REMOVED]>
Subject: [css-d] css positioning
To: [EMAIL-REMOVED]
Message-ID: [EMAIL-REMOVED]>
Content-Type: text/plain; charset=US-ASCII; delsp=yes; format=flowed
I'm trying to get my css "container box" to adjust to the size of my
"main content box" but every time I preview in firefox the "main
content box" breaks-out of the "container box", which results in a
different background colour and less than aesthetic result. Does
anyone know of a solution?
I use Dreamweaver MX 2004 to create my code on Mac OSX 10.4.
------------------------------
Message: 15
Date: Mon, 27 Aug 2007 09:32:27 -0400
From: David Laakso [EMAIL-REMOVED]>
Subject: Re: [css-d] css positioning
To: Christopher King [EMAIL-REMOVED]>
Cc: [EMAIL-REMOVED]
Message-ID: [EMAIL-REMOVED]>
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Christopher King wrote:
> I'm trying to get my css "container box" to adjust to the size of my
> "main content box" but every time I preview in firefox the "main
> content box" breaks-out of the "container box", which results in a
> different background colour and less than aesthetic result. Does
> anyone know of a solution?
>
> I use Dreamweaver MX 2004 to create my code on Mac OSX 10.4.
>
Christopher, can you provide a clickable link in your post to the page
in question?
~d
--
http://chelseacreekstudio.com/
------------------------------
Message: 16
Date: Mon, 27 Aug 2007 15:56:51 +0200
From: Ingo [EMAIL-REMOVED]>
Subject: [css-d] Noob: hover thru back color
To: css-d [EMAIL-REMOVED]>
Message-ID: [EMAIL-REMOVED]>
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Dear list,
I am trying to get those little square in the green box
http://web-bereiter.de/chobocca.com/test07/de/chobocca_einsteiger1.html
more perceivable as links by adding a hovering effec to them (div
subsubmenu with .submenupics). The hovering area for a change of
background-color of a link seems to be defined by the elements margin.
At least this works fine for the textlinks at the bottom. But for images
this approach wildly differs in result depending on the browser (tested
with Opera9, IE6, FF2).
Is the changing the background-color for images a no-no, or what is my
mistake here?
Thanks, Ingo
------------------------------
Message: 17
Date: Mon, 27 Aug 2007 17:34:40 +0200
From: "Christian Kirchhoff" [EMAIL-REMOVED]>
Subject: [css-d] some IE 6 problems
To: [EMAIL-REMOVED]>
Message-ID: [EMAIL-REMOVED]>
Content-Type: text/plain; charset="iso-8859-1"
Hallo,
Short version (for thos who don't have time but still would like to help
me):
http://www.digitale-bibliothek.de/Downloads/CSS-Test/Fixe%20Breite.htm
(HTML)
http://www.digitale-bibliothek.de/Downloads/CSS-Test/main.css (CSS)
Problem 1:
Wdith of div#zenoMF is set to 77em, but in IE 6 it's a lot wider, whereas
the red div#zenoTF has the same definition and it's width is correct. What
is happening there, and how can I correct it?
Problem 2:
The left border of div.zenoCO toughes the right edge of the left column, but
only in IE 6. In IE 7 and Firefox the box is positioned and sized correctly.
How can I correct that?
Problem 3:
The div.zenoCOFooter has to be "clear: both;". But since I changed the
positioning of the parent from absolute back to relative, the
div.zenoCOFooter now clears the left floated left column as well. Is there
any way to correct this?
Best Regards,
Christian Kirchhoff
----------------------------------------------------------------------------
---------------------------------
Long version:
I am in the middle of changing a layout. The HTML base (that won't change)
is a 6-cell-grid:
- top area (header) with three columns (left, middle, right)
- main area with three columns (left, middle, right)
This layout can be seen here:
http://www.zeno.org/Zeno/-/Hauptseite (HTML)
http://www.zeno.org/main.css (CSS)
So far the left and right column had a fixed but em-driven width. The middle
column with the main contant adjusted it's size dynamically. Problems with
Internet Explorer forced me to absolutely set the position of the middle
column. That problem was:
Normally the middle column was aligned to the right edge of the left column,
because that left column was set to "float: left;". But when I resized the
window and made it too small, then the middle column "broke" down in IE, so
it was placed under the left column. To repair that, I positioned the middle
column absolutely. That led to another very ugly bug in IE 6: Text selection
is buggy in the middle column for text that is below...imagine the bottom
edge of the left columns content and extend that to the right. That is the
line below which I have those problems. Try
http://www.zeno.org/Kafka-Werke/M/Romane/Amerika/Der+Heizer and you should
see...
No I have to change some things:
- The width shell be fixed. Might be em driven so it will adjust when the
user changes the zoom with his browser. But when resizing the window, the
columns shouldn't adjust.
- It could be that there will be a new advertisement "channel" around the
content. I visualiszed this with a dummy ad
The new layout so far can be seen here:
http://www.digitale-bibliothek.de/Downloads/CSS-Test/Fixe%20Breite.htm
(HTML)
http://www.digitale-bibliothek.de/Downloads/CSS-Test/main.css (CSS)
Because the layout is fixed, I could drop the absolute positioning of the
middle column and thus get rid of the text selection bug in IE 6.
First problem:
If you look at the page
http://www.digitale-bibliothek.de/Downloads/CSS-Test/Fixe%20Breite.htm in IE
6 you should see that the width of the main area (div#zenoMF) is wrong. Both
the header and the main area are set to 77em in width. They don't have any
font-size defined thus they should inherit the font-size of the parent and
use that to compute the actual width. But the width of the header is
correct, the width of the main area not.
I guess it is some problem with IE's box modell, maybe it adds margin or
padding and thus spreads the width of the main area.
Second problem:
The main content is in a box that has this one pixel border (div.zenoCO). In
the example, in IE 6, the left border touches the right edge of the left
column. Does anybody now why that is? Strangely enough, if I copy more text
into the page (like in
http://www.digitale-bibliothek.de/Downloads/CSS-Test/Fixe%20Breite%202.htm),
the div.zenoCO is positioned just fine.
Third problem:
In the example, the headline of the main content says "Urenkel". Below the
text itself there will always be additional information (source, permalink
etc.). It is wrapped in a div.zenoCOFooter. On the page
http://www.digitale-bibliothek.de/Downloads/CSS-Test/Fixe%20Breite.htm. The
main content can contain right floated images as well, therefore I set the
div.zenoCOFooter to "clear: both;". In the old layout, with the absolutely
positioned middle column, that worked as desired. But now with the static or
relatively positioned middle column, the div.zenoCOFooter clears the left
floating left column as well, and thus jumps way to far to the bottom. Plus:
The width of the div.zenoCOFooter is too big, as you can see by the
top-border that extends way too far to the right.
O.k., I understand that an absolutely positioned element is totally taken
out of the box flow. Therefore the browser - when working with the clear
attribute of some child element, doesn't take into account floated elements
that are outside of that absolutely positioned div (like the left column).
But is there still any way to position the middle column static or
relatively, and still let the div.zenoCOFooter do "clear: both;"?
Best regards,
Christian Kirchhoff
Directmedia Publishing GmbH ? M?ckernstra?e 68 ? 10965 Berlin
www.digitale-bibliothek.de
AG Berlin-Charlottenburg ? HR B 58002 ? USt.Id. DE173211737
Gesch?ftsf?hrer: Ralf Szymanski ? Erwin Jurschitza
------------------------------
Message: 18
Date: Mon, 27 Aug 2007 08:44:24 -0700 (PDT)
From: bhaskar [EMAIL-REMOVED]>
Subject: [css-d] reg:Debugging CSS with apache in cygwin
To: [EMAIL-REMOVED]
Message-ID: [EMAIL-REMOVED]>
Content-Type: text/plain; charset=iso-8859-1
hi all,
We configured apache and mozilla in cygwin
environment, we want to know how to debug CSS file using apache and mozilla
browser.
thankyou.
---------------------------------
Luggage? GPS? Comic books?
Check out fitting gifts for grads at Yahoo! Search.
------------------------------
Message: 19
Date: Mon, 27 Aug 2007 14:19:12 -0400
From: "H. Dean Hua" [EMAIL-REMOVED]>
Subject: [css-d] why does main content float to bottom in IE?
To: [EMAIL-REMOVED]
Message-ID:
[EMAIL-REMOVED]>
Content-Type: text/plain; charset=ISO-8859-1
On this here http://www.sachistudio.com/testing/athena/
,my<http://www.sachistudio.com/testing/athena/,my>main content floats
to the bottom in IE. Not to mention that the content in
the banner is kinda doing the same thing as well. But everything is fine in
Firefox. Can anyone shed some light on why this is?
Thanks!
--
Dean
------------------------------
Message: 20
Date: Mon, 27 Aug 2007 15:25:21 -0400
From: Ray Leventhal [EMAIL-REMOVED]>
Subject: Re: [css-d] alignment & position - liquid layout issues
To: css-d [EMAIL-REMOVED]>
Message-ID: [EMAIL-REMOVED]>
Content-Type: text/plain; charset=ISO-8859-1
<snip>
>>
>>
>> This aricle [1] may help with regard to some of your issues?
>> [1] <http://www.satzansatz.de/cssd/hgjump.html>
>> Best,
>> ~dL
>>
>>
>>
> HI David,
>
> Thanks for that awesome article by Ingo :) I'll be diving into that
> heavily as time permits today and /hopefully/ will be able to discern
> exactly what element is in need of IE fix.
>
> In case I didn't make it clear, the issue I seem to be having is with
> Win/IE7. I'm awaiting browsershots' queue to see how horrific it may
> look in the dreaded IE6.
>
> Kind regards,
> ~R
Sadly, still no joy in WinIE7 land for my nav div. I've probably not
'gotten' something easy here...and would appreciate any guidance offered.
http://devel.legionpost130.org/
Appears as expected in WinFF 1.x and 2.x, Safari, etc. No joy in
WinIE7. Haven't checked in the dreaded IE6 yet.
Regards,
~Ray
------------------------------
Message: 21
Date: Mon, 27 Aug 2007 15:53:13 -0400
From: E Michael Brandt [EMAIL-REMOVED]>
Subject: Re: [css-d] alignment & position - liquid layout issues
To: [EMAIL-REMOVED]
Message-ID: [EMAIL-REMOVED]>
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
I am sure that your CSS layout is overall perfectly up to the task, and
could be made to work. But I am just thinking that others have cracked
this nut with more easily used layouts. Like take a look at this one:
http://blog.html.it/layoutgala/LayoutGala13.html
Within a few minutes I think you could switch over to this and your
problems would, i hope!, be solved.
Just a thought.
--
E. Michael Brandt
www.divaHTML.com
divaPOP : standards-compliant popup windows
divaGPS : you-are-here menu highlighting
divaFAQ : FAQ pages with pizazz
www.valleywebdesigns.com
JustSo PictureWindow
JustSo PhotoAlbum
--
------------------------------
Message: 22
Date: Mon, 27 Aug 2007 21:46:59 +0200
From: Gunlaug S?rtun [EMAIL-REMOVED]>
Subject: Re: [css-d] why does main content float to bottom in IE?
To: "H. Dean Hua" [EMAIL-REMOVED]>
Cc: [EMAIL-REMOVED]
Message-ID: [EMAIL-REMOVED]>
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
H. Dean Hua wrote:
> ... main content floats to the bottom in IE.
You're experiencing a few IE bugs.
Two things:
1: the comment above the doctype keeps all versions of IE/win in quirks
mode. Delete that comment - as it says - and things will improve.
2: too tight in IE/win in quirks mode, so you get a "float: drop".
Provide more space by deleting #sidebar {margin-right: 5px;}.
If you also want the layout to work in older IE/win versions - and in
newer in quirks mode, you should add the old centering method...
body {text-align: center;}
#gradlayout { text-align: left;}
> Not to mention that the content in the banner is kinda doing the same
> thing as well.
IE6's old 'margin-doubling on floats' bug.
Add...
..column1, .column2 {display: inline;}
....which has no effect on floats but will "kill" that old bug.
regards
Georg
--
http://www.gunlaug.no
------------------------------
Message: 23
Date: Mon, 27 Aug 2007 15:54:23 -0400
From: "H. Dean Hua" [EMAIL-REMOVED]>
Subject: Re: [css-d] why does main content float to bottom in IE?
To: [EMAIL-REMOVED]
Message-ID:
[EMAIL-REMOVED]>
Content-Type: text/plain; charset=ISO-8859-1
Slight misspelling in the url. This is the correct url;
http://www.sachistudio.com/testing/athena/
Thanks Rick. Yeah, I was thinking of just shrinking the padding/margin of my
content but I could've sworn there was another method to maintaining
uniformity across both browsers.
Actually, my more pertinent question in regards to IE 6, is what is causing
the banner issue. The college and mba admissions section is completely off.
And how do I make it centered as well? But it is fine in IE7.
Thanks again.
On 8/27/07, Rick Faircloth [EMAIL-REMOVED]> wrote:
>
> Hi, Dean...
>
> Looks good in IE 7, however IE 6 is showing the problem.
> IE 6 always has some extra space requirements that the other
> browsers don't. I'm not sure what the explanation is... I'm sure
> someone more knowledgeable than I will come along shortly and
> explain it.
>
> I just usually create an exception in my stylesheet(s) for IE 6
> and make the padding or margin smaller for that div and it works out.
>
> Anyone have a better explanation for the problem or a better solution?
>
> Rick
>
>
> -----Original Message-----
> From: [EMAIL-REMOVED]
> [EMAIL-REMOVED]] On Behalf Of H. Dean Hua
> Sent: Monday, August 27, 2007 2:19 PM
> To: [EMAIL-REMOVED]
> Subject: [css-d] why does main content float to bottom in IE?
>
> On this here http://www.sachistudio.com/testing/athena/
> ,my< http://www.sachistudio.com/testing/athena/,my>main content floats
> to the bottom in IE. Not to mention that the content in
> the banner is kinda doing the same thing as well. But everything is fine
> in
> Firefox. Can anyone shed some light on why this is?
>
> Thanks!
>
> --
> Dean
> ______________________________________________________________________
> css-discuss [ [EMAIL-REMOVED]]
> 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/
>
>
>
--
<http://sachistudio.com/content-guide/>
------------------------------
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
End of css-d Digest, Vol 57, Issue 29
*************************************
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
