Re: [css-d] Background image on body appears to be in viewport or HTML
Hi - I think you have to give it a position and include a z-index
instruction to tell it to put the image at the back, eg
background-attachment: fixed;
background-position: 50% 60px;
margin: 30px 0px 0px 0px;
z-index: 1;
}
That, above, is taken from a very old style sheet; I wouldn't use pixels
doing this now.
Rachel
On 09/02/2014 19:02, Tim Dawson wrote:
I've been playing around with a few menu design ideas, and mocked up a
site to try them out. The menus are OK as far as they go, but I'm
having trouble with a background image.
I have been trying to set up a background image in the body (or in
body class='plain'), but when I do so it appears outside the body,
as if it were attached to the viewport or perhaps the HTML. If I move
the background image to appear in the header there's no problem.
I've tried several variants without success.
CSS is like this:
body {
background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;
margin: 0 auto;
width: 100%;
max-width: 900px;
padding: 0;
}
body.plain {
max-width: 900px;
border: 0;
border: 1px dashed red; /*(temporary)*/
border-radius: 5px;
}
div#outer {
/*background-color: #DFEFFF; */
width: 100%;
margin: 0 auto;
padding: 0.25em 0.25em;
padding: 0;
}
/* HEADER */
header#banner {
/* when the background image is set here, all is well */
/*background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;*/
margin-bottom: 1em;
width: 100%;
float: left;
}
I can live with the background being in the header if necessary, but
I would like to know why it doesn't work correctly in the body. I
suspect it may be very simple, but I can no longer see the wood for
the trees. Any suggestions, please ?
It can be seen at http://www.webadit.co.uk/newhmi
Tim Dawson
__
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] CSS-only lightbox
Hi list I have looked on the web for instances of a lightbox done only with CSS but all those I found seem to have to use a small amount of javascript. Does anyone know of a CSS-only way of doing this? Ie an image is clickable and when you click on it, a larger version is displayed while the rest of the browser page is veiled in dark grey. To restore the web page, you click anywhere on the screen. Thank you. Rachel __ 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] Lightbox gallery with CSS
Hi list Is it possible to create lightbox effects with images, as on this page (click on any of the images in the main part of the page) http://www.rostock-heute.de/tag-des-offenen-denkmals-2011-rostock-staendehaus-kossfelderstrasse/31597 using only CSS and no javascript? TVIA Rachel __ 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] Chrome background image bug?
Hi list This new page has two background images, one in the body and one (a logo) in a div called #outerwall (ie the wrapper). http://www.st-alfege.org/friends-of-the-park/ Chrome seems to compute the position of the logo differently from other browsers and puts it about 90 pixels too far to the right. I have looked on the web for a fix but not yet found anything that remedies this. The style sheet is here http://www.st-alfege.org/friends-of-the-park/friends-styles/friends.css (Two of the divs not yet in use - those called #east and #north.) Chrome also sticks the footer at the bottom of the screen, which looks v. odd on high resolution screens; and I thought that the solution I found here http://www.cssstickyfooter.com/using-sticky-footer-code.html would keep the footer stuck immediately below #innerwall Would be grateful for any pointers. (The html and css validate OK.) Cheers. Rachel __ 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] Chrome background image bug?
It was Chrome on a Mac - will ask about the version/OS and report back. Rachel At 17:55 02/06/2010, Jack Timmons wrote: On Wed, Jun 2, 2010 at 11:51 AM, Rachel Mawhood rac...@longitude0.co.uk wrote: Hi list What version of Chrome? In 5.0 and Firefox latest (I don't like to keep it open), they look the same. -- -Jack Timmons Blog: http://www.codeacula.com Sandbox: http://www.trotlc.com Twitter: @codeacula Google Chat: Figure it out. C'mon, seriously. __ 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] Background question...
Have you made leftNav and the main areas transparent? background-color: transparent; Rachel At 19:56 02/06/2010, Michael Beaudoin wrote: Thanks to all for the help, but this one is escaping me... I have the following div's: div id=page-wrap div id=header p class=headHeadheader/p pheader copy/p/div div id=content div id=leftNavpleft nav here/p /div div id=mainpmain content here/p/div /div /div and I would like a background behind the content area, but when I put it in the page-wrap, it won't show behind the leftNav and main areas. The leftNav is floated left, and the main is floated right. What am I missing? I'm sure it's head-slapping simple. Thanks, Michael __ 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/ __ 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] Chrome background image bug?
This will approximately position the image; however, it is not a solution.
Thank you - I'll try that substitution -
A real solution would mean re-examining your layout. There is a
pixel width set on the body, and the wrappers are set in em
widths. There is a pixel width set on the body, and the wrappers
are set in em widths.
- but I am happy to re-examine the layout.
I have wondered about mixing up ems and pixels - before css, one
didn't mix up pixels and percentages when laying out a page - but I
have seen other web sites where ems and pixels are used together for
layout. Should one stick to one or the other? On this site, I have
set the body width in pixels because as the page content will mostly
be very short on every page but I guess I should set the other
element widths in pixels too, for the reasons you give.
Rachel
At 21:36 02/06/2010, David Laakso wrote:
Rachel Mawhood wrote:
Hi list
This new page has two background images, one in the body and one (a
logo) in a div called #outerwall (ie the wrapper).
http://www.st-alfege.org/friends-of-the-park/
Chrome seems to compute the position of the logo differently from
other browsers and puts it about 90 pixels too far to the right.
I did not look at it in Chrome.
I imagine all browsers treat it in relatively the same manner.
This will approximately position the image; however, it is not a solution.
#outerwall {
min-height: 100%;
/*background-color: transparent;
background-image: url(fostp-lo.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 87% 1%;
z-index: 2;*/
background: url(../friends-images/fostp-logo.jpg) 797px 10px no-repeat;
}
A real solution would mean re-examining your layout. There is a
pixel width set on the body, and the wrappers are set in em widths.
Those users at 1152 and wider width windows will not see the image
at all; those users at less wide windows than 1024 see the image
partly covered by the content beneath it;
those users who scale-fonts, or have a min-font size setting, will
find the content text expanding both left and right and more or less
doing a number on your layout concept.
Best,
~d
--
desktop
http://chelseacreekstudio.com/
__
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] Chrome background image bug?
I would set everything (except possibly image sizes) in percentages. I must say, I would rather do this. But a page width that looks just as I want it to look at 90 per cent wide on 1024 might not look nice at 1152. For instance, if this web page was stretched wider, then the righthand edge of the background image in the body would probably become visible, detached from the middle (text) part of the page, and the righthand edge of that image is not designed to be visible. Rachel At 21:58 02/06/2010, Chris F.A. Johnson wrote: On Wed, 2 Jun 2010, Rachel Mawhood wrote: ... I have wondered about mixing up ems and pixels - before css, one didn't mix up pixels and percentages when laying out a page - but I have seen other web sites where ems and pixels are used together for layout. Should one stick to one or the other? On this site, I have set the body width in pixels because as the page content will mostly be very short on every page but I guess I should set the other element widths in pixels too, for the reasons you give. I would set everything (except possibly image sizes) in percentages. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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/ __ 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] Keeping the footer at the bottom
This might help
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
and here are two of mine (change the padding etc to suit your
requirements) - I can't remember why one has an underscore in front
of height and one doesn't. :-)
{
clear: both;
margin: 0;
padding: 0 0 3em 20em;
font-size: 70%;
text-align: left;
_height: 1%; /* needed by IE7 for display although does not validate */
}
{
clear: both;
width: 90%;
margin: 0 0 0 .5em;
padding-top: 1em;
font-size: 70%;
color: #a0b3b6;
height: 1%;
border-top: 1px solid #a0b3b6;
}
Rachel
__
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] Can't Adjust Font Size
At 10:35 03/11/2009, Victor Subervi wrote:
Hi;
I have the following in my css:
p {
text-align: left;
font-size: 16px;
margin-left: 10px;
padding-left: 10px;
margin-right: 10px;
padding-right: 10px;
}
I have this in my html:
...
It doesn't matter to what value I change font-size, it remains the same!
What do?
Have you tried stating the font size in ems or as a percentage,
rather than in pixels?
Rachel
__
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] CSS popup windows
This is, I gather, an Accessible way of doing pop-ups that self-close
if one clicks anywhere else on the screen -
a href=yourpage.html
onmouseover=window.open('yourpage.html','popup','width=580,height=400,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=460,top=260');
return falseSubject of your pop up page/a
(alter the dimensions and positioning on the screen to your requirements)
- except if javascript is disabled, and for those you need to include
a Close button
div id=closebutton
a href=index.php title=Clicking on this link will take you back
to the main ISO Journal page, if you don't have JavaScript enabled
onClick=window.close()Close/a
/div
Style your pop-up page and close button as normal with CSS.
Hope this helps
Rachel
At 01:45 25/10/2008, Hayden's Harness Attachment wrote:
If you go to http://www.thepuppyplace.org/page53.html and click on a
link (Alabama for example) popups up a window with text inside. Can
someone suggest a website that I can learn this technique? Or any
other comments? Thank you.
Angus MacKinnon
Infoforce Services
http://www.infoforce-services.com
Faith is the strength by which a shattered world shall emerge into
the light. - Helen Keller
__
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] CSS popup windows
It seems to me that if Javascript is disabled, your popup won't come up
- you're using Javascript to make it come up in the first place ...
I know but it will still behave as an ordinary hypertext link and
bring up the pop-up page contents but in a full screen, which seems
to me to be an elegant degradation.
Rachel
At 19:22 25/10/2008, david wrote:
Rachel Mawhood wrote:
This is, I gather, an Accessible way of doing pop-ups that self-close
if one clicks anywhere else on the screen -
a href=yourpage.html
onmouseover=window.open('yourpage.html','popup','width=580,height=400,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=460,top=260');
return falseSubject of your pop up page/a
(alter the dimensions and positioning on the screen to your requirements)
- except if javascript is disabled, and for those you need to include
a Close button
div id=closebutton
a href=index.php title=Clicking on this link will take you back
to the main ISO Journal page, if you don't have JavaScript enabled
onClick=window.close()Close/a
/div
Style your pop-up page and close button as normal with CSS.
Hope this helps
Rachel
At 01:45 25/10/2008, Hayden's Harness Attachment wrote:
If you go to http://www.thepuppyplace.org/page53.html and click on a
link (Alabama for example) popups up a window with text inside. Can
someone suggest a website that I can learn this technique? Or any
other comments? Thank you.
It seems to me that if Javascript is disabled, your popup won't come up
- you're using Javascript to make it come up in the first place ...
--
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
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/
[css-d] Horizontal alignment of dt and dd in IE 6 and 7
Hi list In Firefox and Safari, the text displays alongside the thumbnails as desired. In IE 6 and 7 it doesn't. I have tried a number of things - negative margin on the dd, adding position:relative, removing text-align - but so far without success. I would appreciate any pointers to fixing this. http://www.internationalorganbuilders.com/archive/index.php The CSS files are here - http://www.internationalorganbuilders.com/styles/archive.css http://www.internationalorganbuilders.com/styles/iso-images.css There's a similar problem on this page (at the foot) http://www.internationalorganbuilders.com/journal/index.php where the text, the titles of the articles in the journal, appear alongside as desired in Firefox and Safari but not in IE 6 and 7. TVIA Rachel __ 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] drop down menus/flash
You've got z-index: 999; on your nav a . Isn't that causing the drop down menu when active to be in front of everything else? Doesn't it need to be something like z-index: 2, and the video and the title above it being z-index: 3 ? Hope this helps. Rachel At 13:01 14/10/2008, Ed Pybus wrote: Hi, Can anyone help me get my dropdown menus coming down in front of a flash player rather than behind it? http://www.slrecords.net/test_videos.php CSS here http://www.slrecords.net/css/master2.css This is my first website so and other comments/improvements/criticisms welcome. Thanks, Ed __ 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] Horizontal alignment of dt and dd in IE 6 and 7
Hi Rachel, I'd float the DTs. Thank you. As a side note, you cannot use DIVs in these DTs, only inline elements are allowed there. I remember now - thank you. If you need them for the border effect around the images, then move that styling to the DTs or simply use the images (via padding/border). -- Regards, Thierry | http://www.TJKDesign.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-d] Admin at css-discuss - is that the right address
Hi to any moderators looking in I sent an e-mail to [EMAIL PROTECTED] yesterday, and perhaps I am being too impatient hoping for a reply today, but in the meantime I thought I'd better check that that is a working/correct e-mail address. My e-mail was asking permission to see if there was any interest here in a Browsercam group purchase (the one I joined last year expires midnight Saturday) using fundable.com to collect pledges. Thanks in advance. Rachel __ 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] Pseudo frame and Skip to Content, unexpected behaviour
Hi Georg Thank you for suggesting that - I tried it but in Firefox on a pc the effect is to push the content 175 pixels down the computer screen below the pseudo frame, ie creating a big empty space between the masthead image and the start of the text. But I am grateful to you, all the same, for giving this so much thought. Kind regards Rachel At 02:27 28/08/2008, Gunlaug Sørtun wrote: Rachel Mawhood wrote: When one uses the keyboard shortcut for Skip to Content (access key S, to a div called content) on this site, http://www.internationalorganbuilders.com/uk/access.php which has a pseudo frame at the top, the browser doesn't seem to recognise that the content div is located further down the browser screen than the pseudo frame div. That's normal for in-page anchors - they always end up on top of the browser-window. The trick is to make the anchor (top of content) run to the top of the browser-window, while the content stays below the pseudo frame div. Several ways to do this - depending on design, but I chose to offset the #content div using the existing 'position: relative' in this example... http://www.gunlaug.no/tos/alien/rm/test_08_0827.html See if it's close enough for comfort, and if so you'll find the altered and added styles commented here... http://www.gunlaug.no/tos/alien/rm/test_08_0827_files/isoconso.css regards Georg -- http://www.gunlaug.no __ 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] IE7, background-image - displays OK on one page but not on the others
Hi Christian
That way I found out that if you delete the
height: 1%; for the footer, the the #fauxframe is displayed:
That worked like a magic charm - I am so relieved - thank you.
However, in IE 6 it resulted in the footer
relocating itself halfway up the page, so I put
back the height but with an underscore in front of it, ie
_height: 1%;/* to fix footer to bottom of screen in IE6 */
and that did return to the footer to the bottom
of the screen in IE6. Somewhere I have read,
though, that using underscore like this is not a
good idea (though it works). When I have time, I could try substituting
* html body div#footer, div#pieddepage, div#seitenende {
height: 1%;
}
which, I understand, is visible only to IE6, not
to IE7, but I don't know if that would be better coding.
Don't aks me why that fotter style influences
the #fauxframe , because honestly I don't know. ;)
CSS is full of things like this, isn't it? I
more than half-expected the solution to be completely illogical :-)
This is a wonderful list; I hope that I can give
back to it as much good as I have derived from it.
Kind regards
Rachel
At 10:27 28/08/2008, Christian Kirchhoff wrote:
Hello,
I started deleting parts of your page (of the html code) and recognized
that after I deleted the footer, the.#fauxframe was displayed. Then I
inserted the footer again and started commenting out its CSS
definitions. That way I found out that if you delete the height: 1%; for
the footer, the the #fauxframe is displayed:
#footer, #pieddepage, #seitenende {
clear: both;
margin: 0;
padding: 0 0 3em 20em;
font-size: 70%;
/*height: 1%;*/ -- comment this out
text-align: left;
}
Don't aks me why that fotter style influences the #fauxframe , because
honestly I don't know. ;)
Best regards,
Christian Kirchhoff
*Directmedia Publishing GmbH* · Möckernstraße 68 · 10965 Berlin
www.digitale-bibliothek.de
AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737
Geschäftsführer: Ralf Szymanski
Rachel Mawhood schrieb:
Hello list
Well, I've tried a number of things - clear:both, zoom:1, min-height,
removing the mask.gif, etc - but nothing so far has worked. I have
Googled the problem, looked at positioniseeverything and other
bug-fixing sites, but without finding the solution. It is so far
completely baffling. I have read that IE7 has a problem rendering
elements with background images whose parent and/or child also
contains a background image (as is the case here, in that the body
has a tiled background image) but it is so strange that, in this
case, it is OK on one page and not on the others.
In MSIE 7 this page displays the image of the trumpets and organ
pipes as intended
http://www.internationalorganbuilders.com/members/index.php
It uses exactly the same css files and template as these pages, on
which the image cannot be made to appear in IE7, eg
http://www.internationalorganbuilders.com/board/index.php
http://www.internationalorganbuilders.com/congress/index.php
The CSS files are here (I've taken the index.html file out of this
directory for the time being)
http://www.internationalorganbuilders.com/styles/isoconsole.css
http://www.internationalorganbuilders.com/styles/iso-images.css
I can't remove the tiled background image in the body because the
client specifically wanted this.
I would be very grateful indeed for any pointers to why the Members
page is OK and the others are not OK with the image at the top of the page.
TVIA
Rachel
__
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/
__
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] IE7, background-image - displays OK on one page but not on the others
Hello list Well, I've tried a number of things - clear:both, zoom:1, min-height, removing the mask.gif, etc - but nothing so far has worked. I have Googled the problem, looked at positioniseeverything and other bug-fixing sites, but without finding the solution. It is so far completely baffling. I have read that IE7 has a problem rendering elements with background images whose parent and/or child also contains a background image (as is the case here, in that the body has a tiled background image) but it is so strange that, in this case, it is OK on one page and not on the others. In MSIE 7 this page displays the image of the trumpets and organ pipes as intended http://www.internationalorganbuilders.com/members/index.php It uses exactly the same css files and template as these pages, on which the image cannot be made to appear in IE7, eg http://www.internationalorganbuilders.com/board/index.php http://www.internationalorganbuilders.com/congress/index.php The CSS files are here (I've taken the index.html file out of this directory for the time being) http://www.internationalorganbuilders.com/styles/isoconsole.css http://www.internationalorganbuilders.com/styles/iso-images.css I can't remove the tiled background image in the body because the client specifically wanted this. I would be very grateful indeed for any pointers to why the Members page is OK and the others are not OK with the image at the top of the page. TVIA Rachel __ 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] Pseudo frame and Skip to Content, unexpected behaviour
Hi list Has anyone else experienced this? When one uses the keyboard shortcut for Skip to Content (access key S, to a div called content) on this site, http://www.internationalorganbuilders.com/uk/access.php http://www.internationalorganbuilders.com/journal/index.php which has a pseudo frame at the top, the browser doesn't seem to recognise that the content div is located further down the browser screen than the pseudo frame div. So, after performing Skip to Content, anyone using a screen reader would have to use the up arrow key to get the top few lines to reappear before they could start reading. I am guessing that there isn't a way of fixing this, of telling the browser to Skip to Content And Then Back Up A Bit? Cheers Rachel __ 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] Too much for MSIE 6 and 7 to cache?
Hello list There is a group of captures on this public page on Browsercam, three pages x MSIE 6 and 7 http://www.browsercam.com/public.aspx?proj_id=385801 and the thing I don't understand at the moment is why sometimes the masthead of the web page does not appear and sometimes it does. The web pages are image-heavy at the top, to fulfil all the client's desires, viz * tiled background image (11 pixels x 542 pixels), 922 bytes * pseudo top frame with background image (900 pixels x 151 pixels), 42kb * pseudo top frame also has a transparent .gif (900 pixels x 151 pixels) overlaying the background image to make it harder to see what dpi that background image is at (there is a reason for this, too complicated to explain), 1.9kb The membership list page has always displayed as it should but the masthead on the others do not always display - is it too much for MSIE 6 and 7 to cache? I am going to try making the transparent .gif narrower and stretch it to 900 pixels with the code. The URLs of the pages themselves are visible on the captures - I didn't want to include them in this posting because this list is indexed by search engines, and after some tidying up this redeveloped site is due to go live in the next few days. TVIA Rachel __ 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] Too much for MSIE 6 and 7 to cache?
Hi David Don't know how your Browsercam session was set to capture, maybe it wasn't waiting long enough every time before doing the capture?? Thank you - I did wonder if that might be the problem. When the Board members were invited to review the site last week, one wrote that when she first looked at the web site my computer does not show the picture in the top of the site on the introduction site when entering but then If I return to the introduction after another site it works ok. (When she says site, I think she means page.) Which sounded as if, when one first opens the web site, the images are taking too long to load. I must see what I can do to mitigate that. Kind regards Rachel At 09:52 22/08/2008, david wrote: [snip] With IE6 running under WINE on Linux - none of your pages seemed to have any problems with the masthead. Don't know how your Browsercam session was set to capture, maybe it wasn't waiting long enough every time before doing the capture?? -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] Too much for MSIE 6 and 7 to cache?
Hi Jens Thank you for looking - that's really helpful. Kind regards Rachel At 10:44 22/08/2008, Jens Brueckmann wrote: Hi Rachel, no problem here with IE6. Images were displayed on first page loading. Cheers, jens -- Jens Brueckmann http://www.yalf.de __ 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] Trying to compact styling as much as possible
Thank you both, Christian Kirchhoff and Chris Atkins. Your
suggestions work beautifully!
At 15:24 15/08/2008, Christian Kirchhoff wrote:
Hello,
you might recognize what the problem is if you format the css code in a
different way, e.g. like this:
#footer,
#pieddepage,
#seitenende a:link {
color: #999369;
font-weight: bold;
background-color: transparent;
text-decoration: none;
}
[et seq]
You are right, it is much easier to see what should be there, when
the css is laid out like that.
At 15:31 15/08/2008, Chris Akins wrote:
I've often wished there was a way to compact that type of code more,
as maybe you were trying to do. But I don't believe there is.
Many thanks
Rachel
__
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] CSS Opacity with img tags. Can this be done in CSS?
Hello The trouble is, I cannot get the h2 #000; background to fade. It is always a solid balck. Where I had to do something similar (if I understand your question correctly), I had to add _height: 0; /* for IE 6 and lower haslayout */ zoom: 1;/* for IE7 haslayout */ to make it work in MSIE 6 and 7. (Note the underscore before the height.) I have no idea why that works. :-) Rachel __ 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] Displays mostly OK in IE7 but not in IE6 or IE8
Hi Georg
Thank you - I am totally in awe of your
knowledge! :-) I implemented your suggestions,
and as a bonus the layout on IE8 is fixed too
(until Microsoft changes something ... ), as can be seen here
http://www.browsercam.com/public.aspx?proj_id=385801
in case anyone else is interested in seeing the
difference Georg's amendments have made.
html, body {height: 100%; max-height:100%;}
Can't remember where I got this from but I
thought it was necessary if you want scrolling
content between fixed header and footer?
Note that fixed elements are fixed to the
browser-window, so the vertical nav will overlap
main text when horizontal scrolling is needed on narrow windows.
The vertical navigation has to be fixed,
otherwise it disappears under the image at the
top when one scrolls the page, and the client
won't like that. I realise that I could have
used javascript to make the vertical navigation
remain in sight, when one scrolled down, but
because of Accessibility considerations I try to
avoid using javascript for anything that the user
- whether disabled or not - *needs* in order to enjoy the web site.
Thank you, again - I am so happy!
Kind regards
Rachel
---
Date: Sat, 19 Apr 2008 01:20:29 +0200
From: Gunlaug Sørtun [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Displays mostly OK in IE7 but not in IE6 or IE8
Rachel Mawhood wrote:
http://www.internationalorganbuilders.com/new-build-delivered/members/test-member-index.php
[...] have run out of ideas about what to do to fix the remaining
display problems for IE6 and IE8.
1: delete...
html, body {overflow: auto;}
...as having that property/value on body makes IE unable to scroll main
parts of your page. In fact: it makes IE6 emulate position: fixed, but
the wrong way around - fixing the wrong parts.
html, body {height: 100%; max-height:100%;}
...serves no purpose either, but they do no harm if left in there.
2: delete...
#stoplist {_position: absolute;}
...as there are valid ways to hack that one in - see below.
3: add at the bottom of your stylesheet - below all other styles...
@media screen {
* html #stoplist {
position: absolute;
}
* html body div#fauxframe {
margin-bottom: -171px;
}
}
...which will make IE6 treat the page as a normal, scrollable, page with
a pretty ok line-up of page-parts. Copy and paste verbatim with @media
wrapper and all.
Regarding IE8: forget it until the IE-team has released a working
version, as fixing anything for the pretty broken IE8b1 is a complete
waste of time.
Note that fixed elements are fixed to the browser-window, so the
vertical nav will overlap main text when horizontal scrolling is needed
on narrow windows. This gets worse if font-resizing is added to the
equation, since 'em-sized' elements means everything but the header
takes up more space when font-size is blown up.
regards
Georg
--
http://www.gunlaug.no
__
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/
[css-d] Displays mostly OK in IE7 but not in IE6 or IE8
Hi list http://www.internationalorganbuilders.com/new-build-delivered/members/test-member-index.php When I checked this with Browsercam, I was expecting problems with IE7 and was surprised that this displayed OK in IE7. Then I found a helpful post by Gunlaug Sørtun a while ago about position:fixed and _position:absolute which (although the CSS validator at w3.org doesn't recognise _position as valid css) has stopped the menu in IE6 filling up the whole screen), but have run out of ideas about what to do to fix the remaining display problems for IE6 and IE8. I also need a small fix for Safari - on the yellow horizontal bar, the words on the lefthand end are at the edge of the screen, instead of being inset a little; all the other browsers inset the words. Browsercam captures are here: http://www.browsercam.com/public.aspx?proj_id=385801 The css file is here http://www.internationalorganbuilders.com/new-build-delivered/styles/test-isoconsole.css I would be grateful for your help with these two things. TVMIA Rachel __ 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] Conceptual problems with the doctype
Hello Validating the html on a site built this week, and the only remaining uncorrected error is to do with the doctype. I don't understand the instruction: I tried putting in the line the validator says is missing but that produced a new error. At the moment I have !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; If I have to add html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en where does it go, and doesn't that mean two closing /html tags at the foot of the page instead of the normal one? URL, if needed (this is the development area - there is a temporary page on the client's domain www.egg-skelter.co.uk) http://www.longitude0.co.uk/egg-skelter/development/index.php TVIA Rachel __ 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] Invisible on MSIE 5.2/Mac only? and righthand scrollbar top arrow lost
Hi list I am told that this serves a blank page in MSIE 5.2/Mac http://www.internationalorganbuilders.com/delivered/index.php but I have no idea why (have w3-validated the code). Also the righthand scrollbar runs from top to bottom in Netscape 7/pc but on all other set-ups on pcs so far tested the scroll bar is only on the lower half of the page, and its top arrow has disappeared - it is not behind the upper css-frame. I have tried moving the overflow:auto around, substituting overflow:scroll sometimes, but the result is usually extra, unwanted scrollbars. Grateful for your help with this. Rachel __ 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/
[css-d] Before I start filling in the content ...
Hello list I'm doing a redesign and rebuild of an existing site and would be glad to know how the new template displays on your machines, including on Macs. I have uploaded two pages to the development area http://www.internationalorganbuilders.com/delivered/index.php http://www.internationalorganbuilders.com/delivered/board/index.php These two link to each other but the other links don't yet go anywhere. There is one validation error in the second of the above pages but I don't understand why it's an error. I'd be interested to know, too, how these pages display in MSIE7 - I have made preparations to create a parallel set of pages that work with MSIE7, if necessary (I have seen other web sites that do this, created a special version for viewing in MSIE, having presumably given up the struggle to make one version work acceptably in all browsers) but I have tried to keep things simple in the hope that this won't be needed. Many thanks. Rachel __ 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] This breaks completely in IE6 - request for help
Thank you, Jeff and Georg. looks like the double margin float bug. it does break in ie7 as well. try adding display inline to the first container floating left. hope that works A more cross-browser reliable styling is necessary, or else your design won't have a chance in non-Gecko browsers. Slightly improved example... http://www.gunlaug.no/tos/alien/rm/test_07_4560.html ...with CSS here... http://www.gunlaug.no/tos/alien/rm/jla2.css I don't know how many frustrating hours you have saved me. Regards Rachel __ 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/
[css-d] This breaks completely in IE6 - request for help
I have validated both the css and the html, and although this displays as intended in Firefox and an old copy of Netscape, it completely breaks in MSIE 6 (old), all on a pc. http://www.jonathanlouth.co.uk/development/key-jla.htm I am guessing that it is because MSIE interprets margin differently but I really don't know where to start with hacking it, before I do the other pages. I haven't tested it yet in MSIE 7. Thanks v. much in advance. Rachel __ 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/
