[css-d] Styling area with cursor:pointer doesn't work in IE - what now?
Hi list, In 2005, someone had a similar question, but there was no response: http://archivist.incutio.com/viewlist/css-discuss/52019 Using cursor:pointer on an area appears to work in Firefox 3 (and probably other browsers), but not IE7. Is this a known limitation? Are there sensible workarounds? We'd really like to use a pointer mouse cursor for the areas since they are they only parts of the image map that are clickable. Thanks! Brett __ 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] footerStickAlt method not working on my site
On 6/9/2006 7:10 AM, Alex James wrote: Brett wrote: Please see http://dawkins.ctat.cs.cmu.edu/ My goal is the same as footerStickAlt [1]. I can't get this footer to stick to the bottom of the page in any browser. Brett, Try the following: Remove margin-bottom:10em; from the #nonfooter declaration. Add clear: both; to the #footer. In FF this will now stick unfortunately it's still not expanding to the full width of your layout. Maybe some one else can shed some light on this? I'm confused as firstly you didn't declare a negative value for margin-top in the #footer like the Man-In-Blue[1] example and secondly why adding the clearing property partially works? Oh, and that mainstyles.css file is a beast! Thanks, Alex [1] http://www.themaninblue.com/writing/perspective/2005/08/29/#content I've removed #nonfooter's margin-bottom, and added clear:both to #footer (I believe I've tried this before). The result is good for long pages, but short pages are still problematic (see http://dawkins.ctat.cs.cmu.edu/index.php?id=download ). I could add a negative margin to #footer as per the Man-In-Blue example, but in that example, the negative margin moved the footer from outside the viewport into it. On my page, the footer is already inside the viewport, so adding a negative margin would just push it up further. As I mentioned, I think something interesting is going on with the computation of 'height'; I think height isn't taking the height of my #sponsors div into account. Also, using the webdeveloper toolbar, I can see that the footer isn't even being pushed to after the #nonfooter div (which is the premise of footerStickAlt)! Sorry for the beastly mainstyles.css. I could certainly split it up in the future. Thanks, Brett __ 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] footerStickAlt method not working on my site
On 6/9/2006 9:31 AM, Alex James wrote:
How about just organizing some of those ID's classes into shared
declaration's? For example you could declare the following:
#centercontent h1, #centercontent h2, #centercontent h3, #centercontent
li a { font-weight:normal; }
Apply this method through the rest of the stylesheet and it may save
some scrolling!
Sure, I'll do that. I'm more concerned about the pesky footer
positioning at the moment! ;)
Brett
__
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] footerStickAlt method not working on my site
Please see http://dawkins.ctat.cs.cmu.edu/ My goal is the same as footerStickAlt [1]. I can't get this footer to stick to the bottom of the page in any browser. My guess is that this has something to do with a series of background images that are generally not being computed as part of 'height'. Or perhaps the use of absolute positioning. I'm really at a loss. Sorry there is so much to look at on this page. It's a local copy of a live site. Thanks, Brett [1] http://www.themaninblue.com/writing/perspective/2005/08/29/#content __ 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] IE6 doing something quite funky to horizontal li's
Humbling List, Please see http://www.andrew.cmu.edu/user/bleber/css/test.html I'm looking to center two horizontal boxes (simple enough task). It looks fine in Mozilla, while IE 7 staggers the two boxes so one is lower than the other. I'm using standalone IE6, but that seems to have fallen back to the IE7 beta renderer. Maybe someone with non-IE7 setup can advise how to get those two boxes to be in a straight horizontal line. Thanks, Brett __ 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 doing something quite funky to horizontal li's
On 6/7/2006 5:07 PM, Bill Brown wrote:
Humbling List,
Please see http://www.andrew.cmu.edu/user/bleber/css/test.html
I'm looking to center two horizontal boxes (simple enough
task). It looks fine in Mozilla, while IE 7 staggers the two
boxes so one is lower than the other. I'm using standalone
IE6, but that seems to have fallen back to the IE7 beta
renderer. Maybe someone with non-IE7 setup can advise how to
get those two boxes to be in a straight horizontal line.
Thanks,
Brett
Brett,
Try this:
#container ul li {
display: inline;
float: left;
}
That should work in all IEs, I believe.
It most certainly works on my machine. Thanks!
I think my mental error was that I put a class on the a elements, and
was not even styling the li elements (which is what I would normally
do). Strangely enough, it looks like I need to float the a's too. Go
figure.
Thanks,
Brett
__
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 Browser Cache?
On 5/26/2006 3:51 PM, Jan Brasna wrote: Eg. by adding a timestamp to the stylesheet's URI: link href=style.css?20060526T2150 ... Could you expand on this, or link to an article that explains why this works? I'm not familiar with the '?' suffix (unless we're using PHP, of course). Is it standard? Thanks, Brett __ 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 Browser Cache?
On 5/26/2006 4:13 PM, Jan Brasna wrote: Eg. by adding a timestamp to the stylesheet's URI: link href=style.css?20060526T2150 ... Could you expand on this, or link to an article that explains why this works? I'm not familiar with the '?' suffix (unless we're using PHP, of course). Is it standard? Brett, ? is not a suffix. It's a query-string separator, see appropriate RFCs on this. It's the same as the PHP mentioned by you - the file requested is the style.css with the parameter. However, as long as it's just a vanilla CSS, the parameter is simply discarded. For the server. Not for the client - different parameter, different cache, different request. So when you change the parameter, the browser requests the fresh version. Thanks for the clarification. Nifty, useful trick ;) I think I'd heard of it before, but had no idea why it worked. Thanks, Brett __ 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] Debugging Techniques.
On 5/15/2006 11:22 AM, Mark D Hiatt wrote: How do you go about debugging a CSS? Are there any tricks you've picked up over the last several months or years that seem to help you when what you meant isn't quite what you're seeing? This has probably been mentioned on this list a number of times, but the Web Developer extension [1] for Firefox is invaluable for debugging CSS. Specifically, I use the the View Style Information, Edit CSS, and Outline functions. Editing CSS 'on the fly' saves a number of unnecessary keystrokes as you tweak your CSS. View Style Information will show you all the style declarations that are being applied to the selected element, and in which file each selector is located. Outline shows you how your layout is formed, without forcing you to manually add borders to elements (as you described). The DOM Inspector (included with Firefox) is also useful for viewing 'computed style'--the computed result of all styles that are applied to an element. Best, Brett [1] http://chrispederick.com/work/webdeveloper/ __ 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] Looking for some layout help...
[EMAIL PROTECTED] wrote:
I am working on a new layout for a promo/landing type page and am having a
problem figuring out why my promotion text area is not centering properly in
it's content container. The page is here:
http://www.xmission.com/~npetersn/test/landing_layout.html
It works in IE6, but not firefox and safari??
/* added margin:auto for the box */
dl.roundedBox {
width: 365px;
background: url(box_bottom.png) bottom left no-repeat;
clear: both;
margin:auto;
}
/* removed dl.roundedBox from this selector */
dl.roundedBox dt, dl.roundedBox dd {
margin: 0;
padding: 0;
}
There also seems to be a two pixel gap in the promotion text area that I can't
figure out either.
Not sure which 2px you're referring to, but changing dl.roundedBox dt:
dl.roundedBox dt {
height: 48px;
...
}
seems to make a tighter fit. All tested on Firefox 1.5.
Brett
Any help from the good people on this list would be appreciated.
Thanks,
Nate
__
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] Looking for some layout help...
[EMAIL PROTECTED] wrote:
Thanks Brett and Els for your quick responses.
I implemented your suggestions and the promotion text area is now properly
centered. Brett your suggestion to change the height to 48px properly
tightened up the gap that I am seeing on firefox and Safari but still
exists
on IE6. The gap exists right between the the promotion text area dt and the
following dd tags.
It looks like IE is calculating height as height + padding (both defined
in CSS), thereby pushing the dd element down. (I should probably note
here that your use of dl is fairly non-standard and un-semantic.) More
importantly, getting those two elements to line up vertically correct
might not be possible. It might be better to create a single div to
contain the content, and assign a background image to that.
If you want it to scale, you might want to look into boxes with rounded
corners.
Brett
Quoting Brett Leber [EMAIL PROTECTED]:
[EMAIL PROTECTED] wrote:
I am working on a new layout for a promo/landing type page and am
having a
problem figuring out why my promotion text area is not centering
properly in
it's content container. The page is here:
http://www.xmission.com/~npetersn/test/landing_layout.html
It works in IE6, but not firefox and safari??
/* added margin:auto for the box */
dl.roundedBox {
width: 365px;
background: url(box_bottom.png) bottom left no-repeat;
clear: both;
margin:auto;
}
/* removed dl.roundedBox from this selector */
dl.roundedBox dt, dl.roundedBox dd {
margin: 0;
padding: 0;
}
There also seems to be a two pixel gap in the promotion text area
that I can't
figure out either.
Not sure which 2px you're referring to, but changing dl.roundedBox dt:
dl.roundedBox dt {
height: 48px;
...
}
seems to make a tighter fit. All tested on Firefox 1.5.
Brett
Any help from the good people on this list would be appreciated.
Thanks,
Nate
__
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] hybrid layout, wide table (IE6)
Francky,
Thanks for the advice. Using your added styles, the result is better,
but adds scrollbars a bit differently than I'd intended:
http://www.andrew.cmu.edu/user/bleber/css/table_test3.html
Whereas in example 1 scrollbars appear for the container div (#preview),
example 3 creates scrollbars for the the entire layout table. In the
context of the project where this would be used, this produces a bizarre
effect. The issue is that scrolling the entire layout table is likely to
be very disorienting for a user.
Also frustrating is that the long table (the table with many columns)
increases the width of the layout table, effectively moving the
right-aligned parts of my header and footer off-screen. An inline frame
is starting to look a little more attractive for this disastrous table.
Either that or a fixed width for the container div (#preview). I think
the problem is with IE's interpretation of width:100%; on another area
of the site, this property/value pair produces a table that goes off the
right end of the containing div, with no scrollbars!
thanks again, and sorry for the verbose emails--I just can't think of a
simple way to describe all of this.
Brett
francky wrote:
Brett Leber wrote:
Please consider the table layout and nested divs to be a part of the
design requirements. Also, the following is an IE6 rendering issue, so
please view the examples in IE6.
Example 1: http://www.andrew.cmu.edu/user/bleber/css/table_test1.html
Example 2: http://www.andrew.cmu.edu/user/bleber/css/table_test2.html
[...]
How can I make example 2 display like example 1?
Hi Brett
Did you try:
* html body { width: 97%; overflow-x: auto; } ?
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] hybrid layout, wide table (IE6)
Ingo,
This is great! Your additions seem to replicate the desired rendering.
These should work for the actual web project I'm working on as I've
tried to make my test case a simplified version of the same structure.
For conditional comments, do you think I should target IE6+ with these
additions? Out of curiosity, does IE7b2 render the table similarly to
IE6 (ie, off the screen) without your two additions?
Lastly, how did you know that 'flow:left' and 'zoom:1' would do the
trick? I vaguely remember the redundant but effective 'zoom:1' being
mentioned in an article. Is either or both documented elsewhere?
Thanks again!
Brett
PS - Hopefully I've replied to the list properly. I now see how time can
be switched if I reply to the message that appears /before/ the one from
css-d.
Ingo Chao wrote:
Brett Leber wrote:
Example 1: http://www.andrew.cmu.edu/user/bleber/css/table_test1.html
Example 2: http://www.andrew.cmu.edu/user/bleber/css/table_test2.html
The innermost table contains many cells in a single row longer than most
browser widths. To display it in the current page, I've used a container
div with overflow:scroll, and a width of 100%. When this table appears
within the divs alone, the overflow works correctly--the table is no
larger than the current browser (viewport) width, and scroll bars appear
[example 1]. When this table appears within a table used for page
layout, however, the width of the container div stretches to show the
entire table, past the viewport's boundaries, producing a horizontal
scroll bar in the browser [example 2].
How can I make example 2 display like example 1?
for
http://www.andrew.cmu.edu/user/bleber/css/styles.css
add
#preview {... float:left; }
#contents {... zoom: 1;}
and hide these from other browsers.
Works here for IE6 + IE7b2.
/**/
Brett, and the one or other who might read this:
please use /bottom/ posting on this list.
For those who read the digest, or those who just try to read and answer
more than one post per evening, it becomes nearly impossible to read
when the flow of the time is switched more than once per digest. ;)
Ingo
__
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] hybrid layout, wide table (IE6)
Please consider the table layout and nested divs to be a part of the design requirements. Also, the following is an IE6 rendering issue, so please view the examples in IE6. Example 1: http://www.andrew.cmu.edu/user/bleber/css/table_test1.html Example 2: http://www.andrew.cmu.edu/user/bleber/css/table_test2.html The innermost table contains many cells in a single row longer than most browser widths. To display it in the current page, I've used a container div with overflow:scroll, and a width of 100%. When this table appears within the divs alone, the overflow works correctly--the table is no larger than the current browser (viewport) width, and scroll bars appear [example 1]. When this table appears within a table used for page layout, however, the width of the container div stretches to show the entire table, past the viewport's boundaries, producing a horizontal scroll bar in the browser [example 2]. (Recall that this is in IE6, not Firefox; Firefox 1.5 doesn't render the two differently.) How can I make example 2 display like example 1? There must be something I can change in CSS that I'm missing. Changing page structure is not an option; minor html changes are OK. I don't want to use an inline frame or new browser window (i.e., I'm hoping for a pure CSS fix here). I also want to keep the layout fluid. thanks, Brett Leber __ 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/
