Re: [css-d] Background Image
The background isn't showing up in FF because its children are
floated. The CSS spec says that floated elements are taken out of the
flow of the document, therefore the parent element won't expand to the
height of its children.
The quickest fix for you would be this:
#content:after {
content:".";
display:block;
clear:both;
visibility:hidden;
height:0;
width:0;
line-height:0;
}
Worked for me in FF 3.1, should work in FF2 & 3.
-Ryan
On Jan 23, 2009, at 8:12 AM, Matthew Stoneback wrote:
Have a quick question that I am sure someone can help with in short
order
I am starting to go to production on a new site and I cannot seem to
get a
background image to function properly on the id "content." To my
surprise
the page views correctly in IE but not in Firefox! What am I
missing? I am
guessing it is something simple I am overlooking from staring at the
code
too long.
Here is the HTML: http://www.eddysound.com/dev/hangmenmc/
Here is the CSS: http://www.eddysound.com/dev/hangmenmc/hangmenmc.css
Any help is appreciated as always.
Thanks!
Matt Stoneback
__
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/
Ryan Doherty
rdohe...@mozilla.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] What are your takes on more then one Stylesheet
While this is fine for development and debugging, it's a pretty big performance hit for your users to download lots of CSS files. Combining them into 1 large file results in a page that loads quicker by reducing HTTP requests. http://developer.yahoo.com/performance/rules.html#num_http -Ryan On Jan 22, 2009, at 2:13 PM, Sarah Atkinson wrote: One thing I tend to do is instead of having all my styles in main.css I will have a css folder and in it usualy something like main.css, header.css, footer.css, maybe other things that are item specific like menu.css, documenttable.css, sidemenu.css. I use this so that it’s easier to find my styles when I need to and I can exclude some pages if they are not needed. But some I talk to think everything should be in one very long css file. __ 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/ Ryan Doherty rdohe...@mozilla.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] sliding div in Javascript or CSS
Google maps is all Javascript. And regarding how to create anything that 'slides' in a webpage, you'll need JavaScript. I highly recommend jQuery (http:// jquery.com/), it's fast, lightweight and has a powerful animation core. http://docs.jquery.com/Effects -Ryan On Oct 14, 2008, at 3:03 PM, Kevin Rodenhofer wrote: > Google maps is Flash...not a sliding div. > > Leandro Tracchia wrote: >> yes, or one that moves from the side of the screen. google maps has >> an >> example of this to display more of the map. (http://maps.google.com) >> >> On Tue, Oct 14, 2008 at 3:58 PM, Christian Heilmann <[EMAIL PROTECTED] >> > wrote: >> >>> Leandro Tracchia wrote: >>> >>>> without getting into too much debate, i need to know what is the >>>> best >>>> way of creating a sliding div. should i use javascript or css or a >>>> combination of both. i'm new at css, but i'm learning very >>>> quickly. i >>>> just want to know what is the right way of doing it before i start >>>> doing something the wrong way. a good simple example would also be >>>> helpful. >>>> __ >>>> >>>> >>> What exactly do you mean by "sliding div"? An animated div that >>> moves from a >>> to b? >>> >>> That'll be a mixture of CSS and JavaScript (unless all your users >>> are on the >>> newest Safari/Webkit) >>> >>> example: http://developer.yahoo.com/yui/examples/animation/motion.html >>> >>> >> __ >> 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/ Ryan Doherty [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/
Re: [css-d] Copy and Paste: about the Chrome browser
On Sep 4, 2008, at 11:15 PM, Gabriele Romanato wrote: > Original browsers have their own rendering engine which is unique and > different from any other > browser (Firefox, IE, Safari, Opera), Firefox and Safari use open-source rendering engines, available for anyone to use. Opera and IE's rendering engines are unique in that they are closed source and only available to them. > > while clonings have simply copied and > pasted their rendering > engine from original browsers ones (K-Meleon, Flock, ecc.) They didn't 'copy and paste' their rendering engines. They did the exact same thing Firefox, Safari, Camino and Chrome did: they put an open-source rendering engine in their browser. Right now I wouldn't do any serious testing in Chrome as it's beta and they are a few months behind on their Webkit version. But if it gains marketshare and they add new CSS features to it and don't push it back to Webkit, we will probably have to test it too. Don't be so quick to discount a new browser. It's great to have more options for users and more competition :) -Ryan Ryan Doherty [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/
Re: [css-d] Prevent reset.css Inheritance
You could add margins, padding, etc to common elements in #mainContent.
#mainContent p {
margin: 0.5em 0;
//etc...
}
#mainContent h2 {
font-weight: bold;
text-size: 1.4em;
//etc...
}
This is the point of reset.css, to force you to specifically define
the styling for your elements.
-Ryan
On Jul 7, 2008, at 9:30 AM, Travis Killen wrote:
> Hello,
>
> I am using Eric Meyers' reset.css file, which is great for creating my
> template file. The problem is that I want don't want the reset
> styles
> to apply to the content generated by my Content Management System
> (CMS)
> Is there a way to prevent inheritance for my div#mainContent?
>
> site link: http://agnew.sfasu.edu
>
> - Travis Killen
> http://936webdesign.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/
Ryan Doherty
[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/
Re: [css-d] FF3 FOUC
On Jun 30, 2008, at 5:30 AM, Philippe Wittenbergh wrote: > > On Jun 30, 2008, at 8:13 PM, Francois Jordaan wrote: > >> On some sites, including one I'm working on, I've noticed a Flash of >> Unstyled Content (FOUC) in FF3, which doesn't occur in any other >> browser. >> (This is where the page content displays unstyled for a split second >> before >> the CSS kicks in.) >> >> The site I'm working on is not yet public, but here's another >> example: >> http://www.worthing.gov.uk/visiting-worthing/ >> >> Does anyone know what causes it? > > Safari 3 and WebKit nightly builds also show that FOUC. > I guess, as Bill Brown suggest, that moving the block of stylesheets > before the block of links for the js in the source code will help. > > Note that it takes a loong time before that site start displaying > something. I waited at least 6 seconds staring at a blank screen (both > Gecko and WebKit) – and that is on fast 'net connection. > This is because there are 13(!) javascript files being loaded before anything else. I recommend merging them all and putting them at the bottom of the page. In fact, I recommend merging all the stylesheets too. This should increase performance too. http://developer.yahoo.com/performance/ Ryan Doherty [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/
Re: [css-d] Hope this is the appropriate way to ask this question
Designing with Web Standards - Zeldman Bulletproof Web Design - Cederholm Web Standards Solutions - Cederholm Eric Meyer's books are pretty good too. -Ryan On Apr 23, 2008, at 9:06 AM, Jonathan wrote: > I have looked at and read several CSS books. > Do you have any recommendations as I have not found one that I liked > __ > 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/ Ryan Doherty [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/
Re: [css-d] Wierd formatting issue in one laptop using IE6
A sometimes-common problem with laptop screens is that some are 'high-res' (higher dpi than a normal monitor). I've seen some layouts look funky because pixel/em/% calculations might be different if the screen is a higher dpi. It might be worth researching the laptop model to see if he has a 'high-res' screen. -Ryan On Apr 16, 2008, at 11:30 AM, Nancy Johnson wrote: > I am in the process of converting an old site from tabular with lots > of nested tables to CSS. > > This site is a challenge because it a very tight fixed-width site. > > Before we went live with the first section, we tested in IE6 and IE7 > as well as Firefox and Safari on several computers over an over and > worked fine in all of them. > > My supervisor is home sick and I got a call from him telling me that > the dark gray content area on the right displayed below the left nav > on the left ONLY on his laptop when using IE6 and ONLY if the > text-size was medium. It worked fine in larger, largest, smaller, and > smallest text-size. > > Any suggestions? > > Here is one of the pages that appear broken to him > http://www-odi.nhtsa.dot.gov/downloads/index.cfm. The others are > mostly in this section: http://www-odi.nhtsa.dot.gov/ewr/ > Stylesheets: > http://www-odi.nhtsa.dot.gov/css/style.css > http://www-odi.nhtsa.dot.gov/css/ie6.css > http://www-odi.nhtsa.dot.gov/css/ie7.css > > Thanks in advance > > Nancy > __ > 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/ Ryan Doherty [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/
Re: [css-d] when are 2 external css called for?
On Apr 14, 2008, at 4:29 PM, Bill Brown wrote:
> John wrote:
> [snip]
>> This has been an excellent thing for me to learn in my
>> greenhorn-hood..
>>
>> As I adjust my pages to work with this new combined style sheet, I'm
>> adding "id="index" to every instance of my tags; my "space
>> after" design employs a paragraph's worth of text
>> paragraph's worth of text, so every needs adjusting.
>>
>> Is there a way to say "All of these are now ?"
> [snip]
>
> Hi John,
>
> If it was me, I'd change them to classes and then use a Javascript
> function to change any non-index-class s into
> with
> a little javascript like this:
>
> var convertParasToIndexParas = function () {
> var allParas = document.getElementsByTagName("P"),
> i = allParas.length;
> while (i--) {
> if (allParas[i].className.indexOf("index")<1) {
> allParas[i].className = allParas[i].className + " index";
> }
> };
> };
> window.onload=convertParasToIndexParas;
>
> Ideally, the window.onload function should be routed through an Event
> Manager (google:addEvent). I like Dean Edwards' solution for this.
I would strong advise against something like this just to add a css
class to all instances of an element on a page. When you do something
like this, you should be taking advantage of what CSS was meant for:
cascading. It's also a bunch of unnecessary javascript that will be
run on every page load.
I'd recommend attaching a class to a parent container (usually the
body tag or a wrapper div) called 'index' and use css to style your p's:
here's my text
.index p {
//styles here
}
This is similar to other replies on this thread.
Ryan Doherty
[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/
Re: [css-d] Inline CSS with TD
On Mar 26, 2008, at 3:47 PM, Highpowered wrote:
> David Dorward wrote:
>> On 26/03/2008, [EMAIL PROTECTED]
>> <[EMAIL PROTECTED]> wrote:
>>
>>> I need to embed all the CSS from below into the style="" attribute
>>> of the
>>> table HTML:
>>> .settings td {border:1px solid #696969;}
>>>
>>
>> Shame, it isn't possible.
>>
>> CSS goes in one of two places.
>>
>> (1) In a style sheet as full CSS
>>
>> (2) In a style attribute as the contents of a declaration block
>>
>> There is no way to use selectors except in a real stylesheet.
>>
>>
> He's right on that. If neither of these two methods are available, you
> have to use inline styles on each td to which you want those
> properties
> applied.
>
> I'm a bit "Joan Crawford-ish" when it comes to inline styles: No!
> Inline
> Styles! Ever!
> __
Except for email:
http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html
-Ryan
__
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/
