Re: [css-d] Background Image on Blockquote Hidden Under Floated Image
Duckworth, Nigel wrote: Franky, I like your mutations! I will take a closer look at this tonight and if the markup changes aren't to radical I might go with this, in any case it's nice to have choice. -Nigel See testpage over here http://home.tiscali.nl/developerscorner/css-discuss/test-acme.htm. Comments are inside src code. Tested only in IE6, Opera7.54, Opera8.01 and FF1.07. francky offlist: As a fan of hackless solutions, she's looking good and standing tall here in: xp 1] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.4) Gecko/20060516 SeaMonkey/1.0.2 2]Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4 3]Opera9.0b2 Best, ~dL __ 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] Multiple class name support
I'm just wondering how well is the multi-class feature (i.e.
class=style1 style2 style3) supported in various browsers.
Also, is there any significant difference between browsers in
terms of how the order of class names affects the
specificity/style precedence?
Actually, IE has issues with multiple selectors. Not that it
doesn't work, just that there are caveats (that have bitten
me several times).
Refer to the wiki for details:
http://css-discuss.incutio.com/?page=MultipleClasses
The wiki doesn't say there is any issue with class=one two three in IE. I
use that extensively and haven't seen any problems with any browsers as far
back as IE 5.0. The problem is when you try to use a CSS selector like
.one.two {}, which doesn't work at all in IE. But you can certainly use .one
{} or .two {} to match the class=one two three.
To achieve an and effect like .one.two {} gives and have it work in any
reasonably modern browser, I use nested elements with individual classnames.
For example, if I want to do the equivalent of:
span class=one two
test
/span
.one.two {}
I use instead:
span class=one
span class=two
test
/span
/span
.one .two {}
It's somewhat ugly but effective. Note that this still works fine if there
are multiple classnames, e.g.
span class=one three
span class=two four
test
/span
/span
.one .two {} /* identical results to previous example */
But this may or may not relate to the OP's question...
-Mike
__
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] Minor browser inconcistencies
Hi, Since I didn't get any (?) feedback at all last time I thought I'd bring it back up. Its only minor glitches with a clean and small example and I'm really keeping my fingers crossed that you guys and gals can help me work them out. (Old post below) -- OLD POST -- Hi, I'm working on making a fairly simple css layout and have a couple of small issues that I need to resolve before it works in Explorer, Firefox, Netscape and Opera. I'm pretty confident that theres not much work needed to get it right and I'm hoping to get some pointers on how to fix it. Here is a list of things I've spotted in the various browers Explorer 6.0.2900.2180 - No problems here. Firefox 1.5.0.3 - The 2px high gap between the blue box and the black line has disappeared Netscape 8.1 - Same as firefox since its the same engine Opera 8.54 Build 7730 - Vertically centers the main layout =( - The background for the footer div gets messed up. Also, is there any good cross-brower alternatives to the FooterStickAlt (which I use) method which doesnt suffer from the problem where it could end up hiding contents due to overlapping with the contents in the above layer? Here is the example layout http://www.selfinflicted.org/css/layout_example.html Thank you! __ 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] Minor browser inconcistencies
Andreas Håkansson wrote: Its only minor glitches ... Maybe these aren't that minor. Explorer 6.0.2900.2180 - No problems here. Firefox 1.5.0.3 - The 2px high gap between the blue box and the black line has disappeared Netscape 8.1 - Same as firefox since its the same engine #check has a height: 278px; #header has a height: 276px; and a padding-top of 2px. Good browsers respect this height of header, meaning that #check cannot respect the padding-bottom of 2px. No gap. IE7 expands the height of #header to 278px to fit #check. Opera 8.54 Build 7730 - Vertically centers the main layout =( What is the purpose of display:table in #container? #container has a height of 100%; Since there is no table-row in that box, I think an UA will contruct an anonymous table-row and table-cell, and its vertical position seems to be not defined: http://www.w3.org/TR/CSS21/tables.html#height-layout CSS 2.1 does not define how extra space is distributed when the 'height' property causes the table to be taller than it otherwise would be. But I may be wrong here. - The background for the footer div gets messed up. same in Safari. What is the purpose of display:table in #footer ? (Here, border-collapse:collapse could fix this) Also, is there any good cross-brower alternatives to the FooterStickAlt (which I use) method which doesnt suffer from the problem where it could end up hiding contents due to overlapping with the contents in the above layer? http://www.themaninblue.com/writing/perspective/2005/08/29/ For this scenario you should provide a bit of space at the bottom of your content which the footer can rise into without covering anything. This can be done with a bit of padding or margin on your content. http://www.selfinflicted.org/css/layout_example.html 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] Dynamic CSS bar graph
On Fri, 16 Jun 2006 10:00:48 -0400, Ben Liu wrote: The list items have a red background color which allows the graph to be viewed on screen. Of course when the report is printed, if the user does not select print background items somewhere in their print dialogue boxes, they get no graph printed. Anybody know a good light- weight way of solving this? In my experience, borders tend to print even when backgrounds don't. Perhaps you could add a border to each bar, which would at least make the bars visible in print, even if they're not exactly solid. Cheers, Andrew. -- :: article seven Andrew Green automatic internet [EMAIL PROTECTED] | www.article7.co.uk __ 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] Minor browser inconcistencies
Andreas Håkansson wrote:
Hi,
Since I didn't get any (?) feedback at all last time I thought I'd
bring it back up. Its only minor glitches with a clean and small
example and I'm really keeping my fingers crossed that you guys and
gals can help me work them out. (Old post below)
--
OLD POST
--
Hi,
I'm working on making a fairly simple css layout and have a couple of
small issues that I need to resolve before it works in Explorer,
Firefox, Netscape and Opera. I'm pretty confident that theres not
much work needed to get it right and I'm hoping to get some pointers
on how to fix it.
Here is the example layout
http://www.selfinflicted.org/css/layout_example.html
Here is a list of things I've spotted in the various browers
Explorer 6.0.2900.2180
- No problems here.
Hi Andreas,
Then nothing to do for IE, just checking after other changes. ;-)
Firefox 1.5.0.3
- The 2px high gap between the blue box and the black line has
disappeared
Deleting the height of the #header will help (is already defined by the
height of the #check).
Netscape 8.1
- Same as firefox since its the same engine
Netscape 6.2 is o.k. now, suppose higher too.
Opera 8.54 Build 7730
- Vertically centers the main layout =(
- The background for the footer div gets messed up.
Deleting the {display:table;} in the #container and #footer will help.
With these changings, I made a testpage here
http://home.tiscali.nl/developerscorner/css-discuss/test-selfinflicted.htm.
Also, is there any good cross-brower alternatives to the
FooterStickAlt (which I use) method which doesnt suffer from the
problem where it could end up hiding contents due to overlapping with
the contents in the above layer?
I don't know by head, but maybe things are possible with {overflow:
auto;}, or you can get ideas from the WIKI footer page
http://css-discuss.incutio.com/?page=FooterInfo.
Some general remarks about fixed/not-fixed I put in the testpage: be
careful with fixing! - As the experimental page is now, it has some
(major!) issues in it...
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] IE6 Skip to Content workaround
Hi all I am implementing the Skip to content link at the beginning of the page for screen readers to skip the navigation and go straight to the main content. However, Internet Explorer 6.0 moves the visual focus, but not the input focus. How do I get this to work in IE6? Wrong mailing list. This is an HTML problem. The answer is though that internet explorer needs the target element to have hasLayout, meaning you need to set either a dimension on it or hack with zoom:1 in the CSS. Gez did the research: http://juicystudio.com/article/ie-keyboard-navigation.php -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ 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] 4-col and/or 5-col simple layouts: Examples to learn from?
Hi, I am looking for a few good/bulletproof examples of four and five column fixed-width (floated?) simple/basic CSS layouts... no frills or gimmicks (i.e. faux columns, negative margins...) I have a pretty good idea how to tackle this type of layout (fixed-width, all floated left, account for IE broken box model), but I would love to see some simple/solid examples before I completely re-invent the wheel. Links, suggestions, thoughts, RTFM's... all appreciated. :) TIA! Cheers, Micky __ 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] Background Image on Blockquote Hidden Under Floated Image
David, Great, thanks for checking it out! Regards, Nigel -Original Message- From: David Laakso [mailto:[EMAIL PROTECTED] Sent: Monday, June 19, 2006 2:03 AM To: Duckworth, Nigel Cc: [EMAIL PROTECTED]; Els; css list list Subject: Re: [css-d] Background Image on Blockquote Hidden Under Floated Image Duckworth, Nigel wrote: Franky, I like your mutations! I will take a closer look at this tonight and if the markup changes aren't to radical I might go with this, in any case it's nice to have choice. -Nigel See testpage over here http://home.tiscali.nl/developerscorner/css-discuss/test-acme.htm. Comments are inside src code. Tested only in IE6, Opera7.54, Opera8.01 and FF1.07. francky offlist: As a fan of hackless solutions, she's looking good and standing tall here in: xp 1] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.4) Gecko/20060516 SeaMonkey/1.0.2 2]Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4 3]Opera9.0b2 Best, ~dL __ 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] IE / FF display issue
Hi all, I am building a back end admin system for our new venture and like a fool only checked in FF as it will only ever be used by us and I never use IE locally. However, my business partner refuses to install IE and seems to get a blank page here: http://www.projectkarma.co.uk/karma_admin/ seems like the body loads (I can tell by the grey background colour) but nothing else. Any ideas? I will continue to investigate. -- http://www.web-buddha.co.uk http://www.projectkarma.co.uk __ 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 / FF display issue
On 19/06/06, Dave Goodchild [EMAIL PROTECTED] wrote: Hi all, I am building a back end admin system for our new venture and like a fool only checked in FF as it will only ever be used by us and I never use IE locally. However, my business partner refuses to install IE and seems to get a blank page here: http://www.projectkarma.co.uk/karma_admin/ seems like the body loads (I can tell by the grey background colour) but nothing else. Any ideas? I will continue to investigate. Get a new business partner? :-) (I assume you meant refuses to install FF) Seriously, make it validate - in particular the script tag is not closed. Seems quite a likely possibility for two renderers two show widely different results : http://validator.w3.org/check?verbose=1uri=http://www.projectkarma.co.uk/karma_admin/ HTH Sam __ 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] 4-col and/or 5-col simple layouts: Examples to learn from?
Micky Hulse wrote: I am looking for a few good/bulletproof Nothing is bulletproof. examples of four and five column I think the problem at four columns and up becomes how do you present content without resorting to unreadable mousetype. fixed-width (floated?) simple/basic CSS layouts... no frills or gimmicks (i.e. faux columns, negative margins...) Yawn :-P . I have a pretty good idea how to tackle this type of layout (fixed-width, all floated left, account for IE broken box model), Sounds pretty complicated to me :-) . but I would love to see some simple/solid examples before I completely re-invent the wheel. Source order content. Min/max width-- feeding ie 'expressions.' No other hacks. Can't vouch for simple/solid/bulletproof. Or anything to write home about. http://www.dlaakso.com/four-col/4c.html Links, suggestions, thoughts, RTFM's... all appreciated. :) TIA! Cheers, Micky Regards, ~odilonRedon __ 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 / FF display issue
On 19/06/06, Sam Partington [EMAIL PROTECTED] wrote: On 19/06/06, Dave Goodchild [EMAIL PROTECTED] wrote: Hi all, I am building a back end admin system for our new venture and like a fool only checked in FF as it will only ever be used by us and I never use IE locally. However, my business partner refuses to install IE and seems to get a blank page here: http://www.projectkarma.co.uk/karma_admin/ seems like the body loads (I can tell by the grey background colour) but nothing else. Any ideas? I will continue to investigate. Get a new business partner? :-) (I assume you meant refuses to install FF) Seriously, make it validate - in particular the script tag is not closed. Seems quite a likely possibility for two renderers two show widely different results : http://validator.w3.org/check?verbose=1uri=http://www.projectkarma.co.uk/karma_admin/ Thanks all, yes, I am tired. Closed that script tag and html now validates. -- http://www.web-buddha.co.uk http://www.projectkarma.co.uk __ 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] Interesting bug... vanishing links!
Hi there, I seem to have a bug with vanishing links. The HTML validates (I assumed I'd missed a somewhere) so I guess I've screwed up the CSS somehow? Please have a look at http://www.wdam.co.uk/clients/dynam/hh/ If you look in IE, all the links (are you a, homeseeker, etc) work fine. If you look in Firefox, they all work fine on the front page. But if you click on homeseeker, the developer and landowner links stop working. On other pages, different links suffer! I can't see a pattern and nor can my programmer partner - we are both baffled! Anyone seen this kind of thing before, or can offer advice? -- Flash Wilson - Web Design Mastery - 0870 401 4061 / 07939 579090 -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Work: www.wdam.co.uk Personal: www.gorge.org __ 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] 4-col and/or 5-col simple layouts: Examples to learn from?
Hi David, thanks for you quick response. :) David Laakso wrote: I think the problem at four columns and up becomes how do you present content without resorting to unreadable mousetype. Good point... if I understand what your saying that is... Hehe, how do you mean mousetype? Yawn :-P . Yeah, sorry. Lol. :D Source order content. Min/max width-- feeding ie 'expressions.' No other hacks. Can't vouch for simple/solid/bulletproof. Or anything to write home about. http://www.dlaakso.com/four-col/4c.html Excellent! Thanks for the sharing the link. Many thanks D, you da man! :D Cheers, Micky __ 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] HR color
Having put color of HR into class as follows:
.hrcolor {color:#ff;}
and html as hr class=hrcolor /
renders ok in IE but not in FF.
If I use background:#ff; then FF renders darker color.
What say you for solution?
Ian
**IMPORTANT*
***
This e-mail contains information which is confidential and may also be
privileged. It is for the exclusive use of the intended recipient(s). If you
are not the intended recipient(s) please note that any form of,
distribution, copying or use of this e-mail or the information in it is
strictly prohibited and may be unlawful. If you have received this in error
please inform us at the above address then delete the e-mail and destroy any
copies of it. Thank you.
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.9.0/368 - Release Date: 16/06/2006
__
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] rolling over, having a hidden image appear
I don't understand how to get the label image of each specific winery( a grey, arial and bigger letters) in the image box with question marks, when hovering over the individual wineries. Then when mousing out, have it disappear. URL: http://www.skingdesign.com/mcNeil_site/wineries2.htm thank you, --zinlover __ 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] Interesting bug... vanishing links!
Please have a look at http://www.wdam.co.uk/clients/dynam/hh/ If you look in Firefox, they all work fine on the front page. But if you click on homeseeker, the developer and landowner links stop working. Anyone seen this kind of thing before, or can offer advice? The Web Developer toolbar is your friend. (Especially the Outline Selected/Current Element.) It looks like the triangle div is covering those links on some of the pages. As a quick-fix I tried adding a z-index: 1; to the #sidebar div and this seems to fix it, but may not be the best way to go about it. -- Kenny Millington BSc(Hons) E-Mail: [EMAIL PROTECTED] Website: http://www.kennynet.co.uk/ __ 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] Interesting bug... vanishing links!
[EMAIL PROTECTED] wrote: I seem to have a bug with vanishing links. Nope, it is not a bug. Please have a look at http://www.wdam.co.uk/clients/dynam/hh/ If you look in IE, all the links (are you a, homeseeker, etc) work fine. If you look in Firefox, they all work fine on the front page. But if you click on homeseeker, the developer and landowner links stop working. Confirmed. On other pages, different links suffer! I can't see a pattern and nor can my programmer partner - we are both baffled! The links on the right are covered by the triangle. Set a border for #triangle in your stylesheet and you'll see it. The only reason that on the homepage the links still work, is that on that page, you have div#triangle *before* div#navlist, and as both have position:absolute, the one that's later in the source, will overlap the earlier one. -- Els http://locusmeus.com/ http://locusoptimus.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] Interesting bug... vanishing links!
On Mon, Jun 19, 2006 at 03:12:54PM +0200, Els wrote: The links on the right are covered by the triangle. Set a border for #triangle in your stylesheet and you'll see it. Doh. Thanks - I thought I had that the right size and didn't think to try testing with a border - Ill remember that for future. Thanks to both of you who pointed this out. Much appreciated. (And frustrating to be something so silly, but I'll know for next time!) -- Flash Wilson - Web Design Mastery - 0870 401 4061 / 07939 579090 -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- Work: www.wdam.co.uk Personal: www.gorge.org __ 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] Multiple class name support
The wiki doesn't say there is any issue with class=one two three in IE. I
use that extensively and haven't seen any problems with any browsers as far
back as IE 5.0. The problem is when you try to use a CSS selector like
.one.two {}, which doesn't work at all in IE. But you can certainly use .one
{} or .two {} to match the class=one two three.
not quite true in my experience. there are three bugs that i know
related to having multiple class/id names. note that if you're only
working with classes, you only need to worry about the first one.
multiple classes bug:
http://www.quirksmode.org/bugreports/archives/2004/12/IE_CSS_rendering_bug_with_multiple_classnames.html
combining ID with class:
1.
http://www.quirksmode.org/bugreports/archives/2005/09/IE6_Multi_Class_Bug.html
2a.
http://www.quirksmode.org/bugreports/archives/2005/12/All_but_last_grouped_idclass_selectors_are_ignored.html
2b. http://css-discuss.incutio.com/?page=InternetExplorerWinBugs
[scroll to the bottom]
for those interested in voting or tracking on the ie feedback site
about multiple class/id, here's a couple of them:
https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=78368
https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=57394
__
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] HR color
Ian Young wrote:
Having put color of HR into class as follows:
.hrcolor {color:#ff;}
and html as hr class=hrcolor /
renders ok in IE but not in FF.
If I use background:#ff; then FF renders darker color.
What say you for solution?
.hrcolor{
color:#ff; /* for IE */
background-color:#ff; /* for FF and Opera */
height:2px; /* for Opera */
border:none; /* to get rid of (dark) border in FF and Opera */
}
--
Els
http://locusmeus.com/
http://locusoptimus.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] rolling over, having a hidden image appear
I don't understand how to get the label image of each specific winery( a grey, arial and bigger letters) in the image box with question marks, when hovering over the individual wineries. Then when mousing out, have it disappear. URL: http://www.skingdesign.com/mcNeil_site/wineries2.htm a) Use JavaScript - would be much easier and you can pull in the logo dynamically b) Embed the logos in the link, and position them absolutely on hover. http://www.meyerweb.com/eric/css/edge/popups/demo2.html -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ 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] 4-col and/or 5-col simple layouts: Examples to learn from?
Micky Hulse wrote: Hi David, thanks for you quick response. :) David Laakso wrote: I think the problem at four columns and up becomes how do you present content without resorting to unreadable mousetype. Good point... if I understand what your saying that is..., how do you mean mousetype? Mousetype might be considered slang for primary content specified at less than default. This page is an example: http://www.alistapart.com/articles/dao/ The article on that page, is a *wonderful and worthwhile read*-- the author of the article did /not/ set the moustype. These, of course, are /my personal opinions/. ~dL __ 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] aligning a p tag with the top of a div in IE
Hello all, I cannot figure out how to get the p tag to line up with the top of a particular div in IE6. It works fine in Firefox. You'll see the p tag in green, contained in a yellow div, near the bottom of this page: http://www.parallaxwebdesign.com/projects/parallax_r2/portfolio.php I know that vertical-align doesn't work with block elements - is there something else I can use? Debbie www.parallaxwebdesign.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] 4-col and/or 5-col simple layouts: Examples to learn from?
The article on that page, is a *wonderful and worthwhile read*-- the author of the article did /not/ set the moustype. As I was about to comment on how the text can just be scaled up to suit, I scaled it up myself in Mac Flock (FF) and was amazed to see that when the nav, for starters, gets scaled out of view of my browser window, I do _not_ get a horiz scroll bar! If i widen my browser window, the overflow is there, but I can't _scroll_ to see it. Seems like a problem to me... -- Tom Livingston | Senior Multimedia Artist | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] aligning a p tag with the top of a div in IE
Debbie Campbell wrote: I cannot figure out how to get the p tag to line up with the top of a particular div in IE6. It works fine in Firefox. You'll see the p tag in green, contained in a yellow div, near the bottom of this page: http://www.parallaxwebdesign.com/projects/parallax_r2/portfolio.php I know that vertical-align doesn't work with block elements - is there something else I can use? Give p.port-text a top margin of 0? -- Els http://locusmeus.com/ http://locusoptimus.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] Multiple class name support
Actually, IE has issues with multiple selectors. Not that it
doesn't work, just that there are caveats (that have bitten
me several times).
Refer to the wiki for details:
http://css-discuss.incutio.com/?page=MultipleClasses
The wiki doesn't say there is any issue with class=one two three in IE. I
use that extensively and haven't seen any problems with any browsers as far
back as IE 5.0. The problem is when you try to use a CSS selector like
.one.two {}, which doesn't work at all in IE. But you can certainly use .one
{} or .two {} to match the class=one two three.
From the wiki:
Internet Explorer (Win/6, Mac/5.x): broken. The multiple selector will
select every element with the last class in the selector (order in the selector
is important, order of the classes in the HTML is not), regardless of the
presence of the other classes. In other words, IE treats .one.two.three exactly
as it does .three.
This has forced me, on several occasions to reorder the selector to get proper
behavior in IE.
To achieve an and effect like .one.two {} gives and have it work in any
reasonably modern browser, I use nested elements with individual classnames.
For example, if I want to do the equivalent of:
The fact that you have to use a workaround to get multiple selectors to be
applied in IE as they would in other browsers suggests to me that there is, in
fact, an issue with IE's implementation of multiple selectors.
The flaw is this:
span class=one two fourtext/span
.one.two.four { color: blue; }
.one.three.four { color: red; }
In IE the text in the span is be red. Obviously, it's important that people
not familiar with the implementation of multiple selectors, like the person
with the original question, be aware of this issue in IE.
-Sam
__
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] Mysterious Black Line
Hi people: I'm not asking for anyone to root out a solution for me, unless you want. What I would like is IF anyone has seen this phenomena before and can point me in the right direction to find a solution. It has been pointed out to me that a Mysterious Black Line appears at the top left of my web page http://www.sperling.com/examples/menuh/ when viewing the page via Firefox 1.5.0.4 running on Mac OS X 10.4.6. This line doesn't appear on any other browsers or OS that I am aware. So, anyone have any ideas as to why and can offer a direction for solution? Thanks in advance for any replies. tedd -- http://sperling.com http://ancientstones.com http://earthstones.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] Mysterious Black Line
On 6/19/06, tedd [EMAIL PROTECTED] wrote:
It has been pointed out to me that a Mysterious Black Line appears at the
top left of my web page
http://www.sperling.com/examples/menuh/
when viewing the page via Firefox 1.5.0.4 running on Mac OS X 10.4.6.
This line doesn't appear on any other browsers or OS that I am aware.
i'm not sure how you didn't see it on ff 1.5 on winxp, but i see it
here on my machine. this got rid of it:
a img {border: none !important;}
hopefully that helps you start debugging!
__
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] Controlling spacing between menu elements
I'm starting to work on a new flyout menu but would like to cut down the space between the elements that appear on the rollovers. There are some IE issues I'm working on now, but you can get the general idea at: http://wwwdev.lemoyne.edu/information_technology/menu.htm The style sheet is at http://wwwdev.lemoyne.edu/css/it.css Any suggestions would be appreciated. Michelle -- * Michelle Tarby Director of Web Services Information Technology Le Moyne College http://www.lemoyne.edu [EMAIL PROTECTED] __ 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] floats or margin alignment?
so for a two col layout as an example you would float the first col left and for the second col add margin-left to clear the first col, and add spacing, but there would be no need to float the sec col, right. Would that be the best approach? On 6/18/06, Ed Seehouse [EMAIL PROTECTED] wrote: On 6/18/06, Bruce Gilbert [EMAIL PROTECTED] wrote: I was just curious as to the benefits of floating divs, as opposed to aligning with margin spacing? It seems that floated elements often case floats drops and the floats need to be cleared etc. whereas margin somewhat more easy to manage. I'd say that if you can do it with margin adjustments that's the way to go. If you need to get a little more sophisticated then move to floats, but use them as sparingly as possible. For a two column layout you need just one float, for example, not two. -- Ed Seedhouse -- ::Bruce:: __ 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] Firefox leaving big space
Mary Stoughton wrote: I am hving a problem with my site in Firefox. IE is fine. http://trisms.com/NEW/index.html The content div leaves a big gap. I have a p then it won't allow the next h2 and p until after it passes the left nav div. Are you floating any elements above the h2? If so, try adding a clear:both rule to the h2 and see if that helps. -- Kind Regards Schalk Neethling Web Developer.Designer.Programmer.President Volume4.Business.Solution.Developers __ 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] Mysterious Black Line
tedd wrote: Hi people: Hi person ;-) I'm not asking for anyone to root out a solution for me, unless you want. What I would like is IF anyone has seen this phenomena before and can point me in the right direction to find a solution. It has been pointed out to me that a Mysterious Black Line appears at the top left of my web page http://www.sperling.com/examples/menuh/ when viewing the page via Firefox 1.5.0.4 running on Mac OS X 10.4.6. Same here on Windows XP, Firefox 1.5.0.4. This line doesn't appear on any other browsers or OS that I am aware. But it does :-) So, anyone have any ideas as to why and can offer a direction for solution? The line is the top border of this element: a href=#narrowparagraphimg src=images/gifs/transparent.gif alt=Skip Navigation height=2 width=2/a Firefox doesn't obey set widths on images that don't load. The transparent.gif is not present in the given location. -- Elshttp://locusmeus.com/http://locusoptimus.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/
[css-d] Positioning Problem with IE 5 for the Mac and IE 6 for the PC
Hello, I am new to this list, and have been working with CSS now for close to a year. I have embraced the use of XHTML/CSS for building my websites, but am still learning how to work around the idiosyncrasies of Internet Explorer. I have a website that I have created and have had difficulties with the placement of a div when viewed in IE For the Mac and IE for the PC... The div that I am having issues with is the class=²email² div which renders right in Firefox for the Mac but renders too low in IE 5 for the Mac. In addition, it renders correctly in Firefox on the PC but is completely wrong on IE on the PC (the ³email² link is missing and and the License number is shifted to the right...). I placed the ³email² div within the ³footer² div so that the email link and the license # will I know that probably most of you have this stuff down but I am still learning and could use some help. I am also interested if anyone has any ideas to safeguard any hacks from the release of IE7 (I suppose that I will need to place the hack into a separate CSS document linked with a conditional statement. The URL is for the site is http://www.audreysilvermanfoote.com Any help would be greatly appreciated. Best Regards, David Brix [EMAIL PROTECTED] -- __ 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] Firefox leaving big space
Mary Stoughton wrote:
I am hving a problem with my site in Firefox. IE is fine.
http://trisms.com/NEW/index.html
IE is saved by its 'Layout'[1] bug - again :-)
The content div leaves a big gap. I have a p then it won't allow the next
h2 and p until after it passes the left nav div.
You also have a br class=both /!--clear floats-- in there, and
that will clear everything within reach - exept in IE where the #content
is /isolated/ by the mentioned 'Layout' bug.
very weird.
Anybody see a simple solution?
Isolate the #content in all browsers, by creating a 'Block formatting
contexts'[2]. The following addition/correction will do...
#content {margin: 0; float: left;}
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
[2]http://www.w3.org/TR/CSS21/visuren.html#q15
--
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] floats or margin alignment?
On 6/19/06, Bruce Gilbert [EMAIL PROTECTED] wrote: so for a two col layout as an example you would float the first col left and for the second col add margin-left to clear the first col, and add spacing, but there would be no need to float the sec col, right. Would that be the best approach? Best is arguable, I suppose. It use it. It makes the main column scalable for text resizes and different resolutuions. It's less complex to me. I want to use as little positioning as possible because positioning is the least cross-browser robust part of most browser's CSS implementations. I try to use the natural flow of the elements on the page as much as possible, with as little positioning or floats as possible. Sort of a Go with the Flow approach. This is also the approach recommende on the CSS forum site at http://www.csscreator.com/css-forum/index.php, which is the main CSS forum I visit. I've learned a lot there. -- Ed Seedhouse __ 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] Position of text in nav menu issues
I am having troubles with the vertical positioning of
the text in a navigation menu that I have created. It
is not centered vertically, and when I try to change
the margin, the background image moves with it. Can
someone take a look at this and see where I am going
wrong? I have looked at it for too long, and I am not
seeing where the problem is.
You can see the problem here.
http://www.mplsfarmersmarket.com/beta/navbar/
#nav
{
float: left;
width: 100%;
height: 35px;
margin: 0;
padding: 0 0 0 40px;
list-style: none;
background: url(../images/navBg.png) repeat-x bottom
left;
}
#nav li
{
float: left;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
vertical-align: middle;
font-size: 100%;
}
#nav a
{
float: left;
margin: 0 0 3px 0;
padding: 4px 8px;
height: 27px;
color: white;
font-weight: bold;
text-decoration: none;
border-bottom: none;
}
#nav a:hover
{
background: url(../images/navBgOver.png) #666366
repeat-x bottom left;
}
body#home #home a
{
background: url(../images/navBgOver.png) #666366
repeat-x bottom left;
}
__
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.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] Columns selectable in isolation
On Sunday 18 June 2006 15:50, Jim Nannery wrote: Morning Frans Hello Jim, Hi everyone, Look at the attached XHTML. Because of list policy [1], attachments are stripped from incoming mail. Thanks for bringing me up to speed on that. My apologies for not having investigated this in before hand. You'll need to copy and paste your code into the body of an email or better yet, provide a link to the problem code. Here it is: http://rafb.net/paste/results/RuCusT43.html Cheers, Frans __ 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] Help with layout problem in IE6 (maybe 5 too)?
I've got a layout that I've been working on here: http://www.nova-web-solutions.com/new/ It works great in Safari and FIrefox Mac/Win, but breaks in IE 6 (possibly 5, but I haven't tested). I have a feeling it has to do with the order of my code, but I can't quite figure it out. Does anyone have any idea what's going on here? Also, if anyone can tell me what this looks like in IE 5 that would be a big help too. Thanks to all! This is a great resource. __ 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] Mysterious Black Line
Hi people:
I asked:
It has been pointed out to me that a Mysterious Black Line appears at the
top left of my web page
http://www.sperling.com/examples/menuh/
when viewing the page via Firefox 1.5.0.4 running on Mac OS X 10.4.6.
cj said use:
a img {border: none !important;} -- which worked like a charm -- mondo thanks!
It was an easy fix, much better than I anticipated.
Els said:
This line doesn't appear on any other browsers or OS that I am
aware.
But it does :-)
Ok, I said that I was aware of -- I wasn't aware until now. :-)
Both Els and -Nick pointed out:
The line is the top border of this element:
a href=#narrowparagraphimg src=images/gifs/transparent.gif
alt=Skip Navigation height=2 width=2/a
Which carries the image border thing problem. I placed that there for
accessibility Skip Navigation, which as my Mom used to say No good deed ever
goes unpunished.
Thanks for all your most observant help.
Now, one last question.
Why does the background image I use not work in just the those two pages
showing my menu examples --
http://www.sperling.com/examples/menuh/
http://www.sperling.com/examples/menuv/
-- via Firefox 1.5.0.4 running on Mac OS X 10.4.6 and I assume others?
I've looked at it and the problem isn't obvious to me as to why it's happening.
Is it the IE conditional statement interfering with the basic css with regard
to background?
Thanks again for your time.
tedd
--
http://sperling.com http://ancientstones.com http://earthstones.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/
[css-d] Problem with Firefox 1.5.0.4 / Win and 1.0.8 Linux
Dear colleages I am very new to CSS, and am trying out some designs for a new website using only CSS and HTML as much as possible, based on Eric Meyer's two great books, EM on CSS and More EM on CSS. The particular problem I am having with Firefox (both under Windows XP and Linux) is that it needs a refresh to appear as it should. It works fine in IE7 B2, Opera 8.54 and Opera 9 Beta. Here are 2 screenshots of the page in FF: This is on 1st load, clean cache: http://www.koperti.gr/ff-pre-refresh.png and this is after a page reload: http://www.koperti.gr/ff-post-refresh.png The page is at http://www.koperti.gr/koperti04.html (W3C XHTML Validated, no errors) The CSS is at http://www.koperti.gr/css/koperti04.css (W3C CSS Validated, 1 error as I am using a behavior call for IE = 6 for hover and a number of warnings, e.g., no color with background-color and some redefinitions (IE hacks mostly, plucked from EM's books) Please, if you know why FF is doing this, please let me know. I am tearing my hair out (and I don't have a lot to start with). Also, the seem to be a couple of minor glitches (that I can live with) but again, if anyone knows why please let me know - I am desperate to learn this stuff. In IE6, Win 2000, the 2nd and third level menus are 0.5em to the left of their correct positions and in Konqueror 3.4.3, Linux, the 2nd and third level menus ul have lost their right borders. And one final thing, if anyone can report how it looks in IE5/Mac and/or Safari, I would be extremely grateful (I have checked the page with Konqueror as I understand it uses the same rendering engine as Safari, i.e., khtml. Thanks in advance for any help -- Andreas Kakanis-Silk Vakalis Educational Organisation Mitropoleos 17 54624 Thessaloniki GREECE Tel: +30 2310 264 004 Fax: +30 2310 272 279 www: http://www.sitedesign.gr __ 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] Mysterious Black Line
tedd wrote: The line is the top border of this element: a href=#narrowparagraphimg src=images/gifs/transparent.gif alt=Skip Navigation height=2 width=2/a Which carries the image border thing problem. I placed that there for accessibility Skip Navigation, which as my Mom used to say No good deed ever goes unpunished. I place skip links outside of the viewport, and then let them 'pop up' inside the viewport when receiving focus, with :focus and :active (for IE) styles. Why does the background image I use not work in just the those two pages showing my menu examples -- http://www.sperling.com/examples/menuh/ http://www.sperling.com/examples/menuv/ -- via Firefox 1.5.0.4 running on Mac OS X 10.4.6 and I assume others? I've looked at it and the problem isn't obvious to me as to why it's happening. Is it the IE conditional statement interfering with the basic css with regard to background? You can test that of course, by taking out that statement and check if the problem persists in FF. Which background-image are you referring to? I don't see anything in IE(7) that isn't there in Firefox, except for quite a few problems with overlapping texts in the content (on all pages). Opera also shows me the same thing as Firefox. -- Els http://locusmeus.com/ http://locusoptimus.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/
[css-d] Image Fading Effect w/ CSS
Look at this page please - http://www.santarosadentist.com/enriching_lives.htm When you mouse over the pictures the opacity changes, or so it would seem. Can this same effect be achieved using CSS only? Tom __ 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] Image Fading Effect w/ CSS
You can do this with a:hover and two separate background images I think. - Ben On 6/20/06, TMH Design [EMAIL PROTECTED] wrote: Look at this page please - http://www.santarosadentist.com/enriching_lives.htm When you mouse over the pictures the opacity changes, or so it would seem. Can this same effect be achieved using CSS only? Tom __ 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/
[css-d] List menu
Here's the css:
#mainnav{text-align:left; background-color:#aca195;}
#mainnav ul{font-size:.8em; color:#fff; list-style-type:none;}
#mainnav ul li{padding:.7em; display:inline;}
and the html:
div id=mainnav
ul
liProfessional Liability Insurance/li
liSurplus Lines Filings/li
liBenefits Solutions/li
liAbout/li
liContact/li
/ul
/div
My li's aren't showing any top/bottom padding in Mac FF (Flock).
Why?
TIA!
--
Tom Livingston | Senior Multimedia Artist | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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/
[css-d] Weird Firefox bug in a href
I'm having a strange problem where clicking on an ordinary a href link is not loading the page it points to properly in Firefox. Instead, it is just jumbling up the placement of the page but not sending another http request to the server. Please check this out: http://constructioncapitalsource.com/test/sample.html Really weird. Any ideas? Thanks, Carl __ 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] Weird Firefox bug in a href
Carl Youngblood wrote: On 6/19/06, Carl Youngblood [EMAIL PROTECTED] wrote: I'm having a strange problem where clicking on an ordinary a href link is not loading the page it points to properly in Firefox. Instead, it is just jumbling up the placement of the page but not sending another http request to the server. Please check this out: http://constructioncapitalsource.com/test/sample.html Really weird. Any ideas? One more detail: apparently the bug doesn't occur on the links at the top-right of the page--just on the links that are below the horizontal menu. Hi, You gave #container display:table;. You've also set the width of the floated children to resp. 70% and 29.5%. This is a percentage of their parent's width, but since the parent has display:table, it shrink-wraps around the children. Vicious cycle :-) No idea whatsoever why clicking the links triggers the #container collapsing, but if you either take off display:table, or add a set width to #container, nothing collapses, so the links don't disappear from under your mouse half way clicking them (which is why it seems like they're not working). -- Els http://locusmeus.com/ http://locusoptimus.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] Image Fading Effect w/ CSS
depends on the desierd effect - here's an example with a single image and opacity: www.dottedi.biz/codesamples/opacity_upon_hover.html View source - the CSS is contained. JavaScript is commonly used for more complex fading type transitions. TMH Design wrote: Look at this page please - http://www.santarosadentist.com/enriching_lives.htm When you mouse over the pictures the opacity changes, or so it would seem. Can this same effect be achieved using CSS only? Tom __ 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] Image Fading Effect w/ CSS
Current browsers don't have good widespread support for changing image opacity. Right now only a few are capable, Opera and Safari I think. IE5/6 definitely do not so it can't be done purely with CSS. By having two variations of each image, one at 100% opacity and a matching one at a lower opacity (which would have to be done in an image editing program like Photoshop), you could then swap between the two on hover using some CSS. - Ben On Jun 20, 2006, at 1:14 AM, TMH Design wrote: Couldn't you just change the opacity of an image? -Original Message- From: Ben Liu [mailto:[EMAIL PROTECTED] Sent: Monday, June 19, 2006 1:03 PM To: TMH Design Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] Image Fading Effect w/ CSS You can do this with a:hover and two separate background images I think. - Ben On 6/20/06, TMH Design [EMAIL PROTECTED] wrote: Look at this page please - http://www.santarosadentist.com/enriching_lives.htm When you mouse over the pictures the opacity changes, or so it would seem. Can this same effect be achieved using CSS only? Tom _ _ 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/
Re: [css-d] Image Fading Effect w/ CSS
I may be getting in on this a little late but there's a good explanation / tutorial for image opacity with CSS at this web site. My apology if this has been stated already. http://www.mandarindesign.com/opacityblending.html Bob -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.394 / Virus Database: 268.9.0/368 - Release Date: 06/16/06 __ 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] Image Fading Effect w/ CSS
TMH Design wrote: Look at this page please - http://www.santarosadentist.com/enriching_lives.htm When you mouse over the pictures the opacity changes, or so it would seem. Can this same effect be achieved using CSS only? Tom You might find this useful: http://www.pmob.co.uk/temp/cssrollover5.htm found on this site: http://www.pmob.co.uk/ Just setting the visibility of the rollover images on hover. Simple and effective. Hth's, Cheers, Micky __ 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] Full surface clickable dt/dd pairs
1st time poster In a search for a semantic navigation of chapters I came up with a dl; with a short description of the link (dt) in dd, and a bg picture for dt. I floated and stretched the dta over the the dd, and it works in FF; the full surface is clickable. In IE however the dta float is pushed under the dd. How can this be changed? Is my method any good? Alternatives for same effect? Here is a test setup: http://home.versateladsl.be/vt683770/dl.html G __ 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] Weird Firefox bug in a href
When I remove the display:table, my pixel borders disappear. Do you have any idea about how I can keep those borders but get rid of the other unwanted properties? I'd like this div to expand as the width of the browser expands. THanks, Carl On 6/19/06, Els [EMAIL PROTECTED] wrote: Carl Youngblood wrote: On 6/19/06, Carl Youngblood [EMAIL PROTECTED] wrote: I'm having a strange problem where clicking on an ordinary a href link is not loading the page it points to properly in Firefox. Instead, it is just jumbling up the placement of the page but not sending another http request to the server. Please check this out: http://constructioncapitalsource.com/test/sample.html Really weird. Any ideas? One more detail: apparently the bug doesn't occur on the links at the top-right of the page--just on the links that are below the horizontal menu. Hi, You gave #container display:table;. You've also set the width of the floated children to resp. 70% and 29.5%. This is a percentage of their parent's width, but since the parent has display:table, it shrink-wraps around the children. Vicious cycle :-) No idea whatsoever why clicking the links triggers the #container collapsing, but if you either take off display:table, or add a set width to #container, nothing collapses, so the links don't disappear from under your mouse half way clicking them (which is why it seems like they're not working). -- Els http://locusmeus.com/ http://locusoptimus.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/
[css-d] CSS layout breaks in IE6 when window is narrow
I'm not sure what to call this problem... When you narrow the width of the
browser window far enough, the right-side div breaks and shows up below the
two left columns (green and blue) in IE 6. Doesn't happen in FF.
http://www.parallaxwebdesign.com/projects/parallax_r2/
#content-right {
margin-left: 0;
padding: 0;
height: 299px;
color: black;
background-color: transparent;
text-align: left;
overflow: scroll;
overflow-x: hidden;
}
Here's the overall container div in which the three columns sit:
#container {
clear: both;
float: left;
width: 100%;
margin: 0;
padding: 0;
background-color: white;
background-image: url(graphics/linepattern_green.jpg);
border-top: 1px solid white;
}
What is this problem called, if it has a specific name? And what can I do
about it? Thanks
Debbie Campbell
http://www.parallaxwebdesign.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] rolling over, having a hidden image appear
Christian Heilmann wrote: I don't understand how to get the label image of each specific winery( a grey, arial and bigger letters) in the image box with question marks, when hovering over the individual wineries. Then when mousing out, have it disappear. URL: http://www.skingdesign.com/mcNeil_site/wineries2.htm a) Use JavaScript - would be much easier and you can pull in the logo dynamically b) Embed the logos in the link, and position them absolutely on hover. http://www.meyerweb.com/eric/css/edge/popups/demo2.html Hi Stuart, Some time ago I made a simplified example with the Eric Meyer method, testpage here http://home.tiscali.nl/developerscorner/css-discuss/showathover.htm. That is the pure text variant. Now added a testpage for the img variant http://home.tiscali.nl/developerscorner/css-discuss/showathover2.htm. Delivering entrance: 2nd tower west side. ;-) 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/
[css-d] does anyone know why SIFR technique makes other image replacement techniques not work
i have been trying to implement SIFR and have it working however it seems to affect other image replacement techniques being used on the page for a top logo on a h1 was wondering if this is something someone else has come across and why it is doing the replacement on this h1 element when it has been asked to be replaced in the sifr technique and the h1 is being replaced with CSS only thanks __ 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] does anyone know why SIFR technique makes other image replacement techniques not work
i have been trying to implement SIFR and have it working however it seems to affect other image replacement techniques being used on the page for a top logo on a h1 was wondering if this is something someone else has come across and why it is doing the replacement on this h1 element when it has been asked to be replaced in the sifr technique and the h1 is being replaced with CSS only it is at http://jimbyrne.co.uk/thcarpets/template_static_html/testhomesifr.html sorry if this posts 2 times by mistake thanks __ 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 layout breaks in IE6 when window is narrow
Debbie Campbell wrote: I'm not sure what to call this problem... When you narrow the width of the browser window far enough, the right-side div breaks and shows up below the two left columns (green and blue) in IE 6. Doesn't happen in FF. http://www.parallaxwebdesign.com/projects/parallax_r2/ ... code snippets removed What is this problem called, if it has a specific name? And what can I do about it? Thanks It's called a column drop. The simple cause is too much content for the width available. Something has to give, so a column drops. Now, the problem with posting code snippets is that they rarely show where the problem really is. In fact, in this case, there is no problem. The reason it works in FF is because of a min-width:550px on the body element, and that 550 px is enough to prevent the column drop. The reason it fails in IE is because no current version of IE respects min-width. So, once the window is squeezed too far, IE drops the column. Comment out the min-width, and FF will drop the column too. There are a few work arounds noted in the WIKI: http://css-discuss.incutio.com/?page=MinWidth -- Bob Easton Accessibility Matters: http://access-matters.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] Image Fading Effect w/ CSS
Micky Hulse wrote: TMH Design wrote: Look at this page please - http://www.santarosadentist.com/enriching_lives.htm When you mouse over the pictures the opacity changes, or so it would seem. Can this same effect be achieved using CSS only? Tom You might find this useful: http://www.pmob.co.uk/temp/cssrollover5.htm found on this site: http://www.pmob.co.uk/ Just setting the visibility of the rollover images on hover. Simple and effective. Hi all, Another contribution: img-rollover + fading in, also with css only (eh, and 2 images): testpage http://home.tiscali.nl/developerscorner/css-discuss/css-hoverfade.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] Image Fading Effect w/ CSS
francky wrote: Hi all, Another contribution: img-rollover + fading in, also with css only (eh, and 2 images): testpage http://home.tiscali.nl/developerscorner/css-discuss/css-hoverfade.htm. Ah, pretty cool actually... I would have never thought to use a .gif. But, it seems it has potential if used subtlety (nice alternative to other options). Hehe, thanks for sharing. __ 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] Full surface clickable dt/dd pairs
G wrote: 1st time poster In a search for a semantic navigation of chapters I came up with a dl; with a short description of the link (dt) in dd, and a bg picture for dt. I floated and stretched the dta over the the dd, and it works in FF; the full surface is clickable. In IE however the dta float is pushed under the dd. How can this be changed? Is my method any good? Alternatives for same effect? Here is a test setup: http://home.versateladsl.be/vt683770/dl.html Hi G, There are two html tags in the code, maybe IE is falling over that? 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] Weird Firefox bug in a href
Carl Youngblood wrote: On 6/19/06, Els [EMAIL PROTECTED] wrote: On 6/19/06, Carl Youngblood [EMAIL PROTECTED] wrote: http://constructioncapitalsource.com/test/sample.html [snip] if you either take off display:table, or add a set width to #container, nothing collapses, When I remove the display:table, my pixel borders disappear. Do you have any idea about how I can keep those borders but get rid of the other unwanted properties? I'd like this div to expand as the width of the browser expands. Yup, use option number 2: add a set width to #container: width:100%; -- Els http://locusmeus.com/ http://locusoptimus.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/
