[css-d] IE7 Button width Fix

[Bill McAvinney]

Hi All,

I've been using a modified version of Jehiah Czebotar's button width  
fix and it's breaking in IE7. Anybody have a new solution?

Note that I'm talking about button tags not input type=button  
tags.

CSS:
button
{
   width: 10px;
   overflow: visible;
   padding-left: 6px;
   padding-right: 6px;
}

HTML:
buttonSome very long text here/button

Jehiah's solution is to give the button a very narrow width. This  
seems to cancel out IE's proportional padding and works because IE7  
expands the button to fit the content so you can then apply your own  
padding that works. IE7 doesn't seem to expand the button, nor obey  
the 10px width, so the button background color appears only as a  
narrow vertical band about 2px wide at the very left edge of the  
button. With great hope I tried just applying padding, thinking IE7  
might obey, but no, my CSS padding is still ignored and very wide  
padding is applied.

I've seen other people say that Jehiah's fix still works in IE7 which  
I take to mean for input tags. I can't use input tags as we've made a  
corporate decision to use button tags because of the increased  
styling flexibility that comes with them.

For an example using this code and to see screen shots:
http://web.mit.edu/sapweb/dontindex/test/ButtonTest.html

BTW as someone running on MacOS I don't have easy access to IE7 to  
try out various solutions.

Bill McAvinney
MIT  IST  SAIS  Internet Design  Development Team


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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 breaks sidebar

[Diane Ross]

Follow up: I found the problem. It was an extra main div showing up in the
sidebar. After removing it, everything works as expected. I swear I did not
put the div there. The change happened after I used GoLive to create a
template area. It had added another main div in the content area and I
caught that one, but the one in the sidebar was missed by me.

I did change the image size, but that did not fix the problem nor did
David's suggestion to the CSS. They did help over all so I appreciate the
changes.

BTW, my messages are taking days to show up on the list. Is anyone else
experiencing this problem?

-- 
Diane 

On 12/31/06 9:22 AM, ~davidLaakso [EMAIL PROTECTED] wrote:


 Diane Ross wrote:
 I made a size change to my right sidebar and now Firefox shows only a part
 of the content. Other Mac browsers are OK with the changes. I have no clue
 as to what to even check. Help is gratefully appreciated.
 
 In IE7, there is no spacing between some of the side boxes.
 
 http://www.test.entourage.mvps.org/pages/page3.html
 
 
 I thought my message to the list was lost since it didn't post for two days
 and I received a not able to deliver message so I changed the files I had
 uploaded. I had combined three css files into one named Entourage. Now I'm
 back to three.  :-)  Is there any benefit from one file over multiple css
 files?
 
 On 12/31/06 9:22 AM, ~davidLaakso [EMAIL PROTECTED] wrote:
 ul {padding: 0/* 0 1em 5em*/ } zero out padding on ul
 #footer { clear: both;} added this ruleset
 #left { /*margin-left: 8px; */ }deleted
 #main { /*padding-right: 20px; padding-left: 20px; */}deleted
 Shorten the long-word so it will hold at text-size largest in ie
 from:liDuplicates..remove or create/li
 to:liDuplicates: remove or create/li

-- 
Diane 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/