Re: [WSG] IE 1 pixel problem
Bryan Garnett-Law wrote: > I am experiencing a problem with a site I am developing which relies upon a > centred background image (750 x 1, repeat-y). When I place the banner > graphic atop this background IE renders incorrectly with the image appearing > to be 1 pixel left of where it should be. > > Am I coding it wrongly (XHTML / CSS below)? Or is there a hack I need to > use? Bryan, this is being caused by the use of two different centering mechanisms that you are then needing to have exactly cover each other. I had originally thought that this was an IE bug, but when I created a clean test page i found that all browsers can have problems in this area. http://users.redrivernet.com/cssjunkie/temp/bg-bug.html Try dragging the window narrower and wider. See the tiny flickering on the ends of the grey boxes? Now do the same in other browsers. the flicker pattern is different, but flickering still occurs. These flickers are 1px errors that are hard to prevent in some cases, due to considerations of screen rendering and the need to sometimes round off caluclations. The answer for you is to stop asking the browser to line up things it can't always line up. Instead, you need to find a way to put your BG image in the same centered wrapper, or you might possibly fudge off 1px somewhere so no one notices when the error happens. BTW, I have been meaning to make this into a full PIE demo, but I can't seem to find the time! Alas. Big John = -- Perennial student + Impractical joker + CSS junkie = Big John <http://www.positioniseverything.net> __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com ** 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] Border gap
Aaron Pollock wrote: > The following is a work in progress but I have a problemÂ… > HYPERLINK http://newsite.websitedirection.com/ > http://newsite.websitedirection.com/ > > The green border going across the bottom of the header div is not touching > the right hand side of the wrapper div and I can't work out why. Margins and > padding are set to zero. This is a weird one alright. IE seems to be duplicating part of the right margin on the right floated #mainnav, but the duping occurs OUTSIDE the header, apparently triggered by the left floated #logo and right floated #mainnav being in contact with insufficient room for both. Normally this would cause a float drop, but the right margin on that right float seems to change things. The effect depends on some critical spacing, so if you narrow #mainnav a little it will go away. The really interesting thing is that IE is actually enlarging the entire wrapper to accomodate this duplicated margin! Try making that right margin 100px, and then play around with the width on #mainnav. The wrapper appears to widen in both directions, but I think the dupe is all on the right. The wrapper just gets centered after the new width is added to the wrapper, so it appears to widen in both directions. The gap is simply newly created wrapper width, which just happens to show to the right of the header block. No wonder you couldn't get rid of it! As you widen #mainnav, more and more of the right margin gets duplicated outside the header proper. Once the inner margin is fully duped, any further widening of #mainnav will cause a float drop, killing the duplication effect. BTW, if #header is given "layout", by defining a dimension or applying "zoom: 1;", then the duplication stays inside #header, but the widening still happens. Oh well. ;) Again I am suprised by IE. It truly is a bottomless pit of bugs. Big John = -- Perennial student + Impractical joker + CSS junkie = Big John <http://www.positioniseverything.net> __ Do you Yahoo!? Meet the all-new My Yahoo! - Try it today! http://my.yahoo.com ** 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] Adobe Forum comment on CSS in visual editors
This certainly is an interesting take from inside the Adobe mentality. > Sorry, but there is a counter-argument here. It is clear to me that the > people who designed the CSS standard were entirely unconcerned about > how it might ever be handled by visual editors, since none of them > actually used visual editors, nor did they even consider that they > might be or should be important. The only model which interested them > was, prepare markup in a text editor, write CSS rules in a text editor, > check result in browser. So, what's so wrong with visual editors? Well, they don't display CSS pages like browsers do, for one. The onus is on the editor makers to handle the code correctly, not on the industry to coddle the editor makers. If even MS can manage to get CSS right most of the time, then I see no excuse for editor makers, other than the admitted difficulty of the task. > Just think for a moment about a model of markup structure separated > from format, and the formatting model requires that the entire set of > CSS rules must be re-read every single time that *anything* is edited > in a page to verify if the context, specificity, and cascade positions > remain the same or have changed. It doesn't matter a stuff if you > hand-code markup and CSS; it matters quite a lot if you are trying to > present something in a visual editor. Why? Is it too much to ask a visual editor to refresh the display after every edit? Hand coders do that with their browsers, so what's the big deal? Is he afraid users will freak out over a two second delay now and then? > Actually, I think given the way the standards are written and the way > they work, both GoLive and Dreamweaver do a good job. I find that DW totally mangles the appearance of any CSS page that uses anything approaching a complex layout, even layouts that Explorer 5/Win can easily handle! And let's not even get into what happens when one tries to edit a CSS page in DW using the direct wysiwyg functions. The words "train wreck" are quite sufficient. I do understand the incredibly difficult job these editor makers face in handling CSS positioning correctly, but they managed to do it with tables, and I suspect that was pretty difficult too. My only real beef is with the "good job" claim. I do expect DW to eventually become CSS friendly, but only after IE and its many "issues" is taken out of the picture. Right now tho, DW+CSS is still a work in progress. Big John __ Do you Yahoo!? Meet the all-new My Yahoo! - Try it today! http://my.yahoo.com ** 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] iframe flicker-- Gecko
David Laakso wrote:
> *Since adding the thumbnails in the sidebars *
> The iframes flicker & jump vertically, in Gecko browsers, when the
> thumbnails in the left or right sidebars are hovered.
> http://www.dlaakso.com/
David, this is without a doubt the single most complex
tableless layout I have ever been witness to. Wow.
Be that as it may, there appears to be a whole slew
of triggers involved in this bug, but the target of
the bug is rather simple, and is in this line:
div#content div { margin: 0 auto; max-width: 600px;
padding: 0 216px 0 106px; }
The combo of auto margins and a max-width sets
up the page, and an unknown number of other
factors knocks it down. Basically the flicker
is a "ghost" of the iframe in the position it
would occupy if it were not subject to the
max-width! :-0 Take away either the auto side
margins or the max-width and the ghost does
not appear.
Okay, Gecko bugs are rare and hard to trigger,
but when it does happen, look out!
Most interesting. :)
Big John
=
--
Perennial student + Impractical joker + CSS junkie = Big John
<http://www.positioniseverything.net>
__
Do you Yahoo!?
Check out the new Yahoo! Front Page.
www.yahoo.com
**
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 6 Hover Bug?
Daniel Bowling wrote: > I am very confused about a rendering issue in IE 6.02 for an unreleased > beta of my site. > http://beta.danbowling.com/IFRindex.php > For some reason when I mouse over several of my links on the left > sidebar other divs reposition themselves. For example, hovering over the > "more" link in About the Author moves the archives down, but they > reposition themselves if I mouse over any of them. Can anyone see what > is causing this? Daniel, IE is known to have many float bugs, and one variety is characterized by a vertical margin or padding being duplicated further down the page. This type of dupe bug is always "togglable" by hovering of links located in certain elements, but only when a background or certain other properties are changed on hover. You happen to have such a bug, and the BG change on your lower hovered links causes the top margin on div#archives (apparently being duped onto the top of the cleared br) to vanish from the br. Then, hovering of the links above the br restores the phantom margin to the br. You can fix this several ways, by removing that top margin, by removing that cleared br (which seems not to be needed anyway), or by changing the hover effect. The best is to lose the top margin on div#archives and substituting a margin or padding on some other element. HTH Big John = -- Perennial student + Impractical joker + CSS junkie = Big John <http://www.positioniseverything.net> ___ Do you Yahoo!? Declare Yourself - Register online to vote today! http://vote.yahoo.com ** 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] Opera formatting problems
Ted Drake wrote: > There is an image in the div#topright that is floated left that is sitting > below the menu toprightnav > I am using the IE Whitespace hack to avoid putting the unordered list on one > line of code: > http://www.hicksdesign.co.uk/journal/546/ie-whitespace-bug > > Will this mess up Opera? No, the problem is a bug in Opera that has been fixed in the latest version. The trouble is that you have a no-width defined absolute container, and two floats inside. Like most modern browsers, Opera "shrink-wraps" AP boxes to the width of the content, and in this case that content is two floats in sequence. The floats should sit side by side and so determine the width of the AP container. Unfortunately earlier Operas overdo the shrink-wrapping, forcing the floats to be vertical, I guess to get that AP box as narrow as possible. If it were a floated widthless paragraph, the AP box would only be as wide as the widest word in the paragraph! The remedy is to define a width on that AP container, about 200px, If IE/win has trouble it will be due to the 3px bug, which could be accomodated by adding 3px more to the width. HTH Big John = -- Perennial student + Impractical joker + CSS junkie = Big John <http://www.positioniseverything.net> ___ Do you Yahoo!? Declare Yourself - Register online to vote today! http://vote.yahoo.com ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Is it possible...
Kim Kruse wrote: > I'm sorry I just don't get it. It must be a combination of IQ < 50 and > css = brain meltdown. Kim, here's a working example page from ALA: http://www.alistapart.com/d/slidingdoors2/v1/ex10a.html If you save that page, make 5 total copies, and give each page's body tag an ID name the same as what's on the tabs, then you will see how it does work. If you complete the href's in the links, you can link the five pages together and see the effect live. Big John = -- Perennial student + Impractical joker + CSS junkie = Big John <http://www.positioniseverything.net> __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Wrap I say Wrap! Down Boy! good IE dog, here's a biscuit
> At 09:56 AM 9/17/2004, Ted Drake wrote: > >When I view this in mozilla the paragraph wraps nicely but the IE > >paragraph acts as if it has cleared and starts after the image. > ... > >I then noticed the paragraph width tag and said to myself: > >"Could it be the width:90% that is doing it? I added the width to keep > >the paragraphs from getting too long." > > > >I then commented out the width and checked, sure enough IE began playing > >nicely. So, how do I get the good browsers to show the narrower > >paragraphs and IE the nicely floated image? Paul Novitski wrote: > Ironically, the way IE is behaving appears to be according to the CSS2.1 > spec: http://www.w3.org/TR/CSS21/visuren.html#floats > (I don't see that particular example of a float defeated by too wide > content in the CSS1 & CSS2 specs.) This is not quite correct. Yes, the paragraph following the float is set to 90% width, but the float are still supposed to overlap the paragraph. What's happening is that a dimension on the paragraph triggers "layout" in IE, which is a mysterious and proprietary "feature" that causes the float rules to be radically altered, in total violation of the specs. See these pages for more: http://www.positioniseverything.net/articles/float-bugs-1.html http://www.positioniseverything.net/explorer/floatmodel.html If the W3C ever caves to MS on this I will be very disturbed. Big John = -- Perennial student + Impractical joker + CSS junkie = Big John <http://www.positioniseverything.net> __ Do you Yahoo!? New and Improved Yahoo! Mail - 100MB free storage! http://promotions.yahoo.com/new_mail ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] Is it possible...
Kim Kruse wrote:
> I'm almost ready to add content to this page http://mouseriders.dk/ but
> I still have one problem I just can't figure out. Is it possible to
> create a style(s) that will show one of the tabs white (you are here
> kind of thing)... like I do in the sidenav ?
No problem. Just give each tab a unique class, and each page
that is a target of a tab a unique body class as well. Then it's
possible to write descendant selectors that only apply to
a tab when it's on the page to which it points.
For instance, say a page has a body class of "home" and the
tab pointing to the home page has a class of "hometab", then
write this:
.home .hometab {styles for the "current" page tab;}
Now those special rules can override the normal styles on
the tab set. This method allows a series of selectors to be
grouped together:
.home .hometab,
.about .abouttab,
.sitemap .sitemaptab
{styles for the "current" page tab;}
Thus the tabs normally obey the primary tab styles, and
only if a tab class properly matches up with a body class,
will the special styles in this block apply to it.
Big John
=
--
Perennial student + Impractical joker + CSS junkie = Big John
<http://www.positioniseverything.net>
__
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
