[css-d] Styling 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 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 s 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 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/
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/
[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/
Re: [css-d] IE6 doing something quite funky to horizontal li's
On 6/7/2006 5:11 PM, Kieron McIntyre wrote:
> Brett wrote:
>
>> 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.
>
> Hi Brett,
>
> Try adding the following rule:
>
> #container UL LI {
> display:inline;
> }
>
> This should solve the issue I think.
This works as well. Floating both the 's and the 's might be
redundant. But I also put the margin-left on the second and
centered the . Now that the no longer has a margin-left defined,
it seems that the float has to be on the (otherwise, the two boxes
touch).
If you'll allow me to extend this example: what is the best way to give
the heading (h1) a top margin, but to keep the container div flowing to
the top of the viewport? It seems that if I do a margin- or padding-top
for h1, the whole container scoots away from the top. If I give the
container padding-top, then a scroll bar appears for the page. Any
ideas? The current page now has padding-top applied to the container.
Thanks,
Brett
http://www.andrew.cmu.edu/user/bleber/css/test.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] 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 elements, and
was not even styling the elements (which is what I would normally
do). Strangely enough, it looks like I need to float the '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/
[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] CSS Browser Cache?
On 5/26/2006 4:13 PM, Jan Brasna wrote: >>> Eg. by adding a "timestamp" to the stylesheet's URI: >>> >>> > 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] CSS Browser Cache?
On 5/26/2006 3:51 PM, Jan Brasna wrote: > Eg. by adding a "timestamp" to the stylesheet's URI: > > 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:
> 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 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] 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] Color Scheme Assistance
David A. Ensor wrote: > I've had no success in searching thru the archive for this... > > I'm pretty sure I've just recently run across a really useful site for > getting color schemes. You enter one color and it offers several > different options that it works with on the color wheel. > > Any suggestions for best sites for this? I'd like to roll with a color > pulled from a photograph. A few good ones: Colr.org provides a nifty image color sampler. It also has a social aspect to it. http://colr.org/ http://wellstyled.com/tools/colorscheme2/index-en.html http://wellstyled.com/tools/colorscheme/index-en.html (Note that the last two are two different color scheme generators--versions 2 and 1.) 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] 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/
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/
[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/
