Re: [css-d] Fixed or float?
2009/7/15 Ellen Heitman ellen.heit...@gmail.com: I have a table centered at the top of the page that I want to remain visible even when the page scrolls. However, I don't want to be able to see the text scrolling behind it. How do I fix this? Which position property would I use? position: fixed ... with a solid background colour. -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ 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-d] overflowed div scrolling depending on main scrollbar
Hello, would you please take a look at this: http://www.giuseppecraparottacv.co.uk/doubts/contemp-scroll/contemporaneo.html I applied an overflow:auto to the div containing the models' pictures ( div.scrollingflow) because I wanted it to scroll but still keeping fixed the column with the bottle in hand picture. The visual layout would be improved if I could make the div.scrollingflow scrolling bar disappear and control the scrolling through the default scrollbar. The height of the page should remain the same as now. I wonder if this can be done by only CSS or if JS is maybe needed... Thank you. __ 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] Fixed or float?
--- On Thu, 7/16/09, David Dorward dorw...@gmail.com wrote: 2009/7/15 Ellen Heitman ellen.heit...@gmail.com: I have a table centered at the top of the page that I want to remain visible even when the page scrolls. However, I don't want to be able to see the text scrolling behind it. How do I fix this? Which position property would I use? position: fixed ... with a solid background colour. ... and an appropriate z-index :) - Bobby __ 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] unwanted horizontal gap in page
Sara Ullman wrote: I have been unable to figure out why there is a horizontal gap in my page that allows the background to show through. It appears below the main nav at the top of the page (top of the burgundy area). Here is the URL: http://quiglitzin.com/index.php. I already tried setting the top margin to 0 on the ul as someone suggested but that didn't help. The #nav ul margin and padding was already set to 0. I will leave this page a alone for a while to give everyone who wants to enough time to take a look. Thanks! I think it's the 10px margin-bottom on the LI (styles.css line 8) affecting the #photonav. Cordially, David -- __ 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] unwanted horizontal gap in page
David Hucklesby wrote:
Sara Ullman wrote:
Here is the URL:
http://quiglitzin.com/index.php.
I think it's the 10px margin-bottom on the LI (styles.css line 8)
affecting the #photonav.
Cordially,
David
Hello David,
That margin-bottom is overruled in specificity by,
#nav li { margin: 0; }
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] overflowed div scrolling depending on main scrollbar
Giuseppe Craparotta wrote: Hello, would you please take a look at this: http://www.giuseppecraparottacv.co.uk/doubts/contemp-scroll/contemporaneo.html I applied an overflow:auto to the div containing the models' pictures ( div.scrollingflow) because I wanted it to scroll but still keeping fixed the column with the bottle in hand picture. The visual layout would be improved if I could make the div.scrollingflow scrolling bar disappear and control the scrolling through the default scrollbar. The height of the page should remain the same as now. Hello Giuseppe, I don't know what is quite happening but there is no overflow:auto scroll bar appearing in Opera 9.64 and the page is all over the place. I think the look you are after is what I see in safari 4. To get the photos section to scroll with the browser provided scrollbar you need to remove overflow:auto from div.scrollingflow and used position:fixed on the bottle in hand picture. Yes that will cause this element to cover other content as you scroll. Maybe a rethink of your approach will help. -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ 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] unwanted horizontal gap in page
mark wrote:
Hello Sara,
I have been unable to figure out why there is a horizontal gap in my page
that allows the background to show through. It appears below the main nav at
the top of the page (top of the burgundy area). Here is the URL:
http://quiglitzin.com/index.php. I already tried setting the top margin to 0
on the ul as someone suggested but that didn't help. The #nav ul margin and
padding was already set to 0. I will leave this page a alone for a while to
give everyone who wants to enough time to take a look. Thanks!
- Sara
Wow, this is a good one. At first I thought it was an
improper nesting of divs, but that's cleaned up and the gap
remains.
[...]
-- good luck,
Mark
This gap is from the ul for the photos container.
#photonav ul {
list-style: none;
list-style-image: none;
margin-top:0; /* Add to stop collapsing margins */
}
The default margin-top collapses through div#photonav and
div#photonavbox thus pushing div#photonavbox down from div#braid.
The collapsed margin-top is 10px and comes from the browser reset.
ul { margin: 10px 0 0 10px; }
There are 3 ways to stop collapsing margins.
a. Zero out the vertical margin that is collapsing.
b. Give the container a border.
c. Give the container some padding.
For further information on collapsing vertical margins please see.
http://www.w3.org/TR/CSS21/box.html#x26
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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-d] color and background of list markers
Is it possible with CSS - possibly CSS 3 - to apply style to the things
which mark list items?
I have an ordered list, so list items are marked with 1., 2., etc.
I want to make those numbers white on a blue background, and I don't
want to change the style of the actual list items (want to leave the
actual list items black on a white background)
I tried selecting the numbers with :before,
li:before
{
background: blue;
color: white;
}
- but no luck
Any suggestions? Is it possible to apply style to just the list markers?
Possibly with CSS 3?
__
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-d] css validation help
Hi everybody,
So my css and xhtml almost validate, except for two things:
1) The third line here validates in CSS3 but not in CSS2.1 -
a) does that matter?
b) the overflow-y is the only way I've found to stop the page jumping
around in IE8. Maybe somebody else has a better solution?
html {
/* forces scrollbar visible to prevent position jumping in Firefox
*/
height: 100%;
margin-bottom: 1px;
overflow-y: scroll /* forces scrollbar visible to prevent position
jumping in IE8 */
}
My style rules for IE6 using the underscore hack, e.g.:
..threeColLeft {
_display: inline;
}
I didn't really want to create a separate stylesheet for IE6 but maybe I
should if I want validation. What would you do?
Any help, advice, comments or suggestions - and please no abuse about
using hacks in the first place - would be gratefully received.
P.S. what really are the advantages of being compliant? I hear it's
better for SEO and I like the idea, just from a professional pride POV
but why be compliant. Do a couple of underscore hacks pose a problem?
Vincent Pollard | UI Developer | Version 5.1 Inc. | T. (416) 516-4509
x252 | F. (416) 516-6186 | vinc...@version51.com
mailto:vinc...@version51.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/
[css-d] IE 6 Unordered List Issue?
Hi, We are currently experiencing what seems to be a layout issue with our MBA website. Of course this issue appears to be IE6 specific. On this page: http://mba.terry.uga.edu/fulltime/myterrymba.html we normally have information following the words Create a MyTerry MBA account to: in an unordered list. We have discovered that while this works fine in IE7 and firefox, it shifts the layout to the bottom of the page in IE6. Right now as a temporary fix we have wrapped it in a paragraph tag and are using breaks (not very elegant at all). Is this something that can be fixed with a hack? -- Chasity McWilliams-Moody __ 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-d] CSS Beginner - having trouble with IE6
To create my website, I took a free css template and modified it slightly. I'm having trouble getting a .php page on my site to render correctly in IE6. As a beginner, I don't know how else to explain my problem but to show you. Here is my site: http://reslounge.com Here is the page I'm having trouble with in IE6: http://reslounge.com/lectures.php Any advice? Thanks, Kristen __ 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] Fixed or float?
Bobby Jack wrote: --- On Thu, 7/16/09, David Dorward dorw...@gmail.com wrote: 2009/7/15 Ellen Heitman ellen.heit...@gmail.com: I have a table centered at the top of the page that I want to remain visible even when the page scrolls. However, I don't want to be able to see the text scrolling behind it. How do I fix this? Which position property would I use? position: fixed ... with a solid background colour. ... and an appropriate z-index :) - Bobby None is required for position: fixed. You're positioning, not layering (altering the paint order). -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ 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 validation help
On Thu, Jul 16, 2009 at 1:42 PM, Vincent Pollardvinc...@version51.com wrote: 1) The third line here validates in CSS3 but not in CSS2.1 - a) does that matter? Not really, since you're doing it intentionally, and you'd run into that issue with anything that's valid in CSS3 but not in CSS2.1. I didn't really want to create a separate stylesheet for IE6 but maybe I should if I want validation. What would you do? I usually end up making IE-version specific files wrap them in conditional comments. That way you don't need to rely on a hack to get see you through. (Though I have to admit that I'll throw hacks in my main CSS files during development, if I can, to keep things grouped together for easier revision.) P.S. what really are the advantages of being compliant? I hear it's better for SEO and I like the idea, just from a professional pride POV but why be compliant. Do a couple of underscore hacks pose a problem? Well-formed HTML can play a significant role in how your pages are parsed indexed by search engines (as well as some assistive technologies), but CSS validation doesn't play a role in that way. Validating your CSS helps to preempt real mistakes, etc. The validator has saved me from a forgotten semicolon several more times than I'd like to admit. Erik __ 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-d] Font size
Hi guys... I'm using a font-size:18px; and the font is bold(obvious) but is there a way to make it not bold? =) Thanks in advance... Sorry for any typos (Brazilian) ;) __ 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-d] Site check please
Hi guys, So far, I've tested this layout in Mac Firefox Safari, and Windows Firefox IE8. I'd love any feedback you might have- especially viewed in other browsers and resolutions. http://www.splashscreen.com/sample/sample.html Thanks very much, Lorraine __ 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] Font size
Daniel Gerep wrote: Hi guys... I'm using a font-size:18px; and the font is bold(obvious) but is there a way to make it not bold? =) Thanks in advance... Yes. Add this to the declaration: font-weight:normal; __ 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] Site check please
On Thu, Jul 16, 2009 at 2:57 PM, Lorraine Barte Nepomucenowebmistr...@splashscreen.com wrote: So far, I've tested this layout in Mac Firefox Safari, and Windows Firefox IE8. I'd love any feedback you might have- especially viewed in other browsers and resolutions. http://www.splashscreen.com/sample/sample.html In Safari 3 (Mac) and Firefox 3 (Mac), if the browser window is narrower than 797px, the left sidebar vanishes. In IE 6, you run into some scary overlapping issues as the window narrows: http://files.getdropbox.com/u/23489/ie6_view.png Erik __ 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] Font size
On 2009/07/16 16:55 (GMT-0300) Daniel Gerep composed: I'm using a font-size:18px; and the font is bold(obvious) but is there a way to make it not bold? =) Yes and no. At what size the apparent change to bold from normal occurs is characteristic of individual font families. Among the most common web fonts most change at either 17px or 18px. A very few do it above 18px, so you might achieve what you want by selecting one or more of those in your family rules. To easily see which behave how, open the samples pages on http://fm.no-ip.com/auth/Font/fonts-face-index.html . Making it less obvious or distracting can usually be done by enabling or tuning various font smoothing features of your OS. Cleartype, anti-alias, sub-pixel rendering and/or hinting can mute the difference to various degrees from slight to can't see any difference from one size to the next. Naturally all these OS font tweaking options are local to individual systems, and cannot be implemented via CSS. The reason this bolding occurs is that at the low resolution that a 17px or 18px size represents there just aren't very many px available in a character box. At some certain size, letter stems simply must jump from 1px to 2px. Without the font smoothing techniques, there is no way to have an average vertical or horizontal stem width between 1px and 2px as would be necessary to prevent the apparent bolding. -- No Jesus - No peace , Know Jesus - Know Peace Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.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] Fixed or float?
--- On Thu, 7/16/09, Alan Gresley a...@css-class.com wrote: Bobby Jack wrote: ... and an appropriate z-index :) None is required for position: fixed. You're positioning, not layering (altering the paint order). Not if there's a relatively-positioned element on the page, in my experience: http://www.fiveminuteargument.com/fixed-position-z-index Is this a bug or expected behaviour? - Bobby __ 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] Font size
Use font-weight:500; An for bold use 700 Sent from my iPhone On Jul 16, 2009, at 1:12 PM, David Laakso da...@chelseacreekstudio.com wrote: Daniel Gerep wrote: Hi guys... I'm using a font-size:18px; and the font is bold(obvious) but is there a way to make it not bold? =) Thanks in advance... Yes. Add this to the declaration: font-weight:normal; __ 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] Site check please
Lorraine Barte Nepomuceno wrote: Thanks for your reply, David- although I do admit I am confused by some of it... what are rivers? I'd appreciate any ideas you might have on what I've done wrong in my CSS as well... thanks again :) Lorraine Think of the text-block as a piece of fine tapestry. Squint your eyes at it. You'll see the rivers cascading down the tapestry. Scale the fonts and it will be even more obvious. The correction is to set the text and headings flush-left (text-align: left;). __ 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 Beginner - having trouble with IE6
Kristen Jessie wrote: To create my website, I took a free css template and modified it slightly. I'm having trouble getting a .php page on my site to render correctly in IE6. As a beginner, I don't know how else to explain my problem but to show you. Here is my site: http://reslounge.com Here is the page I'm having trouble with in IE6: http://reslounge.com/lectures.php Any advice? Thanks, Kristen Not exactly sure what you mean by a problem in IE/6 other than that page, unlike your index file, has no doctype and is likely to render inconsistently cross-browser. __ 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] Site check please
Lorraine Barte Nepomuceno wrote: Hi David, Can you reload the page? I've made some changes (I think my calculations for layout size were wrong :-))... please let me know if it's better now: http://www.splashscreen.com/sample/sample.html thanks very much Lorraine For a lot of reasons, reply to the list, and bottom post. OK. You ditched the rivers. This is good. Your page proper still has issues. Opera/10b and Safari/4 drop the right-column float on a drag to a narrower window. IE/7 still rendering the left-column crossing over the center column on drag. IE/6 does not support min or max width: consequently, the columns are rail rail; and, additionally, the left column is clipped on the left. Wait. Do not change anything. Hitting a moving target is difficult. I'll be back. __ 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] Fixed or float?
On Jul 17, 2009, at 5:35 AM, Bobby Jack wrote: Not if there's a relatively-positioned element on the page, in my experience: http://www.fiveminuteargument.com/fixed-position-z-index Is this a bug or expected behaviour? That is the expected behaviour. CSS2.1:Appendix E has all the details. In short, the DIV without z-index (z-index:auto per definition) and the UL are both at the same stacking level (both are positioned, both have z-index:auto). Because the UL comes later in the source, it is painted/layered on top. Note that IE 6 7 do all kind of crazy things with stacking levels. If you use those browsers to test your page, results may not be consistent with the spec (cough, cough, how's that for a polite sentence ?). Philippe --- Philippe Wittenbergh http://l-c-n.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/
