Re: [css-d] :: Background Image Problem ::

2008-10-22 Thread Chris Akins
I'm not sure I have the fix, but thought I'd point out a couple things
that might help:

HTML and CSS have validation errors.  There is a closing /ol tag in
the billboard div that doesn't appear to be opened anywhere.  That
might be the cause of some errors.

Also - in my IE6, the three promo images are on two lines, but in
Firefox they are all on the same line.  Would that have anything to do
with the form issue?

Chris A.

On Tue, Oct 21, 2008 at 11:08 AM, Amrinder [EMAIL PROTECTED] wrote:
 Hi!

 I am encountering strange bg image problem in IE6.
 Here at www.rgroup.in the text box saying 'Your name' (query form) is 
 overlapped by something which restricts to select it and all the four headers.

 Please help!

 Thx in advance
 Regards,
 Amrinder
 www.awayback.com
 __
 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] :: Background Image Problem ::

2008-10-22 Thread David Hucklesby
On Tue, 21 Oct 2008 21:38:38 +0530, Amrinder wrote:
 Hi!

 I am encountering strange bg image problem in IE6. Here at www.rgroup.in the 
 text box
 saying 'Your name' (query form) is overlapped by something which restricts to 
 select it
 and all the four headers.

 Please help!


Not much help here, but disabling JavaScript allows me to select the
input on my standalone IE 6.

What do you mean by and all the four headers?

Cordially,
David
--

__
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] :: Background Image Problem ::

2008-10-22 Thread David Hucklesby
On Tue, 21 Oct 2008 21:38:38 +0530, Amrinder wrote:
 Hi!

 I am encountering strange bg image problem in IE6. Here at www.rgroup.in the 
 text box
 saying 'Your name' (query form) is overlapped by something which restricts to 
 select it
 and all the four headers.


P.S. To fix it by turning off JavaScript, I used the RNIB Surf Right toolbar:

 
http://www.rnib.org.uk/xpedio/groups/public/documents/PublicWebsite/public_downloads.hcsp

If that URL breaks, try http://kissa.be/XV

Cordially,
David
--

__
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] background image problem in IE6

2007-01-16 Thread Brian Riley
Coral S. wrote:
 Hello,

 I'm new to the group, so hello to everyone.

 I recently came across this wonderful horizontal drop-down menu 
 http://www.sperling.com/examples/menuh/ by Ted Sperling, and was attempting 
 to alter it a bit to allow for rollover images instead of simply colors. 
 What I have so far works wonderfully in all browsers except IE6.  The issue 
 in IE6 is that the parent (menuh a.parent) and top-parent (menuh 
 a.top_parent) div images show up only in the hover state (I changed the 
 original code so that menuh a.top_parent and menuh a.top_parent:hover are 
 separate images), and for some reason they are hidden underneath the menuh 
 (menuh a) image in the rested state.  In IE7, FF, Opera etc it all works 
 great, but for some reason it's stubborn in IE6.  The link to it is here:

 http://www.swanflighthaven.com/Summer_Breeze/dropdownmenu%20test.html

 http://www.swanflighthaven.com/Summer_Breeze/dropdown%20menu.css


 The screenshots for the comparison between IE6 and IE7 are here:

 http://www.swanflighthaven.com/Summer_Breeze/menu.html

 I emailed Ted about this and he suggested assigning height values or 
 z-indexes to get IE6 to put the parent and top-parent background images on 
 top, but I tried it to no avail (admittedly I may not be doing that 
 correctly).  He also suggested you fine people if I continued to have 
 trouble.  Any help you could offer on this issue would be greatly 
 appreciated.  Please let me know if I should clarify anything.

 Regards,
 Coral 

 __
 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/



   
I think that you're running into a mysterious class bug in IE6 that was 
discussed here a while back. When you assign a style to some set of tags 
and then give some of the tags a class so that you can alter that style, 
IE6 freaks out and rejects the class all together. I'm not sure if IE6 
does this universally or just when it feels like it, but I had the same 
problem as you. To fix it, in the CSS file, instead of referring to them 
#menuh a.parent and #menuh a.top_parent, refer to them as 
#menuh-container a.parent and #menuh-container a.top_parent (i.e., 
use the parent div).

I think that others have had success by just referring to the tag names 
plus class names and leaving out the container div, but I haven't tried 
that.

Good luck!
Brian

-- 
Brian Riley
http://www.seventysevendesigns.com

__
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] background image problem in IE6

