[css-d] Egg timer flicker in ie6 on hover
Very many thanks Mark for your reply Really appreciated. Excellent article. Excellent fix. http://evil.che.lu/2006/9/25/no-more-ie6-background-flicker That flicker thing was like a toothache all weekend. Happy again. Kind regards, Dermot. __ 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] help with problem in CSS
(This is my first reply to the list, so please forgive any breaking of conventions, and feel free to tell me if I'm doing anything wrong!) bookpage, the footer problem is related to your use of 'float: left' on the elements preceding the footer. Since the footer isn't cleared, it 'sticks' to those elements. You need to add a 'clear: left' to that footer which, ideally, should have a more semantic class name (such as 'footer'), rather than the presentation-based 'center'. Digging into the layout slightly deeper, I'm a bit unsure as to why you've chosen to float those elements to the left in the first place, so the above is only really a short-term suggestion. You may have 'better' results (e.g. wrt the other problems) by simply not floating those elements. Cheers, - Bobby --- bookpage [EMAIL PROTECTED] wrote: I think I have all the problems fixed with the exception of two on this web page. In IE the right margin does not line up. You can see the gap to the right just under the Contact Us menu link. http://tavbooks.com/test/test.html and http://tavbooks.com/test/ I tried changing the width for the id=container, but then it was off to the right in FF. Also, in the footer Copyright © 1996-2008 Tavistock Book is not centered in correct place for FF, looks fine in IE. Thanks for any help, Rayburn __ 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/ Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it now. http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ __ 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] Egg timer flicker in ie6 on hover
Dermot. I'm sorry I didn't get round to answering your previous comment and I'm really pleased to see that you have a fix from Mark. I had previously Googled for an answer as well, but obviously didn't choose the right keywords. :-( What's a bit strange is that the problem that you had with flicker wasn't nearly so apparent as it is in the example given in the 'fix' article, and even applying the 'fix' I still get the egg-timer, but very briefly. In fact I don't think most users would complain about it, as it's so short in time. Perhaps we are searching for two different bug fixes? It would be good if we could find a CSS only fix. Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: Dermot Ward To: css-d@lists.css-discuss.org Sent: Monday, April 28, 2008 8:17 AM Subject: [css-d] Egg timer flicker in ie6 on hover Very many thanks Mark for your reply Really appreciated. Excellent article. Excellent fix. http://evil.che.lu/2006/9/25/no-more-ie6-background-flicker That flicker thing was like a toothache all weekend. Happy again. Kind regards, Dermot. __ 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] Link hand disappears in IE
Ha! I found the page I was looking for, and answered my own question. As suggest by Steve Clay http://mrclay.org/wd/tests/ir/ cursor: hand is the solution! - Original Message - I've an image-replaced navigation: http://datagnostics.com/test/imagereplace2.html Everything seems to work fine, except the little hand that says there's a link here doesn't appear in IE. The link *works*, there's just no hand. I feel really embarrassed because I'm pretty sure I clicked past a discussion of this very issue sometime in the past couple days, but both my browser history and my google-fu are failing me. Mary Ellen Doctor Science, MA http://doctorscience.blogspot.com __ 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] help with problem in CSS
Bobby Jack wrote: (This is my first reply to the list, so please forgive any breaking of conventions, and feel free to tell me if I'm doing anything wrong!) bookpage, the footer problem is related to your use of 'float: left' on the elements preceding the footer. Since the footer isn't cleared, it 'sticks' to those elements. You need to add a 'clear: left' to that footer which, ideally, should have a more semantic class name (such as 'footer'), rather than the presentation-based 'center'. Digging into the layout slightly deeper, I'm a bit unsure as to why you've chosen to float those elements to the left in the first place, so the above is only really a short-term suggestion. You may have 'better' results (e.g. wrt the other problems) by simply not floating those elements. Thank you for your suggestions and help. I had to use float left in order to get the hr to display in FF. I have used the clear:left and now the navbar and footer will not center. I tried taking out the float:left and my hr disappears again. Cheers, - Bobby --- bookpage [EMAIL PROTECTED] wrote: I think I have all the problems fixed with the exception of two on this web page. In IE the right margin does not line up. You can see the gap to the right just under the Contact Us menu link. http://tavbooks.com/test/test.html and http://tavbooks.com/test/ I tried changing the width for the id=container, but then it was off to the right in FF. Also, in the footer Copyright © 1996-2008 Tavistock Book is not centered in correct place for FF, looks fine in IE. Thanks for any help, Rayburn __ 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] help with problem in CSS
--- bookpage [EMAIL PROTECTED] wrote: Thank you for your suggestions and help. I had to use float left in order to get the hr to display in FF. I have used the clear:left and now the navbar and footer will not center. I tried taking out the float:left and my hr disappears again. The use of float: left to get an hr to display is very surprising - it sounds as if something else in your layout is affecting things. Are you referring to the 'hr's within 'xsmall'? The navbar (again, I assume you mean the 'xsmall' div) will not be centered correctly in this case, since you have applied a 'float: left' to it. One effect of floating a block to the left is to reduce its width (in the absence of an explicit 'width' value) to the minimum required. You could either specify an explicit width (e.g. 780px, as per the #wrapper) or, as previously suggested, remove the float: left. It might be easier if you try building the page up 'component' by 'component' - I suggest you try looking at the page without the #heading and the #container; this might help you to understand what is going on more easily. I really don't think your layout requires floating (these top-level components), unless you're trying to do something drastically different to how it is currently displaying. Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it now. http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ __ 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] Link hand disappears in IE
- Original Message -
From: Mary Ellen Curtin
To: css-d@lists.css-discuss.org
Sent: Monday, April 28, 2008 3:27 PM
Subject: Re: [css-d] Link hand disappears in IE
Ha! I found the page I was looking for, and answered my own question.
As suggest by Steve Clay
http://mrclay.org/wd/tests/ir/
cursor: hand is the solution!
I hate to disagree, but there are other problems with your code that I guess
you're not aware of.
In Opera, your link2 doesn't work at all when hovered or clicked.
In IE there is a very nasty delay whilst the links display refreshes.
link1 is only active for part of the image.
I'm not sure why you want to have text underneath the list images, that can't
ever be seen.
I've re-written the code without the text and some div definitions that were
superfluous and it works as I think you want, in IE6, IE7, Firefox, Opera and
Safari.
The code validates and you have no need for a cursor:hand fix, as it doesn't
get removed in the first place. :-)
The positioning in Opera is not quite the same as in the other browsers, but
I'm sure you can remedy that for yourself, if you think it's important.
new code
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /
titleImage Replacement code/title
style type=text/css
body {background:#CC;}
#navbar {
width:450px;
height:120px;
position:absolute;
top:0;
left:0;
padding:0;
margin: 1em;
}
#navbar ul {
width:385px;
height:auto;
list-style-type:none;
margin: 0;
padding: 0;
}
#navbar li a {
width:128px;
height:53px;
margin:0;
padding:0;
border:none;
}
#link1 a {
position:absolute;
top: 50px;
left: 0px;
width: 128px;
height: 53px;
}
#link2 a {
position:absolute;
top: 50px;
left: 250px;
width: 128px;
height: 53px;
}
#link1 a {
background:url(pix/Google_40blk.jpg) no-repeat; }
#link1 a:visited {
background:url(pix/Google_40wht.jpg) no-repeat; }
#link1 a:hover {
background:url(pix/Google_40gry.jpg) no-repeat; }
#link2 a {
background:url(pix/Google_40wht.jpg) no-repeat;}
#link2 a:visited {
background:url(pix/Google_40blk.jpg) no-repeat; }
#link2 a:hover {
background:url(pix/Google_40gry.jpg) no-repeat; }
/style
/head
body
div id=navbar
pnavigation with image links:/p
ul
lidiv id=link1a href=http://google.com;/a/div/li
lidiv id=link2a href=http://google.com;/a/div/li
/ul
/div
/body
/html
/new code
You could do some tidying up to optimise the code and you might consider gluing
the images together and using background image displacement, if you want the
display to run at optimum speed.
BTW please don't take this the wrong way, but it's more usual to keep your
pix in a folder called images, which is where most people looking at code
expect to find them. It's not essential and it's no judgement on you. Just a
helpful tip. :-)
Regards,
Alan.
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus
__
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/
[css-d] Egg timer flicker in ie6 on hover
Alan, Thanks very much for your comments. That fix banishes the egg timer thing completely on my page. I'm still fiddling around a bit with spans and if I get lucky with a css fix I'll let you know. I'm constantly amazed at all the people here like yourself and Mark who take so much time and effort to help solve other people's problems. I've said this before, but hopefully some day I'll know enough to be able to make a few helpful suggestions to some tormented soul in my own turn. Thanks lads. Regards, Dermot. __ 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] Egg timer flicker in ie6 on hover.
Dermot Ward wrote: Hi, Can anyone please tell me why there is that irritating egg timer flicker on the Categories ul on hover? I think this will help solve your problem: http://evil.che.lu/2006/9/25/no-more-ie6-background-flicker HTH Mark __ 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/
[css-d] div problem - children not displaying as children
Basic test case: http://www.kickflop.net/div-problem.html I'm clearly missing something simple here. I want 'bot1', 'bot2', and 'bot3' to be 3 bordered divs INSIDE 'bottomrow' Any suggestions would be great. __ 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/
[css-d] thumbnail problem in explorer ??
I'm working on an update to a site which I help built a while ago. I have placed some thumbnails with a background image with a drop shadow. All looks fine in firefox 2.0 and safari on the Mac, but as always when viewed in explorer 7? I'm dreading to see what it looks like in explorer 6. I'm not sure what's happening, could anyone help. here is the link: http://www.robertfreeman.co.uk/ and view the file called: master01.html thanks -- Rob Freeman [EMAIL PROTECTED] __ 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] div problem - children not displaying as children
Jeff Blaine wrote:
Basic test case: http://www.kickflop.net/div-problem.html
Any suggestions would be great.
#bottomrow { overflow:hidden;/*add to sector*/}
html
wrap the line inside bottomrow div. Notice bot1 bot2 and bot3 are not
inside this bordered box! in an empty division (no css needed) like so:
div
inside bottomrow div. Notice bot1 bot2 and bot3 are not inside this
bordered box!
/div
And validate.
--
http://chelseacreekstudio.com/
__
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] thumbnail problem in explorer ??
--- Rob freeman [EMAIL PROTECTED] wrote: All looks fine in firefox 2.0 and safari on the Mac, but as always when viewed in explorer 7? I'm dreading to see what it looks like in explorer 6. I've noticed this image-clearing problem in IE before - adding a 'br' between the image and caption 'solves' things in IE7/Win, although it's not 100% ideal, and untested in other browsers (i.e. IE7 - FF is fine). It also fixes the image alignment, so is definitely one place to start. Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it now. http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ __ 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] div problem - children not displaying as children
Afternoon all
Jeff Blaine wrote:
Basic test case: http://www.kickflop.net/div-problem.html
Any suggestions would be great.
David L wrote
#bottomrow { overflow:hidden;/*add to sector*/}
html
wrap the line inside bottomrow div. Notice bot1 bot2 and bot3 are not
inside this bordered box! in an empty division (no css needed) like so:
div
inside bottomrow div. Notice bot1 bot2 and bot3 are not inside this
bordered box!
/div
And validate.
In addition to David's suggestion you can use _overflow:auto_ and get the
same results in firefox and IE7. That however leaves IE 6 with the bot1
bot2 bot3 sitting on the bottom border in the bottomrow div with no space
below them.
In your test case, try moving your _ div class=clear/div _ to just
inside the bottomrow div (below bot3 and before the closing /div)
div id=bot3
bot3 is here!
/div
div class=clear/div
/div!-- bottomrow --
IE 6 will open up and behave like FF and IE7.
Best
Jim Nannery
www.gotbeebar.com
__
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] div problem - children not displaying as children
Interesting. I wish I understood why 'overflow: hidden'
solves the problem. I don't like adding things that I
don't fully understand. What overflow am I hiding? Why
is 'overflow: hidden' the magic that states, these
children belong to the enclosing div. It just seems
awful obtuse to me.
Curiously, I also found that adding float: left; to
#bottomrow also solved the problem.
I took that out though and used overflow: hidden and it
seems to work fine in IE6, IE7, and FF3b5.
Thanks Jim and David.
Jim Nannery wrote:
Afternoon all
Jeff Blaine wrote:
Basic test case: http://www.kickflop.net/div-problem.html
Any suggestions would be great.
David L wrote
#bottomrow { overflow:hidden;/*add to sector*/}
html
wrap the line inside bottomrow div. Notice bot1 bot2 and bot3 are not
inside this bordered box! in an empty division (no css needed) like so:
div
inside bottomrow div. Notice bot1 bot2 and bot3 are not inside this
bordered box!
/div
And validate.
In addition to David's suggestion you can use _overflow:auto_ and get
the same results in firefox and IE7. That however leaves IE 6 with the
bot1 bot2 bot3 sitting on the bottom border in the bottomrow div with no
space below them.
In your test case, try moving your _ div class=clear/div _ to
just inside the bottomrow div (below bot3 and before the closing /div)
div id=bot3
bot3 is here!
/div
div class=clear/div
/div!-- bottomrow --
IE 6 will open up and behave like FF and IE7.
Best
Jim Nannery
www.gotbeebar.com
__
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] div problem - children not displaying as children
On Apr 29, 2008, at 8:21 AM, Jeff Blaine wrote: Interesting. I wish I understood why 'overflow: hidden' solves the problem. I don't like adding things that I don't fully understand. What overflow am I hiding? Why is 'overflow: hidden' the magic that states, these children belong to the enclosing div. It just seems awful obtuse to me. Curiously, I also found that adding float: left; to #bottomrow also solved the problem. The 'float' property and the 'overflow' (other than 'visible') property establish a new block formatting context(s) [1]. Look at it as creating a kind of self contained box out of which nothing escapes. Google 'containing floats' for more. PS - 'overflow:hidden' is imho better than 'overflow:auto'. The latter may trigger vertical scrollbars unexpectedly, esp if inline elements inside the box have padding or a border (those don't affect the height of the containing box). [1] http://www.w3.org/TR/CSS21/visuren.html#block-formatting Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ 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] div problem - children not displaying as children
Jeff Blaine wrote: Basic test case: http://www.kickflop.net/div-problem.html I'm clearly missing something simple here. I want 'bot1', 'bot2', and 'bot3' to be 3 bordered divs INSIDE 'bottomrow' Any suggestions would be great. Children in hand are always welcome (regardless of their browser of choice)! http://www.chelseacreekstudio.com/ca/cssd/b.html -- http://chelseacreekstudio.com/ __ 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/
[css-d] Safari Height Problem
A friend of mine asked me to add an image to his web site. The problem I am having is getting it placed where his bosses want it. They want it at the bottom of a left hand column also used for navigation. You can see an example at http://www.dezynworks.com/css_test/safari_mess.htm It works in Firefox and IE 6 7, but not in Safari. This web site is nested table hell. Here is the relevant mark-up: td valign=top style=width:212px;height100% div style=margin-left: 8px;margin-top:8px;margin-right:4px;height:100%;position:relative div id=web_special_button a target=_blank href=http://www.centerforfacialappearances.com/pdf/web_special.pdf; img src=web_special.jpg /a /div /div /td I added the height:100%;position:relative to the outer div tag style definition. #web_special button is defined as position:absolute;bottom:16px. Safari doesn't extend the outer div to fill the table cell that contains it and so the image ends up on top of the navigation. From what I've read the height as a tag attribute is deprecated and is heavily dependent on the doctype definition, which doesn't exist on this site. I tried going through all the table tags that used height=100% and changing them to style=height:100%, but that didn't help. I'm leery of putting a doc type definition on the web site, because I don't know what it might break. Not to mention my bid is for adding an image to a web site, not making it standards compliant. Does anyone have some suggestions on how I can get this to work in Safari? For all I know, the client won't care, but it would be nice to know. Thanks. -Sean __ 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/
