Re: [css-d] My holy grail galleries of Expanding div's are almost there, IExplorer really messing with me
Hello. I am still new to this even though I feel I have been trying a
long time.My website is the only one I have done and I am not sure if I
should separate these into two requests for help, for now here they
are.
Both pages validate CSS2 and html 401 strict, menu left, expanding
gallery with html popups, and one has an expanding div on the right.
Both pages display well (not perfect yet) in Firefox, Opera 9, and
Chrome, in 800X600 and 1024X768
http://www.equestrian-
jewelry.com/horse_and_equine_jewelry_for_equestrians.htm
I have tried IE xplorer (6) hacking but really am getting nowhere.
This is because there are a few things wrong in there.
I'd not use position:absolute on the left side bar, I'd use float instead.
Also if you use a 99% width on the wrapper with a left margin you create a
margin box that is wider than the viewport
This may help (should work in IE5 and up):
http://www.ez-css.org/starters/starter-3A.html
Gallery is floating center, I can't get it to move over to the menu and
as well the rail div to move to the right. Also text in popup is
vertical aligning.
http://www.equestrian-jewelry.com/UnHoverGallery.htm
IE xplorer 6 has top margin/padding issues for the gallery. The popups
go way to high, bottom should be to bottom,
Any help is most gratefully appreciated.
Try this:
.hoverbox {zoom:1;}
* html .hoverbox li {height:207px;}
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] My holy grail galleries of Expanding div's are almost there, IExplorer really messing with me
Ken Davies wrote: Hello. I am still new to this even though I feel I have been trying a long time. I hear you and I know exactly what you mean. Or, do I? And, if I understand it, you need -- and it is imperative -- to hit IE/6.0. Given that goal, would it be in your best interest to begin with a base layout that is known to work in IE/6.0 (since the one you currently use is known not to work in IE/6.0?). I am not really sure what I am trying to say, nor what I think what you should do: other than that you may want to keep it simple. Other list members may be qualified to point you to workable suggestions/solutions. Best, ~d -- desktop http://chelseacreekstudio.com/ mobile http://chelseacreekstudio.mobi/ __ css-discuss [cs...@lists.css-discuss.org] 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] My holy grail galleries of Expanding div's are almost there, IExplorer really messing with me
Hello. I am still new to this even though I feel I have been trying a long time.My website is the only one I have done and I am not sure if I should separate these into two requests for help, for now here they are. Both pages validate CSS2 and html 401 strict, menu left, expanding gallery with html popups, and one has an expanding div on the right. Both pages display well (not perfect yet) in Firefox, Opera 9, and Chrome, in 800X600 and 1024X768 http://www.equestrian-jewelry.com/horse_and_equine_jewelry_for_equestrians.htm I have tried IE xplorer (6) hacking but really am getting nowhere. Gallery is floating center, I can't get it to move over to the menu and as well the rail div to move to the right. Also text in popup is vertical aligning. http://www.equestrian-jewelry.com/UnHoverGallery.htm IE xplorer 6 has top margin/padding issues for the gallery. The popups go way to high, bottom should be to bottom, Any help is most gratefully appreciated. Ken __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] My holy grail galleries of Expanding div's are almost there, IExplorer really messing with me
On Fri, 14 May 2010, Ken Davies wrote: http://www.equestrian-jewelry.com/horse_and_equine_jewelry_for_equestrians.htm You haven't allowed for viewers with larger font sizes: FF: http://cfajohnson.com/testing/equestrian.jpg -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [cs...@lists.css-discuss.org] 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] The holy grail
That would definitely be the Holy Grail... Stoopid IE. Let each browser express itself differently, as long as each is standards compliant and plays well with others. I find, at least so far, that with the exception of IE6, if I build standardized code that validates, I can get it to display almost exactly the same on every browser. Usually. Theresa On Nov 8, 2009, at 6:55 PM, Colin (Sandy) Pittendrigh wrote: The holy grail is that place we'll all be to (soon, I think) when we can finally stop worrying, thinking about and dealing with IEsicks. -- /* Colin (Sandy) Pittendrigh --oO0 */ __ css-discuss [cs...@lists.css-discuss.org] 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] The holy grail
Apparently, Micro$oft IS complying with standards but it is their standards they are complying with NOT international standards. When they brought out IE8, they said they are doing us all a favor by trying to comply with international standards. I guess they are still trying but NOT hard enough! --- On Mon, 11/9/09, Theresa Mesa trixiesirishe...@gmail.com wrote: From: Theresa Mesa trixiesirishe...@gmail.com Subject: Re: [css-d] The holy grail To: Colin (Sandy) Pittendrigh sandy.pittendr...@gmail.com Cc: css-d@lists.css-discuss.org Date: Monday, November 9, 2009, 3:38 AM That would definitely be the Holy Grail... Stoopid IE. Let each browser express itself differently, as long as each is standards compliant and plays well with others. I find, at least so far, that with the exception of IE6, if I build standardized code that validates, I can get it to display almost exactly the same on every browser. Usually. Theresa On Nov 8, 2009, at 6:55 PM, Colin (Sandy) Pittendrigh wrote: The holy grail is that place we'll all be to (soon, I think) when we can finally stop worrying, thinking about and dealing with IEsicks. -- /* Colin (Sandy) Pittendrigh --oO0 */ __ css-discuss [cs...@lists.css-discuss.org] 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-discuss [cs...@lists.css-discuss.org] 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] The holy grail
The holy grail is that place we'll all be to (soon, I think) when we can finally stop worrying, thinking about and dealing with IEsicks. -- /* Colin (Sandy) Pittendrigh --oO0 */ __ css-discuss [cs...@lists.css-discuss.org] 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] Fwd: Holy Grail layout + simple javascript = IE6 problems
David asked me for an example. See this draft, corrections and additions are appreciated. http://www.satzansatz.de/cssd/hgjump.html Regards, Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fwd: Holy Grail layout + simple javascript = IE6 problems
Ingo Chao wrote: David asked me for an example. See this draft, corrections and additions are appreciated. http://www.satzansatz.de/cssd/hgjump.html Regards, Ingo Super example. Ingo. It will make life a lot easier for all attempting Levine's (ALA) version of the Holy Grail [1]. Although I have not tried his version myself (I have used and like Georg Sortun's spin off version very much), it does come up on the list(s) fairly regularly. I believe I speak for all: We are, as always, grateful for your commitment to understanding just what makes IE tick. [1] http://alistapart.com/articles/holygrail Best wishes, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fwd: Holy Grail layout + simple javascript = IE6 problems
~davidLaakso wrote: Ingo Chao wrote: David asked me for an example. See this draft, corrections and additions are appreciated. http://www.satzansatz.de/cssd/hgjump.html Regards, Ingo Super example. Ingo. It will make life a lot easier for all attempting Levine's (ALA) version of the Holy Grail [1]. I have used and like Georg Sortun's spin off version very much [1] http://alistapart.com/articles/holygrail Which makes me wonder: where can i find Georg's spin off version? Thanks, Erik Visser __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fwd: Holy Grail layout + simple javascript = IE6 problems
Erik Visser wrote: Which makes me wonder: where can i find Georg's spin off version? Steal one of David's pages and rip it apart :-) Old, basic examples: http://www.gunlaug.no/tos/moa_1.html http://www.gunlaug.no/tos/moa_2.html http://www.gunlaug.no/tos/moa_3.html ...and a few more... http://www.gunlaug.no/tos/ In the basic examples I use Ryan Brill's 'negative margins' as base... http://www.alistapart.com/articles/negativemargins/ ...add a number of outer wrappers with borders and/or paddings to make it narrower, and then push out the real page to full width again so the side-columns end up on top of those side-borders or side-paddings on the parent-container. Then I style my many wrappers so it ends up looking like something else. I have used this method for a long time - see dates in those examples, but have yet to write an article about it anywhere since I thought the whole thing was a bit overloaded and not holy enough :-) The method itself is pretty stable though. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fwd: Holy Grail layout + simple javascript = IE6 problems
The issue is similar to a problem already mentioned on css-d [1].
The holy grail's fix
left: 150px; /* RC width */
did never work for me.
The percentage margin bug [2] that is present here can be fixed by:
- omitting percentage margins in IE or
- adding an #innerwrapper with the same dimension the parent element of
the margined box has.
body
div id=page
div id=innerwrapper
...
div id=menu ...
I added #innerwrapper to your code.
#innerwrapper { zoom:1; }
The reason is that the percentage margin of #menu skips one generation
when a redraw event is triggered, like in your script.
Before redraw: the %-margin is erroneously calculated with respect to
the grandparent of the element = body
After redraw: the %-margin is correctly calculated with respect to the
parent of the element = page
The static original fix (left: 150px;) cannot compensate for this
dynamic bug; it ignores the fact that the bug is self-compensated on
redraw. The fix is wrong, so delete it:
#menu {
width: 200px;
right: 200px;
margin-left: -100%;
/* _left: 150px; */
}
(Dean's IE7 Script you've mentioned does not need this hack because of
the fixed percentage margin bug in his script.)
In addition, you need to add position:relative to header:
#header {
margin-left: -200px; /* menu width */
position: relative;
}
in order to prevent this from being clipped [3].
You might have seen another issue with Levine's layout [4]: when the
window is sized smaller, the columns start to move. This was discussed
to some extend in another thread [5].
Ingo
[1] http://archivist.incutio.com/viewlist/css-discuss/74961
[2] http://www.positioniseverything.net/explorer/percentages.html
[3] http://www.satzansatz.de/cssd/onhavinglayout.html
[4] http://alistapart.com/d/holygrail/example_4.html
[5] http://archivist.incutio.com/viewlist/css-discuss/85029
PS: please use bottom-posting when replying on css-d, thanks.
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fwd: Holy Grail layout + simple javascript = IE6 problems
So, I could track down the problem to a single line. Read post below.
Anyone know a fix for this?
-- Forwarded message --
From: Paul Eipper [EMAIL PROTECTED]
Date: 09/03/2007 18:59
Subject: Re: [css-d] Holy Grail layout + simple javascript = IE6 problems
To: Peter Hyde-Smith [EMAIL PROTECTED]
I posted here exactly because the issue is caused by some IE CSS
rendering problem.
You can see the issue occur whenever IE is forced to redraw the
layout, like when resizing the browser window, for instance. Definitly
not a javascript issue, but an IE bug.
I was hoping someone could identify the bug that was being triggered
and how to correct the stylesheet accordingly to fix it.
Meanwhile I am using the IE7 javascript library [1], since it fixes
most IE6 rendering bugs, including this one. With it, I could track
down the problem to one line on my layout:
#menu {
left: 150px;
}
which, when used with IE7 library causes the same issue, but on all
pages. When removed it works correcly, but not on a clean IE6
environment.
It is the proposed fix for IE6 on the Holy Grail, but the fix itself is buggy.
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}
If anyone can provide another possible fix for this, I would really be
thankful :)
--
Paul Eipper
[1] http://dean.edwards.name/IE7/
2007/3/9, Peter Hyde-Smith [EMAIL PROTECTED]:
- Original Message -
From: Paul Eipper [EMAIL PROTECTED]
To: CSS-D css-d@lists.css-discuss.org
Sent: Friday, March 09, 2007 11:21 AM
Subject: [css-d] Holy Grail layout + simple javascript = IE6 problems
Hello list, newcomer here :)
I am having problems with a variation of the Holy Grail Layout [1]
when using a very simple javascript that rewrites the innerHTML of a
DIV in the layout.
You can check the problematic layout here:
http://lkraider.eipper.com.br/files/layout/index.html
The javascript code is this:
document.getElementById('text').innerHTML = 'Hello';
I've tried other scripts aswell (hiding DIV's, etc), all cause the same
issue.
On Firefox it all works as expected, but on IE6, the 'menu' DIV is
displaced when activating the Javascript code.
Can someone offer some help on which bug is being triggered here and
how could I fix that?
Thanks :D
Paul Eipper
Paul:
I suggest you look to a JavaScript oriented list. While I am sure there are
people on this list who can help, it's a list focused on resolving issues
with Cascading Style Sheets and the List Administrators are pretty agressive
about publicly reinforcing that point. So tread with care, even with the
Holy Grail.
Cheers,
Peter
www.fatpawdesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