2007-01-16 Thread Coral S.
To fix it, in the CSS file, instead of referring to them #menuh a.parent 
and #menuh a.top_parent, refer to them as #menuh-container a.parent and 
#menuh-container a.top_parent (i.e.,  use the parent div).

Hi Brian,

Thank you so much for your reply.  I tried what you suggested, and 
unfortunately it looks the same in IE6 as it did before.  It's possible I 
implemented your suggestion incorrectly, but from what I can tell it didn't 
work for me.  You can check out the code to see if there are any errors 
here:

http://www.swanflighthaven.com/Summer_Breeze/dropdown%20menu.css

Any other insights would be very much appreciated. :)

-Coral

__
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] background image problem in IE6

2007-01-16 Thread Brian Riley
Coral S. wrote:
 To fix it, in the CSS file, instead of referring to them #menuh a.parent 
 and #menuh a.top_parent, refer to them as #menuh-container a.parent and 
 #menuh-container a.top_parent (i.e.,  use the parent div).

 Hi Brian,

 Thank you so much for your reply.  I tried what you suggested, and 
 unfortunately it looks the same in IE6 as it did before.  It's possible I 
 implemented your suggestion incorrectly, but from what I can tell it didn't 
 work for me.  You can check out the code to see if there are any errors 
 here:

 http://www.swanflighthaven.com/Summer_Breeze/dropdown%20menu.css

 Any other insights would be very much appreciated. :)

 -Coral
   
I actually just meant that you change the references to a.parent and 
a.top_parent only. Everything else, including the references to a 
(no class), can be the same (#menuh a or whatever). Not sure if it'll 
make a difference, but it's worth a try.

Take a look at this page for more details on this bug. One commenter 
offers another, though slightly more complicated, solution.
http://www.quirksmode.org/bugreports/archives/2005/09/IE6_Multi_Class_Bug.html

-- 
Brian Riley
http://www.seventysevendesigns.com

__
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] background image problem in IE6

2007-01-16 Thread Coral S.
 I actually just meant that you change the references to a.parent and 
 a.top_parent only. Everything else, including the references to a (no 
 class), can be the same (#menuh a or whatever). Not sure if it'll make a 
 difference, but it's worth a try.

 Take a look at this page for more details on this bug. One commenter 
 offers another, though slightly more complicated, solution.
 http://www.quirksmode.org/bugreports/archives/2005/09/IE6_Multi_Class_Bug.html

Thanks, Brian.  I actually only had container on parent and top_parent, but 
when it didn't work I tried putting container on everything lol.  Which as 
you saw didn't work either.  I changed it back and the result was the same 
unfortunately.  I'll check out the link and see if it will help.  Thanks 
again. :)

-Coral

__
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] background image problem

2006-10-22 Thread Zoe M. Gillenwater
Tee G. Peng wrote:
 Hi, I am doing a page that I can't change the markup and source order  
 (think CSS zen garden!),  and is facing a problem with background image.

 The markup looks like so

 div id=wrap
   divcontent goes here /div
   divmore content ... /div

   div id=footer pwith background image in the footer div /p/div

 /div

 CSS:

 #wrap {
   background: url(images/content-bg.png) repeat-y ;
   width:914px;;
   margin:80px auto 0 auto;}

 #footer {
   clear: both;background: url(images/ftr-bg.png) no-repeat left bottom;
   text-align: center;}

 The wrapper background image goes all the way down which is great  
 but  it goes beyond the footer. I need the footer image sticks to the  
 bottom.
   

You need the footer to stick to the bottom of the wrapper? In that case, 
position the wrapper relatively, then position the footer absolutely and 
give it a bottom value of 0. Full CSS at:
http://scott.sauyet.com/CSS/Demo/FooterDemo1.html
http://solardreamstudios.com/learn/css/footerstick/
(both the same)

There is a less buggy way of making a footer stick, but it requires 
placing the footer outside the wrapper, so it won't work for you. The 
method referenced above should work for most cases, so I wouldn't worry 
too much about it.

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

__
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] background image problem in Firefox

2006-09-18 Thread Chris Williams
Hard to tell what image you are referring to.  The site looks the same to me
in Safari and FireFox on the Mac.

Except of course the word architect is misspelled in both menus, top and
bottom :)

 From: David Bailey [EMAIL PROTECTED]
 Subject: [css-d] background image problem in Firefox

 I would appreciate help in finding out why I can't get the background
 image to display properly in Firefox (both Mac and Win). It renders
 fine in Safari and Opera (Mac) and in IE 6 (Win). If anyone is able
 to check it in IE 7 I'd appreciate that?

