Re: [css-d] Cross-browser problems with submit button/graphic
Philippe and Gail, thanks for your helpful suggestions. Philippe's src="blank.gif" (using a blank image) worked for me. Solved the problems in both Safari and IE. Gail, for some reason, the browser ignores any background-position instructions I use in the stylesheet. Further, Firebug shows a background position of "0 0" when I try to position a background image through the stylesheet. I have no idea why this occurs. I resorted to positioning the image with style settings in the html. Since it works, I'll have to stick with it. Thanks again. On 6/16/11 7:32 PM, Philippe Wittenbergh wrote: On Jun 17, 2011, at 6:27 AM, RePost wrote: I'm using a css sprite image for the submit button in two forms on this site. It displays fine in Firefox, but not so well in Safari and IE. Safari is displaying the text "Submit" in the area designated for the submit images. IE is just displaying the image oddly. I've removed the "title" and "alt" portions of the submit button form text, so they look something like this: Here's the site. Forms are at upper right: http://bit.ly/eYGXbo Anything I can do to correct the problem? Dunno about IE (haven't checked…). Safari is trying to be user friendly. You don't have a 'src=""' for the image and the (required) alt attribute is missing; Safari then adds an alt attr. on its own (similarly as what it does when a input type="submit" is missing a value). Either use a or if you must use an and have that :hover/:active dance, give it a 'src' to a blank, transparent image. Anyway, not really a CSS issue. Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@lists.css-discuss.org] 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 [css-d@lists.css-discuss.org] 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] Dead zone beneath linked images
Actually, Philippe, it wasn't the horrid Facebook Like button/box at the top of the sidebar that was the culprit, but the horrid recurring Facebook Like/Recommend button in the metadata area beneath the headline of each entry in the content div. This was a tough and exasperating bit of business. Thanks to all for your help -- Chetan, Claude, David, Philippe, et al! On 4/21/11 2:57 AM, Philippe Wittenbergh wrote: On Apr 21, 2011, at 3:56 PM, RePost wrote: Not a div of devil-spawned images, but the Facebook Like Button From Hell. Firebug showed me code for the Like button was far exceeding its boundaries, extending deep into the sidebar. I added "overflow:auto" to my content div to contain the Like button. Oh, I see now... (well not really, I block everything Facebook in my /etc/hosts file ...). That FB button is in a that specifies a width of 450px and covers the side bar (can't click through) - it never aligned with you images on my side anyway (minimum font-size in my browsers). No idea if you can change the width of that iframe or if is script generated. Philippe -- Philippe Wittenbergh http://l-c-n.com/ . __ css-discuss [css-d@lists.css-discuss.org] 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] Dead zone beneath linked images
And the verdict is: Not a div of devil-spawned images, but the Facebook Like Button From Hell. Firebug showed me code for the Like button was far exceeding its boundaries, extending deep into the sidebar. I added "overflow:auto" to my content div to contain the Like button. Thanks for the assistance! On 4/21/11 12:56 AM, RePost wrote: Tried both Claude and Chetan's suggestions with no effect. There's something about those devil-spawned images that causes a dead zone beneath them. I've moved them now above an identical div with identically placed images. They're still causing a dead zone into the top of the lower div. The lower div, meanwhile, creates no such effect. I just don't get it. http://bit.ly/eYGXbo On 4/20/11 11:52 PM, Claude Needham wrote: On Wed, Apr 20, 2011 at 6:00 PM, RePost wrote: I have two floated, linked images in the sidebar, loaded in a div with the class "execphpwidget." (See the two tan images, labeled "About" and "Meet" in sidebar at right, directly above the tabbed menu). There's a dead zone beneath the images. I can add space above or below the images in question, and no dead zone. Set a height for the div or clear the div, and I still have a dead zone. (Try to select Tweets or Tags in the tabbed menu below and you'll see). I found the "dead zone" in firefox 4.0 My first guess to fix the issue you are seeing is to try Chetan's suggestion of using overflow: hidden. If this fails to fix the problem I would poke it with a stick. In this case replace the with a div that has zero margin but a height of 1.45em. There is something about that hr that makes me wonder if it might not be causing some problems. Regards, Claude Needham . __ css-discuss [css-d@lists.css-discuss.org] 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] Dead zone beneath linked images
Tried both Claude and Chetan's suggestions with no effect. There's something about those devil-spawned images that causes a dead zone beneath them. I've moved them now above an identical div with identically placed images. They're still causing a dead zone into the top of the lower div. The lower div, meanwhile, creates no such effect. I just don't get it. http://bit.ly/eYGXbo On 4/20/11 11:52 PM, Claude Needham wrote: On Wed, Apr 20, 2011 at 6:00 PM, RePost wrote: I have two floated, linked images in the sidebar, loaded in a div with the class "execphpwidget." (See the two tan images, labeled "About" and "Meet" in sidebar at right, directly above the tabbed menu). There's a dead zone beneath the images. I can add space above or below the images in question, and no dead zone. Set a height for the div or clear the div, and I still have a dead zone. (Try to select Tweets or Tags in the tabbed menu below and you'll see). I found the "dead zone" in firefox 4.0 My first guess to fix the issue you are seeing is to try Chetan's suggestion of using overflow: hidden. If this fails to fix the problem I would poke it with a stick. In this case replace the with a div that has zero margin but a height of 1.45em. There is something about that hr that makes me wonder if it might not be causing some problems. Regards, Claude Needham . __ css-discuss [css-d@lists.css-discuss.org] 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-d] Dead zone beneath linked images
I have two floated, linked images in the sidebar, loaded in a div with the class "execphpwidget." (See the two tan images, labeled "About" and "Meet" in sidebar at right, directly above the tabbed menu). There's a dead zone beneath the images. I can add space above or below the images in question, and no dead zone. Set a height for the div or clear the div, and I still have a dead zone. (Try to select Tweets or Tags in the tabbed menu below and you'll see). As always, I'd appreciate any suggestions. Thanks. http://bit.ly/eYGXbo __ css-discuss [css-d@lists.css-discuss.org] 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] Stacking divs
Updating the thread:
I abandoned the "stacking divs" effort in favor of absolute/relative
positioning. Worked best for what I needed. Thanks for the responses here.
On 4/10/11 8:39 AM, Chetan Crasta wrote:
Try
#header_topmenu class { position:relative; z-index: 100; }
Regards,
Chetan Crasta
On Sun, Apr 10, 2011 at 10:52 AM, RePost wrote:
I'm attempting to stack two divs in a wrapper at the right side of my
header.
There's another div to the left, and the header is wrapped in a container
div.
My problem is, I can't get the stacked divs to behave. The content doesn't
stay in them and they don't conform to a height setting.
I'd appreciate any suggestions.
Thanks!
http://bit.ly/hLlMwb
__
css-discuss [css-d@lists.css-discuss.org]
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 [css-d@lists.css-discuss.org]
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-d] Fwd: Re: Padded image picks up a:hover background color
Another personal response intended for the list. Forwarding.
Original Message
Subject:Re: [css-d] Padded image picks up a:hover background color
Date: Sat, 09 Apr 2011 08:38:12 -0500
From: RePost
To: "G.Sørtun"
Thanks, Georg!
I finally had to go with this:
#socialbar a {
background: transparent!important;
}
#socialbar img {
margin: 10px 0 0 30px;
}
Otherwise, images insisted on bunching up.
On 4/9/11 2:27 AM, "G.Sørtun" wrote:
On 09.04.2011 06:51, RePost wrote:
I thought I could override the default a:hover background color, but
it's not happening. Test site is here: http://bit.ly/hLlMwb
The simple solution...
#socialbar a {background: transparent!important;}
..but while you're at it you may as well put the margin on the link
instead of on the image...
#socialbar a {background: transparent!important; float: left; margin:
10px 0 0 30px;}
#socialbar a img {margin: 0;}
..thus limit the :hover area to the image itself.
regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
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 [css-d@lists.css-discuss.org]
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-d] Fwd: Re: List items displaying inline; refusing to behave
Accidentally responded personally to Philippe instead of the list.
Forwarding here.
Original Message
Subject:Re: [css-d] List items displaying inline; refusing to behave
Date: Mon, 11 Apr 2011 20:39:55 -0500
From: RePost
To: Philippe Wittenbergh
Philippe:
Thank you!
On 4/11/11 8:11 PM, Philippe Wittenbergh wrote:
On Apr 12, 2011, at 10:03 AM, RePost wrote:
My sidebar includes a tabbed menu. First tab is Popular Posts. You'll see the
list items appear to be running together in an inline fashion.
I'm throwing "display:block" everywhere, but I can't get the list to behave.
I would appreciate any suggestions!
http://bit.ly/eYGXbo
well, they are not 'inline' but floated left.
this in your layout.css causes this:
.usual li {
float:left;
list-style:none outside none;
}
you could add to
#tabs1 li {
display:block;
float: none /*<-- add his */
}
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
.
__
css-discuss [css-d@lists.css-discuss.org]
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-d] List items displaying inline; refusing to behave
Here we go again. My sidebar includes a tabbed menu. First tab is Popular Posts. You'll see the list items appear to be running together in an inline fashion. I'm throwing "display:block" everywhere, but I can't get the list to behave. I would appreciate any suggestions! http://bit.ly/eYGXbo __ css-discuss [css-d@lists.css-discuss.org] 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-d] Stacking divs
I'm attempting to stack two divs in a wrapper at the right side of my header. There's another div to the left, and the header is wrapped in a container div. My problem is, I can't get the stacked divs to behave. The content doesn't stay in them and they don't conform to a height setting. I'd appreciate any suggestions. Thanks! http://bit.ly/hLlMwb __ css-discuss [css-d@lists.css-discuss.org] 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-d] Padded image picks up a:hover background color
No matter what I try, I'm unable to get rid of the background color on hover from a linked image. See the blue Twitter image in the social bar at right in the sidebar. Whether I space the social images with padding or margin, the background color is still filling in the background. I thought I could override the default a:hover background color, but it's not happening. Test site is here: http://bit.ly/hLlMwb I'd appreciate any suggestions! Thanks. __ css-discuss [css-d@lists.css-discuss.org] 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] Tabbed Nav Issues
Felix Miata wrote: > To amplify David's original implication and subsequent response, use of px > for sizing text is an affirmative design choice that whatever text sizes are > acceptable to or preferred by the design's visitors are utterly irrelevant. > Whatever size in px seems most appropriate to you in your own environment > bears little useful relationship what may be appropriate in the environments > of the visitors. > > A corollary is px for setting line height. > http://fm.no-ip.com/auth/line-height-inherit.html demonstrates how it can be > a problem. > Felix, I don't quite get this "Use only for line-height" business proposed at the link you provided. If your "number" is neither percentage nor em nor pixel, what does it represent? __ css-discuss [cs...@lists.css-discuss.org] 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] Wrapper div will not center in IE
Gunlaug Sørtun wrote: > RePost wrote: > >> Only in IE, my maincontainer (wrapper) div appears to be shifting and >> ignoring the tried-and-true "margin: 0 auto;" style. >> > IE/win - all versions from IE6 up - will revert to quirks mode when > there's an HTML comment above the doctype declaration. When in that mode > IE ignore margin-auto centering and all CSS that's unsupported by > versions higher than IE5.5. > > Get rid of that comment. > Georg, that was way too easy for you. This comes about due to my misunderstanding of the WordPress template system. An index page pulls together several other templates, and I'd placed the comment in the index page, above the include for the header template. But enough about that. Thanks for your help! __ 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-d] Wrapper div will not center in IE
Only in IE, my maincontainer (wrapper) div appears to be shifting and
ignoring the tried-and-true "margin: 0 auto;" style.
The only clue I can offer is that I don't have this problem with my blog
in its current format. Although the styles haven't changed appreciably,
the problem only occurs in my WordPress test blog.
Any suggestions?
Thanks.
Test site:
http://dwarfurl.com/9a685
Style sheet:
http://dwarfurl.com/37a99
Here's some of the relevant style:
body {
font-family:Arial, Helvetica, Sans-Serif;
font-size:62.5%;
min-width:926px; /* Prevent background from shifting */
background-color:#CCD2F1; /* matches edge color of background image */
background-image:url(../../../images/bodywrapper-gray-shift.gif);
background-position:center;
background-repeat:repeat-y;
}
#maincontainer{
width: 926px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
background-image:url(../../../images/wrapper-gray.gif); /*Fixes
background on page resize*/
background-position:center;
background-repeat:repeat-y;
}
__
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] Body background image shifting in Firefox 3.01
David Hucklesby wrote: > On Fri, 25 Jul 2008 15:30:59 -0500, RePost wrote: > >> David Hucklesby wrote: >> >>> Yes. You can pre-load background images by including them in the >>> markup at the top of the page BODY. Apply a width=1, height=0 so >>> they don't take up space, and enclose them in a DIV that's positioned >>> "off-left" >>> using your favorite method for doing it. >>> You know what? The simplest solution was to edit 1px of gray into the left edge of the white section (the part that frames my blog's content column) of my body background image. The image still shifts, naturally (Thanks, Firefox 3.01!), but the extra px of gray on the inside left border isn't noticeable. I appreciate the assistance provided by all in this forum. __ 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] Body background image shifting in Firefox 3.01
David Hucklesby wrote: > On Wed, 23 Jul 2008 23:30:57 -0500, RePost wrote: > >> 1. Is there any way I can get the outer wrapper background to load before >> the content? >> The background image in the outer wrapper does not multiply vertically >> (repeat-y) until >> all the content has loaded. This happens in Firefox and not IE. >> >> > > Yes. You can pre-load background images by including them in the > markup at the top of the page BODY. Apply a width=1, height=0 so > they don't take up space, and enclose them in a DIV that's positioned > "off-left" using your favorite method for doing it. > > Because in-line images generally load before those declared in CSS, > this method is pretty effective cross-browser. Just be sure to give > them a dimension so they are in fact downloaded. I find that the > 1-pixel width I used above works pretty well. (Hat-tip to Thierry > for this, from his "TIP" image placement.[1]) > > [1] <http://www.tjkdesign.com/articles/tip_5.asp> > > I have to admit defeat here, David, as this routine appears to be way over my head. I have a 20x2000px background image that I want to repeat horizontally. I'm really not getting how the TIP method will work with this. Also, what do you mean by "off-left"? Float:left? __ 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] Body background image shifting in Firefox 3.01
Correction: That would be multiply horizontally, not vertically. > 1. Is there any way I can get the outer wrapper background to load > before the content? The background image in the outer wrapper does not > multiply vertically (repeat-y) until all the content has loaded. This > happens in Firefox and not IE. > __ 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] Body background image shifting in Firefox 3.01
Philippe Wittenbergh wrote:
> You missed a part of my original answer, I guess…
> set the width of the outer wrapper to something that fit your image,
> and set the margins to '0 auto'.
>
> I suggested
> div {
> width 980px /* eyeballing, the width of your image -- adjust to taste
> but keep it an even number */
> margin: 0 auto;
> background: url(path/to/image.png) 50% 50% repeat-y;
> }
>
> The 980px width is what is needed to show those 'drop-shadow' things.
>
> Philippe
Now I get it! I misunderstood the 980px number as an attempt to estimate
the width of my maincontainer (which is 926px; don't ask me why).
OK, a couple of issues now:
1. Is there any way I can get the outer wrapper background to load
before the content? The background image in the outer wrapper does not
multiply vertically (repeat-y) until all the content has loaded. This
happens in Firefox and not IE.
2. In IE, the layout now pokes through the footer div. I recall
encountering this problem at some point in the design process but don't
remember how I solved it at the time.
Thanks.
Test page with outerwrap div: http://tinyurl.com/5nfdg2
__
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] Body background image shifting in Firefox 3.01
Christopher wrote: > That link don't work, I wanted to check it out. > The link should be working, Christopher. Please try it once again. __ 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] Body background image shifting in Firefox 3.01
Philippe Wittenbergh wrote: > On Jul 24, 2008, at 2:25 AM, RePost wrote: > > >> David Hucklesby wrote: >> >>> I think Philippe is suggesting yet another DIV. Although it sounds >>> like a case of "divitis," I often find a need to add an extra 100% >>> wide DIV around the entire content for IE7's sake. When IE7 is >>> "zoomed" the background-image on BODY does not resize. Putting >>> the background-image on this extra DIV takes care of that bug, too. >>> I missed a key part of David's recommendation -- setting 100 percent width for the background image in the wrapper div. Disappointingly, though, the background image still shifts when used in the wrapper div, just as it shifts when used in the body. Any idea why this might occur? Here's a test page with the outerwrap div, if anyone's interested: http://tinyurl.com/5nfdg2 __ 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] Body background image shifting in Firefox 3.01
David Hucklesby wrote: > I think Philippe is suggesting yet another DIV. Although it sounds > like a case of "divitis," I often find a need to add an extra 100% > wide DIV around the entire content for IE7's sake. When IE7 is > "zoomed" the background-image on BODY does not resize. Putting > the background-image on this extra DIV takes care of that bug, too. > I'm not sure I follow, David. My maincontainer div already wraps around everything. That div has its own background image, which repeats the inner portion of my body background image. When I did apply my body background image to the maincontainer div, the browser displayed only the part that would normally appear inside the layout, and not the border portion. As the body tag exists before any html in the document, I don't see how div formatting would affect anything in relation to the body. What I'm trying to say is, if I want my background image to display its borders beyond the layout, don't I have to apply it to the body instead of a div? Site: http://tinyurl.com/5au66p Style sheet: http://tinyurl.com/6xwzbf Body bg image: http://tinyurl.com/56fcnl Bg image for maincontainer div: http://tinyurl.com/5qwpvj __ 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] Body background image shifting in Firefox 3.01
> Philippe Wittenbergh wrote: >> >> A quick fix that works with some test pages here: >> wrap all of your contents in a and attach the background-image >> to that div. The problem with that is, I designed the body background image to display the shadow border that extends to the right and left sides of my layout. I can solve the shifting problem by removing the body bg image -- but then, no more nice border. In fact, I do have a background image attached to my maincontainer div. That div (which has not shifted), repeats the inner portion of my body background image. I found that this prevents an alignment problem with the body background image that occurred when a visitor would resize the page. __ 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] Body background image shifting in Firefox 3.01
> Philippe Wittenbergh wrote: >> >> A quick fix that works with some test pages here: >> wrap all of your contents in a and attach the background-image >> to that div. The problem with that is, I designed the body background image to display the shadow border that extends to the right and left sides of my layout. I can solve the shifting problem by removing the body bg image -- but then, no more nice border. In fact, I do have a background image attached to my maincontainer div. That div (which has not shifted), repeats the inner portion of my body background image. I found that this prevents an alignment problem with the body background image that occurred when a visitor would resize the page. __ 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] Body background image shifting in Firefox 3.01
Thanks so much, Philippe. The follow-up, naturally, is, anybody got a hack or workaround? Philippe Wittenbergh wrote: > Known Bug. > https://bugzilla.mozilla.org/show_bug.cgi?id=446284 > > (it is actually a very old isue that has become more visible due to a > checkin between Fx3.0 and Fx 3.01. In some circumstances it is also > visible in WebKit) > __ 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-d] Body background image shifting in Firefox 3.01
I've noticed that my body background image is shifting about 1px to the
left in Firefox 3.01 only, causing some white space to show on the left
border.
Has anyone else experienced a similar problem? This did not occur in
previous versions of FF, or in any other browser.
Site: http://tinyurl.com/5au66p
Style sheet: http://tinyurl.com/6xwzbf
Body bg image: http://tinyurl.com/56fcnl
Relevant portion of CSS:
body {
font-family:Arial, Helvetica, Sans-Serif;
font-size:62.5%;
min-width:926px; /* Prevent background from shifting */
background-color:#CCD2F1; /* matches edge color of background image */
background-image:url(../images/bodywrapper-gray.gif);
background-position:center;
background-repeat:repeat-y;
}
__
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/
