Re: [WSG] IE Showing Transparent - APOLOGY
russ wrote you should warn members if you are providing a link that goes to questionable, offensive or adult content. Mani Sheriar wrote: But I do still need help with this issue if anyone can look past the questionable material. ;~) This list needs no ground rule like - Warning ... Content - Apologies for the questionable material, but ... I think this list needs no but ... nor Warning Just don't send this ... to the list, and no further apologizes are needed. Thanks. Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] IE Showing Transparent - APOLOGY
Rick Faaberg wrote: Where do we draw the line on these sites? The reason why this did not happen before on the WSG mail list is because no poster before did have problems in drawing a line for himself. We should not change this unwritten agreement. Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: Censorship (was RE: [WSG] IE Showing Transparent - APOLOGY)
John Foliot, and Russ, good luck with the list. All the best. Bye. Ingo Chao -- http://www.satzansatz.de/css.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] IE floating bug
Rowan Lewis wrote:
http://www.pixelcarnage.com/development/evolt_lives
See how the input element is pushed down and its surrounding paragraph
element isn't? The input element is down the very bottom.
I think this is the 3px txt jog [1]
The sidebar/panel is a right float
#panel { ...
float: right;
width: 20em;
}
and its hardwired 3px txt jog affects the subsequent elements, but
#content {
border-right: 1px solid rgb(223, 223, 223);
margin: 0pt 20em 0pt 0pt;
min-width: 20em;
}
#content has no layout [2], therefore the 3px txt jog affects its child
elements too:
form p.text input {
...
width: 100%;
}
form p.text textarea {
...
width: 100%;
}
but their width of 100% cause a float drop because there is only room
for 100%-3px text jog next to this float.
This float drop drags the input below the bottom level of the float.
You can see this 3px as there is space between the borders on the right
side.
For a fix, you should let #content gain layout via the holly hack or any
other layout trigger. The whole #content would become boxed by the layout.
As the lenghts are in em, it will be difficult to recalculate to bring
the borders in pair. In principle, the #panel float needs a -3px left
margin and the #content needs a margin right of 20em-3px, which leads to
scripting and rounding errors.
So I think it would be better to omit this double border.
Ingo
[1] http://positioniseverything.net/explorer/threepxtest.html
[2] http://www.satzansatz.de/cssd/onhavinglayout.html#nextfloat
--
http://www.satzansatz.de/css.html
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Tables - a challenge!
Christian Montoya wrote: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html Does not work in MacIE. http://www.kriton.de/CSS/zentrieren/alle-zentriert.html would be another one. Tom Livingston wrote: http://www.wpdfd.com/editorial/thebox/deadcentre4.html Does need given dimensions for the centered block. Compared with a simple table cell, you need a shrink-wrapped centered box without the need of explicitely declaring a dimension, and it should work in the browsers the users are using. Its not that there aren't good solutions out there. And they are all worth a closer look at the advanced techniques. It's just I think that when you try to center more than a simple logo, the problems begin. Try your solutions in standards mode, in a complex layout with positioned elements and floats and more content of unknown hight, and size/rezise the window and scroll (o.k., on the other hand, thats more than a table can do). The link from Bruno I have provided twice in this thread and the solution of Georg try to limitate these issues. But again: Doesn't dead centering of complex elements risks that the page gets unusable? How to center more content? Isn't the usual three column page an abstraction of the dead center for long content? Ingo -- http://www.satzansatz.de/css.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Tables - a challenge!
designer wrote: OK, I don't use tables, except for tabular data. I've been doing this standards stuff for for just one year and there is only one place where I use a table for layout, and that is to put something (div, or whatever) slap bang in the middle of the screen, both vertically and horizontally. There are many ways to do this, but none of them (that I know) are as simple or as reliable as this method using a single-cell table: ... So, the challenge: do what I've done above with no table, AND make it work in IE. I don't see the challenge. Easy as a table, reliable as a table, cross all buggy browser bullet proof as a table in all rendering modes (and no hacks, as the next one will add): Use a table. So what? The argument against the use of tables for layout is not affected a bit by this dead center problem you are asking and others have thrown into in abandomed discussion threads before. In general, there is no reason or sense to discuss pro or con of tables for design. The pro/con table troll question as a whole is answered a zillion times to dead, and wastes time and bandwidth like spam, and nothing seems to help, neither yawning nor closing similar threads immediately. If fact you are asking what to do if the recommended pure CSS pathway is not matching the specification and demands of your design question. With or without the ability to ask in forum or mailing lists, you have three options: 1) you can achieve it with a table 2) you can do it with css and hacking, or scripts 3) you can think about changing your layout For your specific dead center question, were the pure CSS path shows a very known CSS weakness in vertically centering content: 1) use the table as you have suggested 2) use ambitioned CSS hacking like [1], but beware of browser problems once it gets only a bit more complex [2], or simply use a script 3) Dead Centering is only usable for very small content like a logo or an under construction message. When you want to add more content, you are going to use buggy overflown boxes with scrollbars, usually the text gets smaller, and so on. But: there is no reason to dead center long content. The monitor screen is already dead centered in my range of vision. I believe 3) is the only question for a dicussion in this web standards list, if at all. Ingo [1] http://www.brunildo.org/test/shrink_center_5.html [2] http://www.satzansatz.de/photocenter.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Tables - a challenge!
Rimantas Liubertas wrote: 2005/9/8, Ingo Chao: ... For your specific dead center question, were the pure CSS path shows a very known CSS weakness in vertically centering content: ... A very known Internet Explorer weakness, I would say. Thanks. You are right. It's not CSS. Sorry. The current CSS implementation by most browsers does not play well regarding vertical centering. As of CSS2.1, we should be able to solve such problems via inline-block boxes, but * Moz: -moz-what? * Opera: display: inline-block and vertical-align: middle broken http://www.satzansatz.de/cssd/tmp/inlineblock.html * IE/Win: display: inline-block broken, no display: table http://www.brunildo.org/test/InlineBlockLayout.html So, as shown in the vertical centering demo I linked to [1], + display: table/table-cell (Saf, Op, FX) + display: inline-block (MacIE) + display: inline/layout (IE/Win) is used to center a shrink-wrapped box cross-browser. Regards, Ingo [1] http://www.brunildo.org/test/shrink_center_5.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] absolute positioning in IE
Anders Nawroth wrote: http://cms3.nawroth.com/testsidor/filer/testpage.html For disappearing a.p. boxes, see http://www.brunildo.org/test/IE_raf3.html Your testpage shows the problem listed as Example 1 The fix is to rearrange the html, or by inserting an empty box, see the subsequent examples. Ingo -- http://www.satzansatz.de/css.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] IE, Ordered Lists and width on LI
Rachel Radford wrote: I’ve found that if I have an ol and a width specified through the css on the li that IE doesn’t actually number the list! They all turn up as number 1! Can someone explain why this would be… and does anyone know of a way around it? Dwain already provided a fix. We have tried to give an answer here: http://www.satzansatz.de/cssd/onhavinglayout.html#list see also http://annevankesteren.nl/2005/07/layout http://www.quirksmode.org/bugreports/archives/2005/07/IE_60_does_not_render_ordered_list_correctly.html Ingo -- http://www.satzansatz.de/css.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] IE Madness
Bob Schwartz wrote: On this page: http://www.fifeweb.org/wp/events/evnt_ga_res_2005_02.html I have a link at the bottom of the page (Back To Page One) which should send a visitor to: http://www.fifeweb.org/wp/events/evnt_ga_res_2005_01.html#top and it does in all the browsers I have tried except IE Windows which gives the following error message: Internet Explorer cannot open the internet site http:// Bob, I can reproduce the error - life (on the second try, that means, the first jump is ok) - and on a local copy of your file (permanent). changing the link href to ...#logo instead of #top worked well. Ingo -- http://www.satzansatz.de/css.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Body text disappears in IE when window is maximised
Webmaster wrote:
As promised I've been working away again creating a hack-free version of the
Holy Grail 3-col layout. ...
http://d81314.i50.quadrahosting.com.au/layout_test.htm
I now ask the list's help in resolving a very odd and new bug to me. It only
seems to occur in IE and happens when the window is maximised using the
browser window's icon.
I'd be very interested in knwoing if anyone else sees this or has a
solution.
It's a redraw/rearrange problem in IE/Win and can be solved by giving
layout to the ancestor of the incomplete rendered box, e.g. #main2. If
you still want a explicit hack-free version, you might want to use this
implicit hack:
#main2 {width: 100%;}
Ingo
--
http://www.satzansatz.de/css.html
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Win IE hacks -- Please help!
Janelle Clemens wrote: I am uncomfortable with hacks and am trying to avoid them as much as possible. I really appreciate all the links and info on Win IE hacks that everyone has been giving but reading about how they work is not helping. I could really use an example of how to implement them. We have some hacks in use here: http://www.satzansatz.de/cssd/onhavinglayout.html#hack Links to the relevant descriptions of the Holly Hack, underscore hack and Conditional Comments are included, and an example of how to serve to pre-IE7 and IE7. I hope this is in keeping with the mission of the list, and nobody must leave. Ingo -- http://www.satzansatz.de/css.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Align text vertically in a division
Rachel Radford wrote: Is there any other reliable way of mimicking the old-school valign for table layouts? I realy don't want to use hacky stuff or any javascript stuff cause already there is so much hacks just for IE!!! Unfortunately, no, there is no way without massive hacking. Bruno Fassino has discussed the problem, the technique is described here http://www.brunildo.org/test/img_center.html and the version for vertically centering a block is here http://www.brunildo.org/test/vertmiddle.html Sorry, can't provide a better alternative. Ingo -- http://www.satzansatz.de/css.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
Bruce schrieb: It will size according to the resolution. Stretch and shrink. Not stretching, not static, though: http://www.satzansatz.de/cssd/wide.html Ingo -- http://www.satzansatz.de/css.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
Bruce schrieb: That's it!! Bruce, I didn't expect that this attempt works for you. You need a very big image, resulting in 25k. --- You can choose a focus of the picture, which determines the percentage-value for the background-position. This makes the image look fixed (here: x=30%), When you use percentages, you position a point within the image itself, not the top left corner. This point is moved to the corresponding percentage point location in the box. (Zoe Gillenwater, http://www.communitymx.com/content/article.cfm?cid=AFC58) Further, note that the heading text can be aligned to that spot with the same %-padding-left. Opera and IE/Win are playing ball, Fx not. But the average user won't play with the screen size permanently, so I think its ok with Fx. --- I think it's not a good solution, due to the size of the image needed. I'd prefer the gradient solution with a small image, as Vicki said, you might combine the fluid mid with a percentage alignment. good luck. Ingo -- http://www.satzansatz.de/css.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
Bruce schrieb: I guess I cannot communicate what I mean. ... I was wondering if an image would stretch as a background image in the stylesheet as a background. That's all. Ingo did a demo as a background image of a h1 tag. I thought that would work. Using the EXACT same code that he used, in the stylesheet for the banner it does not work. I have no idea why not. Because my image is 2048px wide. You can't stretch bg-images in CSS. It's not that we didn't understand what you want to accomplish, but it's just not possible. We are trying to find a workaround, not a solution. Follow Vicki's attempt and put a gradient on both sides of the bg-image, than position it 50% 100% in the horizontal mid. Or put the gradient just to the right, as Roger does: http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/ There is a maroon gradient to the right, and the container has the same background-color. Check in Firefox with cntr++, and view the bg-image. Ingo -- http://www.satzansatz.de/css.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Pure CSS Pop-ups using images... but as background-images in span
Julián Landerreche schrieb:
Now, I have understood the solution.
I need to add a property to the a:hover rule.
a:hover {
border: none;
}
Voilà!
Now it works in IE6...
Weird, weird bug...
Yes, that's weird. Maybe this
http://www.satzansatz.de/cssd/pseudocss.html#hoverdesc
will be of additional help understanding the problem in IE.
Ingo
--
http://www.satzansatz.de/css.html
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Site Check: Broadleaf - please close this thread
Mugur Padurean schrieb: Would you sent your client to war (for big bucks) with slow, clumsy outdated weapons from the 20th century? We shouldn't use war metaphors in a thread that has all qualities of an holy war. After reading all possible relevant and irrelevant objections, I would prefer to see this thread come to an end. Thank you. Ingo -- http://www.satzansatz.de/css.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] clearfixing
Rowan Lewis schrieb: Or how about the much simpler more correct method? http://www.quirksmode.org/css/clearing.html the problems the OP had in IE5.5 can get worse when the overflow: hidden of the simple clearing meets the Holly hack in other bugfixes needed in this browser: http://www.456bereastreet.com/archive/200502/simple_clearing_of_floats/#comment4236 Ingo -- http://www.satzansatz.de/css.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Getting in a muddle
designer schrieb:
www.gwelanmor-internet.co.uk/typotest.html
and there you will see the effect working fine in IE6, FF1.0, Opera
etc. But IE5.5, although it gets the colour right, h6:first-letter
doesn't pick up the increase in size for the first letter.
havent looked to deep in it, but
h6:first-letter {
...
font-size: 436%; /* feeds IE55*/
fo\nt-size: 218% /* the rest */;
}
seems to be a start. looks like as if 5.5 does not know
with respect to which size it should calculate, but you'll have to test it.
Ingo
--
http://www.satzansatz.de/css.html
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] help or web standards group?
Please don't forget, while forking, to build a third mediocres/average list, for those who squint at being a guru and tend to forget the years they were soo newbie. or, alternatively: Raise the level of the input in this list by more quality postings and answers. The quality of the answers to a list is triggering the quality of the next questions, it's a cicle, so easy. Stop guruism. Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] image height and width question which is better CSS or inline
Nathan Rutman schrieb: 4) Specifying height and width on images by default was a trend made popular in the late 90's, where slow-to-render table-based layouts were used (which relied heavily on images pushing the cells around to the correct size/location) and everyone was using dialup access. The problem was that the small placeholder used by the browser would shift content around when the image was loaded at its proper size. With today's Internet, where a large client base is using broadband and developers are utilizing near-instantaneous CSS-positioned elements, there might not be much of a need to specify the image dimensions. I'm not sure it's necessary in most cases. No matter where you define the height/width, that is one more step you'd have to take if you ever updated the image in the future with one that isn't the same dimensions. Nathan, this can lead to misunderstanding. I fear that some people have experienced IE6 and Fx1.0.4 let some page elements jump while rendering the page, when there is no dimension on images/their containers specified at all. The designer with a quick connection and appropriate cache settings might not see it, and some users are wondering what he is paid for. http://www.mezzoblue.com/archives/2005/05/10/image_attrib/comments/#c011669 Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Vertical align(center) for two rows of text
akella schrieb: I know that making HEIGHT and LINE-HEIGHT equal for text - will make ONE row valign:center. But what about 2 rows of text? Is there some way to align even two rows of text this way? You'll need a container of known height http://www.brunildo.org/test/vertmiddle.html Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Vertical align(center) for two rows of text
Sorry, just noted that Bruno Fassino's explanation of the technique he developed can be better understood here: http://www.brunildo.org/test/img_center.html with a link to the text centering method I already mentioned. Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Element Jump (IE) and Full Width Problems problem1
Nathan Rutman schrieb:
http://www.solvepoint.com/design/sp4.2/
1) (IE ONLY) When the page loads, the menu items are in the upper-left
corner of the screen until used the first time, then they jump into
place. I thought they needed layout and so assigned height attributes
to all items involved.
Good idea. Give layout to
#pageContainer { position:relative; ... _height:0; }
WFM on a local copy.
As a rule of thumb:
Never use position:relative on a container of floats (or worse, relative
positioned elements:
li.menuItem { overflow: visible; float: left; position: relative; width:
150px; } )
without adding layout. You have managed to take this block completely
out of the flow.
happy hacking.
Ingo
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Strange IE behavious that doesn't make sense
Nathan Rutman schrieb: Whenever a background is disappearing, try to give layout to the parent of the element via the Holly hack. What does that mean? You want to give a height:0 to the parent element? I don't get it... Holly Bergevin's hack is described in detail here: http://www.communitymx.com/content/article.cfm?page=2cid=C37E0 The intention of this hack is not to give whatever height to the container, but to let the block gain layout. Layout can only be described roughly as a IE-Win proprietary undocumented concept to establish a rectangular rendering entity that is responsible for drawing its own content. Explorer's dimensional bugs are related to the presence or absence of layout: http://www.positioniseverything.net/explorer.html Note: I don't know if this hack fixes the bug in tee's page, it does on a local simplified copy, though. You mentioned the dependence on some characters more or less, and I can confirm this. Sometimes these characters more or less shift the wrapping of the content just by some microns, i.e. lines do not end with italicised content, or the wrapping content next to a float leaves a single line blank near to the last bottom line of the float, and so on. Or a tight fitting of the related containers induces more problems like duplicated last characters. Would be interesting to see your minimalized bug test page. Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] transparency support
kvnmcwebn schrieb: hello, Is the png transparency tut on a list apart still the most up to date method? thanks I found, in addition to the ALA artcle (guess you mean http://www.alistapart.com/articles/pngopacity/) this article by Lloyd Dalton helpful http://www.daltonlp.com/daltonlp.cgi?item_type=1item_id=217 Note that many have reported that it isn't easy to get links working in IE6, so be sure to follow the instructions in the comments section. I too have struggled with the filter on a absolute positioned div with some links inside, you may want to see the sort of a workaround here http://www.satzansatz.de/cssd/tmp/alphatransparency.html hope that helps, Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] transparency support
kvnmcwebn schrieb: 'this article by Lloyd Dalton helpful http://www.daltonlp.com/daltonlp.cgi?item_type=1item_id=217' thanks, thats very clean. What do you think of the comment/example from stylo at the bottom of this page? http://www.alistapart.com/discuss/pngopacity/#c4812 Sorry, I don't have any scripting knowledge, so I can't comment that. Or did you mean that use of Conditional Comments? I think they are helpful: http://www.quirksmode.org/css/condcom.html I have the fear that filter aren't that standards-related, though, and some of the reflections are made in the ALA article comments show this, if I am not wrong. As you have seen, there aren't many tutorials about filters out there, and I think this is related to the actual know-how, and technical- and standards-problems arise when it comes to filter. Personally, I have never had a real use for filter, my test page I mentioned just notes some problems while debugging someone's page on css-d. But I know there was a loud echo once a better png-support was announced for MSIE7 (louder than the cry for real bugfixes, and that's the real desaster in my opinion), so there seems to be the intensive need for transparency options. Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Strange IE behavious that doesn't make sense
tee schrieb:
Here is the url:
http://clients.lotusseeds.com/dojoprocedures.html
Another page that is using the #preamble is 'Karate overview'.
There should have a fist image next to 'Dojo' and 'Karate overview', but
it's not there in PC IE 5.5/6.
Sense? We still speak of IE, don't we?
Whenever a background is disappearing, try to give layout to the parent
of the element via the Holly hack.
/* \*/
* html #preamble,
* html #supportingText,
* html #explanation,
* html #furtherExplanation,
* html #schools {_height:0; }
/* */
Ingo
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Background image alignment - percentages and scalable elements
Chris Taylor schrieb: I'm having difficult aligning a background image the way I want to. The markup is like this: div class=percent2019.65%/div ... Chris, I don't know if I got the problem right, but I think Zoe's article abut Creating Liquid Faux Columns [1] covers a lot of the theme: http://www.communitymx.com/content/article.cfm?page=1cid=AFC58 Please provide an URL to a _minimal_ test case showing the problem you reported if it's not covered in this article. Another aspect: Due to a severe bug in Opera8, you can't use fractional percentage values for the offset of background images, for example, a background x-offset of 19.65% will be rendered at 1965%, that's really far off :) Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] FF Bug - Any Fixes?
Chris Stratford schrieb: ... I still see the errors - should I use Absolute values (px, not em) to define my margin/padding on those lists? Would that fix the problem? It's hard to test the rounding error in all OS, text zoom level, and different dpi-settings. Yes, px-fixed lenghts and offsets might fix the em-based rounding problem of overlaps and gaps in FF = 1.04 Andy Budd once posted this workaround to css-d http://www.message.uk.com/test/nav/ maybe worth a try. Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] problems with links
jackie reid schrieb:
... www.mackayports.com
The problem is when viewed in firefox:...
in the left hand column div class=whiteblock I can't stop the logo images
from having an underline, its underlining the whole link.
This construct does expand the link in some line-boxes, but the entire
link gets underlined. You did try to set text-decoration: none to the
elements of the link.
div id=left
a href=... ...span class=imglinksimg .../spanbr
span class=newwindowThe Daily Mercury/span/a
Apply this (for the moment, at the end of your CSS file):
#left a {text-decoration:none;}
#left a .newwindow {text-decoration:underline;}
i can't get the text link in div class=endblock to have an underline, although they are both marked up more or less the same way.
I haven't looked at it yet, but most of your link rules are wrong.
#header3 a:link, a:active, a:visited { ... }
This is natural language, but not what you want to achieve in CSS:
#header3 a:link, #header3 a:active, #header3 a:visited {...}
you did overwrite and overwrite the text-decoration in your CSS: fix
your rules in
#footer
/*.imglinks*/ /* you don't need this anymore with the fix above*/
#topnav
#navlist
I have fiddled with this enough for my sanity today, if i continue i know i
will go totally insane.
get well soon
Ingo
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] inline-block support?
Kay Smoljak schrieb: On 5/31/05, kemie guaida [EMAIL PROTECTED] wrote: I was sure that there was some major browser not implementing display:inline-block, but in a quick test firefox 1.03, Opera 7 8 and even IE 6 are interpreting it correctly... I've never really thought about it before, but now I'm intrigued... what specific, real-world problem could be solved by the use of display:inline-block? When you have to align elements (say, for a catalogue) that have to build a line and wrap like a text line, inline-block would be a choice. http://www.satzansatz.de/cssd/tmp/inlineblock.html resize the window / text-zoom to see how the layout reacts in comparison with the float layout. The advantages are that - the line-height of the line-box build by the inline-block members reflects the tallest element - the elements don't get hooked by taller elements when wrapping occurs - they can be vertically aligned like chars - they react as a line box next to floats like text lines, so the elements don't drop drop under floats. And you can't do this with tables. Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Do not open the DETECTED message cause it contains a virus/trojan
The message is in the public archives and not adressed to you. It contains a zip-file. This zip contains a htm-file, but in fact its a htmpif wich will infect you Windows computer * Delete the message. * regards, Ingo Chao ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Style PRE with word wrap?
Vaska.WSG schrieb:
Actually, because I can't really find a way to get by on the word-wrap
issue and also the use of indents (as they appear in the code) I've
done all of this in php without code or pre. It uses nbsp;'s for the
tabs (preg_replace(/\t/...).
...
If you are curious this is what an output looks like ...
strong1/strongnbsp;nbsp;nbsp;nbsp;nbsp;lt;?phpbr /
strong2/strongnbsp;nbsp;nbsp;nbsp;nbsp;br /
strong3/strongnbsp;nbsp;nbsp;nbsp;nbsp;function
rowNumber($i)br /
When you are using php, you can do this with
ol class=csshtml
li class=t01codelt;?php/code/li
li class=t02codefunction rowNumber($i)/code/li
...
/ol
and so on. I saw this on
http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/
and I think it makes much sense to put a source listing in a ol and
the tabulator as a class for li and the line code in code.
And it's flexible enough for indenting, hovering and so on. Now you can
style the classes and code for your needs.
For example, I don't use the line numbers for short code snippets in my
demo here:
http://www.satzansatz.de/cssd/forgottenbg.html
see what happens when the line wraps: the indention/tab takes effect.
( IMHO that's better than
pre { white-space: -moz-pre-wrap; white-space: pre-wrap;}
starts at the beginning of the line after a wrap)
Should be usable even when CSS is off.
Another way without php might be to leave the pre on the page
pre ... /pre
and to write a javascript injection routine for this to get
ol class=csshtml
li class=t01codelt;?php/code/li
...
/ol
automagically. Anyone sure can do this, might be practical for pages
with listings.
Ingo
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Where to start?: Need to make a really junk code page to standards-compliant
Jack Saat schrieb: I have a really Junk code page you can view on http://www.extraheight.com/ and need to make this code standards-compliant. But want keep the same layout minus of course the clear view problems. There is so much junk in the code and I do not know where to start. :( From the scratch. If you need the same layout: Should standards-compliant read accessible? - Note the order of the inserts at the image: /horizontal/ black-blue-yellow-white in comparison with the add-to-cart-table: /vertical/ yellow-black-blue-white - Note that the 0.5inch column shows in fact a 1.5inch blue insert and the 1.5 column shows a 0.5inch black insert. - Note that the columns are blue-yellow/olive-orange and can wrongly match with the blue and yellow insert. This can lead to misunderstanding and reclamations (who wants to be a giant-for-a-day with the wrong color and the wrong height in the shoes?). Swap the axis of this table, than sort the rows. And yes, it's tabular data. OT: - I would expect a photo from a nice, tall couple in the sunset and/or happy successful college boys and girls in a social situation or a funny photo from a NBA team and a small guy (you know what I mean) instead of repeating the same boring sports shoe photo at each page. - The entire site mixes ExtraHeight and Extraheight in text and image. - The English on this site should be better than mine. Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] a elements and what they can contain
John Allsopp schrieb: I believe that, and all my reading leads me to believe that a elements may only contain other inline elements (not including a elements. Can anyone point me to the definitive part of the HTML spec that says this? http://www.w3.org/TR/REC-html40/struct/links.html#edef-A 12.2 The A element !ELEMENT A - - (%inline;)* -(A) -- anchor -- (%inline)* content: zero or more inline elements -(A) but no other A element Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] a elements and what they can contain
Ingo Chao schrieb: http://www.w3.org/TR/REC-html40/struct/links.html#edef-A 12.2 The A element !ELEMENT A - - (%inline;)* -(A) -- anchor -- (%inline)* content: zero or more inline elements -(A) but no other A element You are right, there is no phrase visible to me that explicitely states it in a plain human language. http://www.w3.org/TR/REC-html40/intro/sgmltut.html#h-3.3 3.3 How to read the HTML DTD We have chosen to include the DTD fragments in the specification rather than seek a more approachable, but longer and less precise means of describing an element's properties. This is a strong argument against a lot of English phrases in the spec. Natural languages seem to be not /precise/ enough to describe the complex stuff to us dummies. So we have to learn reading DTD's to understand HTML. http://www.autisticcuckoo.net/archive.php?id=2005/05/01/art-of-reading-dtd With that knowledge, it becomes so /easy/ to refer to http://www.w3.org/TR/REC-html40/sgml/sgmldecl.html and http://www.w3.org/TR/REC-html40/sgml/dtd.html to get all questions answered, or not? Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] the mysteries of float - i seek enlightenment too
While I was zooming the text-size in FF, I saw that one line of text partly overlaps the red float. http://www.satzansatz.de/cssd/tmp/lineinfloat.html looks like the real browsers have some float bugs too. FFnightly20050525 WinXPSP2. Can this be confirmed on a Mac build? If this is a bug, someone knows the bugzilla entry for this? Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] SOLVED the mysteries of float - i seek enlightenment too
Thierry Koblentz schrieb: What about this one? https://bugzilla.mozilla.org/show_bug.cgi?id=41412 Yes. At the moment I got your mail, I got the same info from Bruno Fassino at css-d where I had moved the thread to. Thank you! the attachment https://bugzilla.mozilla.org/attachment.cgi?id=180508 is equal to the mentioned test case. :) So Safari and Moz share the same old bug, Thanks to all who had a look, and sorry for the noise. Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] the mysteries of float - i seek enlightenment
Scott Reston schrieb:
... If I
wrap the divs in one big div, I still see the same issue.
The thing I'm most interested in, though, is the WHY? I want to
understand the rule that I've run afoul of so that I can avoid it in the
future.
I'm not getting 'float drop' caused by a too-wide element being forced
down (least I don't think that's the case...) What nature of floats am I
missing? Shouldn't the floated pull-quote float within its container and
ignore the sidebar's dimensions?
No.
You might accept that IE don't get floating correct. The situation in IE
is completely different from other browsers, because the #content at the
left has a dimension, a width, so the element gains layout: no float
outside of this layout element can interfere with the content inside
this layout element, and no clear inside this element will interfere
with the floats outside (place a clear: both at pullquote, and you won't
see any effect, compare the result with the other browsers). So, in IE,
the pull-quote floats within its container as if there was no other
float outside of the layout element. If you want to learn how floats are
working, it's a good idea to switch to a compliant browser.
Now, to the real browsers: Note that the left float is at the same level
with the last preceding floating sidebar.
..sidebar { width: 190px; float: right; clear: both; ... }
#content { width: 300px; ...}
.pullquote { width: 150px; float: left; ...}
div class=sidebar.../div //no.1
div class=sidebar.../div //no.2
div id=content
div class=pullquote.../div // sits at the same level as no.2
...
...
/div
This is float Rule 5: A floating element's top may not be higher than
the top of any earlier floating or block level element. This rule, if
respected [1], simply won't let your left floating pullquote flow up.
Once accepted, the next question could be: Ok, but why does the content
starts at top=0, isn't the clear:right in the second sidebar container
preventing this?
No. Clearing does not stop floating. Clear:right, applied to the sidebar
no.2, just don't allow any right floating element to the right side of
this sidebarno.2, nothing else.
Now the sidebar no.2 drops under sidebar no.1. Both have still
float:right, that means, the #content will flow to the left side of
both as high as possible.
The next question could be: why can the text move up, but the preceding
left float pullquote itself does not move up? Why does the pullquote not
stop the content? The answer is that floats are taken out of the normal
page flow, and the text just respects the float:left of the pullquote
and the float:right of the sidebars, and moves up between them.
One solution of your layout problem, as mentioned before, is to unfloat
(!) the sidebars and to wrap them in a right-floated container:
#rightside {float: right; width: 190px; }
.sidebar {background-color: rgb(102, 204, 255); margin-top: 5px; }
div id=rightside
div class=sidebar.../div
div class=sidebar.../div
/div
div id=content
div class=pullquote.../div
...
...
/div
Ingo
[1] Opera7.54, but not Op8, goes for float Rule 8 and places the
pullquote float as high as possible=next to the first right float.
This looks similar to the situation in IE6, but is completely different,
again, try to clear pullquote to see.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Firefox bug?
Gene Falck schrieb: ... I just checked on the 269840 bug and it sounds as if it might be related to a nuisance problem I've been seeing in a huge local app (my work notes)... My problem isn't lines but rather an occasional vertical doubling of the background image I am using for LI bullets. The double images happen in different places when ever I make a change in my code so I imagine this is either a triggered or cumulative effect of some kind. Hi Gene, yes, that sounds very reasonable. I do not know this bug you described, sorry. Some of the lines I saw did show up in older versions like 1.0. Did you try to reproduce the bug with the recent nightlies from http://www.mozilla.org/developer/ ? search https://bugzilla.mozilla.org/ for your bug: list image you may find the situation you described, i.e. https://bugzilla.mozilla.org/attachment.cgi?id=103612 shows problems with the png list-style-images in my old Moz1.6, but not in my recent nightly. --- A workaround can only be found when we have a /small/ testcase. Simplify it. (A test case of 200 lines full of mostly irrelevant code that doesn't change a bit when deleted plus a lot of java script, as provided sometimes, is hard to debug for people like me with limited band-width and mind-width who debug in their free time for /fun/ ). And, as George said, the most common bugs are /human/. Some are disappearing in thin air by simplifying, I might add. Good luck! Regards, Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] disappearing element in page
Carl Reynolds schrieb: ... if I narrow the IE window enough that a horizontal scroll bar appears and refresh, or go to the page for the first time, the menu area (on the left) disappears. If I then widen the window far enough for the scroll bar to go away, the menu appears and remains visible, even if I narrow the window again. The menu will stay visible until I refresh the window again with the scroll bar visible. http://hyperbole-software.com/movie-buzz/ The page is composed of a div called #menu that is position: absolute ( this is the one that vanishes) and a second div called #center-layout. #menu contains a ul containing links to other pages and #center-layout contains several other divs used to layout the center part of the page. I had thought this might be a peek-a-boo bug and have applied position: relative to #menu and its children and to #center-layout and most of its children. That didn't change the behavior at all. Carl, I narrowed it down to this test page (assuming your permission): http://www.satzansatz.de/cssd/tmp/disappearingcontent.html And I think the problem (the a. p. menu is disappearing in IE6 and IE5.5 on reload) is triggered when the floated div#center-layout's margin-left: any value em + width:70% exceeds 100%. (see section 3; section2 prevents the bug) Sorry, I have no real explanation for this behavior nor a fix yet. Given this layout, you could try to hide the width:70% from IE/Win or define the margin-left (which may lead to more problems) with percentages. Maybe someone can open my eyes? Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] disappearing element in page
Ingo Chao schrieb: Carl Reynolds schrieb: http://hyperbole-software.com/movie-buzz/ http://www.satzansatz.de/cssd/tmp/disappearingcontent.html And I think the problem (the a. p. menu is disappearing in IE6 and IE5.5 on reload) is triggered when the floated div#center-layout's margin-left: any value em + width:70% exceeds 100%. I just noticed that Bruno Fassino already has some more comprehensive test cases and solutions here http://brunildo.org/test/IE_raf3.html Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Mystery connection of css and non-liquid design
Andreas Boehmer [Addictive Media] schrieb: Something I find really strange is that a lot of people who put emphasis on Web Standards suddenly found their way back to non-liquid, 800px, centered design. I am wondering why that is? Andreas, there is a long discussion with many comments in some blogs (I think one of the recent triggers was http://adactio.com/journal/display.php/20050415012704.xml) i.e. http://www.molly.com/2005/04/16/fixed-versus-liquid-the-beating-goes-on/ and http://www.ellythompson.co.uk/blog/2005/04/25/fixed-width-layout-the-desire-for-pixel-precision/ notes the same for csszengarden and http://www.456bereastreet.com/archive/200504/about_fluid_and_fixed_width_layouts/ (sorry if I may have missed one's blog). and I found this answer (Fixed or fluid width? Elastic!) here http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/ inspiriting. Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Firefox bug?
designer schrieb: ... FF1.0, where the second and fourth images display several dashed lines across the image. (on the face of it, they are all the same) If I refresh the page the lines disappear, but on scrolling they come back again. http://www.treyarnon.fsworld.co.uk/wg/galleryv2.html cannot see these lines in your demo, but https://bugzilla.mozilla.org/show_bug.cgi?id=269840 Strange lines appear when scrolling down, then back up provides more testcases. Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] IE extra space; background not showing up; odd links
White Ash schrieb:
Hello!
I don't know why, but I'm having a time with my design in IE. Firefox and
Netscape have no problem. The idea is that the content area would be flush
top with the bottom of the background. There is a big space in IE.
td {padding-top:0; padding-bottom:0;}
Also, in IE, I can't get the background to show on the aboutamy page.
that's a IE6 bug.
http://www.amyarver.com/home.shtml
td id=header class=homepage
http://www.amyarver.com/aboutamy.shtml
td id=header class=aboutamy
with
#header.homepage { background-image: url('por_home.jpg'); }
#header.aboutamy { background-image: url('por_aboutamy.jpg'); }
In the home.shtml, IE6 parser matches #header and .homepage, ok.
but:
In the aboutamy.shtml, IE6 parser matches #header, but fails on
.homepage, and will not look further at #header.aboutamy anymore.
I would suggest you apply the class that refers to the page to body
body class=aboutamy...
td id=header
with
.homepage #header { background-image: url('por_home.jpg'); }
.aboutamy #header { background-image: url('por_aboutamy.jpg'); }
And the navbar is all flukey, with the links pointing to the root.
Sorry, don't know what is flukey: random?
Ingo
p.s.
cited: We all need to listen to the messages the universe has to send
us: This page is not Valid XHTML 1.0 Transitional :)
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] ie bug - content disappears on hover
Drake, Ted C. schrieb: When you mouse over some of these divs, the content disappears and the background color appears. It's like you are erasing it in blocks. http://positioniseverything.net/explorer/guillotine.html In case it is not the guillotine, you could provide an URL to a simplified test case. Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] update - ie bug - content disappears on hover
Drake, Ted C. schrieb:
I keep finding a solution in adding height:1% to various elements.
This seems like a temporary fix. Can someone explain to me why the height:1%
is needed and why it could sometimes cause background images to not display?
height:1% will affect other browser too, say IEMac. So you should hide
it from others, this is the Holly hack (described here
http://positioniseverything.net/explorer/escape-floats.html).
/* \*/
* html .layouted { height:1%;}
/* */
and you can assign this height to any element you want
div class=insidefloat layouted
---
That question /why/.
Note that the documentation does not explain it. We have to guess.
Assume the term hasLayout indicates a change in a /quality/ of an
element. Some bugs do exist due to the presence of elements which have
layout, more bugs due to the presence of elements that don't have
layout, and most bugs in the interaction of both. Some IE6 bugs can be
fixed via the Holly hack. This hack triggers an element to have layout.
This is not answering anything. My last rant about having layout can be
found here:
http://archivist.incutio.com/viewlist/css-discuss/56161
But I cannot seriously recommend to have a read. It isn't answering
anything either.
Better forget that question /why/ for the time being and concentrate on
the question /how/.
The http://positioniseverything.net is full of descriptions /how/ you
can fix IE6.
Ingo
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] another update - ie bug - content disappears on hover
Drake, Ted C. schrieb:
... I wish I could set up a generic example, but
it would take me too long to do the entire page. I'll see if I can duplicate
the issue with just the highlighted section.
That would be a good approach.
Here's an update. When I put height:1% on the hovers, the problem
disappears, however, now the content is disappearing when the mouse is
clicked. I tried putting (a:active {height:1%}) and/or (a {height:1%}) with
no effect.
As mentioned before, we can't analyze it without an URL to a test case.
IE does reflow the container and its childs on a :hover-transition with
any change of the background. I have written that somewhere.
If I solve this, do I get to name a new hack/bug after myself?
When someone describes a bug, he usually does try to summarize the
problem in a few words or some kind of abstraction like The Guillotine
which fits in a h1. But I think there is nothing wrong with Drake's
Bug in principle. For some reasons, I personally wouldn't prefer this
naming, but probably Chaos Bug would describe the named situation in
IE6 correctly for sure.
The hack might get the name of the author/describer of the original, but
by convention others do name it. But in this case, the hack was
developed some years ago: for a better understanding (since I've read
someone refers to the holy hack the other day), see Ten Questions for
John Gallant:
The well-known Holly hack was invented by this same Holly Bergevin. She
prefers to stay out of the spotlight, so I had to insist we call it the
Holly hack, over her objections I might add. Unknown to us, Doug
Bowman had also come up with the idea, but as he had not yet published
it I was able to affix Holly's name to the hack. Anyway, it sounds so
much better than The IE-improper-box-enlarging-to-trigger-layout hack.
(cited from http://webstandardsgroup.org/features/john-gallant.cfm a
good read about the bughunting process, or, the art of bughunting.)
I think when you have developed that height:1% hack too, it's a great
piece of work. But: when you don't bring it to paper, your bug
description will be lost like the timemachine, fuel-less car and p. mobile.
One important thing is to try your best (shame on me) to make it clear
to understand under which circumstances the bug appears, so you'll have
to sit down, read the relevant sources, and compile a nice demo after
some testing.
Ingo
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Web Standards in Estonia
[EMAIL PROTECTED] schrieb: http://triin.net/2005/04/27/Web_Standards_in_Estonia (The page itself is in Estonian, but the referred article is for all of you, who for some strange reason don't speak the language, translated to English.) Hopefully the information will prove helpful for someone... That's an excellent survey! May I ask (sorry about my English and Estonian): * Proseminarit. * T Haapsalu Kolled: Infotehnoloogia osakond. * Juhendaja: Jaagup Kippar. * Haapsalu 2005. Is this a seminar paper at a Estonian university information sciences seminar? I didn't find this in the English version yet. I hope we'll get some more surveys from other countries in the near future, for having a scientific base for our activities. But I think we can generalize the results for the time being, as the survey was conducted on 21,905 pages (and the refered Danish survey maps that results). And the results are disillusioning. Thanks again. Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Two separate CSS issues
Stevio schrieb: Hi Bob, Thanks for the suggestion but it didn't work! Stefan's suggestion did not work either. Any other ideas anyone? Anyone know why a floated div is hidden in IE6? Stephen apply the Holly hack to #maincontent for an explanation http://www.satzansatz.de/cssd/rpfloat.html when you are posting to the wsg and cssd, I don't know where to answer to. Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] divs are shrinking when i move my mouse over them in IE6, how can i fix this?
Jeroen Verburgh schrieb:
I'm not really sure it has anything to do with the contents of the floating
divs, because none of them move around. When I move my mouse over a
hyperlink, then all floating divs following the one containing this link
move a little.
Maybe shrinking isn't the most accurate term to define my problem. How about
compacting? To me it appears like IE performs some corrections on the
page-layout when I hover my pointer over a hyperlink.
yes, an excellent description!
The shrinking/compacting only occurs once, depending on relative position of
the div containing the link I'm hovering my pointer over. If it's the
first, then everything compacts at once. If I work my way back from the last
floating div to the first, then all divs following the one I'm currently
at will compact a little.
It's the IE6 percentages bug on margins, see
http://www.positioniseverything.net/explorer/percentages.html
time is rare, so here is a short explanation:
the page structure is like:
html:
body
div id=page
div class=float.../div
...
/div
/body
css:
#page { margin: 0pt auto; width: 600px; }
* html div.float { margin: 0pt 0.5% 0.5% 0pt; }
assume the browser window is sized to 1000px;
IE6 in standards mode doesn't calculate the margin-right:0.5% with
respect to the parent (#page) but with respect to the grandparent (body)
margin-right:0.5%* 1000px =5px
Any hover-transition with a change of the background induces a reflow of
the container: the elements in this container are redrawn: this happens
after all the elments are known in their dimensions.
You know that IE6 expands a container (width: 100px) when a child
(width:110px) is wider: the container is expanded by an intrinsic
width. So, after rendering this example, the parent has a width of
110px. IE has different thinking of when a width is determined.
%-margins have a referring problem: as long as the page is rendering,
they refer to the ancestor, and after the page is drawn, they refer to
the parent (%-paddings have similar, but worse problems).
Now, a hover-transition forces a reflow with the known dimensions of all
elements in the neighborhood.
margin-right:0.5%* 600px =3px
you have encountered a jump on hover by 2px.
---
your css fix
div.float { margin: 0pt 1% 1% 0pt; ...}
* html div.float { margin: 0pt 0.5% 0.5% 0pt; }
shows that you was probably designing this page at a 1280 px screen, so
this star html hack was maybe used to fix the miscalculation of
1% x 600px.
a fix would be: delete this hack, and double-wrap the page
body
div id=pagewrapper
div id=page
div class=float.../div
...
/div
/div
/body
#pagewrapper { margin: 0pt auto; width: 600px; }
#page { width: 600px; }
I know this is a pain to see (but this is the wsg list, so I can't
seriously promote quirks mode or expressions). For complaints, please
write directly to the IE7 dev team.
Ingo
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] To float or not to float
Hope Stewart schrieb:
In my email, I was originally going to have a third option of floating both
columns, but when I tested it in Safari the columns sat on top of one
another instead of side-by-side. ...:
#right {
float: right
right: 10px;
width: 45%;
border: 1px solid black;
}
#left {
float: left;
left: 10px;
width: 45%;
border: 1px solid red;
}
The problem here is the first rule: you forgot the ;, so a parser
could read this:
#right {
width: 45%;
border: 1px solid black;
}
now you might wonder why this does not fit side-by-side in FF, OP, but
in IE.
IE/Win has a buggy float implementation. And an element with a dimension
like #right is layoutet as a rectangular object which indeed sits at
the right side of the preceding float #left.
compare IE and FF/Op/Saf:
#right {
width: 45%;
background: maroon;
}
#left {
float: left;
width: 25%; /* for demonstration */
background: navy;
}
div id=leftContent for id left goes here/div
div id=rightLorem ipsum put in a long text here so we can see
what happens when the line wraps./div
IE6: the maroon block starts next to the navy float with a a width of
45% (overall width: 25% + 45%)
IE5.5: the maroon block starts next to the float, with a width of (45%
of the space beneath the float 75% = 33,75%, overall 25%+33,75% =
smaller than IE6)
Browsers that follow the specs show: the maroon block and the float
display at the same top left of the containing element. The maroon block
is overlapped by the float, and the line boxes float literally. The
overall width of this construct is 45% (smallest).
Another aspect why I'd vote for floats is that recent browsers do have
some problems calculating percentage widths of a. p. blocks with respect
to their containing block (and not to the parent).
Ingo
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] help, please!!
Rachel Campbell schrieb: The problem is that the header doesn't always display at all on some pages, such as http://www.ely.anglican.org/parishes/camgsm/new_site/activities/music/index.html. There isn't a problem if you set IE's options to refresh on every visit to the page, but that's not going to help most people! (Another point: check majestas_cr.gif for inner transparent pixel.) I wasn't able to replicate the problem first, but when I go to http://www.ely.anglican.org/parishes/camgsm/new_site/activities/music/index.html and click on Church diary (which links to itself: href=index.html) yes, I see the header disappearing, but when you hover over the location where the horizontal nav should be, it re-appears, so, as Andreas already mentioned before, that looks like a peek-a-boo, Fix: apply the holly Hack to #pageFrame That peekaboo demo was created mid-2002. The other day, MS has announced that it will be fixed in 2005's IE7beta. Wow! Expected in 2011, when the last IE6 is buried, we can forget this fix! Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Re: [Repost] 4 px gap in Safari and Gecko based browsers
tee schrieb:
Sorry, realized I got the url wrong. Here is the right one:
http://www.clients.lotusseeds.com/catering_new.html
Thanks for the URL.
#intro object {display: block;} /* do not touch */
should fix it here. :)
Objects are inline replaced elements like images, they sit on the baseline.
Ingo
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Re: [Repost] 4 px gap in Safari and Gecko based browsers
tee schrieb:
Thanks Ingo. It fixed but create a new problem for IE 5.2 Mac. It doubles
the space.
http://clients.lotusseeds.com/ie5.jpg
I know DW design view has display problem but this is something unusual as
soon as I inserted your code to my css file:
http://clients.lotusseeds.com/dw.jpg
Sorry. The mac mini is still on top of my wishlist, but I hope someone
else comes to aid.
for the time being, let me guess it is described somewhere here
http://www.l-c-n.com/IE5tests/misc#gap
What about deleting the line-height? or give a margin-bottom:0; ?
ot forget my code and apply vertical-align: bottom; ?
#intro object{vertical-align: bottom;}
ah, decisions, decisions.
Ingo
(p.s. I don't /like/ hacks too, like surgery.)
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Unexpected padding (margin?) on right float
Cole Kuryakin - x7m schrieb:
http://www.x7m.us/_clients/danielik/dev/testing/index.htm
Somehow, some right-padding or right-margin has crept into the right side of the red outlined box in IE.
#sideBar { margin: 25px 14px 25px 15px; padding: 0pt; width: 140px;
float: right;
display: inline; /* fix IE doubled margin bug */
}
see
http://positioniseverything.net/explorer/doubled-margin.html
regards
Ingo
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Client wants flashing text
Jamie Mason schrieb: 2 important points before I start... 1. Don't get me wrong, I don't want flashing text! 2. Don't get me wrong, I don't want flashing text! Thou shalt learn when to say 'no.' It's only a particular range of flashing speeds that trigger epillepsy isn't it? Its a wide range of flashing speeds that annoys me and perhaps other users out there. And if the one who has got a seizure calls your office, you couldn't state: not possible, its blinking rate of 1.5Hz is out of the trigger speed range. So this is not an academic point, but an ethical one. Patrick already has given the answer: c). Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS issues: Opera's absolute positioning
Patrick Lauke schrieb:
Kornel Lesinski
The funny thing is, that in my Opera 8b3/win your XHTML
is pixel-perfect with original Firefox startpage,
Interesting. In my copy of Opera 8 (can't remember which beta, but it's
build 7401) I have the Advanced Search / Preferences to the right of
the actual FF logo, completely outside of the box.
but in Firefox 1.0+ (nightly 20050407) you can see
pretty nasty bug - submit button overlaps radio buttons.
Again, on my FF 1.0.1 and FF 1.1 at home, it only overlaps at
very, very small font sizes.
my FF1.0+ (nightly 20050323) shows the same problem Kornel reported, and
I think the problem is in the browser default /res/form.css:
legend { ... float: none ! important; }
this would win over your rule
fieldset fieldset legend { float: left; }
but I may be wrong.
Ingo
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] CSS issues: Opera's absolute positioning
Patrick Lauke schrieb: I'm pretty sure it's a bug in (Win) Opera's absolute positioning implementation, but annoying nonetheless... would anybody be able to suggest a simple fix to get the advanced search/preferences list to align properly next to the input on my frugal google experiment http://www.splintered.co.uk/experiments/74/ ? the a.p. ul#options should be offset relatively to its containing block, which should be the r. p. fieldset#mainform in this case. Opera versions prior to 8beta3 seem to ignore this and offset the ul relatively to body. I don't know an easy fix, but position:relative on the nearest available block form looks better in Opera7.54 + 8beta1 here. maybe a start to look at. Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Someone who *wants* the peekaboo bug
John Horner schrieb: Not stupid at all, but I checked that and no, it's all happening via HTTP from a web server, no local paths involved. If it's not too much trouble, could we see an URL? Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Crazy IE: background images
Piero Fissore schrieb:
... If you visit www.immaginecreativa.it/unipn with Firefox (Mozilla,
Netscape, Opera, Safari or other GOOD browser) you can see beautiful
pictures on the top of the page, under the principal navigation menu.
If you visit that site with IE, those images won't be loaded! ...
Not at all. If you click on one of the button on the very bottom of
the page, you'll reach the help section: wow, the picture is loaded!
What's this??? Did I make mistakes in the css
(www.immaginecreativa.it/unipn/src/css/layout.css)?
I don't think there is a mistake in the CSS. If you'd switch the order of
#siteslogan.s0 {...
#siteslogan.s1 {...
to
#siteslogan.s1 {...
#siteslogan.s0 {...
you'll see the missing picture on your chisiamo-page (.s1), but not on
the help pages (.s0) anymore, sigh.
So IE6 has a problem with these multiple classes/id's on one element.
body
h2 id=siteslogan class=s1
h3 id=doctitle class=s1
Sorry, I don't see a direct fix here, but maybe I'm just missing the point.
I use the page reference on the body element (#page_nr and .section,
i.e. body id=p3 class=help for the third help page, and I avoid
direct combination in rules: no #p3 .help {...} here.)
In your situation, this will be something like
.s0 #siteslogan {...
.s1 #siteslogan {...
.s2 #siteslogan {...
.s1 #doctitle {...
.s2 #doctitle {...
body class=s1
h2 id=siteslogan
h3 id=doctitle
the advantage is that
1) you have to state the reference only once in the body
2) you can avoid multiple references for IE.
3) you can simple use the same navigation on every page
At the moment, you have to apply a class=sel for the navigation tab.
ul
lia class=sel ...
lia...
lia...
...
/ul
so every page has to get another navigation ul (ok, not a problem with
php)
with the reference on body and the same navigation on every page:
ul
lia id=tab1 ...
lia id=tab2 ...
lia id=tab3 ...
...
/ul
it's possible to define one rule that matches for a specific page:
.s1 #tab1, .s2 #tab2, .s3 #tab3 {background: red;}
hth, Ingo
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] disappearing bullet in opera 7 when using floating image
Gerard Copinga schrieb:
when I put a right floating image in an unordered bulleted list, then in
opera 7.54 the list item holding the floating image doesn't show the
bullet anymore.
ul
liItem 1/li
liimg src=0_brailleleesregel_kleinst.jpg width=150
height=170 alt=Foto van een brailleleesregel style=float: right;
/Item 2 with right floating image... and no bullet in opera 7.54
(??)/li
liItem 3/li
/ul
strange.
what if you would insert a string before the image?
li+img src=0_brailleleesregel_kleinst.jpg width=150
height=170 alt=Foto van een brailleleesregel //li
shows the bullet, but this
img:before {
content: +;
}
takes the bullet with the image to the right ... not good.
Ingo
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Site Review - coylemedical.com
[EMAIL PROTECTED] schrieb:
Thank you Peter for the quick response and heads-up!
I'm puzzled because I'm using Windows XP Home edition and checked the site
in IE 6 and FF 1.0, and the logo isn't skewed. I'm using absolute
positioning for the logo, therefore if any of the many WSG experts can
provide some advice, or solution it would be greatly appreicated.
The logo is skewed in FF and IE6 as you are positioning this #logo a.p.
with respect to the viewport, not with respect to the centered
#container. As already mentioned, check your page in different
resolutions to see.
If you want to position this #logo absolute, you might set
#container { position: relative; }
and adjust the top/left-offsets in #logo
Another attempt: float this #logo.
IE6:
Depending on the viewport-size (try in 1280x1024 and resize the window),
you'll notice that the margin on the left and right of the
#centercolumn { .. float: left; ... margin-left: 1.5%; margin-right:
1.5%; ...}
will grow or shrink, in complete disregard of the container's px-fixed-width
#container { ... width: 760px; }
So IE6 shows the quirky percentages bug [1]: IE6 doesn't compute the
percentage-margin of #centercolumn with respect to the #container, but
with respect to the viewport in this situation. And this may cause the
drop of the right column-float under the content when the viewport is
sized wide enough.
You don't have to struggle with the percentages here, just don't let IE
calculate 1.5%*760px.
Another attempt: set #rightcolumn {float: right}, you wouldn't have to
worry about margins between them. Or give a more flexible design concept
a try.
regards, Ingo
[1]: http://www.positioniseverything.net/explorer/percentages.html
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Site Review - coylemedical.com
Ingo Chao schrieb: And this may cause the drop of the right column-float under the content when the viewport is sized wide enough. Sorry, maybe this effect is not reproduceable on your font/screen/cache settings, so here is a screenshot of the drop in IE6 http://www.satzansatz.de/cssd/tmp/floatdrop.jpg Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Not sure what IE Hack to us
Jenny Francois schrieb:
I'm having issues with the right column on my site
(http://www.aekituesday.com) in IE.
The text aligns too much on the right
It's a pain to debug such huge generated pages :)
A simplified testcase would be nice.
Anyway, some of the problems started at Tuesday, February 22.
The image beneath Kasabian Interview is too wide: 450px + em-paddings
etc. just doesn't fit in the center column. ~430px is the end in this
design. Isn't there a note on this in the documentation of this blogger?
Firefox is fine: it respects max-width. Explorer just expands/explodes
this center column.
and the advertisement listed on
the page looks completely crazy.
yes.
there is a td { ... width: 20px; height: 20px; text-align: center; ...}
for the calendar squares on the left, but that wasn't a good idea.
you know, the #adstrip on the right contains a table too. The td aren't
defined in div#adstrip, so the td in the ads are limited to 20px in IE,
and there is no text centering in 20px.
go find this td rule and be more specific:
#calendar td { ... width: 20px; height: 20px; text-align: center; ...}
hth, Ingo
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] IE div problem
Robin Campbell Joy schrieb:
The problem is within the header, where a div gets bigger than it
should. If i take the header image out of the code, the div renders
correctly.
Site: http://www.andrewjoy.com/newsite/
#header img {display: block;}
should fix that.
regards, Ingo
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Strange problem
designer schrieb: www.sheltielife.co.uk ... However, one lady has contacted my wife because she 'can't see the gallery'. She just can't access your left frame when javascript is disabled. In FF, choose Tools/Options/Content/, and disable JavaScript, to see. I think this is a problem of your frame design. Regards, Ingo ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