__
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] background image problem in Firefox

2006-09-18 Thread ~davidLaakso
David Bailey wrote:
 Hi

 I would appreciate help in finding out why I can't get the background  
 image to display properly in Firefox (both Mac and Win). It renders  
 fine in Safari and Opera (Mac) and in IE 6 (Win). If anyone is able  
 to check it in IE 7 I'd appreciate that?

 page:
 http://www.dab-hand.co.nz/testbay/eurovision/index.php

 css:
 http://www.dab-hand.co.nz/testbay/eurovision/styles/layout.css

 The css validates okay, but must be a FF quirk?

 David
   

XP
This image *pg_bkg_grfk.jpg* is clipped in mozilla (only the top 36px of 
the image shows):
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12) Gecko/20050915
I do not know what is causing this.

There seems to be no problem in these browsers (the page appears identical)
ie/6.0
opera/9.01
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.7) 
Gecko/20060909 Firefox/1.5.0.7
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.4) 
Gecko/20060516 SeaMonkey/1.0.2

aside: how come the 185px horizontal scroll bar at 1280 in all browsers?


Regards,
~dL

-- 
http://chelseacreekstudio.com/

__
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] background image problem in Firefox

2006-09-18 Thread David Bailey
Hi Chris,

On 19/09/2006, at 12:08 PM, Chris Williams wrote:

 Hard to tell what image you are referring to.  The site looks the  
 same to me
 in Safari and FireFox on the Mac.
It is the pg_bkg_grfk.jpg (a door frame and handle that should angle  
down to the bottom of the page on the left hand side of the content  
area and finish just above the footer.

 Except of course the word architect is misspelled in both menus,  
 top and
 bottom :)
Thanks. I've been concentrating on layout, and not so much on the  
actual content.

David

 I would appreciate help in finding out why I can't get the background
 image to display properly in Firefox (both Mac and Win). It renders
 fine in Safari and Opera (Mac) and in IE 6 (Win). If anyone is able
 to check it in IE 7 I'd appreciate that?


__
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] background image problem in Firefox

2006-09-18 Thread David Bailey
Thanks David...


 I would appreciate help in finding out why I can't get the background
 image to display properly in Firefox (both Mac and Win). It renders
 fine in Safari and Opera (Mac) and in IE 6 (Win). If anyone is able
 to check it in IE 7 I'd appreciate that?
 page:
 http://www.dab-hand.co.nz/testbay/eurovision/index.php
 css:
 http://www.dab-hand.co.nz/testbay/eurovision/styles/layout.css

 XP
 This image *pg_bkg_grfk.jpg* is clipped in mozilla (only the top  
 36px of
 the image shows):
 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12) Gecko/ 
 20050915
 I do not know what is causing this.
Yes, I hadn't tried Mozilla, but you are right. Thanks for the other  
checks, too. This is the problem I'm asking the group as to what it  
could be. I'm really only a learner in CSS, and stumped as to what it  
could be.

 There seems to be no problem in these browsers (the page appears  
 identical)
 ie/6.0
 opera/9.01
 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.7)
 Gecko/20060909 Firefox/1.5.0.7
 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.4)
 Gecko/20060516 SeaMonkey/1.0.2

 aside: how come the 185px horizontal scroll bar at 1280 in all  
 browsers?
You are right. I hadn't even noticed that as I've always just worked  
within the window which which stretches to whatever size. I've been  
testing for users that may increase their font size. I'll have to  
have a look, but if anyone can see what the issue is, you are most  
welcome to let me know! :-)
David

__
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] background image problem in Firefox

2006-09-18 Thread francky
~davidLaakso wrote:

David Bailey wrote:
  

Hi

I would appreciate help in finding out why I can't get the background  
image to display properly in Firefox (both Mac and Win). It renders  
fine in Safari and Opera (Mac) and in IE 6 (Win). If anyone is able  
to check it in IE 7 I'd appreciate that?

page:
http://www.dab-hand.co.nz/testbay/eurovision/index.php

css:
http://www.dab-hand.co.nz/testbay/eurovision/styles/layout.css

The css validates okay, but must be a FF quirk?

David
  



XP
This image *pg_bkg_grfk.jpg* is clipped in mozilla (only the top 36px of 
the image shows):
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12) Gecko/20050915
I do not know what is causing this.

