[css-d] IE7 Released
Well, it looks like it's finally out: http://www.microsoft.com/windows/ie/downloads/default.mspx http://blogs.msdn.com/ie/ later, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] making rows line up - tables or css?
> That said... I too would like to know what people consider the criteria for > table vs. css usage... With some less-obvious examples. To me, if the data > is truly blocks of related "data" that one might see in a spreadsheet, that > seems to be a good case for using regular html tables. But a few examples > from the more experienced list members, where they might have used tables, > would probably put the question to rest. Well, this kinda brings up an interesting discussion - simulating markup. If I were to use css to create a row/column structure, then I would be simulating markup which is seems to be frowned upon. By using a table structure, yeah, it's using it for layout, but the type of layout that a table is meant to be used for, organized row/column information. I guess I kinda answered my question... unless someone has some better suggestions... thanks, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] making rows line up - tables or css?
>> >> A B >> A >> >> C D >> D > > > Mike, what type of content are you presenting? Ideally your choice of > markup ought to be driven by the semantic content of your material. > You'll be able to create the presentation you're looking for with > tables, definition lists, and other markup; it all depends on what's > right for the material. The content is donor level information. So, it's just blocks of text w/ varied heights arranged as described above. Is it really table "data"? I'm not quite sure. That's why I wasn't sure if a table is appropriate or not. thanks, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] making rows line up - tables or css?
I love CSS, and I try do to everything with CSS, but I'm wondering if tables are a better way to achieve my goal. I am trying to create a page that isn't going to have the same height content in each row, but needs to line up like this: A B A C D D E F G H G H Is there a reasonably easy way to do this with CSS. Is this better suited to tables? Thanks! Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] can't apply top and bottom padding on LI elements?
Is it true that you can't add top and bottom padding to LI elements? I created a horizontal navigation list and I try to add padding to either the LI elements or the A elements within the LI and it still won't increase the padding. The reason I'm trying to change it is because my hover is getting messed up when my nav wraps (we don't want nowrap). Take a look at this page and squeeze in the side so the footer wraps and then you'll see what happens when you hover over the links: http://www.cota.csulb.edu/index.cfm?fuseaction=cota.home Thanks, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] html as a selctor?
Phillip Perry wrote:
> I'm new to the list and not too new to css but by no means a pro at it. I've
> noticed in some of the posts i've seen people list html,body {blah:foo;} as
> a line of code. What benifit comes from html and body selectors? I'm sorry
> if this is a stupid question but I cant seem to find an answer elsewhere.
Well, since body wraps the entire site, it can be a very powerful
element to style. A common use is:
body {font-size:100%;}
to set the base font size.
There are hacks which you might be seeing as well:
html>body .container {color:blue;}
which will be ignored by IE win - maybe mac ie as well.
Mike
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] mysterious gaps in FF/IE/Opera
> 'theater' for me, and will do so even more when the letters are tighter. > I'd think more about leaving it the way it is, and increasing the > word-spacing slightly. Typography is about readability, not about being > "cool." Or is it? > ~davidLaakso Hey David, While I completely understand your point, it is the uncontrolled circumstances that cause problems. When I first posted this message, I had no way of being exactly sure what the total width of the acrostic was going to be because I don't have control over the spacing. If I can close up that gap, I can then *intentionally* apply a gap between the letters which means I have control over the total width. Also, the gap underneath the letters is out of my control which causes problems with the rollover text aligning correctly with the box below. Hope that makes sense... Thanks, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] mysterious gaps in FF/IE/Opera
I am having some trouble trying to figure out where some gaps are coming from. If you look at the following page in FF/IE/Opera, you'll notice that there's a gap between each of the letters in the big "THE ARTS" graphics with the purple background. http://admiral.its.csulb.edu/cota/index.cfm?fuseaction=cota.home Also, you will notice that there is a gap below the letters as well when viewed with IE or FF. IE, however, decides that it wants to add a gap on the left, and Opera doesn't show a gap on the bottom. I have tried adding padding:0;margin:0; to every relevant style to no avail. I added the following comment to my stylesheet (cota.css) that controls that page: /* THIS IS THE PROBLEM AREA */ to make it easy to find the relevant code. The container div is called #acrostic. Any suggestions would be much appreciated!! Thanks, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is there a good Safari emulator for WinXP?
{tonyFelice} wrote:
> Or do one of the other windows browsers approximate it?
>
Hey Tony,
So far for me, firefox and safari have been pretty neck and neck, except
for form boxes. I think that there are issues when trying to format
form input boxes with safari because the OS likes to control it (I think
that's what it was).
Since I don't have direct access to a mac, I put VNC on a coworkers mac
so I could remote-control his machine. That allowed me to test out
pages in mac/ie,ff,safari without having the machine in front of me.
Mike
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] SOLVED! Re: margin in one column pushes content down in the next column
Thanks to Holly's suggestion of padding-top, I was able to fix the problem. The completed page with examples of the broken version and the fixed version is here: http://www2.csulb.edu/colleges/cota/test5.html thanks! Mike Mike Soultanian wrote: >> At the default font size, in whatever browser you're looking in, the >> top margin for the H1 is 30px. If you zero that, there will be no more >> margin between the text and the following div that includes the left >> and right columns. >> > Yeah, I understand that. I stuck that 30px in there to make the > symptoms more apparent than the default padding on a h1 tag. > >> The margin escapes the container, and separates anything in the >> container from the text above, regardless of presumed "authority." >> > Well, I found a couple interesting things. If I apply the margin-top to > the content within the left column (which is floated left), it will push > the text down and does not pull down the content in the right column (as > is happening in example 2). Another thing I noticed is that if I float > both of those columns to the left (instead of only the left column), the > margin-top of the right column no longer escapes the container and only > pushes the text down in the right column. Don't know if that means much > as I don't know all the rules behind floated and unfloated elements. > >> Zeroing the top margin on the H1 would be my first suggestion. If you >> still want the text in the right column moved down, and want to retain >> the H1 (which I notice you've removed in the current iteration of the >> test page) you could try wrapping the left column content in another >> div and applying the padding, as little as 1px, to that (without >> zeroing the margin on the H1). >> > I changed it from h1 just to make sure it wasn't specific to h1, which > it isn't. It somewhat bothers me that I can't apply margin-top to an > element in the right column as it's going to pull down the text in other > columns, but there's plenty that could be, and is, worse with all the > browser issues ;) As far as wrapping a column with 1px padding or > border, I'm guessing you meant to say to apply it on the right column as > that's the one that's where the margin-top is escaping the container, yes? > >> If you decide to zero the margin on the H1, you could then probably >> add padding to that element to get the text on the right to move >> down perhaps, depending on what you really need. >> > Oh yeah! I totally forgot that I can use padding as well... and that > wouldn't collapse. Good point! > > I just tested it out and that worked. Sweet! I had just read about > that on a site a day ago, too.. argh... too much information in the brain! > > Thanks! > Mike > __ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > 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/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] margin in one column pushes content down in the next column
> At the default font size, in whatever browser you're looking in, the > top margin for the H1 is 30px. If you zero that, there will be no more > margin between the text and the following div that includes the left > and right columns. Yeah, I understand that. I stuck that 30px in there to make the symptoms more apparent than the default padding on a h1 tag. > The margin escapes the container, and separates anything in the > container from the text above, regardless of presumed "authority." Well, I found a couple interesting things. If I apply the margin-top to the content within the left column (which is floated left), it will push the text down and does not pull down the content in the right column (as is happening in example 2). Another thing I noticed is that if I float both of those columns to the left (instead of only the left column), the margin-top of the right column no longer escapes the container and only pushes the text down in the right column. Don't know if that means much as I don't know all the rules behind floated and unfloated elements. > Zeroing the top margin on the H1 would be my first suggestion. If you > still want the text in the right column moved down, and want to retain > the H1 (which I notice you've removed in the current iteration of the > test page) you could try wrapping the left column content in another > div and applying the padding, as little as 1px, to that (without > zeroing the margin on the H1). I changed it from h1 just to make sure it wasn't specific to h1, which it isn't. It somewhat bothers me that I can't apply margin-top to an element in the right column as it's going to pull down the text in other columns, but there's plenty that could be, and is, worse with all the browser issues ;) As far as wrapping a column with 1px padding or border, I'm guessing you meant to say to apply it on the right column as that's the one that's where the margin-top is escaping the container, yes? > If you decide to zero the margin on the H1, you could then probably > add padding to that element to get the text on the right to move > down perhaps, depending on what you really need. Oh yeah! I totally forgot that I can use padding as well... and that wouldn't collapse. Good point! I just tested it out and that worked. Sweet! I had just read about that on a site a day ago, too.. argh... too much information in the brain! Thanks! Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] margin in one column pushes content down in thenextcolumn
>> http://www2.csulb.edu/colleges/cota/test5.html
>
> I did try it in IE and Mozilla before I replied previously, and it's
> still margin collapsing that is causing what you see. The not-zeroed
> margin on the H1 element (as Theirry has pointed out) in the right
> column is "escaping" from the border-less/padding-less div container
> and creating the margin you are noticing between the text before the
> div, and the div itself. Zero the top margin on the H1 and the space
> will disappear.
>
> h1 {margin-top: 0;}
Ahhh, I think I'm getting it. So, the H1 is always 30px away from the
text, it's just bringing the container down with it, which is
essentially bringing the floated left column down, as well. I would
have thought that the left column would have had more "authority" as it
doesn't have margin-top applied to it so it wouldn't be brought down
with the container, or at least, push it back up there, but I guess not.
However, like I've noticed and like you mentioned, if the container has
any containing properties (border or padding), it will instead calculate
the margin relative from the border or padding. Is there any other way
that you know of to create any other containing properties that will not
allow the margin to escape from the container? On my real site, I
cannot put a border or padding on that container.
Thanks!
Mike
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] margin in one column pushes content down inthenextcolumn
> Sorry, I looked in IE6, not in FF. It's rare people "complain" about the > latter ;-) > Padding, but also *border* on the DIV should fix the "problem" (remove the > gap). Actually, if you reload the page, you'll see my updated examples. However, in my real web page, I can't use any padding or a border on the container. Is IE actually getting something correct for a change?? http://www2.csulb.edu/colleges/cota/test5.html thanks, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] margin in one column pushes content down in thenextcolumn
Thierry Koblentz wrote: > Mike Soultanian wrote: >> http://www2.csulb.edu/colleges/cota/test5.html > > Hi Mike, > I don't see any problem with your example page. > If you're talking about the second column being lower than the 1st one, this > is due to your margin on "h1" in column #2. > Regards, > Thierry | www.TJKDesign.com Did you look in both IE and if FF. There is a difference with example 2. mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] margin in one column pushes content down in the nextcolumn
> > This is not a bug you are observing, but "collapsing margins" instead. See > the following wiki page for more information and links. > > Hi Holly, I am familiar with collapsing vertical margins, but that's not the issue I'm running into; or maybe it is in another form. I'm having problems with adjacent columns (horizontally) affecting each other. If you look at my example page, you'll notice that there is no margin-top specified on the left column, yet it's being pulled down with the right column. http://www2.csulb.edu/colleges/cota/test5.html Try it in both IE and FF and you'll see the difference. I cleaned up the page to be more specific. Thanks, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] margin in one column pushes content down in the next column
Sorry about that, I forgot to include a link: http://www2.csulb.edu/colleges/cota/test5.html thanks, Mike Mike Soultanian wrote: > Let's say I have two columns and there is a div in each column. If I > add a margin-top to the left column, it pushes the div down in the other > column when viewed in Firefox. Is this normal behavior or is it a bug? > This does not happen in Opera or IE. > > Thanks, > Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] margin in one column pushes content down in the next column
Let's say I have two columns and there is a div in each column. If I add a margin-top to the left column, it pushes the div down in the other column when viewed in Firefox. Is this normal behavior or is it a bug? This does not happen in Opera or IE. Thanks, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Looking for reasons to use header tags - esp. for ADA
I did realize that I left off search engines after I wrote my message. Now, will my example #2 be sufficient for descent SEO? Also, do search engines have problems with skipped headers? Thanks, Mike D Ross wrote: >> >> *BESIDES* the fact that it's just good practice to use headers or >> because the W3C recommends that headers should be used in sequential >> order, is there any other reasons to use header tags? >> > > > Search engines! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Looking for reasons to use header tags - esp. for ADA
So, after I sent out that last email thinking I had figured out how to use headers, I've now found myself at a loss of how to deal with header tags again! Now, before I go on, I know that parts of this topic are highly debatable so I'd like to say ahead of time that I'm not interested in why one header implementation might be conceptually better than another. Instead I'm looking for real-world reasons to use headers and the repercussions of either not using them, or not using them correctly. One thing I've noticed in all the conversations and blogs and write-ups about headers is that there is a consensus that headers (and other standard HTML elements) should be used instead of simulating semantic markup with CSS styles. I've also noticed that there's a huge debate over whether or not they can or can't, or should or shouldn't, be used in sequential order. The non-sequential part doesn't really bother me unless it's going to cause some real-world problems. To start, these are the reasons that I've found why I should use header tags: 1. because simulating markup is bad (which I agree) 2. screen readers use them 3. helps to build an outline *BESIDES* the fact that it's just good practice to use headers or because the W3C recommends that headers should be used in sequential order, is there any other reasons to use header tags? Now, let's look at an example: Example 1: (non-sequential headers) (page header) (some random text - smaller than h2) (section title) (section subtitle) (section author) (body text) (section title) (body text) Is Example 1 going to break anything? Are browsers going to freak out? Will screen readers crash and burn because there is an h2 and h3 missing? Will someone's outline not be perfect and make their computer crash? Or is it just not according to some people's interpretation of the W3C specs and it's going to give them a headache when they look at my code? Now, let's look at another example: Example 2: Sequential headers with css markup (page header) (some random text - smaller than h2) (section title) (section subtitle - smaller than h3) (author - smaller than h3) (body text) (special selection title) (quote) (body text) (section title) (body text) In the above example, I purposely didn't use header tags because it's not really a strict hierarchical setup (on purpose). It does, however, nest header tags correctly, so its headers are syntactically correct. My main concern with the above is whether or not screen readers can happily navigate through the above example. I also want to make sure that either of the above examples aren't going to wreak havoc on any kinds of browsers/readers/whatever - I'm not so concerned about PDAs at this moment. So, ultimately, I'm looking for pitfalls. I'd like to know what's going to break, or what's going to work, whether or not it fits perfectly into the W3C recommendation. While the above example could be restructured to be hierarchical, I don't want to force that kind of structure unless it's really going to break something or cause someone (persons with or without disabilities) grief trying to navigate the page. I know that doesn't sit well with many people (as is seen by all the mixed discussion on this topic), but I don't think that the strict hierarchical header implementation is particularly appropriate for *my* actual setup so I'm trying to find the best middle ground and make sure that I'm doing a good effort to work towards ADA compliance and provide disabled visitors with a navigable site. Thanks! Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] how to make LI text justify to the right of the bullet?
>> enough to wrap to the second line. Now I notice that >> the second line begins under the bullet and not >> justified to the same place as the first line of text. >> Any way to fix that? > also, check that you don't have any text-indent as that will give you that behavior. ask me how I know ;) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] massive css problem
If you have two documents that you want to compare, winmerge does an excellent job. It highlights the differences between the two documents and then you can choose what you want to copy back and forth between the two. I have used it extensively for programming and all sorts of other little projects. Plus, it's free ;) http://winmerge.sourceforge.net/ enjoy, MIke Spike Spencer wrote: > I recently consolidated a 30KB CSS file form over 1300 lines of code > to just under eight hundred. I was doing it on autopilot and without > XHTML from the gimps in the programming office to check it on - > predictably, something has gone wrong. Is there any quick and easy way > for me to compare the stylesheets and see what style information has > changed? The structure of the document has changed entirely so I can't > do __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS Standards/Guidelines and making your site ADA friendly
Hi Everyone, I just sent the following email to my web mailing list on campus and I thought that some of the beginner CSS coders on this list might find this helpful. There was an email on this list (I don't know the original author, but thank you!) that sparked this whole email and I doubt very many people saw it so I thought I would do a writeup about it. Hopefully some of you find it interesting and/or helpful. Thanks, Mike Hey Everyone, I've been doing a lot of CSS research lately and I was running into somewhat of a roadblock. I was looking at various websites (commercial, educational, government, etc) and I was noticing two different styles of coding. One way would have markup like this: This is a header Body text goes here and the other would be: This is a header Body text goes here Initially I was leaning heavily towards the first example. I mean, why not? It's very descriptive and makes the code very easy to read. Plus, dealing with the headers is not hierarchical so if you decide you want a new kind of header/subtitle, you just create it. On the other hand, if you decide you want a new header/subtitle between and , there isn't a ! That can get annoying. A bit earlier I was through the W3C page regarding "Class Selectors" and noticed the following at the bottom of the section: Note: CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not. That didn't really make much sense to me until I happened to visit a website that was posted to the css-discuss list: http://www.onlinetools.org/articles/cssguides.html ...and in there is a section titled: Do not simulate markup via CSS They cite the following example: wrong: Our new products Product 1 ... Product 2 ... right: Our new products Product 1 ... ... After more research (and reading in the article), there are quite a few reasons to go with the second method. First, Dreamweaver will automatically insert tags for you when you hit enter, and if you're importing documents from Word and have them styled with proper headings (heading1-6), it will put the correct markup for those headings. That saves quite a bit of tedious reclassing! The other reason, and probably more importantly, is that if you use standard HTML markup (, , , etc), and then style those tags with your CSS, your website will degrade nicely when viewed with devices for disabled users. Remember, a screen reader does not know the difference between class="header" and class="bodytext" so it does not know how to navigate around your document. I'm not sure if this is new to anyone, but it was new to me so I figured there might be other people interested in it as well. I figure this kind of coding will probably become, or already is, mandatory for government sites so it's probably a good thing to talk about it because the campus template does not really enforce this kind of accessibility. It's up to the person coding the website to use good coding practices. Other good topics on the site include proper class and ID naming and also how to use contextual selectors instead of classes (which relates to the above examples). If you're new to CSS, or even if you want to know what's considered good style, take a look and you'll probably find it useful for building accessible and maintainable sites with CSS. enjoy, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about the adjacent selector
Hey CJ,
Here's a test I made. Take a look in IE and you'll see it mess up.
http://www2.csulb.edu/colleges/cota/test3.html
It's pretty obvious ;)
Mike
cj wrote:
>> Actually, that formulation could well break something you don't want
>> broken. Note that .about.home will break in IE/Win, which will apply
>> the rule to everything with the "home" class, completely ignoring the
>> "about" class. However, modern browsers will get it correct, and
>> only apply the rule to elements with both classes. Zoe's method will
>> apply the rule to any element with *either* class in all
>> browsers. That is probably not what you want.
>
>
> i've been able to use .class1.class2 with success in IE in my project. do
> you happen to have an example test page link where this is shown to not
> work? perhaps my css isn't doing what i think it's doing!
>
> this is one example of css that looks like it's working in my own work:
>
> .wrapper-div.solo,
> .wrapper-div.multi {
> border-top: 2px solid #4e94d5;
> border-left: 2px solid #4e94d5;
> }
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> 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/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about the adjacent selector
> Actually, that formulation could well break something you don't want
> broken. Note that .about.home will break in IE/Win, which will apply
> the rule to everything with the "home" class, completely ignoring the
> "about" class. However, modern browsers will get it correct, and
> only apply the rule to elements with both classes. Zoe's method will
> apply the rule to any element with *either* class in all
> browsers. That is probably not what you want.
Hey Adam,
That helps immensely! I was just about to post a message to our
internal mailing list suggesting the .home.about method, but instead I'm
just going to use the following method that I posted previously:
and then refer to classes like this:
.about{color:blue;}
... for ABOUT section-specific styles and
.abouthome{font:arial;}
... for about HOME page-specific styles.
Thanks!
Mike
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about the adjacent selector
Roger Roelofs wrote:
>> Does this accurately describe the div above:
>> about + home {color:black};
> No. that would be
> .about.home { color: black;}
Interesting. Do you know the name for this kind of styling? I'm going
to test it in various browsers right now..
thanks,
Mike
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Question about the adjacent selector
Let's say you have the following:
Does this accurately describe the div above:
about + home {color:black};
All of the documents that I've read on the web describe the following:
where the following selector describes the above:
news + archives{color:blue;}
Are the two the same?
Also, does anyone know the browser compatibility for the adjacent selector?
Thanks!
Mike
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Would this be considered bad css form?
Yeah.. we actually do something similar to what you were saying (we have globalstyles.css). It's good to hear that people don't have problems with my method 2 because I am really liking it. It seems like it has a bunch of benefits in the long-run. I just wanted to make sure ahead of time that I wasn't going to be digging my own hole!! Thanks! Mike Peach Lynda L CTR USAF 96 CG/SCTA wrote: > Whether #2 is better than #1, I don't know. But I can by experience say > that the method above will work well for you if you are maintain > multiple sites that must retain a similar look, feel, and navigation. > > Also a benefit we didn't know when we started this method, it has > naturally implemented a "process" of change. In other words, things > can't just be PUT into main.css. It has to be carefully considered as to > whether all the sites can or could need this and would USE it the same > way. Sometimes it takes a bit longer to implement but again, the end > result is goodness all the way around. > > An additional benefit is for the programmer developer. They can move > from one project to another and work the programming issues without > worrying the "display" issues. What works in one of these sites will > work in the next. When it doesn't -- that's when I get involved and > additions are done in site.css. Or on some occasions ... Yep, an error > in main.css which got rectified across all the sites. > > My 2 cents -- FWIW. > Lynda Peach > __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Would this be considered bad css form?
Roger Roelofs wrote: >> 2. Instead of doing stylesheet switching, the other thing >> I was thinking of was putting all my styles in one >> stylesheet and just change the class of an outer tag (i.e. > > It is a personal preference thing. I prefer option 2 with an ID on the > body element. I've used section specific stylesheets before, but in my > case it didn't work real well because our developers started copy and > pasting common stuff into multiple sections. I prefer 1 (or a few) well > commented sheets. Option 2 can be more efficient for the client because > it caches well and lowers the number of requests the browser has to make. > Hey Roger, That is exactly what I was thinking regarding multiple stylesheets and stuff getting cut and pasted all over the place. Granted, there would be some of that within that one stylesheet, but it's still much easier to manage. Plus, like you said, I can put some good commenting in there to let any other developers know what is happening if they see it for the first time. I like the benefit of the caching, as well. Thanks for the info. This was exactly what I was looking for! Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] question about formatting w/ padding
I am working on the layout w/ my designer trying to get all the padding just right. Let's say that there is a header, sub-header, title, and body text. I could just just put padding-top on everything and that would space it out accordingly. However, I'm not really sure if that's necessarily appropriate because sometimes something may not have any top padding (for one reason or another) and now the content butts up against each other. In other words, some padding-bottom might be appropriate. I know that this is a very stylistic thing and I'm guessing that most of it is really figured out by trial and error, but I was hoping that someone might have a link to a site that talks about techniques for doing this properly. Thanks! Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background color with image?
In the case of the site you referred to, that's just a tiled image applied to the body tag: http://www.maxdesign.com.au/presentation/process/img_39.gif is that what you're trying to do? If you don't already have it, I'd get FF and the developer toolbar and then click "edit CSS" and play with the css to see what's happening. thanks, Mike Iorhael wrote: > hmmm...just tried that but it didn't work...what I am actually wanting > is just the area outside the container box to be a different color...see > link for example: > > http://www.maxdesign.com.au/presentation/process/example23.htm > > Is that possible? > > Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background color with image?
Yeah.. just set a background color on your body (an outer container div). Now, if you want the background color to show through your little diamond things, you'll need to make a transparency, making sure to use the background color as the color you select for the transparency so it aliases nicely. If you don't, you'll get halos around the graphics. There are plenty of articles regarding creating GIF transparencies in photoshop on google. thanks, Mike Iorhael wrote: > Is there any way to add a background color to a page that already has a > background image? I want to put the background color around the container: > > www.drk-writing.com/northwesternesse/ > > Debbie > __ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > 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/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Mozzila: menu weirdness!
I just tried it in FF and I saw the dotted box, but it's the size of the buttons. Try completely closing FF and try again. Mike Patrick Roane wrote: > Please take a peek at the following menu: > > www.pdrsolution.com/waters/index.html > > > If you actually click on any of the buttons, you'll > see a dashed box outline that stretches across the > entire site. Where does this come from? This does not > happen at all in IE. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Need help with some class names
Kinda goofy question, but I'm looking for some help w/ class names. I'm hoping that there might be some good established naming conventions for my css structure. I have a 3 column layout, call them columns A, B, and C. Column A will be the leftmost column and will always contain navigation so that's an easy one (sidebar, navbar, etc.). Column C will always contain content, so that's an easy one as well. Column B, however, is a little trickier. Sometimes the column layout will be A|B|C, sometimes A|C|B, and sometimes A|C - all depends on which page of the site you're on. On some pages column B will hold pictures, on others it will hold a calendar that quick-links to anchors in column C, and sometimes it's hidden. Anyone have a good class name for column B? Thanks! Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] wrapping a list around an image
Hey Ari, You posted a URL that refers to your machine (localhost). Do you have a valid Internet URL? thanks, Mike [EMAIL PROTECTED] wrote: > I seem to be having an unexpected amount of trouble wrapping a list around > an image. > > On this particular page > (http://localhost/discover/oralhistory/guide.html), I have an image of a __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Need help figuring out how to implement a page layout
> 1. You're using classes for your column divs instead of IDs. Most CSS Sorry.. I quickly typed it up and am using IDs in my real markup. > > 2. Your column names are not intuitive. Perhaps you are just dumbing > them down for the same a simple email, which is fine, but just in case > these are your real names, here's a warning -- give your IDs names that > describe their content. Things like "maincontent," "features," > "secondaryNav" are good names. This should more correctly illustrate my actual structure content content content I have considered naming the columns with names reflecting their purpose, but unfortunately source ordering in my case is essential because I refuse to use any hacks so content might be moving around from page to page. Also, this is for a generic template so some people will be using the different columns for different purposes. As far as the extra markup, that's also because it's for a template and I'm just providing extra markup for extra flexibility. > One more thing -- always trim your posts before sending to the list. heh, I realized that as soon as I sent my last email. I usually do that. thanks, mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Need help figuring out how to implement a page layout
So, I was able to solve my problem by utilizing the following structure: content content content Like you said, I floated 1 and 2 to the left and then set the margin of 3 to the total fixed widths of 1 and 2 giving me fixed/fixed/liquid. If I want fixed/liquid/fixed, I float 1 to the left, 2 to the right, and then set my left and right margin of 3 to the widths of 1 and 2 respectively. You see any problems with this? I noticed that source ordering is critical, though. I had tried this earlier but my source was out of order so I wasn't able to make the above work. After doing a ton of research and trying a bunch of different methods, I did the above but inadvertently with a different source order and realized it worked. Initially I was trying to think logically and float 1 to the left, 3 to the right, and set left and right margins on 2. Obviously that doesn't produce the expected results... All sound good? Any problems that I might run into? Thanks for your help!! Mike Christian Montoya wrote: > On 12/7/05, Mike Soultanian <[EMAIL PROTECTED]> wrote: >> Here's what I'd like: Left nav column to be a fixed width, calendar >> column to be fixed, calendar details (right-most column) liquid. Also, >> just so you know, the rest of the site pages have a fixed nav with fluid >> content). >> >> My problem is I don't know how to implement this. I've been researching >> and found the following: >> >> 1. I found this simple 2-column layout page: >> >> http://realworldstyle.com/2col.html >> >> It doesn't use any hacks and seems to work in many browsers. For the >> calendar page, I was thinking of nesting another 2-column layout within >> the content side which would give me fixed-fixed-liquid columns. >> > > Not a bad idea, usually done that way. > >> 2. Our campus web developers came up with a layout method where they >> float every column to the left like so: >> >> http://www.csulb.edu/divisions/dt/ >> > > They didn't come up with that, though I'm sure they are smart guys. > Floats is the de-facto way to create columns with CSS. > >> Is there any reason I can't just set fixed widths on the columns that I >> want fixed and then set percentages on the columns I want fluid? It >> seems like it could work, but it just seems to easy... >> > > Better: Make column 1 and 2 fixed, and column 3 width:auto, so it > fills the rest of the available space. Or, float column 1 and 2 left, > and make column 3 have a margin-left of the combined width of 1 and 2. > That should give the exact behavior you want. > > Try something out, give us a url and we can help you from there. > > -- > -- > Christian Montoya > christianmontoya.com ... rdpdesign.com ... cssliquid.com > __ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > 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/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Need help figuring out how to implement a page layout
> Better: Make column 1 and 2 fixed, and column 3 width:auto, so it > fills the rest of the available space. Would I still be floating all of the columns to the left in this case? Or, float column 1 and 2 left, > and make column 3 have a margin-left of the combined width of 1 and 2. > That should give the exact behavior you want. the tricky part is that in some instances I need: fixed-liquid-fixed. It kinda changes from one page to another. > > Try something out, give us a url and we can help you from there. I will do that now. Thanks for your suggestions, Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Need help figuring out how to implement a page layout
Hey Everyone, I'm having a really hard time trying to decide how I'm going to build a site for work. I am making a huge effort here to do this in CSS and not use any browser hacks so it's a bit of a frustration for me because I'm really used to working with tables and know how they react. For starters, here is an example of one of the pages (probably the most complex): http://www.csulb.edu/~mmina/cota/cota_calendar_v2.jpg I am only concerned with the content area (everything below the banner, above the footer). The rest is from a campus template that can't be changed. Here's what I'd like: Left nav column to be a fixed width, calendar column to be fixed, calendar details (right-most column) liquid. Also, just so you know, the rest of the site pages have a fixed nav with fluid content). My problem is I don't know how to implement this. I've been researching and found the following: 1. I found this simple 2-column layout page: http://realworldstyle.com/2col.html It doesn't use any hacks and seems to work in many browsers. For the calendar page, I was thinking of nesting another 2-column layout within the content side which would give me fixed-fixed-liquid columns. 2. Our campus web developers came up with a layout method where they float every column to the left like so: http://www.csulb.edu/divisions/dt/ Is there any reason I can't just set fixed widths on the columns that I want fixed and then set percentages on the columns I want fluid? It seems like it could work, but it just seems to easy... I think those are the only two ideas that I've figured out. I'm kinda at a loss what to do. I'd really love to hear some drawbacks, suggestions, whatever. The biggest problem I'm having is that it seems there are so many different ways to pull things off that I don't know what to pick. Let me say this. For the time being, I am willing to adjust my markup so that it helps with layout (nested divs, ordered markup, etc). I know this goes against the spirit of CSS, but it seems like all the implementations that only use CSS for presentation (holy grail, etc) are using hacks to deal with the browser inconsistencies. When the browser mess has cleared for a bit, I'll move towards that goal. However, right now I'm willing to make a small compromise. Thanks! Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] posted results of IE quirks with positioned elements
I made a page because I was trying to figure out some quirks with absolutely positioned elements inside of a relatively positioned container in IE. Some of you might find this interesting, some not.. just thought I'd post it anyways. enjoy, Mike http://www2.csulb.edu/colleges/cota/test1.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] thin line under span
That's interesting. Yeah, I went in and put a 1px bottom border like you mentioned and it went away. Thanks for your help! It's nice to have a solution for the problem! mike Christian Montoya wrote: On 10/22/05, Mike Soultanian <[EMAIL PROTECTED]> wrote: You know, one thing that did make it go away was when I set the span to display: block;. I think I remember someone said it had to do with it being an inline element. Shoot.. I wish I had that email... Now, I know that I could set it to a block element, but I'd like to figure it out as an inline element if possible. Mike Ok, I found that if I made the padding of span to be 1px, the space was filled. I also found that if I change the line-height of the span to 1.0, or 1.1, or 1.2, or 1.3, the space is collapsed. If I set the line height to 1.4, it's there again. I'm going to guess this is a Mozilla rounding error. It's not filling 100% height of the line because it's just not calculating the height to fill correctly. If padding 1px or line height 1.3 solves your problem, then maybe you are done. Otherwise there's really not much you can do about rounding errors, so you might just have to live with it. -- C Montoya rdpdesign.com ... liquid.rdpdesign.com ... montoya.rdpdesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] thin line under span
You know, one thing that did make it go away was when I set the span to
display: block;. I think I remember someone said it had to do with it
being an inline element. Shoot.. I wish I had that email...
Now, I know that I could set it to a block element, but I'd like to
figure it out as an inline element if possible.
Mike
Christian Montoya wrote:
On 10/21/05, Mike Soultanian <[EMAIL PROTECTED]> wrote:
I'm messing around with css stuff and I'm trying to figure out why I'm
getting a 1px line under my "Spanning" text. I think I heard a solution
for this a while back, but I can't remember what it was. Any
suggestions would be appreciated.
Looks like it could be browser defaults. If you eliminate them from
the start, it should go away:
* { margin:0; padding:0; border:none; }
at the top of the stylesheet should take care of it.
--
C Montoya
rdpdesign.com ... liquid.rdpdesign.com ... montoya.rdpdesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] thin line under span
what browser are you using? Seems like this is a problem in ie5.5, 6, mozilla, yet they all handle the problem slightly differently (I just updated the page with more text. However, it's not a problem in opera. Haven't checked the mac side yet. mike Anthony Ettinger wrote: i'm not seeing it. --- Mike Soultanian <[EMAIL PROTECTED]> wrote: I'm messing around with css stuff and I'm trying to figure out why I'm getting a 1px line under my "Spanning" text. I think I heard a solution for this a while back, but I can't remember what it was. Any suggestions would be appreciated. http://www2.csulb.edu/colleges/cota/test.html Thanks! Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Anthony Ettinger ph: (408) 656-2473 web: http://www.apwebdesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] thin line under span
I'm messing around with css stuff and I'm trying to figure out why I'm getting a 1px line under my "Spanning" text. I think I heard a solution for this a while back, but I can't remember what it was. Any suggestions would be appreciated. http://www2.csulb.edu/colleges/cota/test.html Thanks! Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] width: auto vs 100% and height stuff, too
What is the difference between declaring width at 100% or auto? I guess
what I'm more interested in is why you'd want to use one or another with
certain browsers.
I was studying the css at yahoo mail's site (still amazes me) and
noticed that they're using a selector hack to override the width for
certain browsers:
div.sidebar div{width:100%;}
html>body .sidebar div{width:auto;}
What is the difference between the 100% and the auto? I'm guessing
there is some kinda quirk at play here and I'd really like to know what
it is.
I also noticed that they do this:
.modulecontainer div{border-style:solid;border-width:1px;margin:-2px
-8px;height:1em;}
html>body .modulecontainer div{height:auto;}
notice that they override in the height. However, in this case it's 1em
vs auto. Why are they doing this?
I'd appreciate any input!
Thanks!
Mike
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] mail going through?
I haven't received mail for a while.. Anything going through? mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Question about rounded corners on Yahoo Mail site
So, I was looking at the css on the Yahoo Mail website for rounded corners and it looks pretty complex. Is there anyone else that has toyed around with a method similar to the one they used or has a resource that explains the method that yahoo used to build them? I'd really like to understand what they're doing and I've scoured the web for hours (literally) and haven't come up with anything. Thanks! Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
