[css-d] eCommerce site IE6 Bug Busting
Heya All, got to that 'bash-head-against-wall' stage in the web development where I try to solve IE6 rendering issues. Working in XHTML strict. Site is here: http://www.rasbazaar.com.au Standard page html is here: http://www.rasbazaar.com.au/skins/V4Bazaar/styleTemplates/global/index.tpl layout css doc http://www.rasbazaar.com.au/skins/V4Bazaar/styleSheets/layout.css and style css http://www.rasbazaar.com.au/skins/V4Bazaar/styleSheets/style.css There are about 6 issues that I'm trying to resolve left to work on and any help would be so greatly appreciated. 1) The footer bar at the base of the page has its left cap acting like full height. (#rndftbar) providing a height to this or the .tm (middle section) causes the footer bar layout to fail. 2) Base of rounded blocks and header bar aren't being rendered correctly. The index's page central gold block should have a black outline to the very base courtesy of the image that is replicated along there. The block has a set height but somewhere the image is being pushed down and then cropped off with overflow:hidden. Removing the overflow brings it to normal appearance but can cause issues with font size alterations. The very top bar has the same problem with enlarge font size pushing the background image down and cropped bt overflow:hidden which can't be removed here. Compliant browsers keep the image at the base and let the content overflow it. Testing haslayout cure had no effect. 3) The left footer image on the cart page (click View Basket) is indented. This is exactly the same code from the standard page. Here is the page code: http://www.rasbazaar.com.au/skins/V4Bazaar/styleTemplates/global/cart.tpl compared to the index page. I can't seem to find any reason for this move. 4) Problems with site elasticity. I'm running the width expression as given by guru Georg. Upon shrinking fully the left column loses its negative margin and lays over the central column. The initial shrinking at large size causes a break in the central block which means the shrink isn't fluid. The scaling pixels sizes are correct however as far as I can tell. 5) IEpng integration causes the layout to break. I've had this issue before with a far more transparent intensive site. 6) No hover on elements but whatever hover script hasn't been implemented fully yet. Any assistance would be greatly greatly appreciated. The code isn't easily accessible due to the cart system I'm running on this site so ask for any code that I haven't provided above. Regards Wesley Lamont __ 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] IE6 Bug Busters and Site Check needed
Heya All After much time IE bug busting I seem to have worted out all the bugs in IE7 and have a few remaining IE 6 bugs that seem quite immune to my work. http://www.onlinedietitian.com.au/onlinedietitianstart4.html in IE6 there is always missing corners from the rounded boxes. The footer left and right boxes have been clipped despite haslayout and relative fixes. There is extended margins in the footer as well below the copyright info but this will probably go when the footer is rendered correctly. Anyone have a recommended course of action for these problems. The usual solutions seem to be missing the mark. An odd side note someone here may be able to answer. In older generation Gecko browsers (Firefox 1, Mozilla 1) the Main Content Block and Footer block Collapse if they don't have a border??? I have added a white border which is invisible in this layout but an odd solution. Its behaving like a layout bug where one attribute will alter something seemingly unrelated Last assistance would be if someone in IE browsers could check the fluid nature of the site and the roll-overs in the menus. Thanks for any assistance. Regards Wesley Lamont __ 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] IE6 haslayout solution needed
Heya All, I seem to have run up against a IE6 haslayout bug which I can't seem to find a solution for (as per usual). I have a two column layout. The right one is fixed width and floated right. The left one has negative margins to match the right column and is variable width. Now good-ol IE6 decides that something with haslayout (width:100% or any other method) next to a float is treated as though it is floated and then dropped. I've been running through all manner of potential solutions to no avail. It seems this is an unsolvable problem with the layout I have tried to implement. I thought I would ask the crowd here before I take any drastic actions. I assume its actually possible to get this to work in IE6. Anyway website is here: http://www.avize.com.au/tyredoctor/tyredoctor1.html Thanks for that help Wesley Lamont __ 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] IE6 haslayout solution needed
haslayout is really annoying but quite an easy one to resolve, usual methods are to use relative positioning or the zoom property to force and element to have layout in ie. ahh but this is the issue where haslayout has been triggered with a width. I actually need haslayout not to be triggered in this case. Yes triggering haslayout is quite easy. Removing that without breaking layout is much more difficult. This is the negative version of haslayout where its presense causes IE to render blocks incorrectly. In response to Lourens. I'm pretty sure I've tried that in my seemingly endless tests but I'll give it a run through again. I'm not sure if the entire content cannot have any haslayout triggers which would be impossible due to any images having layout innately. Wesley Lamont zoom:1; position: relative or absolute; height: 1%; http://www.satzansatz.de/cssd/onhavinglayout.html http://csscreator.com/node/33634 cheers Stefan B On Tue, Feb 10, 2009 at 10:27 AM, WEZ! c...@raez.net wrote: Heya All, I seem to have run up against a IE6 haslayout bug which I can't seem to find a solution for (as per usual). I have a two column layout. The right one is fixed width and floated right. The left one has negative margins to match the right column and is variable width. Now good-ol IE6 decides that something with haslayout (width:100% or any other method) next to a float is treated as though it is floated and then dropped. I've been running through all manner of potential solutions to no avail. It seems this is an unsolvable problem with the layout I have tried to implement. I thought I would ask the crowd here before I take any drastic actions. I assume its actually possible to get this to work in IE6. Anyway website is here: http://www.avize.com.au/tyredoctor/tyredoctor1.html Thanks for that help Wesley Lamont __ 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/
Re: [css-d] IE6 haslayout solution needed
All assistance is appreciated Stefan. and don't think I gave display:inline-block a go so who knows it could work. I think that is one of the things that bugs me (no pun intended) is the randomness of the cause and solutions. Ohh well back to it Wesley Lamont If the problem is ie rendering block level elements could you not trigger haslayout then, declare the element as an in-line element? I feel I might not be understand this problem very well but I thought I might throw this out to you anyhow, as it might help solve the issue. regards Stefan B On Tue, Feb 10, 2009 at 10:45 AM, WEZ! c...@raez.net wrote: haslayout is really annoying but quite an easy one to resolve, usual methods are to use relative positioning or the zoom property to force and element to have layout in ie. ahh but this is the issue where haslayout has been triggered with a width. I actually need haslayout not to be triggered in this case. Yes triggering haslayout is quite easy. Removing that without breaking layout is much more difficult. This is the negative version of haslayout where its presense causes IE to render blocks incorrectly. In response to Lourens. I'm pretty sure I've tried that in my seemingly endless tests but I'll give it a run through again. I'm not sure if the entire content cannot have any haslayout triggers which would be impossible due to any images having layout innately. Wesley Lamont zoom:1; position: relative or absolute; height: 1%; http://www.satzansatz.de/cssd/onhavinglayout.html http://csscreator.com/node/33634 cheers Stefan B On Tue, Feb 10, 2009 at 10:27 AM, WEZ! c...@raez.net wrote: Heya All, I seem to have run up against a IE6 haslayout bug which I can't seem to find a solution for (as per usual). I have a two column layout. The right one is fixed width and floated right. The left one has negative margins to match the right column and is variable width. Now good-ol IE6 decides that something with haslayout (width:100% or any other method) next to a float is treated as though it is floated and then dropped. I've been running through all manner of potential solutions to no avail. It seems this is an unsolvable problem with the layout I have tried to implement. I thought I would ask the crowd here before I take any drastic actions. I assume its actually possible to get this to work in IE6. Anyway website is here: http://www.avize.com.au/tyredoctor/tyredoctor1.html Thanks for that help Wesley Lamont __ 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/
Re: [css-d] IE6 haslayout solution needed
Wow you guys rock. I've worked off Georg's example but I think David
had the same idea. Is there a place on teh web you would recommend
looking to find solutions to css layouts in IE? I've read through the
'on having layout' numerous times but ever situation always seem
different enough never to know a solid solution. Not to mention the
variety of varied bugs.
I feel every time I start a new layout I invariable get to the point
where I ask for some IE help. Sigh.
Thanks again people the help is awesome.
Wesley Lamont
I think you want IE to behave like for this reworked example of your page...
http://www.gunlaug.no/tos/alien/wez/test_09_0210.html
Reverse engineering works best in such cases - make standard compliant
browsers simulate IE6/7 behavior, as described here...
http://www.gunlaug.no/contents/wd_example_01_02.html
In practice for your page, you simply replace existing styles for
#leftcontentcolumn with the following...
#leftcontentcolumn {
overflow: hidden;
background : #aaa url(images/valid-xhtml10.png) no-repeat scroll top;
}
* html #leftcontentcolumn {
overflow: visible;
height: 1%
}
...and IE6 and the others will line up those columns just fine, and in
identical-looking ways.
I assume its actually possible to get this to work in IE6.
The expression used (on #layout) is for quirks mode only, and makes IE6
in standard mode freeze, or rather go into an endless loop, at end-points.
Either force IE6 into quirks mode like I have done in the example page,
or choose one of the mode independent expressions described here...
http://www.gunlaug.no/contents/wd_additions_14.html
regards
Georg
--
http://www.gunlaug.no
__
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] test - if someone could respond if this gets through
just testing. All my emails stopped from the list 10 Jan so I'm assuming that's spam assassin being changed but I've reverted back and still nothing. Either I'm not receiving the emails, lost my subscription or something else. If anyone could just reply if this does come through that way I'll know if I'm not getting the list to my mailbox or not even getting to the list in the first place. Thanks Wesley Lamont __ 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] WebSite IE Debugging Help
Heya All, well it seems my emails are getting through though I haven't had a normal list email for quite some time. Odd but I'll have to solve that bug once I get this sorted out. http://www.avize.com.au/avize12.html I've been developing my Business Site at the moment and got it to the state I want in compliant browsers without too much trouble. Now I'm back into the glorious stage of IE win testing and after a couple of days of testing, searching, researching etc I'm going to ask some of the gurus on here. I'm focusing on IE7 at the moment as IE 6 is a complete disaster. Porblems left are: 1) Header Right Image should be aligned to the end of the bar (floated right) 2) Newcolumn should be centred on its column 3) Footer Right same as above - top three all seem like the same float margin bug but can't seem to get it resolved 4)Inspire block in middle should be centred 5) Content Blocks have whacked out borders (this will be IE italic bug I haven't tackled yet) 6)Footer Left Block has smaller line height than standards browser 7) Google CSE bar at top left has larger line height - set to 1px height the bar loads as 1 px then something triggers it to enlarge but another 5 or so 8) Login Text input not centered - the last three seem to be line height problems. You'll have to excuse the site is far from refined (and the various zoom hopes) at the moment. If anyone can recommend solutions or where I can read further to find solutions that would be fantastic. Wesley Lamont __ 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] test - if someone could respond if this gets through
Thanks everyone. It does indeed seem my emails are getting through fine and responses to me are getting through as well. I'm still not getting the regular posts however which is very odd. Anything I post is not showing up either. Going to have to take a look into my spam settings I think. Thanks to all those replies. Wesley Lamont __ 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] WebSite IE Debugging Help
Heya David and Co,
http://www.avize.com.au/avize13.html
My last reply didn't get to the list due to wrong email address but
thsi one will. I've managed to solve the major issues with Davids
help from earlier. Summaries are as follows:
Added Font:100.01%
- Didnt' solve anything but its a standard problem reducer so its staying.
Changed Margins on right blocks:
Adding the 6pixel inner margin solved the centre and footer right
hand block centering. I had reduced the inner margin in case of ie
not positioning it correctly and then float dropping. How ironic.
Seems fine now in IE7 and standards browsers.
I also altered the header block with the same logic. It appears that
floated right blocks in IE7 are positioned by their left margin than
their right margin which goes against the w3 standards from my
recollection. Added an arbitrary 30 px seem to solve that problem.
David's solution of absolute positioning and fixed width worked and
full width browser but the site is designed to scale down to a 640px
browser. Though it did make me wonder how successful a layout would
be with a negative margin content and two absolute positioned columns
on either side. (logically it seems fine - as there would be no need
for floats etc - but I'm sure practically there is something lacking
- most likely vertical positioning down the page)
The Entire Content block had damaged margins due to Italic text when
removed not only solved the odd margin fluctuation but also the
layout of the inspire box.
So it looks mainly correct now. Few line height bugs remain but its passable.
Prevent all versions of IE from going totally goofy with font scaling:
body { font-size: 100%;}
ahh forgot to put that back in from previous work. Though I recall
font-size:100.01% was suppose to help Safari or Opera in certain
cases as well. I didn't actually recall that being an IE helper but
since I got sizing issues I'll have to see if it helps here.
What more could anyone ask :-) ?
I'm focusing on IE7 at the moment as IE 6 is a complete disaster.
is that for IE5? surely IE6/7 would ignore the commented css?
Rules enclosed between /*...*/ means to delete same.
I missed your code alterations so all I was seeing was the comments
and wondering how that was going to alter the output :)
How is it showing up hard to read. What OS/Browser/Resolution are
you using? I coding on mac which has standard antialiasing which
always makes fonts look good. Renders I have seen from PC look fine
as well but there could be something I'm not using
Whatever does it for you and yours is fine with me. As for myself, I
have difficulty with tiny-type set bold italic uppercase. Such is
life...
no that is perfectly valid point. The website isn't for me its for
everyone who interacts with it. I've removed all the Italics as that
was what was damaging the entire centre content. Without antialiasing
the italics would be messed up.
The font should be a standard 12point arial which should be fine
though I have noticed there is very little tracking between the
letters on the standard arial which doens't help readability.
as for the small-caps that is there purely not to make a box of text
quite so boring. I may have to tackle that another way.
5) Content Blocks have whacked out borders (this will be IE
italic bug I haven't tackled yet)
Holding on your solution...
ya Italics bug. IE alters the width of a container element containing
full width italic text rather than let the italic's increased width
flow out of the container. It was amusing see it stuff around the
borders as it seemed to maintain the normal border underneath (let me
guess, an IE7 patch over the IE6 bug) and then had a separate border
ontop which moved with the text italics.
Yeah not been validated yet. I run through that later in the
cleaning step. It can solve problems if I've missed something type
wise. Once its working correctly I can most likely halve the css if
not more.
That could be a nice touch :-) .
hehe now now, no mocking :). In the initial design stages the css is
usually a horrible mess.
Though I'm guessing it will be complaining about zoom's use.
Validating using css3 (to avoid complaints about text shadow)
23 errors, 20 zoom errors, one behaviour error and two * html errors.
hmm I'm actually surprised. all the errors I would have expected and no more.
awesome work :) Thanks for your help. I'll work through what I can
and post back up depending on outcomes.
Trust me. I can't speak for others but personally, I can hardly wait.. ;-)
hahah such cheek :)
Thanks for you help once again David
Welsey Lamont
__
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 --
Re: [css-d] Conceptual Guidance - content outside viewport
Thanks for your reply and assistance as per usual Georg. Much appreciated. I've been tinkered with the idea over the last couple days. Trying different ideas but still no luck. You have some interesting avenues of attack on your site but the issue with the right hand background not making scroll bars with a div still exists. I haven't tried it with your code but the inner div you added to the left if applied to the right hand side will probably produce a scoll bar. Your code is still based on a static scaled content based on the the em (good implementation btw) so I still can't master the scaleable content on the the window size. Some conclusions I have come up with. if anyone can confirm or deny: A div outside the right side of the viewport will always create a scroll bar. A div moved through any means (margins(+/-), left/right, content overflowing etc will always create a scroll bar. Content moved to the Left won't create scroll bars So i'm not seeing any way to actually implement the concept I was after on a variable width content. If anyone can suggest any other avenue I'm all ears (well eyes really) Wesley Lamont At the moment all I need is a direction of attack. I'm sure it is possible to produce the effect I'm after i just don't know the technique and can't find it so far. This method may be a place to start... http://www.gunlaug.no/tos/moa_40.html - Only content-container creates horizontal scroll-bars. - Content-container can scale - I've used em-width. - Visual background positions adjusts horizontally relative to content-container on both sides. - Can easily handle multiple backgrounds inside/outside viewport. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ 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] Conceptual Guidance - content outside viewport
Heya All, I've been trying to find a solution to a concept I want to implement in a template I'm working on. I want to have a variable width, centered content block which has a background image that is wider than the content and doesn't create scroll bars when the viewport is reduced to the width of the content or less. The methods I've tried so far have either failed to achieve the outcome of have resulting in scroll bars making the extra imagery accessible. Initially I would be aiming to get an image in the background but I can see numerous uses for actual content in the area the viewport ignores (content img with a background image behind for effects or dynamic effects not critical for content). There is no overflow code that allows the content to be rendered outside its block and not to instigate scroll bar creation. I've tried negative margin blocks which create a scroll bar. If I haven't made the concept clear enough (most likely) here is a fixed width site with a basic version of what I'm after... http://www.sc2armory.com. That site uses a fixed background image on a fixed width site but I need the background imagery split into two chunks so the content can vary width dynamically. At the moment all I need is a direction of attack. I'm sure it is possible to produce the effect I'm after i just don't know the technique and can't find it so far. Wesley Lamont __ 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] Site Check please (IE6 ideally)
Heya all, Just done some footer work on this page and want to know if the page is rendering without flaws in most peoples browsers. http://cedd.raez.net/cedd.html I've ran it through all the modern browsers on my work Mac and if anyone ideally could put it through its paces on IE6 that would be very very appreciated. I need to know if the page scales correctly with decreasing window widths and font size changes. It's also using a new IEpngfix which was causing a minor rendering issue in IE6 earlier which I'm thinking may have gone. The right border should be even from the top of the page to the bottom. Thanks for any help. Kind Regards Wesley Lamont __ 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] Width miscalculation Safari/Opera vs Gecko
Heya All, I'm having issues with calculating Widths in a Fluid environment. Safari and Operan Both render the central blocks and images their correct width. The Gecko renderers struggle with determining width and seem to fall back to the content determining width. I've played around with the floats in the layout which has three columns with a extra float div to get the content to appear first. If I remove or vary the floated elements I can reverse the situation with Gecko engines rendering the widths correctly and Safari and Opera then falling back to the content widths rather than specified widths. Here is the URL if anyone could take a look for me that would be great: http://www.newearthpermaculture.com.au/CEDD/cedd.html the css is here: http://www.newearthpermaculture.com.au/CEDD/ceddnew1.css Thanks for any guidance. Regards Wesley Lamont __ 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] IE background property expanding blocks width
Heya All, Got a good ol IE bug again which is doing my head in Adding a background to a div which has margins, borders, or padding has a habit of expanding the block by the width of the margins, borders or padding. I can't add the background wanted to any div with any dimensions which I need to do to get the background to be contained within the intended division. The page with the backgrounds in an parent div with all the borders padding and margins can be found here: http://www.newearthpermaculture.com.au/CEDD/cedd17a.css When I add the background to the correct div I get this: http://www.newearthpermaculture.com.au/CEDD/cedd17b.css This problem seems to be unrelated to a 'haslayout' issue as well which stumps me further. Does anyone know an explanation or better yet a solution to this bug? Doesn't seem to be listed in any of the usual places that I could find as its not a standard 'expanding box' issue Thanks in advance Wesley Lamont __ 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] Menu DropDown (S.F.) functionality in IE
Heya All, Still haven't been able to crack the Drop Down functionality in Suckerfish Style drop downs. IE (win) is causing the dropdowns to fail on hover when above other positioned elements. http://www.newearthpermaculture.com.au/bm/BusMentorMenu31.htm I've been through all the previous recommended attempts to no avail. This is a known issue in IE but should be solvable. From the Microsoft website: Input from controlling devices does not penetrate overlapping elements even if the elements are no visible. Which is the issue here. There are no elements overlapping the menu but something in IE rendering stream is or thinks it is. Anyway if anyone can offer any solution it would be much appreciated. Wesley Lamont __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu DropDown (S.F.) functionality in IE [SOLVED]
Thanks to both Alan and Georg, The background was indeed the solution to the IE bug. It actually has a semblance of logic as well though I was stuck trying to resolve the issue with IE z-indexing fun. Thank you very much as that was the last serious bug the layout required for functionality. (well in the IE 6 land - IE 5 is something I'll tackly later) Regards Wesley Lamont I'll do a site check in a day or so. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu functionality and IE6 bug
Whoa impressive work Alan.
Hi Wesley
You are pandering to IE and especially IE6. This type of menu is
best done first to work correct in Firefox or Opera, then a check in
IE7, then lastly IE6. I have copied your code and made a few changes.
I'm a CSS programmer. I start with compliant browsers and work back
towards IE. IE 6 is the present one on the list to repair for. All
standards browsers have been rendering the menu correctly so far.
http://css-class.com/x/BusMentorMenu.htm
Does the menu now function in IE6? I can not check if it does. If it
does, then it should function in most browsers.
Fails badly in IE6
menues are broken all over the place. they run horiztonally not
vertically, they move when attempting to move onto the sub menu.
At this point I want you to disregard the differences between the
browsers since they are due to me altering the code and CSS. When I
do so it exposes, the conflicting rules. When I had the menu
functioning in Firefox, I then noticed that the main menu was
vertical in IE7. This was caused by the img drop shadows. The fix
was to removes the floats (yes at one point I made this change for
the images) with this rule.
.drop { height:0.5em; float:left;margin-bottom:-1000px;margin-right:-1000px;}
Please note that every z-index has been removed from the CSS. This
indeed would explain some of IE6 behavior.
The numerous Z-indexes were excessive at this incarnation but are
designed to find the problem in the IE6 menu.
I have removed many of the position:relative;
This would be causing the layout mayhem at the moment.
The navigation element which you had is now effectively a container
for everything below the header. I have now absolutely positioned
the menu with it's own containers to be above the background (below
the header) and since the menu now appears last in the source, it is
layered higher then the content menu. I would not recommend using
ems as widths or in the margins. Hope it helps.
Em are essential to making the website scale with font alterations.
The entire website is solidly based on EM sizes 'everything' can
handle being scaled up to large sizes and down to handheld sizes. I
can calculate all the em's accurately as px sizes so far so good on
that functionality.
BTW, Please note that I have sent Opera crazy, the dropshadows I
see. This I will attempt to fix with this menu demo.
http://css-class.com/articles/ursidae/menu1.htm
The menu system presently implemented is a version of Suckerfish and
is now solid in almost all browsers that are CSS capable.
Your menu scales find. You get a drop in the smallest scale in
Safari. Your background doesn't scale when enlarged so you may want
to make the background image tileable for that reason.
Fails completely in IE5 (man). admittedly so does son of suckerfish
at the moment with my two menus. Dual functionality seems to not
allow IE5 mac to function. I assume you aren't trying to support this
which is fine.
no drop down functionality in IE6 either. Mouseover effects are
working however.
Layout is different as well. The background block seems to be in a
different position (lower) than in CSS compliant browsers.
Float drop in Mopzilla in Menu 5 in normal font size. Same with
Seamonkey (though same root browser)
Other than that works nicely. I like the background image you used
though may need some overall contrast adjustment to make sure the
text is always readable.
Kind Regards, Alan
http://css-class.com/
In your article about your menu some of the blocks about the menu
system break too wide for your layout.
Wesley Lamont
__
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] Menu functionality and IE6 bug
Heya,
This last bug is killing me. I've been bashing away at it over the
weekend to no avail.
The Main menu drop down functionality is flawed in IE6(win) and
possibly other IE's as well. The visual appearance is solved via
giving the ancestors blocks a position and z-index as I explained in
a previous post. However the functionality of the drop down menu's
stops functioning when the cursor is above the content block whilst
still remaining in the menu. This still appears to be a Z-index issue
despite the menu visually functioning correctly. The menu items only
appear to create style changes upon the text only and not the entire
block.
From the Microsoft website: Input from controlling devides does not
penetrate overlapping elements even if the elements are no visible.
Which is the issue here. There are no elements overlapping the menu
but something in IE rendering stream is or thinks it is.
The website can be found here:
http://www.newearthpermaculture.com.au/bm/BusMentorMenu27blank.htm
I've added all the work I've done on this problem below any any help
is GREATLY appreciated.
Regards
Wesley Lamont
There is two elements to this problem both related. The first is the
main menu sitting ontop of the top bar. The bar is absolutely
positioned z-indexed at -600. The menu ancestry is relative
positioned at z-index 500 code-ordered after the bar in both html and
css code. The li of the main menu only function on the text of the
'a' element within the block not on the entire 'li' as standards
suggest.
This I have proven by removing the bar and functionality is fine for
top level of the menu. Here are the tests I've tried so far:
- Drop the bar below the menu in html code and apply top:0
- set bar at absolute - z-index
- set barmid (central section of bar) @ absolute -, top:0
- Move bar to top again, change absolute to relative, add top to menu
section to overlap once again
- Make menu absolute
- make menu absolute and position above bar again.
- removed positioning on bar completely
Even with the menu and bar with absolute positioning both or relative
position and extreme opposite z-indexes I still can't achieve
functionality correctly.
The second problem is the failure of the dropdown to sustain sfhover
class change when the cursor moves above the content area. Movement
above this area drop the menu completely rendering all lower menu
items unreachable. Despite visually appearing above everything the
functionality still claims the menu to be behind something. attempts
so far (well ones I can remember)
- dropped parent z-index in case both were inheriting the same value.
- Added menu * {pos:relative, z-index: 500]
- added borders to see if any of the menu blocks was rendering
visually under the content
http://www.newearthpermaculture.com.au/bm/BusMentorMenu28blank.htm
After even more tests while writing this:
It seems the text of the drop down menus still appears functional
above everything similar to the main menu. elsewhere on the block
fails to keep the sfhover class change. Interestingly the entire
block still triggers the sub menus to appear even if it then fails
above the content block.
The border test in 28 also show how the borders appear to function
above the content block as well.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu functionality and IE6 bug
You're CSS works correctly even in IE 7. Yeah I was told this by another colleague though i have no way to run through the functionality myself as I have no IE7 in my mac-based office. What I would recommend you is to temporary use the JS version on all browsers (i.e. commenting out the li:hover in the CSS and the conditional comments in the HTML). Very good call. I've done that earlier but not more recently. Pretty convinced its an IE problem only but this is a good way to get that confirmed. Your problems seem to be mainly two: a) You have an extra margin on your IE 6 version do tell? that I haven't noticed here. Check against any standards browsers as this may also be something with IE 7 comparison that may not be as intended. b) IE 6 ignores the mouse-over once you move out of the link (as if the LI didn't count at all). I've had this problem before, but I can't recall how did I sort it out, I'll let you know if I recall how. Indeed and its doing my head in. Thanks for the help Wesley Lamont __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu functionality and IE6 bug
setting the a to display: block; should clear that up. Thanks for the suggestion Brian. The 'a' links are already all set to block as it is a standard procedure for drop down menus or getting hover to function on the entire block. But that being said it does give the effect of that problem so I think that has opened up another avenue of investigation. It would have been too logical to think IE would fail on the 'a' links not being blocks but we are dealing with IE here :) Well I'm off to block up the menu some more and see if that gets anywhere. Wesley Lamont __ 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] Z-index solutions but still more Menu problems
Z-index solution (well to some degree) After having IE(win) flatly refuse to follow the declared Z-index values I went in search of the root of the problem. Position:relative seem to be the culprit however removing this value damaged the layout and thus was no solution. After some research it seems there is a known issue with IE (surprise surprise). What IE attempts to do is calculate Z-index for each positioned element and apply that index to all siblings regardless of stated Z-indexes on the siblings. So one relatively positioned block with z-index:100 will overlap another relatively positioned block with z-index:200 if this element is wrapped in a relatively positioned element without declared z-index. Without a declared Z-index on the wrapper the absolutely positioned sibling gains a z-index of 1 since the parent would have this. The solution is to follow a given siblings ancestry back to where the two blocks interact and provide stated Z-indexes that will then translate correctly though the hierarchy. Z-index continuing problem After I went through my code and applied the Z-index to all parent blocks I had the layout (the drop down menu was the issue here) rendering correctly in IE after all. (much rejoicing) http://www.newearthpermaculture.com.au/bm/BusMentorMenu27blank.htm This was all well and good until I tried to use the visible menu and noticed it would stop being functional when the cursor went over the area in the content that it once appeared under due to the Z-index problem. So despite appearing solved the functionality isn't. I'll be having a go at solving this tomorrow but any ideas are welcome. Other Menu problems: The website now requires two drop down menu's rendered differently. The javascript on this site for menu functionality in IE (SF) seems to only want to provide functionality for one menu. If I duplicate the code and direct one at 'menu' and one and 'contentmenu' only the last one gains the hover effects as would be expected. I can't seem to get both menu's to function in IE together. IE as well as Mozilla 1.7.1(mac) renders the contentmenu dropdowns horizontally as well. Any help is greatly appreciated as usual. Regards Wesley Lamont __ 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] Still stuck, need any help.
Heya all again, I managed to get three fluid blocks to align horizontally with even gaps by wrapping an external div around each to remove the effects of the added borders on the blocks sizes which was causing the problems previously. The second group I still can't achieve the same. This is with a central block of a fixed width (9.5em inc borders). The two blocks on either side I'm trying to center in their respective halves. With a 50% width and a negative inner margin of 4.75 I can get a containing block to appear where I want (green) and center the middle fixed width one. The actual content for that container doesn't then contain the remaining area (50% width minus the 4.75em) but takes up the entire width again thus not being centered. No use of margins or left displacements seemed to give the desired outcome. The test site is available here: http://www.newearthpermaculture.com.au/bm/BusMentorMenu23.htm I'm sure there is a way to achieve this outcome but with a variety of layout trials I still cant' crack it. Any help or directions to other sources of ideas I would greatly appreciate. Regards Wesley Lamont __ 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] tiling png ie6
As far as I'm aware there are no limitation to tiling (repeating) a png image in any browser. What you are most likely finding is if you want a Transluscent png you can't tile them in IE(win) less than 7.0. The reason behind this is that IE(win) can't render the transparency in a Png file at all. The only work around is to use an IE filter which has the limitation of inability to be tiled. This may be what you are reading on various websites. Wesley Lamont __ 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] Centering and Aligning 3 blocks in fluid environment
Heya All again, I'm stumpted on something that I feel is very simple but can't crack it myself. I'm trying to align 3 blocks horizontally in a fluid environment and center the group of three in the main content. I've tried margin methods, floating methods, other positioning methods but nothing seems to get the desired result. There are two sets on the site. The top one has three fluid blocks requiring centering and dividing evenly while scaled. The second set down the bottom requires the same outcome but has a fixed em width block in the middle just to make life harder. The site can be found here: http://www.newearthpermaculture.com.au/bm/BusMentorMenu22b.htm Thanks for any advice. Wesley Lamont __ 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] Drop-Down functionality
I have worked on a three-tier drop down menu system designed with
pure css for functionality and javascript to achieve functionality in
IE.
The website can be found here:
http://www.newearthpermaculture.com.au/bm/BusMentorMenu18.htm
So far the CSS side appears to function flawlessly (aside from other
layout issues). The problem are now with the javascript code and IE.
On a purely validation issue the javascript code grabs 'li' through
child nodes on a 'id' and assigns them a class which has mouseover,
mouseout commands attached. This code however only gathers the direct
children and not nested children below this. This amounts to having
to use a second run through the javascript and multiple id's which of
course fails validation. Does anyone who knows javascript better than
myself tell me what needs changing in this code to get all children
gaining the class not just the direct child nodes. Here is the code:
if (document.alldocument.getElementById) {navRoot =
document.getElementById(menu);
for (i=0; inavRoot.childNodes.length; i++) {node = navRoot.childNodes[i];
if (node.nodeName==LI) {node.onmouseover=function()
{this.className+= over;} node.onmouseout=function()
{this.className=this.className.replace( over );
Any better recommendations on achieving the outcome of drop down
functionality in IE feel free to let me know.
I'm having issues now I have gone to three tiered version of this
menu which I'm hoping an alteration of the above code will assist so
one problem at a time.
An older menu system with 2 tiers is here:
http://www.newearthpermaculture.com.au/bm/BusMentorMenu15.htm which
functions better in IE on Mac and PC
Any help is greatly appreciated.
Wesley Lamont
__
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/
[css-d] Layout Almost Complete - advice and testing
Heya All again, Just a couple of bugs still in this layout of anyone can help with . The site is here: http://www.newearthpermaculture.com.au/CEDD/ceddtest10.htm The layout is fluid entirely em based with min/max size limitations aiming for support in IE5 and up. IE 5 (mac) has a couple of bugs here: The Right block expands the container by its width again. This is a known IE5mac bug althought the solutions are already implemented to no effect (display:inline and using negative margins). Any other ideas? IE5(os9) the right block image isn't limited to the block dimensions or the image set dimensions in teh CSS code and thus jumps to the height of the entire browser window. Netscape 7 (os9) completely deletes the two blocks on either side of the title Safari 2 (osX) the title image seems to have a max width when enlarged in which case the image suddenly springs back to a small size when the window is very large (2000px + width or max font size) I have only been able to test on IE6 on windows so could anyone give it a run through IEwin 5.0, 5.5 and 7 on a windows etc and let me know if the min/max are working as they should and the font scaling is working correctly. Compare to any compliant browser if you need to know how it is intended to look. Thanks for any help Wesley Lamont __ 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/
[css-d] Web Coding Advice Needed
After trying to develop a fluid CSS only layout entirely em based
with min and max-width's I'm unsurprisingly stumped. I'm trying to
get a Layout functioning from IE5 and up on all browsers/platforms.
If anyone could give me any advice on these problems I would be very
much appreciated. This has taken me a couple of weeks of work, bug
hunting, redeveloping and now I really need some expert advice to
move forward.
The website is available here:
http://www.newearthpermaculture.com.au/bm/BusMentorMenu14.htm
The css document here:
http://www.newearthpermaculture.com.au/bm/BusMentorMenu14.htm
The aim is very simple and yet seems unatainable in one browser or
another each time I try something new. Majorly suffering CCS (Crasy
Coder Syndrome).
Javascript code: (entire problem with validation at the moment)
I have doubled up on the javascript code due to the present code not
looping through the entire Menu and applying mouse-over classes to
all 'li'. This has forced me to add another javascript loop and add
multiple uses id's which I want to avoid.
Can anyone tell me how to force the loop to edit all 'li' not just
the direct child decendants. Here is the line of code that needs
editing:
for (i=0; inavRoot.childNodes.length; i++) {node = navRoot.childNodes[i];
The other issue with this code is the validation. The use of the
un-escaped stops validation. W3 recommends placing the script
inside !CDATA[]] but this seems to stop IE5mac (and possibly
others) from utilising the script.
I can stick the code in a conditional comment but that seemed to stop
IE5mac as well.(though now in hind sight I'm not sure why)
Button Centering:
The button for the login form isn't centered in IE5mac (a known bug).
The solution is to wrap the text in a span which does indeed centre
the text and then removes all functionality of the button. Anyone
know of any other solution for this IE5mac bug?
Text-input area:
Since all elements in this layout at 'em' based the input elements
struggle from each browser seemingly choosing a different font size
for the input and thus varying the input area width and height. I
can't find anyway to force a browsers input text dimensions etc.
Image tinted:
I've seen this in many of my layouts previously and I'm wondering if
anyone can shed some light on it. In the Gecko rendering engine I get
the left most image from the menu bar being tinted lighter and no
other images get this effect. Cant' for the life of me know why this
happens or solutions. The image is a png with transparency though its
the same as the right end of the menu bar which doesn't have this
issue.
Menu layout:
The aim so far is to get the menu to appear ontop of the bar which is
proving more difficult that I expected. At the moment the layout only
works in Safari, and Firefox on the mac. The menu appears under the
bar and is pulled up through top:-2.5em at the moment. I've tried
margin-top:-2.5em as well but nothing seems to work everywhere. I had
a different system initially which was working in all but IE(win) but
though all the testing I've regressed :(
Win Testing:
I work solely on the Mac so I run each layout through the 10
different browsers I have on hand. I have access to one IE6(win box
and nothing else. So far IE Win is still well off being useable but
if anyone has any recommendations for the code to make it IE friendly
let me know.
Thanks for any help anyone can provide
Wesley Lamont
__
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/
[css-d] Web Coding Advice needed update
Heya all again, Still waiting on my other post to get through as I'm new to the list and awaiting moderation. Had an update to the website to fix a couple of the IE display bugs. The website is available here: http://www.newearthpermaculture.com.au/bm/BusMentorMenu14.htm I thought I had the layout solved but I just found an IE render problem. The layout is a fluid container, size limited with min/max attributes, all based in Em's to handle large and small screen devices. There is a fall back limit of 800px width for IE5mac and for IE(win) when javascript is not allowing the :expersions to function. On windows this layout works as expected but upon altering the font sizes in the browser the various elements do not scale with the font size. The layout itself does which makes me believe the problem comes from the font-size declarations in pixel sizes. Using the experessions to control the size of the block I can't add a fontsize to the Layout block or to the body element as the expressions read that as a fixed literal value. Anyone know of another way to get IE to adjust Blocks based on EM sizes based on the font the user decides on. Thanks for any help in advace. Wesley Lamont __ 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] Firefox IE Scaling Issue Goes Deeper than Fonts
You are probably finding there are default margins around elements in
your document you aren't aware of.
body often gains margins as do other block level elements.
Two tests you can do:
Kill all margins, paddings and borders
* {margin:0; padding:0; border:0;}
OR add a tiny border to everything and see where your problem lies.
You will probably find Container is set away from the left egde due
to the margin on the body tag
* {border: 1px solid red;}
See if that gets it solved.
Ohh on the other note (though I think you already know it) the screen
800 px wide has 20 pixels used for the vertical scroll bar so 780 is
the size you will be aiming for.
WEZ!
If you set your screen resolution to 800x600 and
run a test on the CSS and code below, you'll
quickly discover Firefox and IE have scaling issues
aside from font size.
The image GIF (245x216) looks remarkably larger in IE6
than it does in Firefox 2.0.0.6.
Can anyone explain this, or does anyone have a fix for
this?
I accidentally stumbled upon this issue while trying to
record the screen. Even with the width set to 770px IE
produces a horizontal scroll bar. What gives?
Here's the CSS and the code, below:
CSS
#container {
width: 770px;
border: 3px solid red;
margin: 0 auto;
}
HTML
div id=container
img src=woman.gif /
/div
~~~
~~~
__
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/
__
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/
