[css-d] Fw: positioning problems (IE and Opera)
I would apply position:relative and z-index in the branding div.
I am not sure about the problem you are having on the gallery page,
but certainly gallery section is very bumpy when trying to refresh the
page( especially in IE).
Try not to use the javascript where it's not necessary.
Shinya
- Original Message -
From: Elle Meredith [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Sent: Thursday, August 28, 2008 10:28 PM
Subject: Re: [css-d] positioning problems (IE and Opera)
Thank you Dmitry Demeshkin and Ingo Chao.
So, here's the problems and solutions again:
In IE 6 and 7:
#main-image not positioned right
Solution:
#additional-content {position:relative; width:450px; }
#home #main-image {position: absolute; top:0; left:0;}
divs pushed down
Solution: declared .prepend-1, .prepend-2, .prepend-3 {padding-left:
0;} in my ie.css
one of the texts pushed down in the gallery
Solution: removed class=span-2
In Opera (and Safari):
Logo is not position correctly
Solution: #branding a {display: block;}
Gallery's stage positioned too much to the left instead of right:
Solution:
I couldn't use display: block; which was the solution for the first
problem, so instead I declared div.inner {width: 100%;}
and to avoid width and paddings in the same rule, I redefined the
padding on the child elements
Last Problem: Navigation rounded corners.
Solution: added color to the background rule.
So in my case it was: background: white url(../img/rounded-left.gif)
no-repeat left bottom;
But I still have 2 last problems in IE -- if anyone has a minute to
have a minute to have a look:
The logo is appearing behind the main image on the home page -- even
though it has higher z-index
and on the gallery page, the stage images line up good when the page
loads -- but if you leave the page on for a little while, the top
background image appears and continues below the stage.
The site is at: http://designbyelle.com.au/poinciana/
Thanks once again,
Elle
__
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] can there be any difference between div and span with display:block
I wonder if there can be any difference for div ... ... /div and span style=display:block ... ... ... /span in other words, EVERYTHING is the same except a div is changed to a span, with display: block. the ultimate question is, Can they *DISPLAY* differently on major browsers? Can they BEHAVE differently on major browsers? I haven't seen a case in which they can be different, other than that they may or may not validate due to block element being inside another inline element. Thanks very much! __ 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] can there be any difference between div and span withdisplay:block
liketo findoutwhy wrote: I wonder if there can be any difference for div ... ... /div and span style=display:block ... ... ... /span in other words, EVERYTHING is the same except a div is changed to a span, with display: block. No differences are to be expected _if_ your CSS code will be applied _and_ no other stylesheets affect the rendering of these elements. But there are loads of reasons why your CSS code might not be applied, in part or at all; check the caveats list http://www.cs.tut.fi/~jkorpela/css-caveats.html Moreover, although div and span are plain elements in HTML - no rendering specialties should be expected except that div is rendered as a block - there is really no law against a browser stylesheet doing something special. And a user stylesheet, or some author stylesheet that your page may need to work with (like a corporate stylesheet) might really do something special with them. When your CSS code, or specifically the inline code in the style=... attribute, is not applied, the span element would appear as inline - effectively as if the span markup were not there at all. This means that there would be no implied line break before and after. the ultimate question is, Can they *DISPLAY* differently on major browsers? Can they BEHAVE differently on major browsers? They surely _can_, but it is not probable that they _will_ - except for the fact that CSS might be off, and then there's an essential difference. (Depending on the context, however, there might be no visible effect, if something else causes line breaks before and after.) I haven't seen a case in which they can be different, other than that they may or may not validate due to block element being inside another inline element. Thanks very much! Validity is a relevant aspect too, of course. Generally, you should first create markup that works when CSS is off, then start styling (potentially adding some markup just for CSS, such as class attributes). There's normally no reason to use span if you really intend to say display: block for it. But in special cases, e.g. when the markup is not under your control, you might need to change inline elements to block elements in CSS. (Of course this only changes them in CSS sense; in markup, span is still inline and div is block, as the validation issue indicates.) Yucca __ 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] Bizarre validation messages
Hi People, I'm getting bizarre message from the validator when I try to validate my css for http://blackboxnyc.com/soulsearching/ and http://blackboxnyc.com I get error message that I have many errors and wrong values entered - which I don't see in my files. When I enter the uri http://blackboxnyc.com/soulsearching/soulsearching.css directly into the validator page http://jigsaw.w3.org/css-validator/ I get messages that my page cannot be found. But the page is accessible directly through its URI and my html pages are styled. When I validated a different page http://thewei.com it validated with no problem. Maybe something in my code is choking the validator. I've entered a bug report but would like suggestions from the list as to what that might be. All help welcome and appreciated, as always. Be well, Kimi -- This email sent by Kimi Wei http://thewei.com 201-475-1854 __ 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] Bizarre validation messages
On Aug 29, 2008, at 3:50 PM, Kim Brooks Wei wrote:
Hi People,
I'm getting bizarre message from the validator when I try to validate
my css for
http://blackboxnyc.com/soulsearching/ and
http://blackboxnyc.com
I get error message that I have many errors and wrong values entered
- which I don't see in my files. When I enter the uri
http://blackboxnyc.com/soulsearching/soulsearching.css directly into
the validator page http://jigsaw.w3.org/css-validator/ I get messages
that my page cannot be found.
But the page is accessible directly through its URI and my html pages
are styled. When I validated a different page http://thewei.com it
validated with no problem.
Validating by URI seems to be a problem. The CSS validator has been
acting up of late (server side issues).
Validating your stylesheet by inputting it in he textarea works fine
http://jigsaw.w3.org/css-validator/#validate_by_input
and returns two errors and some warnings.
One error the validator didn't catch (it gives only a warning, it
can't really know better):
html, body {
font: 90%/135% normal verdana, geneva, arial, sans-serif;
...
}
The validator gives a warning that the font 'normal verdana' should be
quoted. I'm pretty sure it is an error in the stylesheet: you probably
wanted to write:
font: normal 90%/135% verdana, geneva, arial, sans-serif;
(the keyword 'normal' upfront where it rightly belongs, as you surely
meant font-weight/font-variant/font-style)
Philippe
---
Philippe Wittenbergh
http://l-c-n.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/
Re: [css-d] positioning problems (IE and Opera)
Elle Meredith wrote:
The logo is appearing behind the main image on the home page -- even
though it has higher z-index
Absolute positioned elements that are children of absolute or relative
positioned elements, can't escape their parents' stacking level, no
matter how high z-index is given to the children. A genuine IE/win bug.
Solution in your case is to stack the relative positioned parent higher
by adding...
#branding a {z-index: 1;}
...which will then lift the logo-image high enough too.
and on the gallery page, the stage images line up good when the page
loads -- but if you leave the page on for a little while, the top
background image appears and continues below the stage.
Jump triggered when hovering over image-links, so it is probably a
question of placing a 'hasLayout' trigger on the right element.
I can't debug it at my end since parts of the styling/scripting get lost
on download.
http://designbyelle.com.au/poinciana/
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/
Re: [css-d] IE8b2 missing content bug with list item
On Fri, Aug 29, 2008 at 6:04 AM, Alan Gresley wrote: All this missing content that I have noticed all happens when content are in at least unordered list. Another page. http://css-class.com/test/demos/popup-gallery1.htm The second gallery will not render all the images. Refreshing over and over shows images there and then not there. [...] Can anyone confirm that this is a bug with markup containing list items? Yes, it happens frequently with lists, but I have seen it in pages without lists as well. Anyway, even if this problem is not always exactly reproducible, it is so frequent that there are now at least three or four bug reports related to 'incomplete content' on the MS connect site. Hopefully it will be fixed. Bruno -- Bruno Fassino http://www.brunildo.org/test __ 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] ie 6 differences
I have some differences when my page views in ie6 than it does in the other browsers I checked. I'm not well-versed in ie6 yet. The page is: http://sph.umd.edu/events/wellness2/template.html 1 - there was a gap between the top picture (on the right) and the gold bar below it. I fixed it by putting a margin-top:-20px. That seemed to not affect other browsers. I'm not sure it's a good way to fix it as it seems like it might be something that breaks in the future. Is this a good way or is there a more standard way I should use? I suppose I could use conditional comments. 2 - the nav is spaced out vertically. -- Daniel Kessler University of Maryland College Park School of Public Health 3302E SPH Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE/6 IE/7 nav line-height
In this test page, the only way I've been able the keep the last two links from gaining height is to assign a line-height /in pixels/ to #nav ul for the IEs (and they still look a little whacked (taller) to me. Anyone up for an explanation and/or better fix for this little mystery? uri (css embedded): http://www.chelseacreekstudio.com/ca/cssd/nav.html -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.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/
Re: [css-d] IE/6 IE/7 nav line-height
David Laakso wrote: In this test page, the only way I've been able the keep the last two links from gaining height is to assign a line-height /in pixels/ to #nav ul for the IEs (and they still look a little whacked (taller) to me. Anyone up for an explanation and/or better fix for this little mystery? uri (css embedded): http://www.chelseacreekstudio.com/ca/cssd/nav.html Hi David-- It appears to be connected to your font-variant:small-caps declaration. If I had to guess, I would suppose Windows doesn't have a way to translate the non-breaking space into some lower-case/lower-height version of itself, so it doesn't translate the space into anything, but leaves it the same height as a font-variant:normal character. This obviously pushes the height of the box to make room for the taller character. I couldn't find a work-around beyond specifying the line-height in pixels as you'd done. Hope it helps. --Bill -- ~~~ TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com Bill Brown, Web Developer - From dot concept to dot com since 1999 The intuitive mind is a sacred gift and the rational mind is a faithful servant. We have created a society that honors the servant and has forgotten the gift. -- Albert Einstein ~~~ __ 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] Sizing backgrounds to page width rather than viewport width
I am working on a (partial) CSS conversion of an existing site and have run into an issue with pages where the content is wider than the window in which it is viewed. The page is set up with a banner graphic, which is defined as a div background (so it will cut itself off based on page width), and a colored background for the actual content area. This works wonderfully on those pages which can size themselves to fit the window. However, there are a few tables which don't compress so well and force the page to scroll horizontally. On these pages, the banner and the colored background cut off at the width of the window rather than extending the full width of the page. This can be seen at http://chaskaareayouthbaseball.com/widetest.html (unless your browser window is over 5200 pixels wide). What can be done to fix this? -- News aggregation meets world domination. Can you see the fnews? http://seethefnews.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/
Re: [css-d] ie 6 differences
On Aug 29, 2008, at 12:39 PM, Arn Gregory wrote: clip 2 - the nav is spaced out vertically. Known problem with ie6. Try adding display: inline on the li elements. Arnold Gregory IT Web Services Embry-Riddle Aeronautical University 386-323-8696 The display:inline worked. thanks! -- Daniel Kessler University of Maryland College Park School of Public Health 3302E SPH Building College Park, MD 20742-2611 Phone: 301-405-2545 http://sph.umd.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ie 6 differences
Daniel Kessler wrote:
I have some differences when my page views in ie6 than it does in the
other browsers I checked. I'm not well-versed in ie6 yet. The page is:
http://sph.umd.edu/events/wellness2/template.html
1 - there was a gap between the top picture (on the right) and the
gold bar below it. I fixed it by putting a margin-top:-20px. That
seemed to not affect other browsers. I'm not sure it's a good way to
fix it as it seems like it might be something that breaks in the
future. Is this a good way or is there a more standard way I should
use? I suppose I could use conditional comments.
Try:
#header {
height:270px; --:: delete
}
#sign {
margin-bottom:15px; --:: delete
}
#header_body {
margin:-20px 0px 0px 0px;--:: delete all
}
Add to kill IE em font-scaling bug:
html {font-size:100%;}
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.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/
Re: [css-d] IE/6 IE/7 nav line-height
Bill Brown wrote: David Laakso wrote: In this test page, the only way I've been able the keep the last two links from gaining height is to assign a line-height /in pixels/ to #nav ul for the IEs (and they still look a little whacked (taller) to me. Anyone up for an explanation and/or better fix for this little mystery? uri (css embedded): http://www.chelseacreekstudio.com/ca/cssd/nav.html Hi David-- It appears to be connected to your font-variant:small-caps declaration...] I couldn't find a work-around beyond specifying the line-height in pixels as you'd done. --Bill Yeah, the small-caps is not my call. Thanks. -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.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/
Re: [css-d] Sizing backgrounds to page width rather than viewport width
Dave, I would sugguest getting rid of tables and using proper css styling, however, if you want to use tables, you need to take out the width:5000px and change it to width:100% That should fix the problem. - Larry Tait On Fri, Aug 29, 2008 at 1:24 PM, Dave Sherohman [EMAIL PROTECTED] wrote: I am working on a (partial) CSS conversion of an existing site and have run into an issue with pages where the content is wider than the window in which it is viewed. The page is set up with a banner graphic, which is defined as a div background (so it will cut itself off based on page width), and a colored background for the actual content area. This works wonderfully on those pages which can size themselves to fit the window. However, there are a few tables which don't compress so well and force the page to scroll horizontally. On these pages, the banner and the colored background cut off at the width of the window rather than extending the full width of the page. This can be seen at http://chaskaareayouthbaseball.com/widetest.html (unless your browser window is over 5200 pixels wide). What can be done to fix this? -- News aggregation meets world domination. Can you see the fnews? http://seethefnews.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/ -- - Chris Ward phone: 203-745-0228 email: [EMAIL PROTECTED] __ 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] Any IE8 news?
Take a look a this post: How to make my web pages Internet Explorer 8 compatible http://www.aggiorno.com/blog/post/How-to-make-my-web-pages-Internet-Explorer- 8-compatible.aspx __ 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] Sizing backgrounds to page width rather than viewport width
On Fri, Aug 29, 2008 at 01:41:15PM -0400, Larry Tait wrote: I would sugguest getting rid of tables and using proper css styling, Tables are proper when used to display tabular data, such as game schedules or team standings. When there are 20 columns (say, if you're showing the game times on 20 baseball fields) then forcing them all to fit into a 1024x768 window is not feasible, regardless of whether the table is created using table tags or with pure-CSS positioning. however, if you want to use tables, you need to take out the width:5000px and change it to width:100% The width:5000px is there to force the problem to be evident without loading the page up with a ton of extraneous data which isn't relevant to the issue at hand. Removing it would mask the problem by constraining the page to be the width of the screen, but the problem which results when the page width exceeds the screen width would remain. -- News aggregation meets world domination. Can you see the fnews? http://seethefnews.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] (no subject)
I want to make a page that has a series of photos with text next to them (photos on the left, text on the right). I want the text that goes with each photo centered vertically to the photo and I want space between the photo and the text which should line up with the horizontal center of the page. I know how to do this easily using tables, but I want to do it with CSS. Can anyone steer me to a tutorial, or perhaps a page set up as I've described that I can use as a guide? Thanks, Linda H --- See the 2008 ATCA Rescue Adoption Quilt -- beautiful art to help Airedales in need: buy raffle tickets often and check frequently for bonus drawings -- http://www.airedalerescue.net/quilt/ -- No virus found in this outgoing message. Checked by AVG. Version: 7.5.524 / Virus Database: 270.6.13/1641 - Release Date: 8/29/2008 7:07 AM __ 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] Lining up photos and text
Sorry, I sent this without a subject line. I want to make a page that has a series of photos with text next to them (photos on the left, text on the right). I want the text that goes with each photo centered vertically to the photo and I want space between the photo and the text which should line up with the horizontal center of the page. I know how to do this easily using tables, but I want to do it with CSS. Can anyone steer me to a tutorial, or perhaps a page set up as I've described that I can use as a guide? Thanks, Linda H --- See the 2008 ATCA Rescue Adoption Quilt -- beautiful art to help Airedales in need: buy raffle tickets often and check frequently for bonus drawings -- http://www.airedalerescue.net/quilt/ -- No virus found in this outgoing message. Checked by AVG. Version: 7.5.524 / Virus Database: 270.6.13/1641 - Release Date: 8/29/2008 7:07 AM __ 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] Lining up photos and text
I wrote a tutorial a while back: http://www.evotech.net/blog/2007/05/vertical-centering-with-css/ that may help. until browsers support all display values, that hack is a fallback. -Estelle CSS, JavaScript and XHTML Explained http://evotech.net/blog/ --- On Fri, 8/29/08, Linda H [EMAIL PROTECTED] wrote: From: Linda H [EMAIL PROTECTED] Subject: [css-d] Lining up photos and text To: css-d@lists.css-discuss.org Date: Friday, August 29, 2008, 3:09 PM Sorry, I sent this without a subject line. I want to make a page that has a series of photos with text next to them (photos on the left, text on the right). I want the text that goes with each photo centered vertically to the photo and I want space between the photo and the text which should line up with the horizontal center of the page. I know how to do this easily using tables, but I want to do it with CSS. Can anyone steer me to a tutorial, or perhaps a page set up as I've described that I can use as a guide? Thanks, Linda H --- See the 2008 ATCA Rescue Adoption Quilt -- beautiful art to help Airedales in need: buy raffle tickets often and check frequently for bonus drawings -- http://www.airedalerescue.net/quilt/ -- No virus found in this outgoing message. Checked by AVG. Version: 7.5.524 / Virus Database: 270.6.13/1641 - Release Date: 8/29/2008 7:07 AM __ 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] Lining up photos and text
Linda, are you looking for something like this ? http://wardcreations.com/dev/photo.htm On Fri, Aug 29, 2008 at 6:09 PM, Linda H [EMAIL PROTECTED] wrote: Sorry, I sent this without a subject line. I want to make a page that has a series of photos with text next to them (photos on the left, text on the right). I want the text that goes with each photo centered vertically to the photo and I want space between the photo and the text which should line up with the horizontal center of the page. I know how to do this easily using tables, but I want to do it with CSS. Can anyone steer me to a tutorial, or perhaps a page set up as I've described that I can use as a guide? Thanks, Linda H --- See the 2008 ATCA Rescue Adoption Quilt -- beautiful art to help Airedales in need: buy raffle tickets often and check frequently for bonus drawings -- http://www.airedalerescue.net/quilt/ -- No virus found in this outgoing message. Checked by AVG. Version: 7.5.524 / Virus Database: 270.6.13/1641 - Release Date: 8/29/2008 7:07 AM __ 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] IE6 Stacking Issue or Something Else?
Oops - sorry. I took for granted that the whole thread would be showing up, so I trimmed. Over-trimmed I guess. :-) http://www.springfieldmo.gov/newSite/negMargin.html http://www.springfieldmo.gov/newSite/negMargin.css On Fri, Aug 29, 2008 at 2:16 PM, David Laakso [EMAIL PROTECTED] wrote: Chris Akins wrote: The only thing that's not to my liking is the bottom shadow of the bluish content box in IE6. It gaps as some wide widths and sticks out on the right on narrow widths. I've tried everything I know, but to no avail. I have half a mind to just leave it IE7 does better with it. Chris URL? __ 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] IE6 Stacking Issue or Something Else?
Chris Akins wrote:
Oops - sorry. I took for granted that the whole thread would be
showing up, so I trimmed. Over-trimmed I guess. :-)
http://www.springfieldmo.gov/newSite/negMargin.html
http://www.springfieldmo.gov/newSite/negMargin.css
Chris Akins wrote:
The only thing that's not to my liking is the bottom shadow of the
bluish content box in IE6. It gaps as some wide widths and sticks out
on the right on narrow widths. I've tried everything I know, but to
no avail. I have half a mind to just leave it IE7 does better with
it.
Chris
Aside:
FWIW, this may eliminate the horizontal scroll bar you are drawing in
all browsers:
#crumbs {
padding:0 20em .2em; --- :: delete?
margin:0 -20em; --- :: delete?
}
__
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] IE6 Stacking Issue or Something Else?
Well - drat. :-( I thought I had finally gotten a handle on the
nitpicky things. Guess not. :-)
I added the rules below to try and get maroon breadcrumbs bar to scale
with large text. After upscaling the text about 3 sizes, the crumbs
start to disappear into the tan content area. I was so focused on the
maroon bar sizing itself and extending to the right and left viewport
edge I didn't even notice the horizontal scrollbars.
I've taken those rules back out, but left the bottom padding in -
needed for IE to show the border on the hover state.
Thanks for the heads-up.
http://www.springfieldmo.gov/newSite/negMargin.html
http://www.springfieldmo.gov/newSite/negMargin.css
FWIW, this may eliminate the horizontal scroll bar you are drawing in all
browsers:
#crumbs {
padding:0 20em .2em; --- :: delete?
margin:0 -20em; --- :: delete?
}
__
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] IE/6 IE/7 nav line-height
Bill Brown wrote:
David Laakso wrote:
In this test page, the only way I've been able the keep the last two
links from gaining height is to assign a line-height /in pixels/ to #nav
ul for the IEs (and they still look a little whacked (taller) to me.
[...]
http://www.chelseacreekstudio.com/ca/cssd/nav.html
It appears to be connected to your font-variant:small-caps declaration...
I couldn't find a work-around beyond specifying the line-height in
pixels as you'd done.
It's an interesting behavior ;-)
I too couldn't find any better workaround. If the markup is under your
control, you could wrap the spaces in a span, like:
webspan#160;/spandesign
and then declare for IE
#nav ul li a span { font-size: 0.7em; }
Not particularly nice...
Bruno
--
Bruno Fassino http://www.brunildo.org/test
__
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] padding in list in ie6 and ie7
hey all, I have a problem I hope you can help me with. There is a menu on this site that has a list of center aligned text. There is an image on the top and bottom of the list http://katebaggott.com/fiction.html http://katebaggott.com/kate2008.css in most browsers the menu text is centred under the image. In ie6 and ie7 the text moves to the right so that the furthest left bit of the centred text is lined up with the horizontal centre of the image. This isn't a problem in ie8. I can't figure out where this extra bit of padding is coming from. Any thoughts? thanks loads! Sandy __ 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] IE/6 IE/7 nav line-height
Bruno Fassino wrote:
Bill Brown wrote:
David Laakso wrote:
In this test page, the only way I've been able the keep the last two
links from gaining height is to assign a line-height /in pixels/ to #nav
ul for the IEs (and they still look a little whacked (taller) to me.
[...]
http://www.chelseacreekstudio.com/ca/cssd/nav.html
It appears to be connected to your font-variant:small-caps declaration...
I couldn't find a work-around beyond specifying the line-height in
pixels as you'd done.
It's an interesting behavior ;-)
I too couldn't find any better workaround. If the markup is under your
control, you could wrap the spaces in a span, like:
webspan#160;/spandesign
and then declare for IE
#nav ul li a span { font-size: 0.7em; }
Not particularly nice...
Bruno
Interesting? Nah. More like my sister: twisted. I have no control over
the markup (or use of small-caps).
Thanks.
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.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/
Re: [css-d] Sizing backgrounds to page width rather than viewport width
Other than the advice already given, here is a resource of several sites that scroll horizontally-intentionally-althought this isn't optimum for most sites it may help in your case http://www.thehorizontalway.com/ Roxanne Sutton www.roxstyle.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/
Re: [css-d] IE/6 IE/7 nav line-height
On Fri, Aug 29, 2008 at 10:45 PM, David Laakso wrote:
http://www.chelseacreekstudio.com/ca/cssd/nav.html
Interesting? Nah. More like my sister: twisted. I have no control over the
markup (or use of small-caps).
So you cannot reset small-caps (for IE only) and use something like:
#nav ul li a {
font-variant: normal;
text-transform: uppercase;
font-size: 0.75em;
}
The problem would disappear and the look would be the same (I don't
think there exist common fonts with real small-caps, so what you get
are anyway uppercases in a smaller size, someone will correct me if
I'm wrong...)
Bruno
--
Bruno Fassino http://www.brunildo.org/test
__
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] IE6 Stacking Issue or Something Else?
Chris Akins wrote: http://www.springfieldmo.gov/newSite/negMargin.html The only thing that's not to my liking is the bottom shadow of the bluish content box in IE6. It gaps as some wide widths and sticks out on the right on narrow widths. With a complete and well-trimmed min/max expression in place, the bottom shadow seems to hold well in my IE6 on win2K... http://www.gunlaug.no/tos/alien/ca/test_08_0829.html Also added overflow control to prevent sidebar from falling on font-resizing largest in IE6. 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/
Re: [css-d] padding in list in ie6 and ie7
Sandy wrote:
http://katebaggott.com/fiction.html
in most browsers the menu text is centred under the image. In ie6 and
ie7 the text moves to the right so that the furthest left bit of the
centred text is lined up with the horizontal centre of the image.
I can't figure out where this extra bit of padding is coming from.
It's the default margin - not padding - on lists, in IE only.
Add...
.menu ul {margin: 0;}
...and it'll center ok.
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/
Re: [css-d] IE/6 IE/7 nav line-height
Bruno Fassino wrote:
On Fri, Aug 29, 2008 at 10:45 PM, David Laakso wrote:
http://www.chelseacreekstudio.com/ca/cssd/nav.html
Interesting? Nah. More like my sister: twisted. I have no control over the
markup (or use of small-caps).
So you cannot reset small-caps (for IE only) and use something like:
#nav ul li a {
font-variant: normal;
text-transform: uppercase;
font-size: 0.75em;
}
The problem would disappear and the look would be the same (I don't
think there exist common fonts with real small-caps, so what you get
are anyway uppercases in a smaller size, someone will correct me if
I'm wrong...)
Bruno
Granted.
My original proposal for all browsers was fake small-caps for all
browsers like so (no problem in any browser, no line-height needed).
#nav ul li a {
text-transform: uppercase;
font-size: 80%;
}
However, the person it is being done for still lives and breathes hot-metal
(literally). He's gonna have small-caps even if it means defying reality to get
'em.
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.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/
Re: [css-d] Lining up photos and text
On Sat, Aug 30, 2008 at 12:09 AM, Linda H wrote: Sorry, I sent this without a subject line. I want to make a page that has a series of photos with text next to them (photos on the left, text on the right). I want the text that goes with each photo centered vertically to the photo and I want space between the photo and the text which should line up with the horizontal center of the page. Don't know if this can fit your requirements: http://brunildo.org/test/test/ImgVertMiddle.html It uses display: table* for standard browsers, plus some hacks for IE Bruno -- Bruno Fassino http://www.brunildo.org/test __ 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] IE/6 IE/7 nav line-height
David Laakso wrote:
Bruno Fassino wrote:
On Fri, Aug 29, 2008 at 10:45 PM, David Laakso wrote:
http://www.chelseacreekstudio.com/ca/cssd/nav.html
Interesting? Nah. More like my sister: twisted. I have no control over the
markup (or use of small-caps).
So you cannot reset small-caps (for IE only) and use something like:
#nav ul li a {
font-variant: normal;
text-transform: uppercase;
font-size: 0.75em;
}
The problem would disappear and the look would be the same (I don't
think there exist common fonts with real small-caps, so what you get
are anyway uppercases in a smaller size, someone will correct me if
I'm wrong...)
Bruno
Granted.
My original proposal for all browsers was fake small-caps for all
browsers like so (no problem in any browser, no line-height needed).
#nav ul li a {
text-transform: uppercase;
font-size: 80%;
}
However, the person it is being done for still lives and breathes hot-metal
(literally). He's gonna have small-caps even if it means defying reality to
get 'em.
would it be possible to get the exact small-caps face that the client
wants and use that name as the first one in the font-face list? would
something like
font-face {
Fontin Sans small-caps, arial, sans-serif
}
be acceptable?
Sandy
__
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 Smart for My Float
Not really...I think my float has outsmart me :-\ Here's the situation: I thought I had controlled the margin/padding issues between browsers by using a double div technique. However while on vacation and tinkering on the problematic website/float, I only viewed the website in FF and IE7. Now my right column has bumped down in IE5 and IE6. My problem is that I've done so many changes in the FF/IE7 mode that I don't know where to start to fix it. Here's the site: http://alansonnazarene.org/index1.html Here's the CSS: http://alansonnazarene.org/css/anaz.css Overall I need some assistance top-aligning the main and right columns. Also if you see where I could improve, please don't hesitate to give your opinion. Please forgive any PNG problems and the dynamic menu (Suckerfish was killing me with this site.). I'm still working on some of those issues. Thanks for any help. Duane Nelson Loss2gaiN Designs - A Website Development Company http://www.myL2G.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/
Re: [css-d] IE/6 IE/7 nav line-height
http://www.chelseacreekstudio.com/ca/cssd/nav.html
would it be possible to get the exact small-caps face that the client
wants and use that name as the first one in the font-face list? would
something like
font-face {
Fontin Sans small-caps, arial, sans-serif
}
be acceptable?
Sandy
Thanks.
Anything is possible. What is acceptable is a matter of opinion...
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.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/
Re: [css-d] Sizing backgrounds to page width rather than viewport width
On Aug 30, 2008, at 2:24 AM, Dave Sherohman wrote:
However, there are a few tables which don't compress so well and force
the page to scroll horizontally. On these pages, the banner and the
colored background cut off at the width of the window rather than
extending the full width of the page. This can be seen at
http://chaskaareayouthbaseball.com/widetest.html
(unless your browser window is over 5200 pixels wide).
What can be done to fix this?
Step 1: wrap all the content of the page in a div
Step 2: style that div as follows
div {float:left;}
don't specify a width on that div.
Philippe
---
Philippe Wittenbergh
http://l-c-n.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] Float issues in IE7
Hi folks, I'm in a bit of a quandary with a nested float and vertically shifting text in IE. Here's the page (valid xhtml strict) in question and CSS (also valid). http://www.mdsol.com/mug/mug-helsinki/agenda.htm (site) http://www.mdsol.com/mug/mug-helsinki/mug.css (CSS) In the #main content area of this particular page, I've created a 2-column float for the event schedule where the dates/session numbers align with its associated content on the right (See #center ID selectors in CSS). This looks fine in PC Safari and FireFox (with styles enabled and disabled). In IE, however, the text on the left is vertically shifting so that it loses all association with the content it's related to. How would I go about re-aligning the items in the left column with resorting to re-coding the entire page with a definition list, table, or a ridiculous amount of br / tags? I've been reading up on IE bugs, hacks, floats, clears, etc. but am still unsure as to this particular issue...maybe it's something simple I'm missing? Any help's appreciated. Thx, Pete A. __ 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] Sizing backgrounds to page width rather than viewport width
On Sat, Aug 30, 2008 at 10:53:11AM +0900, Philippe Wittenbergh wrote:
Step 1: wrap all the content of the page in a div
Step 2: style that div as follows
div {float:left;}
don't specify a width on that div.
OK, that worked. Thanks!
Now for the bonus question... *Why* did that work? Was the original
problem due to requirements of the relevant spec or is it just a (IMO
bad) decision by the major browser vendors that full width, by
default, means only the width of the viewport even if the page is wider?
And, most importantly, how would I have figured this answer out for
myself without either being told here's the fix for your specific
situation or doing a lot of random futzing with it until I stumbled
across something that worked?
--
News aggregation meets world domination. Can you see the fnews?
http://seethefnews.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] Text positioning
Hi people, I haven't been able to get a couple of my type elements to behave as they ought to. http://blackboxnyc.com/soulsearching/ The h1 in topper I couldn't get to vertically center to my logo on its left, and I can't get the list items in colrightthin in the first copy block to behave like block elements. I want each item on its own line. I tried getting this right for a couple of 3 hours but no joy. All help appreciated, as always. Have a great night . . . Kimi -- This email sent by Kimi Wei http://thewei.com 201-475-1854 __ 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] Sizing backgrounds to page width rather than viewport width
On Aug 30, 2008, at 1:24 PM, Dave Sherohman wrote: Now for the bonus question... *Why* did that work? Was the original problem due to requirements of the relevant spec or is it just a (IMO bad) decision by the major browser vendors that full width, by default, means only the width of the viewport even if the page is wider? The original situation is perfectly correct and in accordance to the spec(s). You have (had) an element (table) that is very wide and overflows the width of the parent element. However (except in IE6) that parent element won't expand horizontally to the width of the descendant, as it is constrained by the width of the viewport. By floating the parent in your case, without assigning any width, that element is allowed to expand (that is a consequence of the 'shrink-to- fit' width computation for floated elements, except here we have an 'expand-to-fit' computation. Philippe --- Philippe Wittenbergh http://l-c-n.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/
Re: [css-d] Float issues in IE7
I would set up like this div class=schedule div class=left/div div class=right/div div class=clear/div /div div class=schedule div class=left/div div class=right/div div class=clear/div /div Shinya - Original Message - From: Peter Ankelein [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Friday, August 29, 2008 9:22 PM Subject: [css-d] Float issues in IE7 Hi folks, I'm in a bit of a quandary with a nested float and vertically shifting text in IE. Here's the page (valid xhtml strict) in question and CSS (also valid). http://www.mdsol.com/mug/mug-helsinki/agenda.htm (site) http://www.mdsol.com/mug/mug-helsinki/mug.css (CSS) In the #main content area of this particular page, I've created a 2-column float for the event schedule where the dates/session numbers align with its associated content on the right (See #center ID selectors in CSS). This looks fine in PC Safari and FireFox (with styles enabled and disabled). In IE, however, the text on the left is vertically shifting so that it loses all association with the content it's related to. How would I go about re-aligning the items in the left column with resorting to re-coding the entire page with a definition list, table, or a ridiculous amount of br / tags? I've been reading up on IE bugs, hacks, floats, clears, etc. but am still unsure as to this particular issue...maybe it's something simple I'm missing? Any help's appreciated. Thx, Pete A. __ 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/
