Re: [css-d] table layout using only CSS
Kenneth Stephen wrote:
What I see is col1 through col8 laid out on the same line, whereas
what I want to see is col1 through col4 on one line and col5 through
col8 on the next line. How can I do that?
In your case, just add...
.row {clear: both;}
...but if you want a real table layout using only CSS, then CSS table
properties will get you even closer...
http://www.gunlaug.no/tos/moa_11g.html
...in all CSS 2/2.1 capable browsers.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Emulating Frames
Bill Moseley wrote: I'm trying to replace an existing frame setup: +---+ | header | +-+-+ | | | | | | |scrollable div | scrollable div| | | | | | | +-+-+ | footer (optional) | +---+ with fixed height header and footer and with the center content area fluid as in this example: The basics... http://www.gunlaug.no/tos/moa_31.html ...but there are some serious weaknesses in containing stuff this way. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Emulating Frames
Bill Moseley wrote: http://www.gunlaug.no/tos/moa_31.html Ah, that makes more sense. Not sure I understand when the height expression is needed, though. IE6 can't position opposite edges of an element, so a height-calculation is needed for that, and older, IE/win versions to get the bottom of the scrollable containers to end up in the right place. See... http://www.alistapart.com/articles/conflictingabsolutepositions ...for more on that problem and solutions. I adapted my own, mode-independent, element fixed to bottom of viewport expression from this article... http://www.gunlaug.no/contents/wd_additions_15.html ...to extract the height, but it's otherwise as in the ALA article. ...but there are some serious weaknesses in containing stuff this way. Anything specific? I only tried in a few browsers and it looks good. beats the five or six frames that were used before for the same layout. thanks very much for helping! When jumping between in-page links the back button may not work as intended when overflow is controlled this way. This seems to only be a problem in some IE versions when frame-like solutions like this are used, and I have not done any testing for the solution I presented. It may work just fine :-) regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A confusing twist on the 3-column layout
Matt Feldman (inthedistance.net) wrote: http://www.mincel.com/gallery/travel_places/paris/IMG_1610.JPG.html What I'm trying to do is replicate the display of this photo. Ignore everything but the main photo and the navigation bar icons directly above and below. I only want to use a lower navigation bar, so this becomes like a 3 column layout with header, where the header contains the photo and the 3 columns contain those nav buttons. I'm not sure if IE/win will cooperate so easily when this becomes part of a larger layout, but the following does work on its own... http://www.gunlaug.no/tos/moa_32.html regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Use of !ie and !important
Nancy E. Sosna Bohm wrote: Often I find a pixel or two difference between FireFox and IE7, mostly due to my use of borders and padding. Regular use of borders and paddings should not create any difference between Fx and IE7 - when both are in standard mode. There are certain constructions that IE's engine interprets different from Gecko though, so I'm not ruling out that such differences appear at times. Can you present links to cases that clearly show such differences? I have been extensively using !ie at the end of a style declaration to correct this in IE7. This is similar to the !important used to target both FF and IE7, but not IE6. Both of these work perfectly, but I don't see any mention of them on this list. The !important hack is an old one, and I think both hacks have been mentioned here on css-d a few times. Personally I've never used any of them. Is there something wrong with this practice that I should know? I use conditional comments for IE6. Extensive use of (any) hacks is something few will promote, as it often signals a somewhat flawed approach towards problems with browser-differences. We try to find the cause of the problems first and try to fix them - iron them out, and not hack away at the apparent differences until it's established that the problems clearly can't be overcome any other way. Thus, I'd like to have a look at the problems before commenting on whether there's something wrong with the practice, or not. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] borders and padding oh my
Alex McPherson wrote: I've put up a screenshot of what I see when I open the page in IE 7(.0.5730.13) at http://www.neep.org/HPSE/css/example.jpg http://www.neep.org/HPSE/css/index.html 1: IE/win isn't reacting as intended on the negative margins on #container, because the #container-div doesn't have Layout. Also: IE/win's default margins on body are not uniform or identical to that of other browsers, so 'margin: -8px' won't quite make it. Zero out the margins on body, and delete those negative margins on #container. That'll give you the intended line-up. 2: don't wrap h1 h2 in a paragraph. It's an unnecessary and non-valid construction that can only make the rendering-problems worse. Paragraphs can't contain other block-elements. IE6 and 7 performs as expected on those links - same as in other browsers AFAICS. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] styling for two monitors
Sandy wrote: The next version of this site will probably have images that are sized to 90% of the browser window height, so that it gets really BIG for the really big monitors. I'm pretty sure I'll be in touch with you guys for help with that! OK, I'm going to write and ask what he's really after. Ask him which browser he prefers too. Maybe mediaqueries are supported well enough to check for device-width / -height / -aspect-ratio. I use some of those queries at my end, so I can make full use of my own triple-monitor set-ups - apart from switching stylesheets for some of the latest browsers on really small devices. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] standard minimum font
Bob Meetin wrote:
html, body { font-size: 100%;}
body{ font-size: .85em; }
Is there any general assumption regarding browser minimum default
font size or should I change the base CSS to something like:
body{ font-size: 1.0em; }
Or undefined? -Bob
You already have 'html, body { font-size: 100%;}', which means
browser-medium and/or user preference.
100% = 1em, and if you're happy with that then there's no need to
declare a new font-size on body.
Since not all browsers adjust medium to go with different
screen-resolutions (DPI) the same way - or at all, and different
font-families will _appear_ to have different sizes, any assumption of
what's a reasonable 'smallest font size' for viewing at the user-end
will end up as a best guess anyway.
I stay at or close to the 100% font-size whenever clients allow me, and
if they don't then they usually want to make the font-size slightly
larger one or more times - once they have received some feedback, until
we're back at close to the 100% I started out with.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] page is broken AGAIN in IE6, please, please help!
Scott Thigpen wrote:
http://www.sthig.com/photo/contact.php
The picture of the rooster is knocked down. Can someone PLEASE tell
me what's going on here?
IE6 is 1px off at both sides of the rooster image container, and you're
running a tight fit with no room for errors. IE6 has numerous
calculation-errors resulting in +-1px off, and it doesn't respect
declared dimensions.
I didn't check where IE6 miscalculated, but adding...
* html #c3 {margin: 0 -1px;}
...will just barely create enough space and correct the position in that
browser.
I advice against such tight fit, and it would also be a good idea to
keep the bubble whole - as part of #c3 - so you don't have to hit that
exact.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Conditional comments - IE import hack
Michael Adams wrote: However, my personal preference is for the @import hack: FOR * The CSS stays in the css files (doesn't cause you to hack the header) * Create code for the standards compliant browsers then hack for IE * All IE hacks are in a seperate file * It may not need to work for IE8 and above * comment conditional code is _ugly_ HTML * no javascript engine required * The @import media hack acts as a 2-way split, so we can both hide some styles from IE/win and show them to others and show some styles to IE/win and hide them from others - all in one @import. AGAINST * It is a non-standard hack The @import media hack won't create any validity problems by itself. It relies entirely on a Trident (IE/win) parsing bug - not on non-standard CSS. * It may not work with IE8 and above I really hope so, but it'll probably depend on which mode and/or standard opt-in that gets triggered in upcoming IE/win versions - for backward-compatibility reasons. * Extra CSS file on server - 1 extra dowload (usually 1kb) With that small a file-size, the number of workarounds and corrections seems too small to bother with a separate stylesheet for IE/win - IMO. I'm often up into 5 - 8 KB file-size with corrections for IE/win on regular-sized sites, where the extra download doesn't matter even on slow connections. - I have no preference for which hacks to use - as long as we have to use hacks at all. The case determines the choice. * the hack should be stupid enough not to survive for long or be copied into other browsers. I want my hacks to become obsolete. - The @import media hack is perfect in this sense, as it can't survive an upgrade to proper standard-support in IE/win. * I rather hack in CSS than adjust the markup for weak browsers - whenever possible. Non-valid (X)HTML won't easily get through the process anyway at my end, and valid but strange constructions rarely pass the 'logical sequence' tests I perform. - For now the Conditional Comments are fine when markup-adjustments are really necessary, while the @import media hack takes care of CSS branching. - There are a few more ways we can hack browsers through @import... http://www.gunlaug.no/contents/wd_chaos_20.html ...but I won't recommend the non-valid ones :-) regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] bottom border vs padding in IE, retry
Trevor Nicholls wrote:
Hmm. I see that putting my tiny HTML file on freehomepage.com has
caused it to be engulfed by an advertising monster.
It does indeed complicate things a bit, and parts of your layout gets
hidden by ads in IE6. I think you need a better place to serve your work.
I'm coding up a simple glossary function and have found that IE
loses the bottom border of my display when the final div has no
bottom padding.
http://trevor.freehomepage.com/glossary_documentation.html
IE/win (all versions) needs its Layout[1].
The addition of...
div.gloss {
height: 1% /* hasLayout trigger */;
}
...will stabilize IE's rendering-engine around that point, and make it
render that container and its border as intended - regardless of styling
on elements within.
Declaring a similar 'hasLayout' trigger on '.entry' will have the same
effect, but is not as reliable if the amount of content grows. Same goes
for a padding or a border on '.entry', which engages and counteracts
other unstable/buggy parts of IE's rendering engine.
Since this is all caused by a set of genuine IE bugs, the article[1] is
the only somewhat complete description I can give you for what's going
on and how to deal with them.
regards
Georg
[1] http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 min-width technique
Rod Miles wrote: http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/ Has anyone run into complications using this method? Any gotchas?? Apart from the 'star HTML' problem Davoud mentioned, any comments I have about the use of expressions for this purpose are collected here... http://www.gunlaug.no/contents/wd_additions_14.html ...and here... http://www.gunlaug.no/contents/wd_additions_27.html regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 min-width technique
David Hucklesby wrote: Otherwise, I guess I misunderstand the purpose of validation. No, I don't think you have misunderstood _one_ of the purposes; to check that all is correctly typed = technically valid. As we all should know: validity is easy to achieve - regardless of whether it works or not. However, there's another way to use validators, and that is to check that we haven't _accidentally_ made a typing-error. The use of IE-expressions is not accidental (I think), so the fact that they are flagged as errors should not necessarily be seen as a validity problem. IE-expressions clearly are *not* valid - wherever they are, but they can solve a problem that validity can't - when used properly. The use of non-valid code in order to work around a limitation in a browser, is sometimes unavoidable. The practice can as such be placed in the same garbage-bag as nonsensical but technically valid hacks, which are also unavoidable at times. Pity the validators can not check if something makes sense or not, as that would make them a lot more useful. After all; validators are there to help us make our designs work - and nothing else, IMO. Otherwise the validators may become more of a limitation than weak browsers, again IMO. Separating the _known_ 'non-valid and nonsensical stuff' from the 'better stuff', makes sense, even if it doesn't improve on validity. How one achieve such separation is a matter of available methods and personal choice. The fact that some separation-methods hide code from the validators, is a less important side-effect - at least to me. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering multiple floated blocks
Michael ORourke wrote: Browser tests would be greatly appreciated. http://www.basalweb.com/test/dltest3.html Firefox 2 and 3b2 have what looks like timing-problems - rendering depending on download speed, so the intended line-up (one line) is somewhat of a hit and miss with every load at my end. Same instability with this test (reworked version of your first one)... http://www.gunlaug.no/tos/alien/mor/test_08_0112.html ...and I think it's the missing table-row that is the (usual) problem in Gecko. Adding a table-row will probably fix it. The workaround for IE/win can't hold that many (6) containers in the available space, which is a minor problem - give it more space. No problems observed in Opera 7.54 - 9.5b and Safari 3. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie6 not showing background colour on hover in nested lists
Sandy wrote:
http://cantoraccess.com/sandy/resources/paper01.html
The sub menu is a nested list, which I hear is showing only half the
hover instructions. The text is turning white, but the background
colour is, sadly, staying white instead of turning brown.
IE6 has stacking-problems - hiding the background-layer behind other
elements' layers. The bug-trigger is 'position: relative' on '.menu ul
ul', but deleting that doesn't help much since IE6 also have whitespace
problems and space the list-elements too far apart vertically.
Adding a 'hasLayout' trigger to the li will fix the background *and* the
spacing problem...
.menu li {
width: 100%;
}
The list also suffers from the 'em font-resizing bug' in IE/win, so
adding...
html {
font-size: 100%;
}
...for all IE/win versions would be a good idea as long as you're using
'em' units for font-sizes in the list.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] problem with IE 6 Double Margin Bug?
Jason Pruim wrote:
I have done some searching about the double margin bug, and have
tried to do Display: inline and margin-left: -80px;
_margin-left-160px but neither wants to work. Do I have the right
bug?
HTTP://www.raoset.com
Yes, you have the right bug, but you're targeting it on the wrong element.
There are also some other IE6 bugs involved.
The addition of...
.content {display: inline;}
.leftColumn {position: relative;}
* html .wrapper {zoom: 1;}
...will kill the right IE6 bugs on the right elements.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] problem with IE 6 Double Margin Bug?
Jason Pruim wrote:
One question I did have though... I understand the .content {display:
inline;} and the leftColumn {position: relative;} but what does the
* html .wrapper {zoom: 1;} do exactly?
It's a 'hasLayout'[1] trigger, and in your case I found the non-valid
'zoom' to work best - alternative (valid) triggers tended to have
negative side-effects. I also had to use the '* html' hack to target IE6
(and below), to avoid conflicts with some of IE7' internal bug-fixes.
Without this 'hasLayout' trigger IE6 seemed to interpret .wrapper's
dimensions a bit unreliable - changed positions for .wrapper's children
when hovering links - which is a clear sign that IE6 couldn't determine
.wrapper's dimensions and relation to other elements.
Triggering 'hasLayout' means to lay out the area of .wrapper -
stiffen up IE6' backbone so it immediately interprets exactly how wide
.wrapper is, and where to position .wrapper's children relative to
.wrapper's edges. Result: stable rendering.
I put it up at the top of the css file, and it works, but is that the
best place to put it? Or should it go somewhere else?
Put it anywhere you like where IE6 can pick it up, as long as it is
complete - as I wrote it. The CSS validator will flag it as an error
anyway - unless it is hidden in a conditional comment or something to
that effect.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Container Height Issue on Dynamic Page
Chris Akins wrote: Is there a way to keep my html ordered the way it is, and NOT use floats, and still end up with a #container that contains BOTH of the things inside it? Don't think so - if the appearance should otherwise stay intact. What's wrong with using floats in your case? Turns out ok, IMO... http://www.gunlaug.no/tos/alien/ca/test_08_0116.html regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 and 7 Bullet Positioning
Tessa Harmon wrote:
What is the best way to control the positioning of image bullets in
IE6 and 7? They are rendered higher and further to the right than
they should be.
http://www.bossmanmedia.com/ie6/group-center-form.html
You can always manipulate the relevant elements back and forth until the
image and anchor-text line up as you like.
The following example...
@media screen {
* html #info ul {overflow-x: hidden; height: 1%; }
* html #info ul li {margin-left: -8px; line-height: 1.2;}
* html #info ul li a {position: relative; top: -.3em; left: 6px;}
*:first-child+html #info ul {overflow-x: hidden; height: 1%; }
*:first-child+html #info ul li {margin-left: -8px; line-height: 1.2;}
*:first-child+html #info ul li a {position: relative; top: -.3em; left:
6px;}
}
...shows how it _can_ be done for IE6 and IE7. Other browsers will not
be affected.
Example tested for your layout, but the values may need some tuning
since I can't see what's right in any browser at my end. Your layout
breaks across browser-land and can't take any font-resizing.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floated definition list, markup order vs. display
Timothy Kelty wrote: http://geniuscar.com/tests/def-list-float.html I want the dd class=image block to float left all the way at the top, with the dt and the rest of the dds lined up on the right. A float can't go higher than the last preceding float. This keeps the dd.image down there alongside dd.price. You can absolute position dd.image... http://www.gunlaug.no/tos/alien/tk/test_08_0116.html regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Container Height Issue on Dynamic Page
Chris Akins wrote: Nothing, I guess. But now that I've put the floats in, I'm getting no spacing between #stories and #nav on IE6. Firefox and Safari show it correctly (or as intended anyway). This page actually started being built over a year ago, and I had tried floats. Now I remember why I then went to positioned elements. Beause of this difference in spacing. You're experiencing the 'margin-doubling on floats' bug in IE6. Look once more at my example - in IE6... http://www.gunlaug.no/tos/alien/ca/test_08_0116.html ...and see that there's no spacing problem. That's because I killed the 'margin-doubling' bug by declaring 'display: inline' on #stories. Floats can't 'display: inline' so it is a nonsensical declaration, but it fixes the bug in IE6. I don't yet have IE7, so I don't know what it's doing in that browser. Can't see any problems in IE7. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floated definition list, markup order vs. display
Timothy Kelty wrote: I guess it would still make sense semantically if I had the image dd below the dt still, right? Don't know what kind of semantic sense its _position_ is supposed to carry, but if it's a product-image it might make sense to move the dd.image in the source-code so it came first after dt. Title of product followed by image of product make sense to me. Positioning it to the far left can be done the same way, since absolute positioned elements don't take up space on their own anyway. Semantics does of course apply to visual order - CSS, but if we end up introducing a different meaning through the order of the the styled and the unstyled content, care has to be taken. Some visitors may experience and use a site visually (styled) and non-visually (fairly unstyled) at the same time - because of handicaps or for other reasons, and it is best to avoid styled vs. un-styled conflicts when possible. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Container Height Issue on Dynamic Page
Chris Akins wrote: Wow - that's perfect! I had to put the declaration on both of the floated divs, not just one, in order for it to be fixed in my IE6. But that's swell! Thanks. :-) I had the fix on both floats in my example too - they're in the CSS, but forgot to mention the second one in my last reply :-) So, in order to turn this into a learning process, had these divs had margins on more than just the one side, would they all have gotten doubled? Does this always happen in IE6 with floated items that have margins? Or is it just when there are more than one floated item? It's the _front-side_ margin that gets doubled on floats in IE6 and older win versions, and the _front-side_ is left on a 'float: left' and right on a 'float: right'. For more about this bug and the fix, see: http://www.positioniseverything.net/explorer/doubled-margin.html regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Check: not showing in IE 5.5/6
Kim Brooks Wei wrote: I had a look at some browser shots of this site, and it seems to have issues in IE 5.5/6. In fact, I couldn't see any content in either of these browsers. http://thewei.com/sandbox/briarhall/ The layout table expands out of control in IE/win in quirks mode. I suggest you replace that table with a simple page container, like in this example... http://www.gunlaug.no/tos/alien/kbw/test_08_0117.html The table is gone, and I've altered a few styles and added a few more (see comments), to make all versions of IE/win line up. Apart from that it is your original markup and CSS. Doctype changed to reflect markup-standard. (G, I love a well-tuned HTML Tidy :-) ) regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] list-style problem on IE 7
If the CSS doesn't display properly, then it's truly invalid. But, if the CSS works on the screen, that's the true test of validity. There's a problem with such a validity statement, in that the browser behind the screen may be (and in this particular case in fact is) broken. If we rely entirely on what browsers do for deciding what's valid and what isn't, then we may have to live with all the weak and broken browsers for a long time, because their engine-bugs _can't_ really be corrected once enough sites are relying on same bugs. This is in fact why it's now so hard (nearly impossible) to create a standard-compliant version of IE/win, as billions of sites are based on the engine-bugs in existing versions, and a large percentage of those sites will break in a truly corrected version of IE. Some sort of standard compliance opt-in is one of the alternative ways this dilemma can be solved, which probably means the next versions of IE/win will not be truly standard-compliant. What's rendered in a browser, any browser, says nothing about validity - only about standard-compliance in that particular version of that particular browser. Web standards OTOH, _are_ standards that the browsers _should_ comply with, and the word valid can only be used when something - a browser or site - is measured up against these standards. The fact that no web standard is perfect or complete and no browser flawless, has as little to do with anything as the color and shape of valid icons. Both standards and browsers need constant improvement - and always will until we no longer need them. Whether new browser-versions can't comply with standards because the browsers are badly made to begin with, or because site-authors have already locked them down by relying on their old bugs, doesn't make much of a difference. They don't comply. The result will be continued weak standard-support and/or opt-in branching, which will make it harder for all site-authors in the future. I don't think making web design harder is what we'd like to be remembered for a few years from now, so we should look a bit ahead and rather not legitimate misuse of browser-bugs _whenever_ that can be avoided. It is only when we don't really have a choice that bug-riding _can_ be legitimated - to some degree, but lack of choices doesn't make such practical solutions valid - no matter what ends up on screens. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Please help me fix a DIV's position vertically but not horizontally.
Philippe Combes wrote: One year ago, Georg replied with a link to one of his own pages, where a menu behaves a bit as I would like it for mine, even if on the right side: http://www.gunlaug.no/contents/toc_7a.html The difference is that I would like my menu to scroll horizontally just as if it was defined with position: absolute;. Say, position fixed on y-axis and absolute on x-axis. The effect you're after can not be easily achieved with CSS alone as of today, since an element can't really be given two different references - one to the browser-window (fixed) and one to the page (absolute). My example does actually behave as you want, but _only_ in IE6 and below, and _only_ when javascript-support is on. IE6 and older don't support position: fixed at all, and is therefore given the fix described here... http://www.gunlaug.no/contents/wd_additions_15.html ...where fixed elements are absolute positioned horizontally relative to the page, and an IE-expression dynamically feeds them vertical offset-position based on where the page-top is relative to the window when the page is scrolled. I tried to find out my way amongst all the CSS code associated to Georg's page, to see if I was able to modify something to get the desired behaviour, but I quickly got lost: I have started to learn and work with CSS 10 days ago... No surprise you got lost then, as neither my stylesheets nor my markup is particularly beginner-friendly :-) My solution gets around the problem with position: fixed lining up correctly in max-width restricted pages - by using nested elements and complex styling, but the overlapping on narrow windows problem is unsolved - except in IE6 and older. Expressions never made it into CSS, and no alternative to them have made it either - at least not yet. Consequently: the effect you're after can be made to work (somewhat) by having a script inject new position-values for the fixed element based on page's position and dimensions relative to the window / viewport. There is an alternative method: reverse the IE6 solution described here... http://www.gunlaug.no/contents/wd_additions_17.html ...to work in all browsers. Some sites use such a method. However, that method messes up the back-button functionality under certain conditions in existing IE/win versions, so I haven't taken it any further. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Elements outside of container
Kim Brooks Wei wrote:
I can't imagine why my graphic and main text won't stay inside of
their #wrap container.
http://thewei.com/
In standard compliant browsers elements won't expand to contain floats
unless you tell them to. This is proper behavior, and only IE/win
expands containers without being told.
You can declare...
#wrap {overflow: hidden;}
...to make the #wrap container expand the way you want.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with overlapping divs
Anne Pennington wrote: Dear all I have strayed away from my tried and trusted layout to something new and am having a problem with overlapping. If some kind sole could have a look at: http://www.digitalplot.co.uk/cutandthrust/ I would very much appreciate it. As there are only two menu items I wanted to keep them outside the main body so they did not use valuable space but, when you shrink the browser window, they flow over the rest of the page. I really want the menu to remain in the green area. There are no real workarounds, because the containers aren't interconnected. As you can see here... http://www.gunlaug.no/tos/alien/ap/test_08_0121.html ...the overlapping _can_ be prevented on narrow windows, as the menu stays in the green area and the main container centers on wide windows - 1240 wide and beyond. However, the whole line-up gets skewed on narrow windows, because only #container acts on the presence of #nav and the other elements center in the window on their own. If you relax on the centering then the line-up is easy, as the main containers can be floated left with a suitable margin-left to keep them lined up. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two-column fluid layout
Murphy, Kristen Anne wrote: I'm trying to create a two-column, fluid layout using the method described in this article: http://www.alistapart.com/articles/multicolumnlayouts/ (In short, the method involves creating the illusion of equal-height columns by making a div with a wide left border and then floating another div over that border.) I'm running into a few problems, to wit: 1. In Firefox (v.2.0.0.11), the contents of the sidebar div (called #menu in my code) are not showing up. Delete 'overflow: hidden' on #container, as nothing can show up outside #container's content-area with that property/value present. 2. In IE7, the position of #content fluctuates as the width of the browser window is changed. #container isn't given a width, so as a float it shrink-wraps and jumps slightly in width with the width of #content - length of the text-lines. Same jumping appears in Opera (for the same reason), btw. 3. In IE6, the contents of #menu aren't showing up and the left edge of #content is cut off. Again the effect of 'overflow: hidden' on #container. The various versions of IE/win have several bug-variants related to 'overflow: hidden' and 'position: relative', so what one version does says nothing about what the other versions may come up with. Style with care. http://imp.purplelagoon.org/current/index.shtml The faked equal height columns solution using borders, needs very precise and complete styling to really work across browser-land. I've used it for years - long before the ALA article came out... http://www.gunlaug.no/contents/wd_1.html ...although I prefer the (even more complex) column outline version... http://www.gunlaug.no/contents/wd_additions_26.html ...which is the same but uses wide paddings instead of wide borders. I recommend a re-read of the ALA article, to get a thorough understanding of all the little details needed for reliable and stable use of the method. Once you've got it it's a real problem-solver. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Footer CSS Coding
Rick Good wrote:
www.themeridiangrp.com
.meridian #footer { position: absolute; bottom: 40 px; left: 0 px;
...
does not work.
You're absolute positioning all main elements, which means the
#container doesn't stretch the full pageheight since A:P elements don't
take up space and can't be contained.
#container and body only contains the header, and only a CSS error
(check with the CSS validator) prevents body from collapsing completely.
Since it's working I'm not overly concerned, but I would like to know
the right way to do it.
1: it doesn't _really_ work since you've based your top:values on an
unaltered font-size, and font-size is a variable in all browsers.
This means content is overflowing and parts are hidden at my end, since
I require a larger font-size than you have anticipated.
2: you can use floats and float-containment for main elements
(containers), and must then remove _all_ absolute position references
for main elements.
This will make the #container/body expand to allow for
bottom-positioning as your CSS example shows, and also allow you to
simply clear a non-positioning footer below the other non-positioned
elements. These are the right methods - if right is the right word
here, and they'll both work regardless of content-/page-height.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal Vertical scroll bars appear in IE even tho overflow: hidden
Juanita wrote: I have a scrolling message in an iframe, and it looks perfect in Firefox, Netscape Opera, the problem is only in IE http://www.kcsm.org/marquee.php The quick fix... iframe src =marquee_iframe.php style=overflow:hidden; height:4.5em; width:32.5em; border:0; padding: 0; margin:0 0 .75em 0; _margin-left: 20px; scrolling=no ...where 'margin-left' targets IE6 (and older) using the leading underscore hack, and the 'scrolling-attribute' is set to no. Not the nicest fixes in the book, but they work with no negative side-effects in your case. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Odd IE6 issue
[EMAIL PROTECTED] wrote: http://www.abbeyrentssf.com/party-rentals/rentals-overview.html You'll notice that the word overview is not there in IE6. There is absolutely no difference in code - either HTML or CSS - than any of the other pages, yet the text is gone. It's there (just view source and you'll see it exactly where it's supposed to be) - but it's not visible on the page at all. I cannot, for the life of me, figure out why. Cause: absolute positioned element next to float - a class=logo clear href=#.../a. This triggers loads of IE/win bugs. As a test, I moved the h1 out of header - just below it, and moved h1's relation to #wrapper. Gives same position and same source-order, and avoids the IE/win bug. Any other way you can keep floats and A:P elements away from each other without messing up the alignments, will work just as fine. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] XHTML 1.0 Transitional and IE6
Michael Adams wrote:
Using a two column negative margin layout, only IE5, IE5.5 and IE6
all show the sidebar below the main content, though everything looks
offset correctly in the x direction. First time i've tried working in
quirks mode and wonder if anyone can see my overlooked issue.
http://demo.realpeople.gen.nz
IE6 (regardless of mode) and below do not respect declared dimensions.
The result is a too wide sidebar - making it drop.
Adding...
* html #sidebar {overflow-x: hidden; margin-right: -10px;}
...will keep sidebar-width under control, and provide some extra space
for IE/win's calculation bugs.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Scaling type isn't expanding the container div
Michael Stevens wrote:
http://nancyray.accountsupport.com/index0.php
I can't figure out why the type under the Presstek Ad isn't pushing
the div below it down when I scale the type.
Setting a height like you have...
#content div.tab_section {
height : 165px;
}
...has that effect in compliant browsers.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fluid images
Jack Blankenships wrote: I want to have an image (several images) that are dynamically sized/fluid based on the browser window/viewport dimensions. 1: declare a (very) large pixel or em 'width' on the image - in CSS. 2: declare 'max-width: 100%' on the image. Result: the image will become as wide as the 'width', but will not become wider than the body or other element it's placed in. Declaring an image-width larger than the largest viewport you can imagine, will make it fill all imaginable viewports exactly - unless you impose other restrictions. Example with somewhat large (intrinsic, not declared) 'width' (1280px) and 'max-width: 100%'... http://www.gunlaug.no/tos/moa_19c.html regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about wrappers/containers
J wrote: (www.stainlessband.com/index.html) I'm having an issue with the width of the wrapper div. When I designed the page I did so on my laptop, which has a maximum screen resolution of 1024x768. But my desktop PC is set on 1152x864 and when I pull up the page in the browser there is background space between the graphics and the outer edges of the wrapper div. This isn't the intended design, as I want no space between the graphics and the wrapper. The #wrapper is set to center inside the graphic-containers, but the graphic-containers will keep on expanding in width with the browser-window. One way to solve it is to add a 'max-width: (some value)' and 'margin: 0 auto' on #leftBody, to prevent the graphic-containers from expanding beyond the width you've designed for and center on wider windows. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Flyout Menu problem with IE6
Joe Barrett wrote: http://download.thelenad.com/mathall/interiors.html First, this page is actually embedded in an iframe so when it's full view, the pop up menus on the right side of the page, Browse our Featured Brands, will not line up, but my problem is the fact that I can only get the left column to pop out and not the right column in IE6. Otherwise both columns work in Safari, Firefox, and IE7. 1: you're positioning the flyouts relative to the body and with 'em', so it is only by chance that those flyouts will end up where you want them. Any window-size and/or font-size deviation from your ideal will make it break. 2: You're also using 'position: fixed' which IE6 doesn't understand at all. Also: 'fixed' will not line up with anything but the browser-window since that's what 'fixed' mean - making the line up even more chance-like in any browser at the user-end. 3: You're also triggering the em font-resizing bug[1] in IE/win, which adds to the problems mentioned above - apart from risking oversized or extremely small and unreadable text in all (present) IE/win versions. Those flyouts _must_ be positioned relative to the element/container you want them to line up with. That's probably best done by declaring 'position: relative' on the parent - the relevant li, and 'position: absolute' with only a small 'left' value on the relevant flyout. regards Georg [1]http://www.gunlaug.no/contents/wd_additions_13.html -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Horizontal centering problems and a couple of other IE issues
Toby Curl wrote: http://pi3.co.uk/design_test/index.html http://pi3.co.uk/design_test/profile.html The pages work correctly in Firefox, Safari, Opera and others. The only problem I am having is with IE. I am using IE7 and have tried it in IE5 and IE6, with the same results. All IE/win does indeed render the same, because your pages triggers quirks mode - no doctype present - in all browsers. Is this intentional? IE/win doesn't support much of your centering-styles in /any/ mode, but for IE6 and IE7 it's even less when in quirks mode since they're then limited to what IE5 can handle. Other browsers offer pretty good CSS support regardless of mode, so they'll render as intended. Anyway, I've made the most basic corrections for IE/win *quirks mode* in these examples... http://www.gunlaug.no/tos/alien/tc/test_08_0125.html http://www.gunlaug.no/tos/alien/tc/test_08_0125b.html http://www.gunlaug.no/tos/alien/tc/test_08_0125_files/style000.css ...so you have something to compare with. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Horizontal centering problems and a couple of other IE issues
Toby Curl wrote: http://pi3.co.uk/design_test/index.html http://pi3.co.uk/design_test/screenshots/ 1) The menu and logo layout. The text is off center slightly and so long text gets cut off (in IE7 see msie-7.0_index_1.jpg) or the button stretches and repeats the image so looks odd (in IE 5 and 6 see msie-5.5_index.png and msie-6.0_index.png). IE6 and older don't respect declared dimensions - will expand elements if content doesn't fit. IE7 kind of respect declared dimensions, but still doesn't treat 'display: inline/block' quite as one would expect. These rendering problems may be solved when solving point 3 below, but I don't have time to test. 2) The vertical centering. It doesn't appear to be working in IE. IE/win doesn't support CSS table at all, so all alignments and auto-expansions based on 'display: table/table-cell' is lost on that browser. For vertical centering in IE/win you can probably use the solution described here... http://www.gunlaug.no/contents/wd_additions_20.html ...but it is what some like to call a dirty workaround. 3) In IE5 and 6 the buttons are spaced out too much: see msie-5.5_index.png and msie-6.0_index.png The old IE/win whitespace bug. Try adding a suitable 'hasLayout'[1] trigger to the list-items and/or anchors. 4) In IE5 the horizontal centering is messed up in a few places: see msie-5.5_profile.png and msie-5.5_index.png I'm not sure if its worth trying to fix the IE5 issues as it is a bit outdated now. IE5 will stay in quirks mode no matter what - these old versions don't have a mode-switch, so you have to take that into account while trying to fix any issues. BTW: you have two instances of id=nav_index, and an ID should only be used once in the source-code of a document. CLASSes are for repeated use. regards Georg [1]http://www.satzansatz.de/cssd/onhavinglayout.html -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Doctypes rendering comparision table (my 5c)
DAVOUD TOHIDY wrote: [...] So based on what Eric states on that page, a strict doctype requires that the correct CSS specifications to be applied to an element such as the img in question. However almost standard mode does not necessarily requires it in SOME cases like above. Am I correct? Has nothing to do with requirements, and everything to do with finding practical solutions when problems arose. There should (in the ideal and standardized world of web design) not be any differences in how CSS - written or default - is handled in Strict and Transitional - or Quirks mode. However, once the doctype was turned into an element for switching, web designers started using and abusing that switching mechanism without caring one bit about the actual standards. Result: nothing works as it was supposed to and those (browsers) who were hit the hardest took the practical steps necessary to avoid being sidelined - even if this meant bending whatever rules there was or writing new ones that suited their situation. Others made their own decisions on what to do, depending on their situation. Note that MSIE/win never adopted the almost standard mode, and have had no problems with that since they never really adhered to what is known as the standard mode either. MSIE has followed its own anything but standard mode up to present releases, using the doctype to switch on. It is web designers use of that anything but standard mode that has created the need for 'version targeting' in MSIE8. If yes, then that is what I mean. It is the strict doctype which triggers the browsers to behave correctly or in another words render correctly based on the correct CSS specifications. Is that correct? Most browsers agree somewhat on Strict, but - as you can read from the above - the agreements are practical ones and don't assure anything across browser-land - least of all perfect standard compliance. Doctypes with Strict is the relevant standard on source-code level. Doctypes with Transitional points to an intermediate - transitional - version of a standard, where a few elements from older standards are allowed for older documents that are harder to convert intact to a new and Strict standard. Transitional should *not* be used in _new_ documents, unless the quality of Strict can not be obtained - maybe because Strict doesn't allow something that one can not fix and/or do without. That's all there is - or was supposed to be - regarding the whole Transitional vs. Strict standard-versioning. Note that the latest standards and work in progress don't differentiate between Strict and Transitional. They are, or will be, Strict and nothing else. Doctypes were not created to act as a switch-trigger in browsers, but browsers turned it into one since there isn't all that many other ways to figure out if web designers wanted an old non-standard based rendering or a slightly more standard based rendering. The fact that most web designers only wanted a switch trigger since they noticed that browsers reacted on it and that designers were told that they should have a doctype on top, has since muddled the whole issue. See: http://www.gunlaug.no/contents/wd_additions_25.html ...for a bit more about how *not* to fix sites by adding a doctype. Again: doctypes and doctype-switching should *not* have anything to do with how CSS should be interpreted, but the fact that it does affect CSS is the only reason I'm responding on-list. - Interpretation-differences are not standardized by the W3C, and documentations elsewhere are next to non-existing. - Relying on existing interpretation-differences is not a very good idea, as most differences are caused by bugs, and the other differences are just practical solutions that may not last. - Serious web developers should use the CSS interpretation in Strict as baseline - after having checked with the relevant CSS standard what's most correct, and adjust all Transitional CSS interpretations to line up with what they want, and can get, in Strict. From there one can style whatever as one like, and can get away with on the real www. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Doctypes rendering comparision table (my 5c)
DAVOUD TOHIDY wrote: Now from here I would like to point out an important issue. There has been some people on the internet claiming that Doctype is only for VALIDATION purposes. I believe they are just joking and that they do not see the big picture. The big picture is that browsers misuse doctype as a switch-trigger for (what one might call) adjustments to their engines, so they can handle several generations of non-standard and standard based documents without breaking the web. Layout and script handling are altered. The doctype itself _is_ nothing but a declaration of which (X)HTML standard a document's source-code is based on, so one can check conformance - validity if you like. CSS standards - which most visual rendering is based on today - deviated on several points from the default and attribute-based rendering earlier (quirks mode) rendering engines was based on, so the need for a branching mechanism appeared. Once that branching mechanism was introduced there was no going back, and we had the doctype-triggered mode switch. Now we have several modes, and one particular browser needs more modes and is running out of doctypes to switch on and want to introduce new triggers, while the others seem to have kept their path cleaner and can continue building on existing rendering modes. This only to say that the role of doctype is what each browser make of it, so if you want to build up a 'rendering comparison table' you'll have to study the major browser and their respective mode-branches in quite some detail, and must probably go beyond the misused and abused doctype pretty soon. You can start here... http://www.webdevout.net/browser-support ...and add the other rendering modes on top of it. Since I rarely ever validate my (X)HTML source-code, the only purpose the doctype has at my end is to tell my fine-tuned version of HTML Tidy which (X)HTML standard it should clean up my documents against. I think that is one of the few proper uses one can make of a doctype. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Doctypes rendering comparision table (my 5c)
Yes that is ONLY one of the proper uses of a Doctype. Doesn't make much sense to CC the list with quotes like that, when my mails are delayed forever and too often don't ever reach the list. G -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Internet Explorer and Collapsing Margins?
David Terrell wrote:
Hello All,
I have a couple issues. In Internet Explorer, the #popupmenu div
shows up on the right rather than the left. I have no idea why. It
displays properly in all other browsers I've checked.
http://www.cometothewell.org/newsite
Add...
#popupmenu{
left: 0;
}
...to tell IE/win where to position that element. IE/win will otherwise
by default position its left edge horizontally in the middle of its parent.
Another issue: On the various sub pages which use a different
stylesheet: http://www.cometothewell.org/newsite/substyles.css
The #leftimage div is showing up way too far down which I thought
might be a collapsing margin, but I used padding-top: 1px on the
content which you can see and I thought that would take care of it,
but it doesn't. I even used it on the #leftimage div and nothing
happened. anybody see what's happening here?
You have one more div there - strangely named #enlcose and left unstyled
AFAICS, and that div is interfering with vertical margins in non-IE
browsers.
Both #left-image and #main-text has 'margin-top: 280px', and one of
these (#main-text) lose its margin to #enlcose, while the other
(#left-image) is pushed down by its own margin-top in addition to the
one that has collapsed onto #enlcose.
A nice little collapsing margins conundrum :-)
To solve it: delete that extra div id=enlcose in the source-code, or
declare...
#enlcose {padding-top: 1px;}
...to contain 'margin-top: 280px' from both #left-image and #main-text
inside it, and collapsing margins won't create any more problems.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Can contained DIV's height be governed by external DIV (not its parent)?
Richard Querin wrote:
I didn't think inner (contained) divs could be affected by divs or
other elements completely outside their parents in that way.
A div doesn't prevent its content from interacting with outside elements
by default.
There are several layers of div's so I've changed their colours and
labeled them for clarity. The first screenshot is when the left div
is tall and the right div is short. The second illustrates the vice
versa case. In each case, the postheader div seems to take up the
height of the tallest float.
It seems to clear all other elements inside div-content, which is
correct behavior when you have a 'clear: both;' acting on it.
http://img352.imageshack.us/my.php?image=divprob2cc9.jpg
Isolate div-centrepanel...
#centrepanel{
background: #9cc;
margin: 10px 220px 10px 10px;
overflow: hidden; add
}
...so its children only interacts with elements inside same div-centrepanel.
You may also have to add...
* html #centrepanel{
overflow: visible;
height: 1%;
}
...to make IE6 and older versions act properly.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 problem with lists (other?) next to floated items
Jeff Blaine wrote: I guess what I am saying is that I am looking for the generalized solution, not the solution to the test case page+image as static files. The test case exists only to show the problem. http://www.kickflop.net/csstest/ In general: 1: eliminate all browser-default differences - especially for lists. 2: line up elements with basic styles. 3: introduce 'Block formatting contexts'[1] / 'hasLayout'[2] where needed. This will result in something like... http://www.gunlaug.no/tos/alien/jb/test_08_0129.html ...where source-code is your original and styles are altered to assure the same rendering in IE6, IE7, Fx2, Op9, Saf3, etc. From there you can tune individual styles to make it fit any case with somewhat similar use of elements. regards Georg [1]http://www.w3.org/TR/CSS21/visuren.html#block-formatting [2]http://www.satzansatz.de/cssd/onhavinglayout.html -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu padding issue
Joanne wrote:
http://dragonflytanks.com.au/newnav/
I have stripped the bulk of the code out, but can't get the
positioning quite right or the height of the background-colour on
mouse over.
Can someone point me in the right direction?
The addition of...
#navigation a {float: left;}
...will give you the necessary height control.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 problem with lists (other?) next to floated items
Jeff Blaine wrote: This is exactly what I was looking for. Thanks Georg! You're welcome. Note: I left what looks like a couple of typos in the styles for my example. It was a non-valid quickie I often use during testing. For correct styles, please reload my example... http://www.gunlaug.no/tos/alien/jb/test_08_0129.html regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site not playing right in IE6
Brian Jones wrote:
I am developing a site ( http://fatusboutique.com/index2.php ) and it
displays fine in FF and IE7..I came to work today and on friends
computer who still has the old IE, I realized that its not displaying
correctly..It seems like the #right div is dropping and not floating
to the right...can anyone help me out with this?
Add...
* html #left{display: inline;}
...to kill the old margin-doubling on floats bug, and...
* html #right {overflow-x: hidden;}
...to make IE6 (and older IE/win) respect declared dimensions.
That will give the intended line-up in 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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Not showing in in IE6 on XP-Pro
Marje Cannon wrote: My firm is about ready to launch a new website, but have discovered that the content on some of the pages is not showing up in IE6 .. on an XP-Pro machine. http://www.webdesignsarasota.com/portfolio-logo-printdesign.php Looks like IE6' messy layering is becoming even more messy when it encounters all those 'position: relative'. Deleting the whole bunch of them gives IE6 a chance to layer properly. Here's an example (copy of your page) where I have deactivated P:R wherever I could find them, and it seems to render just fine in IE6... http://www.gunlaug.no/tos/alien/mc/test_08_0130.html To spare me from having to write all of them down, I have used a non-valid deactivating method that gets flagged as *ERRORS* by the validator... http://jigsaw.w3.org/css-validator/validator?uri=http://www.gunlaug.no/tos/alien/mc/test_08_0130.htmlwarning=1profile=css21 ...so you can find them and delete them in your stylesheet. Note that the use of 'position: relative' as a fix for IE6' layering problems is conditional - must *only* be added to the right element(s). Using P:R as a fix all over the place, tend to cause cause more problems than it solves. Use P:R where it's needed - and nowhere else, and test well across browser-land - especially in old IE/win. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] GIF to PNG switch didn't work
Daniel Kessler wrote: Well that certainly helps me with my box - thanks. Clearly I should've put it on a blank page before posting. Sheesh. Maybe this is more useful... http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] left side not carrying down
Lisa G. Wilcox wrote: I have the following site HYPERLINK http://www.webgirlwebdesigns.com/testing/TriBeam/index.htmlhttp://www.webg irlwebdesigns.com/testing/TriBeam/index.html The sidebar on the left doesn’t flow all the way down with the main body text. Please advise. I think this might work in your case... http://www.positioniseverything.net/articles/onetruelayout/equalheight regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table drops when window is shrunk on IE
Farid Jamea wrote:
I have an annoying problem on my website
(http://atlantagoldenrugs.com/viewgallery.php?cid=16pid=335). Look
at the page and try to gradually shrink the page, and you'll see that
the table containing the rug picture goes under the navigation bar
if shrank enough. This only happens on IE (It works fine on FireFox
and Opera). Do you have any suggestion on how to fix this (so the
table stays in its place)?
This addition will fix IE7...
#right {height: 1%; /* hasLayout trigger */}
...but IE6 needs more...
* html #left {margin-bottom: -1000px; /* remove space of float */}
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Arrg, ie6 and less problems...
William Ellis wrote:
In ie5.5 and ie6 it garbages up so bad as to be unusable with
flickering and mishapped blocks. Even the page thumb is missing and
I have never seen that.
website: http://wildcotton.wrellis.net/test.html
For a start, at the very bottom of your stylesheet add...
@media screen {
* html .contentleft div, * html .contentcenter div, * html .contentright
div {height: 1%;}
* {position: static;}
.footer {width: 100%; display: table;}
* html .footer {width: auto;}
}
The first rule adds a 'hasLayout' trigger to all divs inside the three
columns.
Seems to work ok, but triggering 'hasLayout' on that many elements is
usually an overkill with potentially negative side effects, so you may
want to reduce that to only trigger 'hasLayout' on the divs that really
gain from it and test thoroughly.
Second rule - you should immediately stop believing in rumors like this...
* {
position:relative; /* rumored to help with some IE problems (other than
IE5/Mac. */
}
...and *never* add 'position: relative' to elements that don't need it.
What you have now is complete overkill, and destroys IE6' attempts on
scrolling and rendering your page.
Reset that to default = 'position: static' - that is: delete 'position:
relative' as universally applied property/value.
Footer's fixed height becomes a limitation in good browsers - especially
when font-resize is engaged at user-end.
Third rule is turning 'height' into 'min-height' and preserves full width.
That 'width: 100%' disturbs IE6, so fourth rule resets it to 'auto' for
that old browser.
The whole thing is wrapped in an @media screen rule for good measure, so
it won't be picked up by IE/Mac and other very old browsers. If that's
not an issue, then the @media screen rule wrapper can be left out.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] page check-positioning gap, font issues/questions
Ron Zisman wrote:
http://www.ricochet.org/ricochet2/company_principal.html
font question/issue
originally, i speced .8em font size on html/body
looked and worked fine. i know it's a no-no as i've been informed it
causes issue in msie, i have been taught (by a list member) to use
100% on body and rescale further down the document.
when i use 100% on body/html, and move the .8em to the wrapper, i
don't get what i'm looking for. it would be nice to size the font
once and forget it.
You had 'html, body {font-size: .8em;}'
That equals 'html {font-size: .8em;}' = 80% followed by 'body
{font-size: .8em;}' = 80%, and the sum of 80% x 80% is around 65%.
html {font-size: 100%;}
body {font-size: .65em;}
...or any other combination that starts with percentage and ends up at
around 65%, will give you a starting-point around the 65% of normal
browser default you're aiming for. So, declaring...
html {/* no font size */}
body {font-size: 65%;}
...will end up where you started without triggering any IE/win bugs.
Side note: do I have to remind you that starting small makes it less
likely that the actual font size will survive 'minimum font size' in a
few browsers..?
http://www.gunlaug.no/contents/wd_1_03_04.html
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Split image in two divs...idk
Brian Jones wrote: http://www.bleusolutions.com/pianoguy/piano.html How can construct my css and cut the image so that the bottom of the brown star seal appears in the top right corner of the #wrapper div and top of the seal is in the header... The most reliable solution is to keep the seal as one image, and absolute position it. Something like the following will do... http://www.gunlaug.no/tos/alien/bj-1/test_08_0202.html ...where it is positioned from the right edge and appears fluid. Position it from the left edge and the position will appear fixed. Of course you need a better prepared image than I used in my example :-) This way you won't have to bother about line-up between top and bottom part, which otherwise tends to be +/- 1px off horizontally in some browsers. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] PRE extends outside DIV
Philippe Wittenbergh wrote: Test: http://dev.l-c-n.com/_temp/pre-wrap.html 'white-space: -o-pre-wrap;' seems to work in Opera 7.54 and later. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Trouble with table cell/row heights, rowspans IE.
Emil Björklund wrote: http://ebdesign.se/table_problem.html Most browsers I've tested in so far (FF2 Mac/Win, Safari 3 Mac, Opera 9 Mac) shows the intended layout. IE6-7 though, shows the article no./finish columns expanded to fill the height of the space to the right of the image. I cannot for the life of me get them to respect any height measurement. Wish I could say I've solved the problem, but I've only added parts of a workaround for the test case, that may or may not provide you with enough bits for solving a real case... http://www.gunlaug.no/tos/alien/eb/test_08_0203.html regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] padding problems in IE6
Juli Zanocco wrote:
Hello,
I have put together a photo collection based on the tutorial in More
Eric Meyer on CSS. So it should work, right? Well it does in
Safari 3.0 and Firefox 2.0(mac) but in IE6 the padding seems to be
off. The individual divs for each image are behaving correctly but
the images inside each div are off center to the left while the
titles for each image (in the same div) are off center to the right.
Actually, the title problem shows up in all browsers - i just used a
negative left margin to center it - but even that doesn't work in IE.
Is it my math or IE weirdness?
http://www.newmoonfarm.net/albumFarm.html
It's More IE weirdness :-)
Adding...
.pic {overflow-x: hidden;}
...will fix it by killing IE6' auto-expansion bug.
The addition of...
.pic ul {padding: 0!important;}
...will correct the title and probably remove the cause for
auto-expansion.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What Margin Unit Does IE6 Want?
Chris Akins wrote:
www.springfieldmo.gov/egov/cityclerk/minutes_testHtags.html
Everything is fine except for the h2 class=description items.
These are the left hand, called out headers. They are supposed to
line up vertically with the text to the right of them, which they do
everywhere but IE6 (don't have IE7 to test). Firefox, Safari on Mac
are great as well as Firefox on PC.
I'm using a top margin unit of 1 em on those elements to push them
into place, but in IE6 this unit lets them move around with text
re-sizing. That doesn't happen in the other browsers.
One part of the problem in IE/win comes from the em font-resizing bug...
http://www.gunlaug.no/contents/wd_additions_13.html
...and the other part from the fact that defaults are not identical
across browser-land.
If you add...
html {font-size: 100%;}
...to fix that IE/win bug, and thereafter declare suitable *and*
identical margin-top on both the .description and the p, the line-up
will be near perfect in all browsers - including IE/win.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [ccs-d] Problem width on div nested - IE 6
Luca Pellanda wrote:
http://win.fluiddesignlab.com/hydroven/
Content Div have some problem on IE6, it's too big (185px)... but
on IE 7, FF 1.5, FF2, Opera 9 work correctly.
IE6 doesn't respect declared dimensions, and will always expand an
element until its content fits inside - it's a genuine IE/win bug.
Can't see what's pushing, but the following addition will fix IE6' bug...
#content_box {overflow-x: hidden;}
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background-image and background-color question
Big Moxy wrote: My question is can I combine the header image with the solid gray such that the solid gray only appears at the top of the page? I know I'm constrained by the pageDef width but wonder if there is another way. Only by adding another container that stretches with the page-content and fills the body, and set the gray background-image on that without repeating it vertically. Multiple (CSS) backgrounds would also solve it, but support isn't good enough for practical use yet. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 and IE7 issues Need help
Terri Chicko wrote:
I know that IE7 isn't working right... content is flowing out of the
container box, but I don't have EI6 to check it with.
http://www.incense-salishwinds.com
A few points.
All IE/win versions suffer from the em font-resizing bug...
http://www.gunlaug.no/contents/wd_additions_13.html
Apart from that bug IE6 is doing remarkably well, with none of IE7's
rendering problems AFAICS.
Note that styles like...
#content {
height : 1000px;
}
...means what it says in IE7, while any height is interpreted as
min-height in IE6. This buggy interpretation saves IE6.
BTW: You're calling the same stylesheet twice for no apparent reason,
and html comments serves no purpose inside style blocks.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FW: IE6 and IE7 issues Need help
Rob Emenecker wrote:
Gunlaug,
In your article at http://www.gunlaug.no/contents/wd_additions_13.html you
make a comment of...
re-triggering the bug.
Note that this IE-bug can be re-triggered if font-size keywords are
used anywhere in a document. The bug is then inherited by the children of
the element in question, and IE is on it again.
So, you've been warned. Unless you intentionally want to trigger the
extreme font-resizing bug, don't mix in font-size keywords.
What exactly do you mean by this? Maybe I'm being dense, but I don't
understand what you mean when you specifically say if font-size keywords
are used anywhere in a document.
In the one fix you give of...
html {font-size: 100%;}
body {font-size: 1em;}
Wouldn't that second BODY declaration be considered a font-size keyword?
Are you saying that fonts should only be spec'ed in percents?
Please clarify.
The 'em' unit is not a keyword - it is a unit for a numeric value and as
such no different from 'px', '%', 'ex', 'pt' etc.
Declaring 'font-size: larger' or 'font-size: smaller' on an element,
introduces relative size keywords[1] and will re-trigger the IE/win
bug. So, if a font-size in 'em' is declared on a direct child of that
element, the bug will affect that child.
This is what I say in that article, and I have presented proof of this
behavior on CSS-D before - a few months ago. Can't find the demo I used
as proof at the moment.
regards
Georg
[1]http://www.w3.org/TR/2004/CR-CSS21-20040225/fonts.html#font-size-props
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check please choubidou
Sébastien FICHOT wrote: I've released a website for SQL makers. Can someone check this website please ? www.guss.fr It's aways interesting to have more eyes on things that can broke accessibility or reliability between platforms and way-of-thinking. I *think* there are a few too many serious errors in there... http://validator.w3.org/check?uri=http://www.guss.fr/ http://jigsaw.w3.org/css-validator/validator?uri=http://www.guss.fr/warning=1profile=css21 ...to release it as is. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] to center a fixed width website
Arlen Walker wrote:
(Why use a wrapper div when you have one built in to the document
structure?)
Well, if we don't use a wrapper div it'll only work in standard mode,
in which case the 'text-align: center;' on html and 'text-align: left;'
on body won't do anything and are better left out.
A wrapper is used/necessary when mode-independence is important, in
which case the styling should be something like...
body { text-align: center; }
#wrapper { width: 800px; margin-right: auto; margin-left: auto; text-
align: left; }
...for...
html
body
div id=wrapper
..
/div
/body
/html
...in order to keep older IE/win quirks mode versions (of which there
are still a few around) in on the centering-game.
At my end that includes IE6, but that's a personal preference that
sometimes also includes IE7 (etc.).
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Text refusing to be bold in Firefox and IE
Pat Veriepe wrote: The linked text saying THIS SHOULD BE BOLD is bold in Safari but not in Firefox or IE. Could this be a problem because of a bug in both browsers with nested lists? Please check out this url: http://veriepe.com/TEST222.html The text is simply too small to become visibly bold in my browsers. That's not a bug but a lack of screen-pixels. 20% font-resize up and the bold-styled text becomes visibly bold and the rest stays normal. Opera usually comes with a minimum font size set high enough to affect the outcome - make it visibly bold in your case, while Firefox defaults to minimum font size = none. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with header img in IE6/7
Krystian - Sunlust wrote:
Hello, I have a problem with header image, somehow there's some white
space between header image and navigation, only in IE6/7. I'm sure
it's something simple that I just can't comprehend... also, if you
notice any more issues, please let me know.
http://sunlust.newlocal.co.uk
Images are inline-elements by default in standard mode, and the gap is
prepared for text-descenders - it will change with font-resizing.
Firefox and most other non-IE browsers mask that gap when an image is
only content in a container and the doctype is Transitional - this is
known as Almost standard mode.
You can add...
#header img {display: block;}
...to get the gap-less appearance you want in all browsers - regardless
of mode.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] frame style functionality with css?
Julian Tulip's Licorice wrote: I am wondering if this can be done in CSS: I have two columns. On the left is a set of links, on the right there is nothing. when i click one of the links I want content to appear on the right and stay there until another link on the left is clicked. Much like old school frames. It seems like this would be fairly easy, I have done it on a hover before. If anyone can send me to a link I would be very grateful. To add to what others have provided... Using 'position: fixed' for the set of links will work. The problem with CSS only is that there's no reliable click without actually following the link. Although going to in-page anchors will work just fine, you'll also get a history of links to step [back] through. Thus, a CSS only solution will not work all that well. However, a CSS + Javascript combination will create few if any problems. So, combining position: fixed with an IE6 workaround... http://www.gunlaug.no/contents/wd_additions_15.html ...with scripting... http://www.icant.co.uk/forreview/dynamicelements/ ...can give you a variant of this... http://www.gunlaug.no/main-en.html ...with one section up at a time in the main column. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Image Swap - Flicker??
Matthew Stoneback wrote: I need this effect / navigation style to work across browsers and platforms... is this even possible? List version HTML: http://www.eddysound.com/rrc/index2.html To begin with, I'd simplify the styling of those navigation-links by removing unnecessary duplicates, and add in a height for the anchor since 'display: block' only spaces out those anchors properly horizontally. That'll stop the flickering. Next it's IE6, which needs for something to change on :hover before rerendering takes place, where I use a nonsensical 'background-position' as fix. Lastly I'll fix IE6' bad handling of 'overflow: auto' on the #header, by restyling it for older IE only. That'll give you this... HTML: http://www.gunlaug.no/tos/alien/ms/test_08_0212.html CSS: http://www.gunlaug.no/tos/alien/ms/test_08_0212_files/main2000.css ...that'll work pretty well across browser-land. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image IE problem
dan smith wrote:
I'm having a first stab a designing a homepage, and I've run into one
major hiccup. I’ve used background images on the two main content
area container divs:
#home-row1 #home-row2
They should appear as the background images for the nested boxes
within them.
Web page: http://www.bfi.org.uk/hoop_tmp/index.html
IE6 doesn't handle 'overflow: hidden' correctly, so the relevant
elements are not expanded to contain the floating children.
Add...
* html #home-row1, * html #home-row2 {overflow: visible; height: 1%;}
...after the relevant styles, as a fix targeting IE6 and older versions.
That'll override the problematic style, and introduce a 'hasLayout'[1]
trigger that'll make IE6 expand the containers as intended.
The use of 'em' for font-sizing also triggers the em font-resizing bug
in IE5 - IE7[2]. You can add...
html {font-size: 100%;}
...to fix that bug.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
[2]http://www.gunlaug.no/contents/wd_additions_13.html
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] using @import
Shane Kasper wrote: Hello all, I am new to the group and a beginner at CSS as well. Welcome to both :-) I did a test that works in IE6 but not in FF1.5: http://www.hiddenimages.ca/css/test.css The validator reports Parse Error... http://jigsaw.w3.org/css-validator/validator?uri=http://www.hiddenimages.ca/css/test.csswarning=1profile=css21 Make that @import... @import url(http://www.hiddenimages.ca/css/home.css); ...(no space after url) and it'll work just fine. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] cant do bottom background
Erland Flaten wrote: I dont understand how to get an image to stay at bottom om of a DIV. I try background image at the bottom, but it follows the content of the div, not the background. If I try to put height or height and width to the div, it drops down and away. Any suggestions? First: the background image _is_ at the bottom of the div it's declared on. A div without a declared height will only be as tall as its content, and as long as that content is text it'll change when subjected to font-resizing in browsers. Plan B: I am thinking about putting all boxes at absolute position and decalre width and heights as I know the content and it will not change (!) ...but browsers may change text-content's size, and you can't stop that from happening. Containers must be allowed to grow with content - in height and/or width, or text-content will end up overflowing them. Thus, your plan B is not really a solution. http://www.nuna.no/ahus/forside.html One way to solve your problem is to rearrange the entire kors image complex. - The crossing - horizontal with curves - part should be declared as background on a separate div above #footer, where you have a br class=clearfloat / now. - The vertical part above needs its own container surrounding #sidebar1, #sidebar2 #mainContent. Image should be taller so the container can grow in height without running out of background. - The vertical part below should be declared on #footer, as now. - Containers/elements above and below the crossing, can be pulled/pushed up and/or down until they line up as you want. The element with the crossing can then be stacked - position: relative; z-index: 1; - so the kors crossing appears in the right place. Further stacking will keep relevant elements on top. Such an arrangement will keep the entire kors perfectly aligned even under severe stress. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Need Text To Wrap
Elli Vizcaino wrote:
I have coded this weather module for work:
http://e7flux.com/weathercenter/weathercenter.html
and I need the text inside the bottom 2nd column to wrap onto next
line underneath the temperature. It does so in IE7 but not in FF or
Safari.
You can add a suitable width...
.fh3daytemp {width: 85px;}
...and the text will be forced to wrap.
Note that no matter the method used, the text will overflow those small
containers when subjected to font-resize - in all browsers.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] newbie CSS questions
AJ Putnam wrote:
http://ajputnam.com/sky/ontour
as you can see, the content table just sort of hangs over the lower
edge.
1: delete _all_ instances of 'position: absolute', or else you'll get
nowhere.
Absolute positioned elements are treated as if they do not take up any
space, so the expansion you're expecting can't take place. 'A:P' also
deactivates 'float', so you'll get no float-behavior.
2: use margins to push elements into place.
3: don't restrict height on elements that are supposed to expand with
content, and clear below floats.
Pity IE7 doesn't support CSS table, or else you could have started here...
http://www.gunlaug.no/tos/alien/ajp/test_08_0213.html
...and just trimmed some margins.
I've used...
* {margin-top: 0!important; position: static!important;}
div {display: table;}
...to override the problematic parts of your styles. That works fine in
Firefox, Opera, and even IE6, but in order to make it work as intended
across browser-land you'll have to go through your stylesheet and
correct it line by line.
BTW: you don't need a layout table, since regular elements - divs - will
also expand with content when height is unrestricted. The layout table
does no real harm though.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] newbie CSS questions
AJ Putnam wrote: So, I did what you indicated. I went and removed all a:p from the style sheet. Really messed with my layout. i added your short bit of code to the top and it helped marginally. so, i am still at a loss. Delete that short bit of code now, as it was only for demo/debugging and serves no purpose anymore. what did I do wrong? Nothing really - at least not yet, but you have to complete the job. 2: use margins to push elements into place. Which means you have to correct nearly all margins used in your stylesheet - especially all those large 'margin-top'. 3: don't restrict height on elements that are supposed to expand with content, and clear below floats. Which for that particular page means deleting 'height : 720px;' on #tourmiddle. Have a look at a reasonably well-aligned example... http://www.gunlaug.no/tos/alien/ajp/test_08_0213-b.html ...that will render the same across browser-land. Take a close look at the stylesheet for that example - as seen through the validator... http://jigsaw.w3.org/css-validator/validator?uri=http://www.gunlaug.no/tos/alien/ajp/test_08_0213-b.htmlwarning=1profile=css21 All those errors are made by me, as I've rendered almost all instances of 'margin-top' useless in a way that the validator flags. This way I won't have to write about every single one of them. Now you correct those margins and give them values that suits your layout now that all 'a:p' are gone, and all browsers will render your layout properly. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] strange gaps 2
Erland Flaten wrote:
Sorrry, Forgot the URL: http://www.nuna.no/ahus/forside.html
Thanks, Tusen takk und vielen dank for help on this to Gunlag and
Christian :)
I have tried to use the solution and it works as it should, but I
have still has some issues. - There is a gap between the header
section and the three DIVs sidebar1, sidebar2 and maincontent.
Collapsing margin[1].
Style it...
#container #verticalcrossupper {
margin: -1px 0 0 0;
padding: 1px 0 0 0;
}
...and the margin will be contained and the gap disappear.
- There is also a gap between the footer and botom of this DIVs
The addition of...
#container #horisontalkors {
margin-top: (some suitable value);
}
...will fix that - once you have the other layout parts under control.
regards
Georg
[1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] strange gaps 2
Erland Flaten wrote:
It looks more and more as it should because of your valuble input.
Its more or less correct on Safari. Some errors on grapics I will do
later.
Its now on http://www.nuna.no/ahus/forside_posted.html
As mentioned earlier - change stacking-level.
Didn't test, but I think the addition of...
#horisontalkors {position: relative; z-index: 2;}
...should stack that element visually in front of the others.
With that sorted you can move the relevant containers with their margins
until they line up as you want.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Center multiple float lefts site check....
Matthew Stoneback wrote:
http://www.eddysound.com/rrc/index_help.html
Also, while you may be looking at this site to help me with this
problem could you please respond with any issues you see?
IE6 presents its margin doubling on floats bug. combined with IE6'
auto expansion bug the #leftCol ends up too wide and pushes the
#rightCol down.
The addition of...
#messageText {display: inline;}
#leftCol {overflow-x: hidden;}
...will fix the margin doubling bug, and also prevent any auto
expansion if similar situations with too wide elements in #leftCol
should pop up later.
The IE6 margin doubling on floats bug is also hitting the lower
navigation, so the addition of...
#bottomNav {display: inline;}
...is also recommended.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie6 height issue
corey deep wrote:
does anyone have experience dealing with ie6 height bugs ? i have
several instances where the elements height is not right in ie6. I'm
trying to setup swatches w/ css. in ie6 there is extra height given
to every element.
IE6 doesn't respect declared dimensions, and will expand any element if
it thinks the content doesn't fit.
I'd prefer to see a live example of your problem, but what you sent
indicates IE/win whitespace bugs at play - making the elements at
least as tall as the relevant line-height.
The addition of...
* html .m_swatch_red, * html .m_swatch_corner {overflow: hidden;}
...will probably work, but if not then it's time to tell IE/win that
those empty elements are _really_ empty, by placing HTML comments inside
them...
div class=m_swatch_red!-- --/div
div class=m_swatch_corner!-- --/div
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 Not Rendering Borders
Cody Sickler wrote:
On the layout (seen at http://www.vierzehn.us), the links in the
upper right corner are supposed to switch from (on hover) the borders
on the sides, to borders on the top and bottom, however they do not
show up at all. Again, on the bottom right, the links there should,
on hover, display a two pixel dashed border, but they are not doing
that.
IE/win can't stack properly, so parts of the links that ends up above
and below the absolute positioned parents - the top and bottom borders,
won't show up.
Adding...
a {position: relative;}
...will fix IE/win' stacking on that page.
However, it is often more reliable to make the a:p parents tall enough
to make room for the link-borders. The addition of...
#pages {padding: 2px 0;}
#footlinks {padding: 0 0 2px 0;}
...will have that effect.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] large space at the top of unordered list in ie7
Sandy wrote:
http://westboundandweary.com/accuray/left_subnav.html
In IE6 there are spaces at the very top and bottom of the list in IE7
there is a large space at the very top of the list, you can even see
the background image i have set on the ul repeating. this is one
looks the worste.
Add...
ul#leftnav li ul li {
float: left;
}
...to fix that IE/win bug combination.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] My first tableless site - Need Advice on css mistakes.
david wrote: And, after awhile, you won't have any visitors using Opera - because they'll be going to sites that work fine in Opera. ;-) Indeed! Such a stat-based strategy works every time. Molly 'the cat' -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Images in Blockquotes in IE7
Andy Vaughn wrote:
Here's the example that I am having trouble with:
http://lunarorigin.com/evidence-of-capture/evidence-on-the-moon
The image floating to the left of the Did you know paragraph.
IE7 has problems with stacking. They patched IE6' stacking bugs, but
didn't get it quite right and sometimes it ended up worse.
In most cases - including yours - the addition of...
img {position: relative;}
...is enough to get IE7 back in line.
In some cases the addition of a suitable 'hasLayout' trigger on the
container - paragraph and/or blockquote in your case, is necessary.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layering of background images help
Cory Shubert wrote:
I have a site that is giving me grief. I want to have an image on
top of two different background images and I just can't seem to
figure it out.
Temp url: http://69.89.31.183/~pixelago/
Layering of images or any other elements can be done in many ways.
Support for multiple backgrounds is still a bit weak, so you'll have to
add, or reuse, a separate element. This separate element can be the
image itself (an img), or any element that can carry a background.
You can then absolute position this element, or float it in a suitable
position and pull/push it into its proper place by its margins.
An example: http://www.gunlaug.no/tos/alien/cs/test_08_0219.html
...using float on a new element, a div #overlay, which is given its own
background. I didn't bother digging for your background, so don't know
how that one will behave.
When using floats this way the separate element(s) must be placed next
to the fix-sized elements it(they) should end up in front of, or else
it'll be impossible to know how far to push/pull it(them) to achieve a
stable position.
I've added a 'margin-doubling on floats' fix ('display: inline;) for
IE6, and a 'position: relative' for reliable stacking in front.
Note: IE6 show no top-navigation on your page.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 Not Displaying Absolutely Positioned DIV
Blake wrote: I have a problem with IE6 not displaying the #ranking DIV. I have searched but I can't find a reason for this problem and my normal array of solutions to throw at IE6 problems has come up blank. Can't say for sure, but floats next to absolute positioned elements tend to result in invisible elements. You can test by placing an empty and unstyled div containing only a comment... div!-- --/div ...between the relevant 'A:P' and 'float' elements. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 Not Displaying Absolutely Positioned DIV
Blake wrote: Yeah, that showed the positioned element. Is there any way to fix that without bloating it up with an empty DIV? I usually solve/avoid such problems by replacing the 'A:P' styling with a removed float styling... http://www.gunlaug.no/contents/wd_demo_float_03.html ...but can't say if that's an option in your case. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] wrap text around an absolute image
Rob freeman wrote: How do I allow the text to wrap around the image. At the moment the absolute image is taken out of the document flow, so Im not sure how I can get the text to wrap http://www.coloursense.net/testfolder/instructions.html Float the image and correct margins/paddings to go with it... http://www.gunlaug.no/tos/alien/rf/test_08_0220.html This is the kind of problems 'float' was meant to solve initially, so the line-up comes naturally. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Float a link inside a header
Nick Mavros wrote:
h1Title asubtitle/a/h1
I want the Title to be left aligned and the asubtitle/a to right
aligned. But I want them to be in the same line.
h1 a {
display: block;
width: 100%;
text-align: right;
margin-top: -1.3em /* make value equal to line-height */;
}
h1 {height: 1%;}
...will give you the line-up you want. It will however produce a wide
link in most browsers, and IE6 may need some extra help to make the
link work as intended.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Layering of background images help
Cory Shubert wrote:
Temp url: http://69.89.31.183/~pixelago/
You mentioned that my top nav is not working in IE.
Make it...
#wrapper2 #navigation ul {
list-style: none;
float: left;
margin: -42px 0 0 0;
padding: 0;
position: relative;
}
...and IE6 will play along.
1: IE6 tends to hide (parts of) elements that are pulled over the edge
of their containers. That's a stacking bug that's usually fixed by
adding 'position: relative' to the elements. Fixes your over the edge
of #navigation case to.
2: Somewhere there's a style that disturbs IE6 only, introducing 'float:
right' on the #navigation ul. I didn't find the disturbing style, so I
added specificity to the selector to override the disturbance.
3: IE/win (all versions) has a default margin on lists, pushing it away
from the left edge even in IE7. I declared all margins to prevent that.
4: Simplified the 'list-style' to catch all variants.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Opera display issue
Nancy E. Sosna Bohm wrote: I don't know how important it is to have a site work in Opera, but it probably should. I don't know how important it is either, but I can't see why not. http://www.lfelem.lfc.edu/new_site/indexnew.html does not display the top horizontal menu items in Opera. It's okay in FF2, IE6, IE7, IE6, and Safari. http://www.gunlaug.no/tos/alien/nesb/test_08_0220.html Basically: delete 'position: relative' on '#point li' and '#point li a', and Opera will cooperate. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Height %100 Problem
Gercek Karakus wrote: I am working on a website and have a problem with width property. I want my left column background to extend to the footer. I tried several methods... However, I could not achieve my goal. Does anyone have an opinion? What's the best method depends on the case at hand, but here are a few options: http://www.positioniseverything.net/articles/onetruelayout/equalheight http://www.satzansatz.de/cssd/companions.html http://www.projectseven.com/tutorials/css/pvii_columns/index.htm http://www.communitymx.com/content/article.cfm?cid=afc58 http://anxiety.binghamton.edu/new/ Here's an example with the first option - onetruelayout - applied to your page... http://www.gunlaug.no/tos/alien/gk/test_08_0220.html I deleted all references to 'height: 100%' - it's a flawed approach anyway, and added the necessary styles - commented with 'added' in the stylesheet... http://www.gunlaug.no/tos/alien/gk/test_08_0220_files/main.css Note: I added a fix for the dropping right column in IE6 while I were at it. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] graphics align right in table cells
bbxrider wrote:
http://www.westernstatesglass.com/1navDoc_wsgIndustryLinks/document_view
i'm missing something, am trying to get the logo pics to align right
so they are closer to the text of the link
You mean like...
http://www.gunlaug.no/tos/alien/bbx/test_08_0220.html
...?
Add...
style type=text/css
.logo_cell {
text-align:right;
height: 87px;
width: 250px;
}
/style
...in the head of the page in the iframe.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 120DPI system fonts wreak havoc in certain browsers
Felix Miata wrote:
On 2008/02/18 13:15 (GMT-0500) Jeff Blaine apparently typed:
Can anything be done from the CSS/XHTML end?
CSS has no way to know DPI.
It does, actually...
http://www.w3.org/TR/css3-mediaqueries/#resolution
...and it already works in a few browsers.
Constructions like this...
@media screen and (min-device-width: 1650px) and (min-resolution: 100dpi) {
html body #wrapper {font-size: 115%;}
}
...will give better control over the final result - once support grows.
Latest Opera(beta) and Safari are ready for testing now.
What that control is used for is another matter, as control is
relative and applying too much control is often counter-productive and
tends to lead to failure.
In-depth knowledge of the wide range of combinations of
hardware/software/user-options before trying to control anything, is a
must in web design.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Gap between divs in IE6
Paul Jinks wrote: I have a page that looks just as I want in FF but which misbehaves in IE6, showing a gap between divs. http://www.pauljinks.co.uk/test/contentTemplate2.html The simplest and most reliable solution is to put an html comment in the empty divs, to prevent IE/win from seeing whitespace in there. div id=main-top!-- --/div div id=objective!-- --/div div id=objectiveBot!-- --/div IE6 will otherwise treat those divs as if they're one line-height tall, since that and older IE/win versions don't respect declared dimensions and will auto-expand the divs in height to make room for an imaginary space. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Text Resizing Causes Small Movement in Images
Chris Akins wrote: Hi - not sure what's causing my image based mainNav tabs to move slightly when text is resized in this header: www.springfieldmo.gov/newSite/index4.html Images are inline-elements by default, which means there will be provided space for text-descenders and this space will change with font-resizing. The easiest solution is probably to float all relevant images, since floating turns all elements into block-elements and allow arranging in lines - like in the following example... http://www.gunlaug.no/tos/alien/ca/test_08_0221.html http://www.gunlaug.no/tos/alien/ca/test_08_0221_files/mainStyl.css regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Float list items
Usamah M. Ali wrote: My normal approach would be using a table. ;~) For tabular data - yes, but not if it was just a visual effect I were after. Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Float list items
Rick Faircloth wrote: What difference does it make? The difference is (already made) at the most basic level: what it is, and what it can be made to look as when we add a bit of styling. - An HTML table will always be a table and nothing but a table, no matter how it's styled. - Some text in a list will always be some text in a list and can not be anything but some text in a list, no matter how it's styled. For instance, this... http://www.gunlaug.no/tos/moa_11g.html ...is not a table, regardless of its appearance in CSS capable browsers and a few others. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Float list items
Rick Faircloth wrote: Your example below is impressive, Georg, for sure. But just look at the CSS hoops you had to jump through just to get what looks like a simple table. Why go to so much trouble avoid using table ? Just because you can or is there a more compelling reason? I'm relatively new to the CSS scene, so these are sincere questions. In addition to the reasons I've given in the relevant article... http://www.gunlaug.no/contents/wd_additions_22.html ...it's because... 1: that type of content doesn't fit the description tabular data, I just wanted it to appear in a certain way. Its appearance can be changed and restyled (for different media for instance) without touching the actual document, which is impossible if a table had been used. 2: one day a version of that MS-excuse for a browser may support the relevant CSS, and not be in need of proprietary MS-garbage like IE-expressions for simulating standard CSS. Maybe IE8 (with an opt-in)... 3: by always pushing and testing what can and can not be done with CSS today to the limits across browser-land in test-cases like that, I learn what choices I have and how to make things work whenever I need to for real-world cases. Such knowledge sure comes handy at times :-) regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Float list items
Thierry Koblentz wrote: It is about semantic markup, we should use HTML elements for the information they convey, not for how they display. Yes, it's all about semantic markup - the very base for conscious web development. However, a general problem here on css-d is that semantics is pretty much off-topic - unless (maybe if) the OP supply something that is so weak on markup level that it simply can't be (visually) solved with CSS. Subsequently, the OP gets to define the semantics (or not), and I get to respond with a CSS solution (if there is one) with almost complete disregard of semantic markup. Not an ideal situation, but at least it reduces the number of cases worth responding to - on css-d. It also provides me with loads of examples of weaknesses on the basic level and above, which is useful (to me) even if I don't/can't respond. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to handle nested floats?
Travis Miller wrote:
Say you have a two-column layout. Inside one of those columns,
stacked vertically, you have teasers for several other pages. Each
teaser consists of a thumbnail image and a paragraph of text.
The thumbnail image should be floated left, with the paragraph
wrapping around it. And since you don't know how long the paragraph
will be, you need to clear the float immediately after the paragraph.
*However*: doing this clears *all* left floats, including those on
the columns - which is not the desired behavior.
Is there a graceful way around this problem?
If I've understood your case correct - yes.
Establishing a new block formatting context[1] for the column will
isolate its content - including all clear - from interacting with
other columns.
Something like...
.col {overflow: hidden;}
...on columns, will contain and isolate those columns' content. Useful
for the quite normal main column in the flow layouts.
.col {float: left (or right);}
...will work the same way. This is why all floats solution works so well.
The above will of course only work well when the columns can expand
freely in height - defaults or are styled to 'height: auto'.
regards
Georg
[1]http://www.w3.org/TR/CSS21/visuren.html#block-formatting
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