There seems to be no problem in these browsers (the page appears identical)
ie/6.0
opera/9.01
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.7) 
Gecko/20060909 Firefox/1.5.0.7
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.4) 
Gecko/20060516 SeaMonkey/1.0.2

aside: how come the 185px horizontal scroll bar at 1280 in all browsers?

Regards,
~dL
  

Hi David's,
The horizontal scrollbar is due to the padding-left in the #content, 
which has also a {width: 100%;}.
This is clipping the bg-img too, I think. A margin-left for the 
#content-left can solve it.
The .separatorInvisible is not working in FF and others, because of the 
{ height: 0; }, then it is not present. You can give it a height of 1px 
and a negative margin-bottom of -1px, then the visual result is the 
same: no space is eaten.
IMO it's not a FF quirk: with proper css FF is fine, and IE needs a 
correction. ;-)

All together: see testpage 
http://home.tiscali.nl/developerscorner/css-discuss/test-eurovision.htm.
The results in some main browsers are savesound here in 
browsershots.org 
http://browsershots.org/screenshots/56a099e7c1e1881f3c2dc81b5bfc48e7/. 
:-)

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] background image problem in Firefox

2006-09-18 Thread David Bailey

 Hi

 I would appreciate help in finding out why I can't get the  
 background
 image to display properly in Firefox (both Mac and Win). It renders
 fine in Safari and Opera (Mac) and in IE 6 (Win). If anyone is able
 to check it in IE 7 I'd appreciate that?
 page:
 http://www.dab-hand.co.nz/testbay/eurovision/index.php
 css:
 http://www.dab-hand.co.nz/testbay/eurovision/styles/layout.css

 XP
 This image *pg_bkg_grfk.jpg* is clipped in mozilla (only the top  
 36px of
 the image shows):
 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12) Gecko/ 
 20050915
 I do not know what is causing this.

 There seems to be no problem in these browsers (the page appears  
 identical)
 ie/6.0
 opera/9.01
 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.7)
 Gecko/20060909 Firefox/1.5.0.7
 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.4)
 Gecko/20060516 SeaMonkey/1.0.2

 aside: how come the 185px horizontal scroll bar at 1280 in all  
 browsers?

 Regards,
 ~dL

 Hi David's,
 The horizontal scrollbar is due to the padding-left in the #content,
 which has also a {width: 100%;}.
 This is clipping the bg-img too, I think. A margin-left for the
 #content-left can solve it.
 The .separatorInvisible is not working in FF and others, because of  
 the
 { height: 0; }, then it is not present. You can give it a height of  
 1px
 and a negative margin-bottom of -1px, then the visual result is the
 same: no space is eaten.
 IMO it's not a FF quirk: with proper css FF is fine, and IE needs a
 correction. ;-)

 All together: see testpage
 http://home.tiscali.nl/developerscorner/css-discuss/test- 
 eurovision.htm.
 The results in some main browsers are savesound here in
 browsershots.org
 http://browsershots.org/screenshots/ 
 56a099e7c1e1881f3c2dc81b5bfc48e7/.
 :-)

 Greetings,
 francky

Hi Franky,

Thanks for all your effort! That is most helpful. I'll get to and  
apply your recommendations, which obviously work from your testpage.  
I also need to think about why these do what they do. For instance,  
why 100% width can't have padding, which I thought was possible as I  
understood padding to be internal content. I'll have to do a bit more  
reading!

You are no doubt right about FF. I shouldn't have assumed!

Thanks again for all your help!
David

__
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] background image problem in Firefox

2006-09-18 Thread ~davidLaakso
David Bailey wrote:
 Thanks David...

   
 I would appreciate help in finding out why I can't get the background
 image to display properly in Firefox (both Mac and Win). It renders
 fine in Safari and Opera (Mac) and in IE 6 (Win). If anyone is able
 to check it in IE 7 I'd appreciate that?
 page:
 http://www.dab-hand.co.nz/testbay/eurovision/index.php
 css:
 http://www.dab-hand.co.nz/testbay/eurovision/styles/layout.css
   
 XP
 This image *pg_bkg_grfk.jpg* is clipped in mozilla (only the top  
 36px of
 the image shows):
 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12) Gecko/ 
 20050915
 I do not know what is causing this.
 
 Yes, I hadn't tried Mozilla, but you are right. Thanks for the other  
 checks, too. This is the problem I'm asking the group as to what it  
 could be. I'm really only a learner in CSS, and stumped as to what it  
 could be.
   
 There seems to be no problem in these browsers (the page appears  
 identical)
 ie/6.0
 opera/9.01
 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.7)
 Gecko/20060909 Firefox/1.5.0.7
 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.4)
 Gecko/20060516 SeaMonkey/1.0.2

 aside: how come the 185px horizontal scroll bar at 1280 in all  browsers?
 
