[css-d] Navigation all wonky in IE6
Hi guys, http://svitavice.blakehaswell.com/ The background is acting all weird on hover in IE6. The top level background is getting a background image for the 'daddy' class, while LIs with the daddy class are losing their background image on hover. I wrote this over a year ago and the project was shelved for a long time - tbh I'm having trouble figuring out my own code. Thanks, Blake __ 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] need help on nested list styling
Hi Patrick On 14/12/2007, Patrick Aljord [EMAIL PROTECTED] wrote: fixed it myself :) It still doesn't work on XP in either Firefox or IE7. In Firefox we see the drop down but cannot actually get to any of them. As soon as you mouse down the hover disappears and in IE the hover sits to the right of the tab and again as soon as you mouse down the hover disappears. Hope that helps. -- Kind regards Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ 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] Ideal way to link-ify a div?
In the time since last posting I have tried out the implementation strategy
as mentioned by Jukka and Georg/Gunlaug (with working example on
http://www.gunlaug.no/tos/moa_29.html )
Now even with the working example by Georg, I still had a lot of
implementation issues. One of the last things that teased me was that in my
code, IE6 sort of collapsed the height of the link element on hover. Very
weird. Also, IE seemed dependent of adding either
background-image/background-color, or border to force rendering the 100%
height. I got it working by adding a 1px transparent gif as background image
for the hover link. Could not use border as the containing div had rounded
corners (and IE 6 misinterprets border-color: transparent).
The main issue for me was that my code behaved totally inpredictable. I had
a working example (with too many css rules). I decided to remove some of the
redundant rules (to see how much I could remove with the example still
working). But oddly enough, when i pressed undo, I could not get the
examples to work that previously worked for me. I know it sounds like a
user error. What did I oversee... But I even did this in pair with my
colleague to minimize the risk of user errors.
So eventually, I decided upon the javascript solution (see first mail in
thread), that is more robust:
(i know, kind of off topic as Jukka mentioned it, but as a future reference
for others I decided to add it here)
script src=jquery-1.2.1.js type=text/javascript/script
script type=text/javascript
$(document).ready( function(){
//alert('JQuery has detected DOM is ready for manipulation');
$('.box').addClass(clickable);
$('.box').click( gotolink );
});
// gotolink() finds the first pa link element in the div
// Takes the link href and redirects to that URL when called
var gotolink = function(){
location.href = $(this).children('p').children('a')[0].href;
};
The actual two lines that do the work can be chained and reduced to:
$('.box').addClass(clickable).click( gotolink );
Thanks to everybody for chipping in. Even though I would have prefered a
css-only solution, I'm happy with this simple implementation.
/Jesper
blog: www.justaddwater.dk
__
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] Navigation all wonky in IE6
Blake wrote:
Hi guys,
http://svitavice.blakehaswell.com/
The background is acting all weird on hover in IE6. The top level
background is getting a background image for the 'daddy' class, while
LIs with the daddy class are losing their background image on hover.
I wrote this over a year ago and the project was shelved for a long
time - tbh I'm having trouble figuring out my own code.
Thanks,
Blake
This is similar to the multiple class selector bug [1] where IE6 only see the
last class. With this selector.
#nav li.daddy.sfhover
IE6 sees only
#nav li.sfhover
which selects all li elements. One tested fix is to use the daddy class on
the anchor elements themselves.
lia class=daddy href=...Místní turistika/a
and with this CSS
#nav li a.daddy {
background: url(daddy.gif) right center no-repeat #E6E6E6;
}
#nav li a.daddy:hover {
background: url(daddy.gif) right center no-repeat #D0EFFF;
}
Tested in IE6, IE7, Gecko, Opera and Safari 3 on windows.
[1] http://therealcrisp.xs4all.nl/meuk/iecssbug.html
Alan
http://css-class.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] Nav not positioned right in IE
Dear CSSers:
I am about to pull out the gun and shoot myself over this mess. Any
and all help GREATLY appreciated. A note: The invalidation errors
should not cause this problem (it's a CMS, I cannot fix them).
Please see:
http://new.jocohealth.net/
CSS:
http://new.jocohealth.net/upload/health/s/gl.css
http://new.jocohealth.net/upload/health/s/gs.css
In Firefox I am able to get the navigation to center on the page using:
#linklist {
position:absolute;
top:115px;
width:100%;
}
#optnav {
position:relative;
width:675px;
margin:auto;
}
For IE 6, I was able to write a conditional to move it back into the
box and stop breaking the layout using:
!--[if lte IE 6]
style
#linklist {
margin-left:-425px;
}
/style
![endif]--
But I CANNOT get it to work across the board (and I'd rather not use
the conditionals). The navigation just won't stop pushing the body
outside of 100%. It shouldn't be this hard. I need my global
navigation (JoCoBusiness ... JoCoTeenScene) inside the box as well as
the search to the right side of the box and the navigation right below
the logo. Does anyone have any time to tell me what the heck I am
missing??
--
In peace,
Amy M. Drayer
Web Interface Designer
[EMAIL PROTECTED]
http://www.puzumaki.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] Nav not positioned right in IE
Amy Drayer wrote: I am about to pull out the gun and shoot myself over this mess. Any and all help GREATLY appreciated. A note: The invalidation errors should not cause this problem (it's a CMS, I cannot fix them). http://new.jocohealth.net/ Well, you seem to have some clear options :-) Either it's that gun, or you can pull the page together in one - common - width-restricted and centered container, before adjusting the problematic pieces into place. I think you have a suitable container in there, but it _is_ a mess so I added one - #wrapper - in this example... http://www.gunlaug.no/tos/alien/ad-2/test_07_1214.html ...just to show you how it _might_ work for a start, without any hacks. If you can't alter the source-code enough to get a common container, then I'm afraid you have to battle A:P default-differences between IE/win and the other browsers for quite a while, as you are literally positioning in thin air at the moment. At least make sure that _all_ browsers do get a horizontal position on those A:P elements - left: ??? or right:???, as you'll only hit horizontally by chance otherwise. 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/
Re: [css-d] Nav not positioned right in IE
It looks like some of the elements that are using absolute positioning are being positioned relative to the viewport and not the parent div as you desire. If the parent div is static the absolute positioned div will seek the next higher parent that is not static. In this case, the body. Dear Jim: Fantastic!! I didn't even realize I forgot that piece. Muchos muchos gracias! :D -- In peace, Amy M. Drayer Web Interface Designer [EMAIL PROTECTED] http://www.puzumaki.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] Gap after positioned element in IE7 (zoomed)
David Hucklesby wrote: Working on a fixed width page with an image inside the header DIV, I found an unwanted gap below it when IE7 was zoomed. [...] http://webwiz.robinshosting.com/temp/ie7-gap/ Bruno Fassino replied: This seems the problem that I tried to describe here [1]. The only fix that I known is to apply position: relative to the body. BTW, if zoom is not 100% and you resize horizontally the window also another different problem shows up. This one too seems fixed by 'relative' on 'body'. King regards, Bruno [1] http://www.brunildo.org/test/ie7_relzoom2.html Brilliant. That fixes it. Thank you so much, Bruno. Cordially, David -- __ 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] CSS Drop Shaow for Div techiques
On Thu, 13 Dec 2007 20:03:34 -0500, Karen Davis wrote: I'm wanting to add a drop shadow around a contentWrapper div and would like to know which technique is superior. Well, it depends on your underlying design as to which of many methods will work well for you. Can you provide a bit more information, such as -- is this a fixed width design or fluid? what is the current structure of the page? ... If you have a sample mock-up of the unadorned page you could post online, I'm sure we can help you. As it is, we can only guess. Cordially, David -- __ 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 Review
This is a site we designed that just went live this week for a Herman Miller furniture dealership in Pasadena. The style sheets still contain some invisible debris, but the design should be tight across most browsers (down to IE 6). All comments and criticism are welcome (particularly if you see a browser issue!). www.m3office.com Thanks so much. Scott Everett The Ethos Factory www.ethosfactory.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] Nav not positioned right in IE
Amy, It looks like some of the elements that are using absolute positioning are being positioned relative to the viewport and not the parent div as you desire. If the parent div is static the absolute positioned div will seek the next higher parent that is not static. In this case, the body. Be sure the containing divs are position: relative; or anything other than static. It would be best to avoid absolute positioning if possible and have you menu be part of the flow of the document. If you find it necessary to use conditional comments to fix IE problems they should be placed in the html as the last lines just before the /head tag. Also, an element that you want to center within the parent is usually written margin: 0 auto; This says there is no top or bottom margin. The results of using margin: auto; could cause variable results. Jim On Dec 14, 2007 6:12 AM, Amy Drayer [EMAIL PROTECTED] wrote: Dear CSSers: I am about to pull out the gun and shoot myself over this mess. Any and all help GREATLY appreciated. A note: The invalidation errors should not cause this problem (it's a CMS, I cannot fix them). Please see: http://new.jocohealth.net/ CSS: http://new.jocohealth.net/upload/health/s/gl.css http://new.jocohealth.net/upload/health/s/gs.css __ 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] Site Review :: herman miller ::
Scott Everett wrote: This is a site we designed that just went live this week for a Herman Miller furniture dealership in Pasadena. The style sheets still contain some invisible debris, but the design should be tight across most browsers (down to IE 6). All comments and criticism are welcome (particularly if you see a browser issue!). www.m3office.com Thanks so much. Scott Everett Generally, I think it is doing ok cross-browser, but structurally a little brittle vertically with font-scaling in compliant browsers; and, in the IEs (if the font-sizes are ignored). I dropped the right column float on one page at text-size largest in IE6. The submit a service request' text looks a little tight to the right page edge. The underline text links are easy to spot but seem unfinished compared with the rest of the site. The top nav is functional in IE 6, but not rendering the same as other browsers (if that is of any concern). There is a javascript error on the page and you may want to validate. Best, ~dL -- 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] generate markup and css control issues
Dear List, I am working with Drupal for the first time and am styling a view that has generated a ul list... So far all the possible ways of calling the items I am trying to style with css have failed... the mark up is a mess - see below. My specific concerns are with the classes, can you have a space in the class name and wrap it in ' not or will this prevent being able to apply css at all? div class='view view-view-products' div class='view-content view-content-view-products' div class=item-list ul li div class='view-item view-item-view-products' div class='view-field view-data-uc-products-model'3lb Loaf Pan/div div class='view-field view-data-image-attach-iid' Thanks, 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/
Re: [css-d] Site Review :: herman miller ::
Hello, Loading this on Mac os 10.4 w/FireFox gives me: AJAX Search API Load Failure: Ivalid version argument: http://www.google.com/uds/api?file=uds.jsv= Line 68 In firefox. I refreshed a few times... Only seems to happen on the homepage. Also, this is asking to get owned: form action=http://www.m3office.com/cgi-bin/FormMail.pl; method=post name=M3_Service id=M3_Service input type=hidden name=env_report value=REMOTE_ADDR,HTTP_USER_AGENT / input type=hidden name=return_link_url value=http://www.m3office.com/service/thankyou.php; / input type=hidden name=recipient value=[EMAIL PROTECTED], [EMAIL PROTECTED] / input type=hidden name=print_config value=email,subject / input type=hidden name=redirect value=http://www.m3office.com/service/thankyou.php; / input type=hidden name=title value=M3 Office Service Request Form / input type=hidden name=required value=email,phone,nature_of_request / input type=hidden name=missing_fields_redirect value=http://www.m3office.com/service/error.php; / Please. This is awful. - Ben David Laakso wrote: Scott Everett wrote: This is a site we designed that just went live this week for a Herman Miller furniture dealership in Pasadena. The style sheets still contain some invisible debris, but the design should be tight across most browsers (down to IE 6). All comments and criticism are welcome (particularly if you see a browser issue!). www.m3office.com Thanks so much. Scott Everett Generally, I think it is doing ok cross-browser, but structurally a little brittle vertically with font-scaling in compliant browsers; and, in the IEs (if the font-sizes are ignored). I dropped the right column float on one page at text-size largest in IE6. The submit a service request' text looks a little tight to the right page edge. The underline text links are easy to spot but seem unfinished compared with the rest of the site. The top nav is functional in IE 6, but not rendering the same as other browsers (if that is of any concern). There is a javascript error on the page and you may want to validate. Best, ~dL __ 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] box floats too far right in IE6
Well, I added display:inline but no go. It's still far right in IE6.
I figure I could increase the margin-bottom with the div that is being
cleared like so;
#top {
margin: 0 0 50px 0;
padding: 0;
float: left;
}
but I was curious as to why increasing margin-top to the #contentwrapper
wouldn't work?
On 12/14/07, Thierry Koblentz [EMAIL PROTECTED] wrote:
I have my small section box (image of the 2 girls) float too to the far
right in IE6, but it's ok IE7 and Firefox. Does anyone know what i'm doing
wrong here? Is it some sort of hack that I should know of for IE6?
This is the code for the sectionbox. My CSS is inline for those wondering.
#sectionbox {
background: transparent url(sectionbox.png) no-repeat scroll;
width: 345px;
height: 200px;
float: left;
position: relative;
margin: 0 0 0 150px;
}
add display:inline to the above
This is because IE doubles margin values when the margin matches the float
direction (margin-left/left, margin-right/right)
An as aside, I have my contentwrapper div that wraps the content box and
the
section box look like this;
#contentwrapper {
clear: both;
width: auto;
margin: 50px 0 0 0px;
overflow: auto;
}
Apply margin-bottom to the floats that that element clears
--
Regards,
Thierry | http://www.TJKDesign.com
--
The Crossroads Club
http://www.crossroadsclub.net
The Entrepreneurs Network
__
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] IE6 Vanishing Link on Position - (Sorry, I didn't include a subject in my last post everyone. ; ( )
Hey everyone! I recently had an issue that was pretty strange. I just want to know if anyone has ever heard of it or can point me to some sort of reference on any similar issues because I've yet to find anything. I have a fieldset with a div inside it. The div is relative positioned. I have a link inside the div that I want to absolute position to the top right of the div. However, when I add position relative to the link, it vanishes in IE6. There are NO other styles on the containing div and or link except for the position attributes. No matter what I set right, left, top, or bottom too..the link is nowhere to be found. I even made the link px x px with a red background to see if it was just around or off the page somewhere. I've played with z-index until I'm blue in the face. The link just vanishes..=/ Anyone ever heard of this or know where I might be able to find a solution to correct it? P.S. i've hacked it up to meet my needs, but it's not as efficient as simply positioning the link, so I don't need workarounds, I would really like to know what caused this. __ 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] Site Review
Like the design, Scott... elegant, clean, interface easy to understand, good functionality. Good work! Rick -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Scott Everett Sent: Friday, December 14, 2007 11:49 AM To: css-d@lists.css-discuss.org Subject: [css-d] Site Review This is a site we designed that just went live this week for a Herman Miller furniture dealership in Pasadena. The style sheets still contain some invisible debris, but the design should be tight across most browsers (down to IE 6). All comments and criticism are welcome (particularly if you see a browser issue!). www.m3office.com Thanks so much. Scott Everett The Ethos Factory www.ethosfactory.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] IE6 Vanishing Link on Position
Joshua Kappers wrote: ... I have a fieldset with a div inside it. The div is relative positioned. I have a link inside the div that I want to absolute position to the top right of the div. However, when I add position relative to the link, it vanishes in IE6. There are NO other styles on the containing div and or link except for the position attributes. ... You should not use position:relative without setting haslayout to true in IE6. http://www.satzansatz.de/cssd/onhavinglayout.html Ingo -- http://www.satzansatz.de/css.html __ 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] creating my nav in CSS
juliann wheeler wrote: I created my first nav bar in CSS. The only problem is that I had to create three different style sheets to get around all the bugs with different browsers/platforms. Here is the latest version: http://www.pcg-advisors.com/new/home5.html Is there any way to simplify this and not have to create three separate style sheets? I must be missing something really important or you are working on the page right now. I only see 1 style sheet not 3 as of this writing . And the drop-downs are not dropping in IE 6. In addition to using absolute position to structure the layout (that may, in and of itself, be problematic), the division #wrapper is collapsed and not enclosing its content. The primary content (center column) is escaping at the bottom with font-scaling. Best, ~dL -- 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/
