Re: [css-d] how to get rid of scroll bar?
Hi Bill, The body width is not specified. It is by default 100% of the viewport minus some margin pixels, depending on browser. So on my 1280px wide screen, in Firefox 3, the width of the body was 1264px as by default the body element has margin: 8px; according to Firebug. In IE6 this default is margin: 15px 10px; according to IE Developer Toolbar. Basically there's no need to give it a certain width unless you want a fixed size layout. In your case the problem resides in that those DIVs, that I mentioned about in my previous email, act just like the body element, or any other block element. They try to span 100% of the viewport by default. By positioning them relatively with a large left offset you're pushing them to the right without changing their default width, thus the scrollbar. Here's a little screenshot that shows exactly how one of those DIVs is pushed to the right: http://amenthes.110mb.com/css-d.png Regarding the float. You should make it a try on your design to see how it works. At first it may blow it up completely but it is fundamental to understand floating in CSS. In order to float an element a float:left; or float:right; declaration is all you need, no positioning required. But, as I said, you'll also need a display:inline; for IE6 to behave as expected. Hope that helps. Cheers, Ionut On Tue, Nov 4, 2008 at 5:09 PM, Bill Walton <[EMAIL PROTECTED]> wrote: > Hi Ionut, > > Ionut Gabriel Stan wrote: >> Bill Walton wrote: >> > >> > I can't figure out why I have a horizontal scroll bar at > http://www.shopkeepers-r.us or how to get rid of it. The current plan is > for the browser window to be maximized with the screen resolution set at > 1024x768. I'd sure appreciate help. Resource pointers that would help me > understand why this is happening would _really_ be appreciated. >> >> It's because of these elements: >> >> #customer_search_form, >> #walkin_customer_button, >> #purchase_return_button >> >> ...and maybe others. >> >> The explanation is that you positioned them relatively >> with a large left offset but forgot to change them >> the width value which right now is 100% of the body >> width -> 1264px in FF3. > > Thank you very much for this. One big question... how / where is the body > width specified? I thought it might have to do with body width and went > through all the CSS (I think) without finding it. Maybe I'm looking for the > wrong thing? >> >> My advice is to float them left instead of positioning >> them relatively. > > I'll try this, but I thought that an element had to be positioned relative > in _order_ to float it. Wrong? > >> If you float them left, don't forget to >> also add a display:inline; after the float: left; declaration. >> It's for Internet Explorer's double margin floating bug[1]. >> >> [1] http://www.positioniseverything.net/explorer/doubled-margin.html > > The best news is that this _only_ has to be styled for FF ;-) > > Thanks very much for your help. I appreciate it! > > Best regards, > Bill > > __ 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] how to get rid of scroll bar?
Bill Walton wrote: > Greetings! > > I can't figure out why I have a horizontal scroll bar at > http://www.shopkeepers-r.us or how to get rid of it. The current plan is for > the browser window to be maximized with the screen resolution set at > 1024x768. I'd sure appreciate help. Resource pointers that would help me > understand why this is happening would _really_ be appreciated. > > TIA, > Bill > __ > 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/ > > Hi Bill, It's because of these elements: #customer_search_form, #walkin_customer_button, #purchase_return_button ...and maybe others. The explanation is that you positioned them relatively with a large left offset but forgot to change them the width value which right now is 100% of the body width -> 1264px in FF3. My advice is to float them left instead of positioning them relatively. If you float them left, don't forget to also add a display:inline; after the float: left; declaration. It's for Internet Explorer's double margin floating bug[1]. Cheers, Ionut [1] http://www.positioniseverything.net/explorer/doubled-margin.html __ 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] li:hover for IE6
You may want to "give it layout" in an IE6 specific stylesheet with something
like:
#elem a:link, #elem a:visited {
display:inline-block;
}
#elem a:link, #elem a:visited {
display:block;
}
I know it sounds stupid but worked for me for this same problem.
More info here: http://www.satzansatz.de/cssd/onhavinglayout.html
And here: http://haslayout.net/haslayout
- Original Message
From: Sohail Aboobaker <[EMAIL PROTECTED]>
To: Adam Ducker <[EMAIL PROTECTED]>
Cc: css-d@lists.css-discuss.org
Sent: Friday, July 11, 2008 12:27:57 AM
Subject: Re: [css-d] li:hover for IE6
Hi,
I tried that but it only changes the background for the length of the text
of the tag. I tried display:block. Am I missing something?
Regards,
Sohail
On Thu, Jul 10, 2008 at 5:23 PM, Adam Ducker <[EMAIL PROTECTED]> wrote:
> Sohail Aboobaker wrote:
>
>> Hi,
>>
>> It must a really newbie question but is li:hover doesn't behave correctly
>> in
>> IE. The following in the stylesheet does not change the background color
>> in
>> IE where it works fine with firefox.
>>
>> #secnavul li.hover {
>> background-color:#B5761C;
>> text-decoration: none;
>> }
>>
>> The color doesn't change in IE. Same style when applied to " #secnavul li
>> a:hover" seems to work fine in IE and Firefox.
>>
>> Is there a workaround?
>>
>> Also, background images with .png are not supported in IE6. Is this true?
>>
>> Regards,
>> Sohail Aboobaker.
>> __
>> 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/
>>
>>
>>
>>
> Sohail:
>
> IE 6 only supports :hover for A tags. It should be an easy workaround to
> simply put an A tag inside the LI and apply your styles that way. Maybe
> other readers can come up with a quick example.
>
> -Adam Ducker
>
__
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/
__
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] stick to bottom
Here's some info on the mysterious gap: http://developer.mozilla.org/en/docs/Images%2C_Tables%2C_and_Mysterious_Gaps Daniel Kessler <[EMAIL PROTECTED]> wrote: I have added a side image to my left column (2-column format). I cannot get it to stick to the footer black bar. Also, when I added it, a gap appeared between the content and the header. Any help on making it stick to the footer bar and the gap would be appreciated. -- Daniel Kessler University of Maryland College Park School of Public Health 3302E HHP Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ 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/ __ 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/
