[css-d] Layout-problem
Hi, it's me again ;-) Link : url: http://ikjensen.dk/test/ Having a major problem with this layout. Strangely, In IE 6, it shows almost as I wanted it to look like. In FF2, it doesn't. Second problem. The menu in the left sidebar works ok on the Index-page, but not on a second page. Menu : Genealogy - Kings of Denmark Same Structure and css. All tested locally. PS! Don't care about the colors. -- Regards / Mhv. Ib K. jensen __ 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] Background:transparent in IE7
I've found some curious behavior with background:transparent in IE7. I was working on a CSS image replacement, and was seeing the old IE flicker. In the course of trouble-shooting I made a version using only differently-colored backgrounds, not images. You can see my test page here: http://datagnostics.com/test/transparent.html The underlying div has a red background, the link on top has a blue background. a:hover is background:transparent, so that the link-block turns from blue to red on hover. It works fine in Mozilla, but in IE7 the link block flickers as you mouse over it, and the cursor flickers between hand and arrow. If a:hover is made any solid color, there's no problem -- it's only background: transparent that's the issue. To double-check, I gave a:hover the background of a random image that was at hand, which happened to be a transparent .gif. Not only did the flicker stop in IE7, the underlying red background can be seen through the .gif. It turns out that this also works when the image is a clear spacer .gif. Furthermore, when I remove anything on the hover state and make the background of the link block transparent, the cursor keeps flickering between hand/arrow as I move the mouse. It looks to me as though there's something unstable about the way IE7 interprets background:transparent for links. Is this problem also present for IE6? (I can't check because my IE6 machine is down for repairs.) Is spacer.gif the way around it, or should we try something else? Mary Ellen Doctor Science, MA __ 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] Layout-problem
Ib Jensen wrote:
Link : url: http://ikjensen.dk/test/
Strangely, In IE 6, it shows almost as I wanted it to look like.
In FF2, it doesn't.
The menu in the left sidebar works ok on the Index-page, but not on a
second page.
This may help compliant browsers...
Name of the game: Code to Opera -- FF, Safari, and Camino will follow
suit. Fix IE.
#container {padding-top: 1px;}-- fix 4 collapsing margins
.head h1{font-size:250%; margin: 40px 0 10px 0;padding: 0;
color:#fff;font-weight:normal;}
.head h2{font-size:180%; margin:0;color:#fff;font-weight:normal;}
.head {min-height: 150px;}
* html .head {height: 150px;}-- 4 IE/6
div.note {background:fuchsia/*4 position only*/; overflow: hidden;}
Could not find menu second page.
--
A thin red line and a salmon-color ampersand forthcoming.
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] Background:transparent in IE7
pretty strange indeed. thanks for sharing. Virgil http://www.jampmar.com On Thu, Jan 8, 2009 at 10:57 PM, Mary Ellen Curtin curtin...@gmail.com wrote: I've found some curious behavior with background:transparent in IE7. I was working on a CSS image replacement, and was seeing the old IE flicker. In the course of trouble-shooting I made a version using only differently-colored backgrounds, not images. You can see my test page here: http://datagnostics.com/test/transparent.html The underlying div has a red background, the link on top has a blue background. a:hover is background:transparent, so that the link-block turns from blue to red on hover. It works fine in Mozilla, but in IE7 the link block flickers as you mouse over it, and the cursor flickers between hand and arrow. If a:hover is made any solid color, there's no problem -- it's only background: transparent that's the issue. To double-check, I gave a:hover the background of a random image that was at hand, which happened to be a transparent .gif. Not only did the flicker stop in IE7, the underlying red background can be seen through the .gif. It turns out that this also works when the image is a clear spacer .gif. Furthermore, when I remove anything on the hover state and make the background of the link block transparent, the cursor keeps flickering between hand/arrow as I move the mouse. It looks to me as though there's something unstable about the way IE7 interprets background:transparent for links. Is this problem also present for IE6? (I can't check because my IE6 machine is down for repairs.) Is spacer.gif the way around it, or should we try something else? Mary Ellen Doctor Science, MA __ 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] Layout-problem
2009/1/8 David Laakso da...@chelseacreekstudio.com:
Ib Jensen wrote:
Name of the game: Code to Opera -- FF, Safari, and Camino will follow
suit. Fix IE.
#container {padding-top: 1px;}-- fix 4 collapsing margins
.head h1{font-size:250%; margin: 40px 0 10px 0;padding: 0;
color:#fff;font-weight:normal;}
.head h2{font-size:180%; margin:0;color:#fff;font-weight:normal;}
.head {min-height: 150px;}
* html .head {height: 150px;}-- 4 IE/6
div.note {background:fuchsia/*4 position only*/; overflow: hidden;}
I'll try this
Could not find menu second page.
Try in the Top-menu-bar = first menu-point = Genealogy, Menu-point =
Kings of Denmark.
On this page : The menu in the right side.
--
Regards / Mhv.
Ib K. jensen - http://ikjensen.dk
__
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:transparent in IE7
Mary Ellen Curtin wrote:
I've found some curious behavior with background:transparent in IE7. I
was working on a CSS image replacement, and was seeing the old IE
flicker. In the course of trouble-shooting I made a version using only
differently-colored backgrounds, not images. You can see my test page
here:
http://datagnostics.com/test/transparent.html
[..]
Mary Ellen
Doctor Science, MA
I don't know why it happens but floating the list fixes the bug in IE7
and doesn't seem to effect other browsers.
.menu ul, .menu li {
list-style:none;margin: 0;padding: 0;
float:left; /* ADD */
}
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
http://www.wearechange.org/
__
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:transparent in IE7
Alan Gresley wrote:
I don't know why it happens but floating the list fixes the bug in IE7
and doesn't seem to effect other browsers.
.menu ul, .menu li {
list-style:none;margin: 0;padding: 0;
float:left; /* ADD */
}
Thanks, Alan. I've updated the test page:
http://datagnostics.com/test/transparent.html
to include this new example. It looks as though it's the combination of
position:absolute with background:transparent that is giving IE7 the
vapors. Have you (or anyone else) been able to test in IE6? Can you-all
think of any other tests I could run?
Mary Ellen
__
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] Layout-problem
Ib Jensen wrote: 2009/1/8 David Laakso da...@chelseacreekstudio.com: Could not find menu second page. Try in the Top-menu-bar = first menu-point = Genealogy, Menu-point = Kings of Denmark. On this page : The menu in the right side. re: http://ikjensen.dk/test/ Dunno. Can't help. Need pro. -- A thin red line and a salmon-color ampersand forthcoming. 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/
[css-d] Differences between Firefox Windows and Firefox MAC OS
Greetings Cascading Style Sheet Amateurs, Experts, and Professionals. The following questions and examples are directly related to style sheets being processed by Gecko powered browsers like Firefox. These questions aren't specified towards the browsers themselves but more or less to the operating systems behind them. Let's start off by first asking why styles are rendered differently on a MAC OS as apposed to a Windows. Remember this is in regard to the Firefox web browser. What causes this? Why does this happen? In the following example (http://turnaroundllc.com/beta/). What determines why the footer moves down in Windows but stays appropriate and correct in a MAC OS environment. Where in this validated style sheet (http://turnaroundllc.com/beta/styles/global.css) did the developer go wrong? What and how could a developer fix these issues for future design ventures? In the next example (http://m2hcc.maxxintegration.com/). The site shows itself appropriate in Windows and not appropriate on a MAC. Again, the browser being used is Firefox. Why is the logo positioned incorrectly on a MAC OS? Have a look at the style sheet here (http://m2hcc.maxxintegration.com/App_Themes/M2HCC/M2HCC.css). These questions are predominantly the same. A developer could simply ask if there were just a simple hack/work-around for Firefox MAC and Firefox Windows. Are there such things? Those who take the time to read this email are very much appreciated. Thanks for all the help in advanced. _ Erik M. Zettersten 703.475.1890 ezetters...@hotmail.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] question about combining descendant selectors
I'm wondering if combined selectors have a lower specificity than
non-combined. For example in my stylesheet I have:
.hm #events_snip .date, .article { color: red; }
.hm #news_snip .date, .article { color: green; }
On the page the .article class shows up green, even though it is NOT
descendant from #new_snip, it is descendant from #events_snip. Why does
it do that?
Now, if I have this:
.hm #events_snip .article { color: yellow; }
.hm #news_snip .date, .article { color: green; }
The .article class shows as yellow. I don't understand this.
__
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] Firefox layout issue, works fine in IE7, Safari etc.
Hi The header in the page below displays incorrectly in Firefox v3.0.5 and I'm struggling to work out the cause. http://www.ultimatefooterad.com/salespage/index.htm As you can see, the whole header graphic has moved down so that the blue bar that runs across the browser viewport isn't aligned. In IE7 and Safari it displays fine. The page was supplied to me by a graphics designer without a doctype and using nested tables. I converted it to a css layout using table2css, which added the doctype !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Strict//EN http://www.w3.org/TR/html4/strict.dtd; and a lot of divs in place of the tables...lol! Anyway, I'm just trying to get the header displaying correctly in Firefox...I'd really appreciate any help. -- Cheers, Graham __ 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] question about combining descendant selectors
Your selectors are wrong. You aren't using descendent selectors
for .article. You are saying .hm #news_snip .date has the color green
AND ALSO .article has the color green, because of the comma. That
means you have two declarations for .article, and the second one is
over-riding the first.
In your second example, notice the lack of a comma.
.hm #events_snip .date, .article { color: red; }
.hm #news_snip .date, .article { color: green; }
.hm #events_snip .article { color: yellow; }
.hm #news_snip .date, .article { color: green; }
__
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] Vertical (rotated Latin) table headers
I'm looking for a way to specify that text in th cells be vertical such that Latin text is rotated 90 degrees counter-clockwise (text running bottom to top). Specifically, I'm looking for a way that affects layout--not for a way to rotate the box post-layout. I want the text be laid out on one line first and the cell shrink-wrap applied only thereafter. It's OK if the solution works in the latest public development version of at least one of the top 4 browser engines or Prince if the solution is on track for CSS standardization and degrades gracefully so that usual shrink wrap behavior for horizontal text applies (i.e. the cells becomes just wide enough to accommodate the widest word in each cell). Does this exist in the CSS drafts and at least one implementation? -- Henri Sivonen hsivo...@iki.fi http://hsivonen.iki.fi/ __ 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] Differences between Firefox Windows and Firefox MAC OS
Erik M. Zettersten wrote: In the following example (http://turnaroundllc.com/beta/). What determines why the footer moves down in Windows but stays appropriate and correct in a MAC OS environment. Where in this validated style sheet (http://turnaroundllc.com/beta/styles/global.css) did the developer go wrong? What and how could a developer fix these issues for future design ventures? Delete Trebuchet MS from the font-family string and FF will behave the same in Mac and PC. Aside: The construction of the page is extremely fragile. Font-scaling, or minimum font-size 24px, turns it into an unusable explosion in a gig-saw puzzle factory. In the next example (http://m2hcc.maxxintegration.com/). I did not look at that example. These questions are predominantly the same. A developer could simply ask if there were just a simple hack/work-around for Firefox MAC and Firefox Windows. No compliant browser hack(s) needed. Hack Internet Explorer from here to Havana. __ 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] question about combining descendant selectors
Brett wrote:
I'm wondering if combined selectors have a lower specificity than
non-combined. For example in my stylesheet I have:
.hm #events_snip .date, .article { color: red; }
.hm #news_snip .date, .article { color: green; }
On the page the .article class shows up green, even though it is NOT
descendant from #new_snip, it is descendant from #events_snip. Why does
it do that?
Now, if I have this:
.hm #events_snip .article { color: yellow; }
.hm #news_snip .date, .article { color: green; }
The .article class shows as yellow. I don't understand this.
Hi Brett,
Specificity applies to each selector individually. Commas are used to
separate, not concatenate separators.
I believe you're expecting your selectors to behave like this:
.hm #event_snip (.date,.article) { color : green }
.hm #news_snip (.date,.article) { color : green }
...but selectors don't work like this in CSS.
The specificity of your selectors is applied in this manner:
!important (1-Author,2-User)
ID (1 for each ID in the selector)
Class, psuedo-class, attribute (1 for each specified)
Element (1 for each)
So, using your selectors, we get these scores:
.hm #events_snip .article { color: red; }
= 0,1,2,0
.article { color: red; }
= 0,0,1,0
.hm #news_snip .date { color: green; }
= 0,1,2,0
.article { color: green; }
= 0,0,1,0
.hm #events_snip .article { color: yellow; }
= 0,1,2,0
.hm #news_snip .date { color: green; }
= 0,1,2,0
.article { color: green; }
= 0,0,1,0
I've used commas because specificity is not base10, meaning 10 elements
does not equal 1 class, and 10 classes does not equal 1 ID and so on. We
can remove the commas for your example, and we can see that 120 is
greater than 10 and you set the .article to have a color of green
/after/ you set it to red. Since it's the same selector, red applies or
yellow in example two because your first rule has a greater specificity.
You can fix this by expanding your selectors like so:
.hm #events_snip .date,
.hm #events_snip .article { color: red; }
.hm #news_snip .date,
.hm #news_snip .article { color: green; }
...which will give you the specificity you want on the right selectors.
Hope that helps. I couldn't think of a good ASCII drawing for
specificity. ;-)
Best,
Bill
__
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] Splitting wide columns of text
Hello, I have a web page with three columns. The left-hand and right-hand columns are of fixed width. The middle column is so arranged, that the column 'adjusts itself' to make full use the different screen widths. At larger screen widths, the length of the lines becomes a bit long for convenient reading. Is it possible, using CSS, to arrange that paragraphs in that middle column are themselves split into two columns of equal width, when a specified line length is exceeded? The text in the resulting left-hand one of these two columns should continue at the top of the right-hand one, as does the text of newspaper columns, for example. Bruce __ 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] Firefox layout issue, works fine in IE7, Safari etc.
Graham Cox wrote:
The header in the page below displays incorrectly in Firefox v3.0.5 and
I'm struggling to work out the cause.
http://www.ultimatefooterad.com/salespage/index.htm
Hi Graham,
That's a collapsing margin issue. Adding this:
*{margin-top:0}
into your style sheet. Can't say which element has margining at the top,
but adding that (generally as the first rule of the style sheet) will
help cure that.
Best,
Bill
__
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] Splitting wide columns of text
Hi Bruce, On Thu, Jan 8, 2009 at 3:06 PM, bruce.som...@web.de wrote: Is it possible, using CSS, to arrange that paragraphs in that middle column are themselves split into two columns of equal width, when a specified line length is exceeded? The text in the resulting left-hand one of these two columns should continue at the top of the right-hand one, as does the text of newspaper columns, for example. To my knowledge, the short answer is: not yet, if you want a pure-CSS solution that doesn't involve extra markup to create each column. I'm pretty sure this is in the works for CSS3, though. Best, -JR __ 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] IE6 problem with background color on H2 element
I am having a problem with IE6 rendering a background color on the H2
element *sometimes*. In my stylesheet I have:
.news #news_list h2 {
background-color:#000;
line-height:36px;
margin-left:0px;
margin-right:10px;
}
.news #news_list h2 span {
color:#fff;
margin-left:20px;
}
This displays fine in all browsers including IE6 (W). Just below that
div is another div with the following:
.news #events_snip h2 {
background-color:#000;
line-height:36px;
margin-right:10px;
margin-left:0px;
}
.news #events_snip h2 span {
color:#fff;
margin-left:20px;
}
This displays fine in FF (W M), Opera (W M), Safari (M), but NOT in
IE6 (W)
Here is an excerpt of the markup:
div id=news_list
h2spanNews/span/h2
ul
liBlah blah/li
/ul
/div
div id=events_snip
h2spanEvents/span/h2
ul
liBlah blah/li
/ul
/div
Does anyone know why the second H2 element is not displaying properly in
IE6 (W)? The element is there because I can see the text, but the
background is not showing up. Also, if I add display:block; to the H2
element, it acts more like I added it to the span. In other words, it
does not display the full line-height specified, just the text height.
Why is that?
__
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] Firefox layout issue, works fine in IE7, Safari etc.
Hi Graham,
That's a collapsing margin issue. Adding this:
*{margin-top:0}
into your style sheet. Can't say which element has margining at the
top,
but adding that (generally as the first rule of the style sheet) will
help cure that.
Hi Graham,
Just did some checking and to be a bit more specific, if you put the
margin-top: 0 on the body {} and p {} that solves the problem.
Hopefully that will save you some time.
Mark
__
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] Layout-problem
From: Ib Jensen ibkjen...@gmail.com Link : url: http://ikjensen.dk/test/ Second problem. The menu in the left sidebar works ok on the Index-page, but not on a second page. Menu : Genealogy - Kings of Denmark Can you explain what you mean when you say it doesn't work? I see hover effects, and if you click on a menu item, the page responds (by taking you to a non-existent page). If this is what you mean by not working, then the problem is in your HTML with the paths for the links. On the index page, they go back up a level (out of the test folder), but on the second page, they don't make it out of the test folder, so the browser shows a page not found. ~holly __ 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 stack article
Hello list! For all those in search of sensible values for font-family: http://www.sitepoint.com/article/eight-definitive-font-stacks/ The samples are way to small, but the result seems nice to me. djn -- - Dejan Kozina Web design studio Dolina 346 (TS) - I-34018 Italy tel./fax: +39 040 228 436 - cell.: +39 348 7355 225 skype: dejankozina http://www.kozina.com/ - e-mail: de...@kozina.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] gap under header in IE
Greetings, This is probably a common problem in IE but I cannot find a previous message in the archive for it. There is a small gap of space (about 2px) below the header on this page in IE: http://www.goldendragonhouse.com/specs.html http://www.goldendragonhouse.com/main.css Note that the nav bar box to the left has space above it anyway, but the photo to the right should come right under the header. Any ideas for fixing this? Thanks very much--your help is always appreciated, Anne __ 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] gap under header in IE
There is a small gap of space (about 2px) below the header on this
page in IE:
http://www.goldendragonhouse.com/specs.html
http://www.goldendragonhouse.com/main.css
Hi Anne--
Either of these oughta help:
#topboxrightspecs img { display : block }
-or-
#topboxrightspecs img { vertical-align : top }
Good luck.
Bill
__
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 color change on individual letters of a word
I'm struggling a little because I just started writing a web site about two months ago. I have a word in the text of the home page (index.html) that I need each letter of the word to be a different color. I did it in XHTML transitional and it worked fine. I'm now trying to follow the strict definition of XHTML and it doesn't like the font in the solution. I would like to do this color change in css instead of the XHTML page. Can anyone help me out with this? The web home page is at: http://www.wayneactorscommunitytheatre.org The color changed word in under the Archives section. __ 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 color change on individual letters of a word
Using span elements with inline style blocks will fix your problem. Example: span style=color:#0063dc;font-family:Verdana;Flick/spanspan style=color:#ff0084;font-family:Georgia;r/span On Jan 8, 2009, at 6:27 PM, James E. Darfler wrote: I'm now trying to follow the strict definition of XHTML and it doesn't like the font in the solution. __ 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 stack article
Dejan Kozina wrote: For all those in search of sensible values for font-family: http://www.sitepoint.com/article/eight-definitive-font-stacks/ djn le triomphe de mediocre --Baudelaire __ 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] Differences between Firefox Windows and Firefox MAC OS
Thank you, Delete Trebuchet MS from the font-family string and FF will behave the same in Mac and PC. Aside: The construction of the page is extremely fragile. Font-scaling, or minimum font-size 24px, turns it into an unusable explosion in a gig-saw puzzle factory.How can I go about making my font-size more appropriate for the web? I appreciate your input - This has saved me a lot of hassle.Erik. _ Windows Live™: Keep your life in sync. http://windowslive.com/explore?ocid=TXT_TAGLM_WL_t1_allup_explore_012009 __ 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] IE6 problem with background color on H2 element
Brett wrote: I am having a problem with IE6 rendering a background color on the H2 element *sometimes*. That IE bug is well known but can be hard to describe. It is a stacking-bug in that one or more layers of the element get stacked behind whatever element, container, the element should be rendered in front of. Browsers' rendering engines always split up an element, any element, in layers before actual rendering. They then handle the element as foreground layer(s) and various background and border layers stacked in a certain order. In the process all sane browser will keep these layers together and lay them out visually so they appear as parts of the same element - stacked in the right order. IE6 and older seem to drop or lose track of where an element's layers should be stacked in relation to layers of the element it is to be layered on top of, and one or more of the background layers may then disappear or be rendered inconsistently - on and off when page is scrolled or reloaded. The usual pin-pointing of and fixes for that bug are as follows: - adding 'zoom: 1' (or another 'hasLayout'[1] trigger) to the h2 styles. - adding 'position: relative' to the h2 styles. - adding both the above to the h2 styles. These remedies make IE6 pull all layers that belong to that element together, which in most cases is enough to fix the stacking relative to other elements in the background. Sometimes the easy fix is to add the styles/fixes above to the element's container, to the same visual effect. regards Georg [1]http://www.satzansatz.de/cssd/onhavinglayout.html -- http://www.gunlaug.no __ 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 color change on individual letters of a word
I'm struggling a little because I just started writing a web site about two
months ago. I have a word in the text of the home page (index.html) that I
need each letter of the word to be a different color. I did it in XHTML
transitional and it worked fine. I'm now trying to follow the strict
definition of XHTML and it doesn't like the font in the
solution. I would
like to do this color change in css instead of the XHTML page. Can
anyone
help me out with this?
The web home page is at:
http://www.wayneactorscommunitytheatre.org
The color changed word in under the Archives section.
Give this a try, to style each individual letter as a separate color.
lia href=archive/joseph/joseph.htmlJoseph and The Amazing span
class=letter_TT/spanspan class=letter_
Ee/spanspan class=letter_Cc/spanand so on...Dreamcoat/a
css would be like this:
li .letter_T {
color: red;
}
li .letter_E {
color: blue;
}
or you might need the anchor tag included.
li a .letter_T
{
color: red;
}
li a .letter_E {
color: blue;
}
Rod Castello
rodcastello.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] font color change on individual letters of a word
That's way more code than just styling it inline, IMHO. Even if you
were going to do it this way, it would be better to create simpler
classes:
a{color:red;}
.blue{color:blue;}
.green{color:green;}
A class overrides a simple element selector, so the classed span
(.blue) would override the anchor element. And doing it this way at
least leaves you the option of using the classes elsewhere, should
you so choose.
On Jan 8, 2009, at 8:16 PM, Rod Castello wrote:
Give this a try, to style each individual letter as a separate color.
lia href=archive/joseph/joseph.htmlJoseph and The Amazing
span class=letter_TT/spanspan class=letter_
Ee/spanspan class=letter_Cc/spanand so
on...Dreamcoat/a
css would be like this:
li .letter_T {
color: red;
}
li .letter_E {
color: blue;
}
or you might need the anchor tag included.
li a .letter_T
{
color: red;
}
li a .letter_E {
color: blue;
}
__
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] Problem with float drop on pages with a 3-column CSS layout that are generated by Movable Type
Hi Everyone I've been banging my head against this problem for two days to no avail. I haven't got a great deal of experience when it comes to creating complex CSS layouts, so please don't assume too much knowledge. The CSS I created seems to be working fine on hand-built pages like this one: http://new.uxmatters.com/aboutus/ But on pages generated by Movable Type, I'm getting a float drop when I make the window narrower than can display the entire page. The content in the sidebar on the right drops to the bottom of the page and overlaps the main content. Here are examples of two page types for which I've built templates so far: http://new.uxmatters.com/index.php http://new.uxmatters.com/2008/12/the-user-experience-of-enterprise-software-matters.php Both of these very different pages exhibit the same problem. This is my first time building custom Movable Type templates. I have no idea what's causing the problem. I hope someone on the list can help me figure out how to solve this problem. I have to get an issue of UXmatters out next weekend. Thanks in advance for any help you can provide. Regards, Pabini _ Pabini Gabriel-Petit Principal User Experience Architect Spirit Softworks www.spiritsoftworks.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/
