[css-d] IE class + id ordering
Hi,
weird issue that I haven't seen before and I'm wondering if anyone knows a
quick workaround.
Basically, I have two navigation bits:
div id=subnav
ul
lia href=# class=subnavoption on id=subnavoverviewspanItem
1/span/a/li
lia href=# class=subnavoption id=subnavdrillsspanItem
2/span/a/li
/ul
/div
and
div id=subcontenttabs
ul
lia href=# class=taboption id=tabstatsspanSub 1/span/a/li
lia href=# class=tabcurrent id=tabtalkspanSub 2/span/a/li
/ul
The main nav works fine. I assign it a background image for its regular state,
and a different one for when the on class is also assigned (current page,
basically).
With the subnav I'm doing it a little differently, instead of appending a on
class, I just either set it to tabcurrent or taboption (off) and feed it a
different BG image based on that. In Firefox it works exactly like it should.
In IE 6, it does not.
#subcontenttabs ul li a#tabstats.taboption{ background:
url(../img/Baseball/tabs/stats_off.gif); }
#subcontenttabs ul li a#tabstats.tabcurrent {background:
url(../img/Baseball/tabs/stats_on.gif); }
#subcontenttabs ul li a#tabtalk.taboption {background:
url(../img/Baseball/tabs/kidtalk_off.gif); }
#subcontenttabs ul li a#tabtalk.tabcurrent { background:
url(../img/Baseball/tabs/kidtalk_on.gif); }
Basically, what IE does is it ignores the tabcurrent declaration. It seems to
be based on what order I declare them in my css file. If I switch the two
options to be like this:
#subcontenttabs ul li a#tabstats.tabcurrent {background:
url(../img/Baseball/tabs/stats_on.gif); }
#subcontenttabs ul li a#tabstats.taboption{ background:
url(../img/Baseball/tabs/stats_off.gif); }
then I get the tabcurrent, but I don't get taboption. ?
To make things more confusing, If I take that declaration outside of the css
file and I put it after the @import in the head of that HTML document, then it
works.
What is going on?
Sorry for the length, but this is really stumping me. Am I doing something
wrong or is IE totally wonky on this? I've seen a lot of IE bugs before, but
never this one.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] IE class + id ordering
Mike Nowak wrote:
#subcontenttabs ul li a#tabstats.taboption{ background:
url(../img/Baseball/tabs/stats_off.gif); }
#subcontenttabs ul li a#tabstats.tabcurrent {background:
url(../img/Baseball/tabs/stats_on.gif); }
Basically, what IE does is it ignores the tabcurrent declaration.
It seems to be based on what order I declare them in my css file.
http://css-discuss.incutio.com/?page=InternetExplorerWinBugs
It's named the multiple #id.class bug in IE
To make things more confusing, If I take that declaration outside of
the css file and I put it after the @import in the head of that HTML
document, then it works.
That sounds interesting. Can you compile a small testcase for that?
Could be useful for a workaround.
Ingo
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Using ems to size nested lists - Firefox seems to ignore
Rose Thorn wrote: Thanks for your info Francky. It helped me to discover that I had erred in another place within my css code. Glad you managed to find what was wrong! I guess I should have run it through the w3c validator BEFORE posting my problem! My apologies to all who's time I may have wasted. No problem! Searching to solve an issue is learning for all. :-) A typo is easy made, and one time forgotten to check the validator after another copy/paste can hide an incomplete copy with 1 missed letter, and cause unexpected effects. Css is fairly critical! ;-) And bug hunting is a lovely sport! :-) Greetings, francky (Suggestion for a next time, to speed up the right answer: send us a link to a test page with the code you used. The more specific the question, the more specific the answer can be!) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Differences between IE/FF with fieldset padding/margins
Micky Hulse wrote: Micky Hulse wrote: Search for Legend: http://archivist.incutio.com/viewlist/css-discuss/?search=legend Search for Fieldset: http://archivist.incutio.com/viewlist/css-discuss/?search=Fieldset This thread in particular might be helpful (one of my favorite CSS-d list emails): Legend of the Fieldset http://archivist.incutio.com/viewlist/css-discuss/71082 Yes! :-) - It triggered my inspiration to try a variant: another young html monkey http://home.tiscali.nl/developerscorner/css-discuss/test-monkey-new.htm. Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] liquify current layout
James Fishwick wrote: Ideally I'd like to mirror the general layout of this layout: http://blog.html.it/layoutgala/LayoutGala23.html James, I am not sure I really understand what you are after. Is this even remotely close?: http://www.chelseacreekstudio.com/cssd/layout01.html Regards, ~dL -- http://chelseacreekstudio.com/ca/ccs/pow/pow.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Print stylesheet/alt text
Design Groups wrote:
I've seen a lot of requests (in my searches for this answer) for people
who want to display background images with CSS. It seems I want
something different, and I can't seem to find the answer to this. I'm
hoping you all can help :)
What I want to do is display the alt text for my images, instead of the
images themselves, in the printed page. I don't want any images to
print out at all - just the text. However, if I put img
{display:none;} in my print stylesheet, the images disappear - but so
does the alt text.
Is there a way to tell the print stylesheet img {display:none - but
show the alt text;}? Or will I just need to find a script or something
that'll do this for me? (I'd much rather just use CSS if I can!)
Thanks :)
~Shelly
Hi Shelly,
If you are willing to copy the alt-text and paste it in a span in the
html, just after the /img, you don't need a script.
This span can be hidden at screen, and the image can be hidden on print.
Screen and paper happy. ;-)
See testpage printed texts instead of images
http://home.tiscali.nl/developerscorner/css-discuss/test-no-print-images.htm.
Greetings,
francky
PS
I don't understand why Opera is showing the body-background (color and
img) while turned off in css at print (in FF and IE no problems here).
Maybe an Opera-specialist in the list can tell?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Print stylesheet/alt text
francky wrote: http://home.tiscali.nl/developerscorner/css-discuss/test-no-print-images.htm. PS I don't understand why Opera is showing the body-background (color and img) while turned off in css at print (in FF and IE no problems here). Maybe an Opera-specialist in the list can tell? It's an Opera8 bug without a good workaround. http://archivist.incutio.com/viewlist/css-discuss/64553 Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Print stylesheet/alt text
francky wrote: I don't understand why Opera is showing the body-background (color and img) while turned off in css at print (in FF and IE no problems here). Maybe an Opera-specialist in the list can tell? Depending on Opera version..? Older versions did print screen-style background, unless a deliberate overriding print-background were added to another element - covering body. Ingo linked to another optional fix. Opera 9 should work flawless in this respect, but I haven't checked since all my work has a fix for the old bug implemented in the print-styles. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Fluid 3 column layout with images
Christine Reed wrote: Very many thanks David - your suggestion did the trick beautifully. I will remember that! However, I don't understand what you mean when you wrote: Part of the problem, Claire, is the software can't find the doctype, because dl/dl is preceding it. Delete those. RE: http://www.clairerich.co.uk/introductionwhite.html Attempt to validate the page. The validation service(software) is unable to find the doctype because it is blocked by the dl thing. Browsers(software) have the same problem, I guess. I wonder if I could trouble you once again re the same page: http://www.clairerich.co.uk/introductionwhite.html The image stays put but I still have a problem with the border between column2 and column3 - that looks good at 1024 res, but as for the image, when you resize th viewport down (res 800 or favourites open), that border shifts right and goes over the text in the 3rd column. I am not good at fixing stuff. So most of the time I start with a clean sheet. This page uses your content in a /different/ layout: http://www.chelseacreekstudio.com/claire1.html There are some considerations: the header image may need to be trimmed so that you don't get the little h-scroll bar @ 800 in ie; the header will never be less wide than the width of the image; the content layout will only fold to the width of the the image in the center column; and, the image in the right col could be a little less wide. It will not work ala carte. It is not generally a good idea to set fonts in pixels. Users have to put ie in accessibility mode to scale them. Justified text works fine in print media(sometimes), but on the screen it causes rivers. Users, some of whom may be older(or a lot younger) than you, always appreciate designers who honor default for setting the primary content p. Christine Others on the list may have a better method of resolving some, if not all, of these issues. Regards, ~d -- http://chelseacreekstudio.com/ca/ccs/pow/pow.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Print stylesheet/alt text
Thanks Andrew :)
I need something more cross-browser compatible though :(
I did do something that's a bit ugly but it works great - thought I
would share in case anyone else needed the idea for future reference (or
can improve upon it!)
Basically, I created a print class in my stylesheet - in the global
stylesheet (for screen media) it's set as .print {display:none;} and
in the print stylesheet, it's set as .print { display:inline;} Above
the images (where I wanted ALT text to appear for print) I created a
small area with the alt text in it - something like so:
div id=header
img src=headerimg.jpg width=100 height=100 alt=header image alt
text here /
p class=printheader image alt text here/p
/div
So that way, when you're viewing the site through a browser, you see the
image, but the text is not displayed - but when you print, the text is
displayed and not the image.
Like I said, not the *prettiest* way around the issue, but it works.
Good thing I'm doing this on a site I'm currently working on - and not
one I've already completed or all this extra coding would be a royal PITA!
Thanks anyway, though :) I'll file your tidbit away for future reference :)
~Shelly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] css shiftiness
Hello, Maybe I took the short bus in today. I'm attempting to layout 3 divs(in #blurbTop, #blurbMdl, and #blurbBtm) inside a container div(#blurb) to allow for different amounts of content, and things aren't lining up as I would expect. The page does validate. In ff1.5/win for some reason, #blurbMdl seems to shift 3px to the left, and #blurbBtm an additional 4px. I could shift the background-position to line things up, but I don't think that should be necessary. The test page is located here: http://url123.com/z7pxr If anyone has any insight I'd be grateful. Thanks in advance, Colin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Differences between IE/FF with fieldset padding/margins
On Jul 1, 2006, at 8:52 PM, francky wrote:
Micky Hulse wrote:
Micky Hulse wrote:
Search for Legend:
http://archivist.incutio.com/viewlist/css-discuss/?search=legend
Search for Fieldset:
http://archivist.incutio.com/viewlist/css-discuss/?search=Fieldset
This thread in particular might be helpful (one of my favorite CSS-d
list emails):
Legend of the Fieldset
http://archivist.incutio.com/viewlist/css-discuss/71082
Yes! :-) - It triggered my inspiration to try a variant: another
young html monkey
http://home.tiscali.nl/developerscorner/css-discuss/test-monkey-
new.htm.
This doesn't work as you intended in Firefox 1.5 and up (and Camino,
SeaMonkey1.0x,...). The div covers up the legend.
Here are the rules that govern the display of the legend in Gecko
1.8+ (found in res/forms.css):
legend {
padding-left: 2px;
padding-right: 2px;
border: none;
position: static ! important;
float: none ! important;
}
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] css shiftiness
Colin wrote: In ff1.5/win for some reason, #blurbMdl seems to shift 3px to the left, and #blurbBtm an additional 4px. I could shift the background-position to line things up, but I don't think that should be necessary. http://url123.com/z7pxr Check those background-images in your favorite program. They are actually created with such a 3px/4px offset, and line up the same in all browsers. You should adjust the background-images - not the div positions or background positions. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] [solved] css shiftiness
Thanks Georg, I thought I was nuts for a while. I was able to line things up in photoshop, and everything looked normal. I presume the png compression utility I used mucked things up, but it could very well be me. Very much appreciated...cheers! Colin Colin wrote: In ff1.5/win for some reason, #blurbMdl seems to shift 3px to the left, and #blurbBtm an additional 4px. I could shift the background-position to line things up, but I don't think that should be necessary. http://url123.com/z7pxr Check those background-images in your favorite program. They are actually created with such a 3px/4px offset, and line up the same in all browsers. You should adjust the background-images - not the div positions or background positions. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 IE7b2 testing hub -- 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/