The massive h-scroll bar was due to padding on #content.
Additionally, there were a few other contributing factors.
You'll see the changes noted on this file 
http://www.chelseacreekstudio.com/arch.html.
I regret that I did not find what is causing Mozilla/5.0 (Windows; U; 
Windows NT 5.1; en-US; rv:1.7.12) Gecko/
to block the image*pg_bkg_grfk.jpg.*

Anyone?
Best
~dL

-- 
http://chelseacreekstudio.com/

__
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] background image problem in Firefox

2006-09-18 Thread francky
David Bailey wrote:


 Hi

 I would appreciate help in finding out why I can't get the  background
 image to display properly in Firefox (both Mac and Win). It renders
 fine in Safari and Opera (Mac) and in IE 6 (Win). If anyone is able
 to check it in IE 7 I'd appreciate that?
 page:
 http://www.dab-hand.co.nz/testbay/eurovision/index.php
 css:
 http://www.dab-hand.co.nz/testbay/eurovision/styles/layout.css


 XP
 This image *pg_bkg_grfk.jpg* is clipped in mozilla (only the top  
 36px of
 the image shows):
 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12) Gecko/ 
 20050915
 I do not know what is causing this.

 There seems to be no problem in these browsers (the page appears  
 identical)
 ie/6.0
 opera/9.01
 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.7)
 Gecko/20060909 Firefox/1.5.0.7
 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.4)
 Gecko/20060516 SeaMonkey/1.0.2

 aside: how come the 185px horizontal scroll bar at 1280 in all  
 browsers?

 Regards,
 ~dL

 Hi David's,
 The horizontal scrollbar is due to the padding-left in the #content,
 which has also a {width: 100%;}.
 This is clipping the bg-img too, I think. A margin-left for the
 #content-left can solve it.
 The .separatorInvisible is not working in FF and others, because of  the
 { height: 0; }, then it is not present. You can give it a height of  1px
 and a negative margin-bottom of -1px, then the visual result is the
 same: no space is eaten.
 IMO it's not a FF quirk: with proper css FF is fine, and IE needs a
 correction. ;-)

 All together: see testpage
 http://home.tiscali.nl/developerscorner/css-discuss/test- 
 eurovision.htm.
 The results in some main browsers are savesound here in
 browsershots.org
 http://browsershots.org/screenshots/ 
 56a099e7c1e1881f3c2dc81b5bfc48e7/.
 :-)

 Greetings,
 francky

 Hi Franky,

 Thanks for all your effort! That is most helpful. I'll get to and  
 apply your recommendations, which obviously work from your testpage.  
 I also need to think about why these do what they do. For instance,  
 why 100% width can't have padding, which I thought was possible as I  
 understood padding to be internal content. I'll have to do a bit more  
 reading!

 You are no doubt right about FF. I shouldn't have assumed!

 Thanks again for all your help!
 David

Reading stuff? A good start:

* http://www.w3.org/TR/CSS21/box.html
* http://www.w3.org/TR/CSS21/visuren.html
* and from the css-d Wiki: http://css-discuss.incutio.com/?page=BoxModel

Now I've to read my own advise! ;-)
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] background image problem in Firefox

2006-09-18 Thread David Bailey


 I would appreciate help in finding out why I can't get the background
 image to display properly in Firefox (both Mac and Win). It renders
 fine in Safari and Opera (Mac) and in IE 6 (Win). If anyone is able
 to check it in IE 7 I'd appreciate that?

 page:
 http://www.dab-hand.co.nz/testbay/eurovision/index.php


 Works fine in recent browsers: Safari 2.0, Firefox 1.5 and newer,  
 Opera 9.
 Older version(s) of Gecko (Firefox 1.0, Mozilla 1.7.13) have a  
 problem with clearing your floated blocks.
 Your div class=separatorInvisible isn't really clearing, because  
 it is empty, sort of.
 Add a non-breaking character in there, and it will work correctly
 div class=separatorInvisible#160;!-- x --/div

 (Or use another technique to contain your floats.)

Thanks, Philippe.
I have used this technique from a book i've been using (Web  
Designer's Reference, by Craig Grannell). He doesn't seem to us the  
non-breaking character in his sample. What other techniques are there  
to contain floats? Can you point me in the right direction?

David

__
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/