Re: [css-d] Beyond CC's, targeting Mozilla, Safari and Opera
Manfred Staudinger wrote: Hi list, Currently I'm thinking about a consistent and simple method for CSS to target not only IE's but also Mozilla, Safari and Opera, each of them separately and standards compliant. Up to now the CSS language actually available for developing web sites is limited by the weakest browser to be supported (IE 6, IE 7). Many great techniques have been generated and documented by web developers to overcome bugs and shortcomings. These constrains will not go away for years to come. But if we had a method to target the most advanced browsers, we would be able to _add_ something new to the (technically) minimalistic approach dictated by MS. Web sites would then look differently in different browsers while functionally still equivalent (a must, I suppose). What are your pros and cons? Hi Manfred, As others have already said, there are no real advantages to browser detection and targeting. However, your idea of giving more advanced browsers more advanced CSS does have advantages. It's called progressive enhancement, and it's quite possible without browser detection. I suggest Googling progressive enhancement for more on the general idea, and reading the book Transcending CSS for in-depth teaching of how to design and develop web sites with a progressive enhancement mindset. (The author states the transcending way of designing goes beyond progressive enhancement, but I think it's just mincing words -- same basic concept and techniques.) Best, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help With Nested List in IE
Steve LaBadie wrote:
When I create a nested list the border-bottom disappears in IE. If I
remove the border: none; a double border appears under the last item in
the nested list. Is there a work around?
#leftside #leftnav ul {
padding: 0px;
margin: 0px 0px 0px 15px;
list-style-type: none;
}
#leftside #leftnav ul li {
padding: 3px 0px 3px 0px;
border-bottom: 1px dashed #c6c6c6;
}
#leftside #leftnav ul li ul li {
border: none;
}
Hi Steve,
Without seeing your page, all we can do is guess, but have you tried
using a hasLayout hack on the rule that sets the border? That's where
I'd start, and if that didn't fix that, I'd try adding hasLayout to its
ancestors too.
http://www.satzansatz.de/cssd/onhavinglayout.html
HTH,
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Use or not to use Css to layout form components
Marcos wrote: I'm primarily a web component developer and now I'm performing two roles (developer/designer) and one doubt always remain in my mind Should I use tables to layout form components such as combos, textboxes and so on ? I think the Css approach for forms very difficult to implement for complex forms :-( Marcos, I don't think tables make sense unless you have a form where no checkboxes or radio buttons, and since I never have forms like this, I never use tables to lay out forms. Some good semantic list markup makes styling even complex forms not too difficult. This is a great tutorial describing one approach: http://www.sitepoint.com/article/fancy-form-design-css Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Displaying Applicable Styles on Element Mouse Over
Sasha H wrote: I would like to know if there is a means of writing JavaScript that will dynamically display the styles which are currently applied to any DOM element on a web page (i.e., those applied by ID, those applied by class, etc.) as the user moves their mouse over them. Sasha, I suggest you take this question to a list that deals with JavaScript in addition to CSS, such as webdesign-l. While CSS can handle the display of the boxes themselves, it's not meant for dynamically creating data. You'll need some sort of scripting language to pull that information from the DOM and insert it into the page with the proper markup. http://css-discuss.incutio.com/?page=OffTopic Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] liquid equal height columns without tables [WAS Re: Use or not to use Css to layout form components]
Jason Das wrote: FWIW, As far as I'm aware, the only thing tables can do for layout that you can't do with css is liquid equal hight columns. For the record, CSS can do this perfectly well using display: table-cell. It's just IE that can't do it. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hover [reformulated]
faramineux wrote:
Here is the basic code I use for links:
a:link {
color: #5a0113;
font-size: 13px;
font-weight: normal;
text-decoration: none;
}
a:hover {
color: #2B4058;
font-size: 13px;
font-weight: normal;
background-color: #fffbdf;
border-bottom-style: dashed;
border-bottom-width: 1px;
}
The 3 linked images - including the logo - on the page show the
styling too on hover! For example when I hover over the logo, the
dash line/color appear under the logo. Something is wrong.
Nope, I'm afraid this is correct behavior. If you have this markup:
aimg/a
The border and background will show up on that a element that is
wrapped around the img element, because it's just another a element.
The styling is not showing up on the img element, but on the a
element around it.
There is no selector in CSS 2.1 to select an element based on its child,
so there's way to say select all a elements that have img elements
as their children. Thus, the only way you can get rid of the styling on
these particular a elements is to give them a class.
a.imglink:hover {
background: none;
border: none;
}
Zoe
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Bottom of div disappears in IE6
Ian Young wrote: In IE6 (what else), the bottom of the div is hidden behind the footer. On pressing f11 to show whole screen, the bottom appears again. When restoring to normal window size the bottom of the div is as it should be. I wasn't sure what to search for in the Wiki, but it must be something relatively simple. Page at http://www.dbadvertising.co.uk/css/portfolio.php Ian, You have a min-height of 595px set on #content, but also set a height of 575px for #content in a conditional comment. Change this to 595px and I bet the overlap will be fixed. Zoe __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Setting color relative to another element [WAS Re: Is There A Way To Do This?]
Elli Vizcaino wrote: Was just wondering if there was a way to set the hex color of one element at 50% saturation of another element's hex color? Nope, not with CSS. It's not a programming language, so it only deals in absolute values, not variables. The closest you could get would be using the opacity property, but even this wouldn't do what I think you want. By the way, to start a new thread, do not reply to an existing message. When you do this, your message gets threaded on to the old thread, which messes up the archives and makes it less likely that others will see your message and subsequently reply to you. You must send a new message with an appropriate and descriptive subject line to css-d@lists.css-discuss.org in order to start a new thread. Trust me -- this helps you as well as all the rest of us. Best, Zoe __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] IE7 Render bug?
Kent Broestl wrote: Hello all: I just put up this site: http://www.holyfamilycolumbus.org/ which displays fine in everything except IE7. In IE7, the only thing that is visible is the background image on the body tag. View it in any other browser to see what it is supposed to look like. Does anyone have any ideas what this could possibly cause this? Hi Kent, You have a bunch of validation errors in your XHTML. I suggest cleaning these up first and seeing if that fixes things. Zoe __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] content little off in FF
[EMAIL PROTECTED] wrote: I had trouble in the past displaying my content right in IE7, but that I solved 2 days ago...The funny thing now it though, that my content is a little off in FF, while before that was not a problem at all... It has to do with this little piece of coding: margin-left:80px !important; /* was 103, for IE only */ margin-left:100px; /* was 80, FF */ As you can see I have been playing around with the numbers, but cannot seem to get it perfectly played in both browsers?! See: http://www.cmamali.org/koutiala.html Hi, I suggest you simplify how you are doing things. That pattern image is simply decorative, right? Then make it the background of #content. Then, all you need to do is give #content some left padding and get rid of the left margins on the content inside, and you're all set. Best, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Looks fine on my IE6 but not others
Tim Offenstein wrote: I'm hoping someone can detect and substantiate this issue for me because I'm flying blind. The site is http://www.rst.uiuc.edu. It validates fine and looks fine in IE6 on my desktop but another person on campus says when they look at the site (also in IE6), the main content is pushed down until it clears the left-hand menu. I can get the drop to happen if I narrow my window to about 750px, which this user is probably browsing at (remember that not everyone maximizes their window, not even on 800x600, and some people have sidebars, etc.). It's due to the photo under Graduation Celebration which cannot be broken. I recommend setting a min-width of about 760px on the page and using a JavaScript to get this min-width in IE 6 and lower. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Mixing fluid layouts and px padding
Richard Brown wrote: Hi I have just completed the re-design of this site: http://www.cregy.co.uk/ http://www.cregy.co.uk/wp-content/themes/snails_revisited/style.css I was at first using a fixed width design but wanted to regain a fluid width design. However, I ran into the problem of using widths = % but padding in px. It was breaking the design in that the columns were not sitting side by side. How do other folks get around this please? Is there a better method of padding elements than px when doing a fluid design. Rich, You can set margins on the elements inside the columns instead of setting any padding on the column divs themselves. You can also nest a div inside each column div that has no width set on it and just give each of these divs padding or margin. By the way, your left column is dropped down in FF 2 no matter what size I set my window to. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Banner getting cut off with horizontal scroll
tsooki.com wrote: If I resize my browser so that I get a horizontal scroll bar, I'm noticing that when I scroll to the right, the banner at the top is cut off: http://www.mcparkandplanning.org/home.shtm I've tried many variations of auto, inherited and 100% widths on the various elements, and can't get it to work correctly. We don't want to get rid of the horizontal scroll bar, just make sure the top banner and toolbar are always maximum width. We also don't want to use overflow:hidden with our content. We just want to make sure that the top bar is always maximum page width. Is this a bug? Any ideas? Laurence, No, this is not a bug. Divs aren't like tables -- they won't automatically stretch out to hold their contents. The content is allowed to overflow out the sides or the bottom. Your attempts to make them do so using width: 100% merely make the divs match the width of the viewport, which is not what you want -- you want them to extend past the width of the viewport when content inside them does. To force divs to stretch to hold their content regardless of the width of the browser window, you can try playing around with the float property or the table display values. However, in your case, it seems like an appropriate min-width is all you need, since the content inside your page is fixed in width. Your content is 985px wide, so a min-width of 1000px on the wrapper would be a good place to start. You'd need to adjust widths inside accordingly. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Odd verticle image spacing in FF
Schuyler Towne wrote: Hello! First post to the list, actually...this is my first post to any mailing list ever, that I remember. Welcome! http://5-wits.com/development/home/index.php - in-progress html/css page I need a username and password to see this page. If you could send that through to the list, or post your page in a non-protected area, we can take a look and probably help. The problem I have, and I realize I'm rambling, only getting to the problem at this point, is the section of photos in the lower right hand corner. In IE7 they group together very nicely and either don't extend below the bottom of their containing div, or do so relatively unnoticeably, however, in FF 2 space is added between each row of images, extending the photo section noticeably below it's containing div. I found this conversation in the recent archives: http://lists.css-discuss.org/mailman/private/css-d/2007-July/079462.html but I'm not certain it applies to my situation, and if it does, I don't fully understand the solution offered. I'm sorry I didn't dig further back, but it's a fairly daunting archive. Yeah, I wouldn't bother with the private archive. See this page: http://css-discuss.incutio.com/?page=SearchCssDiscussList Best, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Maps, Google or Virtual Earth use
Mcdaniel, Brett wrote: I am wondering if anyone out there is using either Google Maps or Virtual Earth? Have you been able to embed stuff into a CSS file if you have? Just starting a project with maps and wanted to know how people are doing them. Brett, Can you be more specific about what stuff you're trying to do with CSS to your maps? Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Firefox behaviour - Child element margins applied to parent elements instead
Philippe Wittenbergh wrote: On Jul 25, 2007, at 8:05 PM, Tony Haddon wrote: My problem lies in the margin I've applied to the h1 element here. It ought to offset the h1 block from the containing #inner element. In IE6 it works as planned, but Firefox appears to apply the margin to the element two steps up the tree e.g. the #outer element. The behaviour in Firefox, and Opera, Safari, iCab, Konqueror and all other modern browsers is correct and expected. It is called escaping margins sometimes. IE is wrong because your parent container (#outer) has a width applied, which trigger the dreaded 'hasLayout' property. Tony, For more information about the concept Philippe is talking about, see this article: http://www.complexspiral.com/publications/uncollapsing-margins/ Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] my CSS is often working offline but not online , why is that so?
lavinia Ebert wrote: Hi, why is it that the behaviour from the browsers is offline different to online? The browsers (testing on IE6, Opera, Fireforx2 and Netscape) are interpretating my CSS often differently offline and online. Can I do something about this? Its an annoying process to have to upload everything again and again to see when the code is finally working correctly... Lavinia, Can you be more specific about how the browsers are interpreting [your] CSS often differently offline and online? Do they sometimes fail to show any styles? Do they sometimes fail to show just the updates you've made to the styles? Something else entirely? Etc. Also, can you send us a link to a page we can look at? Thanks, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Problem with text content spilling out of container
Brett wrote: As a general question, it seems as though CSS only concerns itself with width:% and does not really consider height:%, is that true? If you look at my link and adjust the browser window, it appears to change only in relationship to the width of the window not the height. No to your first question, but yes, your second observation is correct. Height is liquid based on content. If you put more content into something that has no explicit height declared, it will grow larger in height. Remove content and it grows smaller. Same thing applies when the content is resized, rather than changing in amount (eg, the font size is changed, the width is decreased so content has to re-wrap onto more lines, etc.) Now, if you explicitly declare a height, height no longer concerns itself with how much content there is (hence the reason why you should almost never declare a height). Percentage dimensions are based on the dimensions of their parent. http://www.belleartae.com/arrow/index.html It looks as though you are wanting to make that pink div stretch to fill the height of the viewport, correct? Here's a tutorial on how to do that: http://www.communitymx.com/abstract.cfm?cid=BAD95 I personally recommend not bothering with it, though. Letting the content dictate your height is sufficient in most cases, especially since most pages on most sites are longer than the viewport anyway. Zoe __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] iframes - who still uses them
Ray Gresko wrote: If you're referring to my IFRAMEs and max height post - I'd love to find a way to use a div with overflow to perform a similar function. My page design is essentially a menu shell that browses through content by setting the target of the iframe. Is there a way to do something similar with CSS (without having to copy the shell for each page of content)? No. CSS is about presentation, not controlling content or behavior. You can create a scrolling area of a page with CSS, but that scrolling area can't show a separate HTML document within it. Please see http://css-discuss.incutio.com/?page=OffTopic for other lists you can use to get ideas on how to use iframes or alternate programming methods to achieve the effect you are looking for. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] [ADMIN] Re: iframes - who still uses them
Ross wrote: Does anyone still use frames or iframes? Is it a valid development technique? It's not a valid question for this list. This thread is off-topic and needs to end now. Thanks, Zoe Gillenwater css-d list moderator __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] ID vs Class
Travis Killen wrote: Why should class be used to define an element vs. id? I'm sure each one should be used in different situations, and would like more information on making the right choice. Do child elements inherit properties from there parent class? from there parent id? Any links to information on this topic would be much appreciated. Travis, We have a page on it in our wiki: http://css-discuss.incutio.com/?page=ClassesVsIds A quick reminder, while we're talking: To start a new thread, do not reply to an existing message. When you do this, your message gets threaded on to the old thread, which messes up the archives and makes it less likely that others will see your message and subsequently reply to you. You must send a new message with an appropriate and descriptive subject line to css-d@lists.css-discuss.org in order to start a new thread. Thanks, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] image disappears in IE
Sandy wrote: http://sandyfeldman.com/test/cbs/test02.html http://sandyfeldman.com/test/cbs/cbs2.css When I browsercam this page to see it in IE6 and IE7 the logo in the top left corner of the page disappears. It's in its own div, on top of two other divs. I see the logo in IE 6 and 7. Looks like Browsercam is wrong. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Problem centering div
Brian Crescimanno wrote:
On 6/20/07, Lyn Williams [EMAIL PROTECTED] wrote:
I have a problem centering a menu I have within a div. I have tried using
many methods but I get no luck.
have you tried:
div#buttons ul{ width: XXXpx; margin: 0 auto; } where width is set
equal to the menu's width?
Lyn,
I see you've taken Brian's advice and set a width. But I would recommend
you change its unit to ems, as setting a width in pixels ensures that
your buttons will drop down as soon as the text is resized, or any time
a user doesn't start with the font size you started with and designed for.
Alternately, you can avoid widths altogether by using display: inline
instead of float:
http://24ways.org/2005/centered-tabs-with-css
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] expandable menu woes again
[EMAIL PROTECTED] wrote: In general terms, how does one go about hiding styles from a aprticular browser? I've not attempted to do it yet, but would like to know what is generally involved before I attempt it The main browsers people seek to hide styles from, NN4 and MacIE, are pretty easy to hide styles from. See these sources for the variety of ways to do it: http://centricle.com/ref/css/filters/ http://dithered.chadlindstrom.ca/css_filters/css_only/index.php http://www.l-c-n.com/IE5tests/hiding/ Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] where to find info
Fiona wrote: Now I want to learn how to adjust the code to display in some of the older browsers - is there a good reference site that any of you know of that explains some of this ? Hi Fiona, You'll find that as you get better at CSS you'll find the need to hack older browsers decreases. You just learn how to avoid their problems in the first place by using more robust CSS. Using really solid markup is another great way to avoid browser inconsistencies, as is designing for standards instead of broken browsers in the first place (which it sounds like you're already doing, but just for the benefit of others) -- ie, don't test in IE first! The one area where I still have hacks is for IE -- and not for older versions, but for IE 7 and 6. These are indispensable resources for learning how to deal with IE: www.satzansatz.de/cssd/onhavinglayout.html www.positioniseverything.net And here's the best site for dealing with MacIE: www.l-c-n.com/IE5tests/ I personally don't worry about older versions of any other browsers, as very few people use them, their problems are usually minor, and there's usually nothing you can do to hack them. Just writing good markup and CSS is usually the solution here. Hope that helps, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] expandable menu woes again
Rita Crisafi, Crisafidesign.com wrote: I checked progress of a page :http://www.crisafidesign.com/ICS/ozone.html. It's totally screwed up in IE 5.5 (I have a screen shots here: http://www.crisafidesign.com/ICS/problems.html), which is what my client uses. http://www.crisafidesign.com/ICS/oz_airmoney.html is a mess too... Rita, Your problems are primarily stemming from IE 5.x's incorrect box model. Please read the following article, then take steps to feed IE 5.x modified widths: http://www.communitymx.com/abstract.cfm?cid=20B41 Once you've hacked the box model, you may still have rendering problems, but this should get you most of the way there. (You really should try to get your client to upgrade to IE 6 at least. Try telling them that their browser is several years old and thus vulnerable to lots of virus and spyware attacks. That usually works.) Best, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] expandable menu woes again
Brian Crescimanno wrote: On 6/20/07, Zoe M. Gillenwater [EMAIL PROTECTED] wrote: (You really should try to get your client to upgrade to IE 6 at least. Try telling them that their browser is several years old and thus vulnerable to lots of virus and spyware attacks. That usually works.) Good technique; and where I go here may be out of bounds--but I think it warrants discussion: is there a browser version you can point to and say look, I'm sorry, we just can't support that. In my opinion, IE 5.5 has not been standard issue since 2000 or early 2001 at the very latest; that is, it is at the very least 6-7 years old. I would hope, at this point, we can all agree that attempting to support Netscape 4.x (released 1998) or IE 4.x, and probably 5.x is just out of the question. But when is it reasonable for us to point to IE5.5, its broken box model, and its complete lack of support from Microsoft and say Nope, not doing it. Quite frankly, I'm already in that boat personally, but I do see a lot of people still considering it at this point and I really do wonder why. Hi Brian, This is a frequently asked question on css-d (and in web design circles in general) but one that has no right answer, is entirely personal, and liable to get people upset at others opinions. Because of that, and because it's not really a discussion of how to use CSS, it's not really on-topic to discuss on the list here. If you wanted to talk about *how* to hide styles from certain browsers, instead of *if* you should, that would certainly be on topic. Thanks, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] firefox2 and h1
jaklitsch maya wrote: I just redesigned http://www.ccpoma.org and it looks the way I want and have also validated both the css and the xhtml. I just checked it in my updated firefox browser and I have a PROBLEM! Maya, You appear to have fixed the problems. Site appears basically the same in FF 2, IE 7, and IE 6 on Windows XP. However, I wanted to point out for next time that you can save yourself a great deal of headache if you test in FF or another standards compliant browser first, and then fix any bugs that IE displays. IE, especially IE 6, is a very buggy browser, and if you develop for it you'll be developing for bugs that you can't make other browsers emulate. It's much more wise to develop for the standards, then hack IE where needed (or just tweak things so that no hacks are needed). Best, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Min-height, height, and viewport size
Dave M G wrote:
Audra wrote:
It should be...
#whole { min-height: 100%; }
You described it correctly at first so did you mis-type perhaps?
Yes, that was a typo. Thank you for catching it.
Just to be double sure, I rechecked my CSS code and uploaded it again.
The html and body tags are set to height: 100%, and the #whole
containter is set to min-height: 100%.
But the problem as originally reported is still there.
Dave,
Your #whole div *is* filling the browser window. But the red borders are
not actually borders on it, but elements nested within it. You haven't
told the bottom one to move to the bottom of its containing element, the
#whole div. You could do so with absolute positioning.
The problem then becomes that the left and right red borders, again
nested divs, do not stretch down the full height of #whole. This is
because #whole only has a min-height on it, not a height, and they need
their parent to have a height that they can base their own height or
min-height on.
You can probably get it to work by messing with table display properties
instead, then using the height stuff for IE hacks. Not sure how IE 7
will handle that, though, since it doesn't have all the auto-stretch
bugs that IE 6 has but also doesn't have support for table display
properties.
I'm afraid I don't have time to try a whole new system that might be
required in your situation, but hopefully that gives you additional
understanding about what is going on and some ideas about where to turn
next for a solution.
Best,
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] ADMIN Re: test2
Normally I would respond to messages like this off the list, to scold the subscriber for wasting the list's bandwidth and clogging the inbox of over 8000 subscribers by sending them messages they can't do anything about, but this has happened far too frequently lately. So, let me state publicly, that test messages should *never* be sent to the list. If you are having trouble sending to the list, do something that will actually help you, instead of sending test messages: email the list admins at [EMAIL PROTECTED] with a full description of your problem. We will look into it for you and make sure that your message gets through. 9 times out of 10 your message does not go through because you have done something wrong (sent it from the wrong address, tried to attach a file, not changed a digest subject line, ...), and in these cases your message gets caught in a queue that we admins manually go through to reject such messages with the reasons stated. So, if you just sit tight for a bit, you'll most likely find out why your message hasn't gone through and what you can do to fix it. Other times, the list is simply down for everyone, but again, if you are patient, it will come back up. Let's please keep this list clean from junk and useful to everyone. Thanks for your understanding and cooperation. Zoe Gillenwater css-d list moderator __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] ADMIN Re: page opening sizes
Phil, I already indicated to you and the whole list that your question is off-topic, and pointed you to other lists that could help you. Posting back to this list was not appropriate. Everyone else, you also knew it was off-topic, so posting JavaScript solutions and commenting on usability is not appropriate. This thread needs to end now. Everyone, please respect everyone else on this list by following the rules. Thanks, Zoe Gillenwater css-d list moderator __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Liquid Adaptive Pullout
Sébastien FICHOT wrote: I wonder if someone knows how to make a liquid pullout. All pullouts i've seen for now use fixed width, and floats columns, i let you imagine what if the browser windows is reduced... Hi Sébastien, I don't know if you and I are using the same definition for pullout (I'm imagining a div containing a pullquote), but if so, all you need to do to make it liquid is change its width to a percentage value. We could provide more pertinent information if you would provide a URL to an example of what you are talking about, or a mockup of what you want to do. Best, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Centering a site which makes use of a fixed header and footer
nico haitas wrote: I need to center the site to the screen, even if the user has set their screen resolution to 800 x 600px or 1280 x 1024px. Nico, Have you tried the standard centering solution? http://css-discuss.incutio.com/?page=CenteringBlockElement If so, and it's not working, we'll need to see the page to be able to help debug said page. Best, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] research on styling links
Kelley Greenman wrote:
I'm doing research on a problem we're having with links showing up in
different font sizes. The CSS someone else wrote for the links relies
either on the font size defined in the selector or on the font-size defined
by a. E.g., selector a {font-size: 12px;}.
From my experience, the erratic font size, happening in IE 6 only, is
because the links for each selector haven't been defined as above. The
visited links are displaying in smaller font size, inheriting the font size
of the selector containing them. Sometimes this goes away, only to reappear
five minutes later. I haven't had time to fully experiment with the
behavior and nail it down.
I've found the typical resources on the problem with IE and some places
where the LoVeHA mnemonic is mentioned. (list of links below). Are there
any other good resources for documenting this in the company WIKI?
Of course, on that note, I could be all washed up, so please correct me if
I'm wrong about the above.
Well, we have no way of correcting you without seeing the page. :-) You
can correct yourself, however. Does your proposed fix work? If so,
you're not all washed up. If not, then you are. ;-)
FWIW, I've never seen the need to specify each link pseudo-class
separately. Of course, I've never seen the need to specify font sizes on
the a element either -- the body and heading elements get font sizes,
and occasionally a footer or sidebar div, but that's it. I've found that
declaring font sizes on paragraphs, links, list items, etc, just causes
undue complication and problems.
Post a URL to your page and we can give you some help.
Best,
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Nested @import in IE
Ingo Chao wrote: cFA wrote: On 4/12/07, Zoe ASHER [EMAIL PROTECTED] wrote: Has anyone ever experienced a problem with having style applied in IE when '@import's have been nested 4 levels deep? I've just tried to do this, and can't view the styles which are at the deepest level of nesting in IE6. Firefox works fine. Yes, it is a problem~ I have a test page for it, but havent found a way around it, other than of course importing what I can on the same level. http://aenonfiredesign.com/sandbox/importlevels/ With this testcase, IE7 shows the same problem. Plus a pretty long FOUC. I didn't see any FOUC, but I can confirm that the bug still exists in IE 7. It would be helpful, however, if we weren't comparing black to gray, but, say, black to yellow, or something more obvious. Otherwise, a very nice testcase, Clint. a different Zoe (not used to that...) -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] IE 6 Float Issue
Jeff Chastain wrote: Well, what I have ended up doing is floating everything left. The example here is part of the page that is just 2 columns (the header), but below that is a three column layout. If I float everything left, giving all blocks a defined width, everything appears to work. As this is a fixed width layout, I can go with defining widths for each block. Not the cleanest thing in the world, but it appears to be working. Why do you think isn't this clean? Floating all blocks is a perfectly acceptable way of making columnar layouts, and no more messy than floating one block and assigning another one a side margin. As you've found, floating all blocks is usually the most reliable way, not just because you avoid the 3-Pixel Bug and other bugs, but also because you set up new block formatting contexts for each column, which is usually what is desired. If this works for your layout, great -- use it. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] changing the containing block for width reference
Hi all, I'm suffering from a cold, which often results in me thinking and doing very ridiculous things. So, I'd like to make sure I'm not missing something very obvious in regards to CSS for a page I'm working on. I just need to confirm that there is no way to change the containing block that an element refers to for its width, correct? Note that I am *not* referring to a containing block for the sake of positioning (for in that case, it is possible and quite easy to change the containing block). Rather, I'm interested in whether it is possible to give a parent div a min-width, but have its child div not look to the parent div for its width but instead look to the viewport, or body element. I'm pretty sure it is not possible for the child div to skip its parent div and use the viewport as its containing block for calculating its width, but like I said, I'm not really thinking straight right now. :-) Thanks for any help you can provide this sick lady. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] changing the containing block for width reference
Philippe Wittenbergh wrote: On Mar 30, 2007, at 10:40 PM, Zoe M. Gillenwater wrote: Note that I am *not* referring to a containing block for the sake of positioning (for in that case, it is possible and quite easy to change the containing block). Rather, I'm interested in whether it is possible to give a parent div a min-width, but have its child div not look to the parent div for its width but instead look to the viewport, or body element. I'm pretty sure it is not possible for the child div to skip its parent div and use the viewport as its containing block for calculating its width, but like I said, I'm not really thinking straight right now. :-) In that case, the width of the child div will always depend on the computed width of the parent, unless the child div is absolute positioned (and the parent is _not_ relative/absolute pos). Unless you are Internet Explorer, then you, Zoe, are probably thinking straight. That browser does all kind of weird things, as you know. Ah yes, absolute positioning. I had considered that, but it won't do in my particular case since there is something under the block that would need to be absolutely positioned. There may be some tricky way to use it anyway, but the layout effect is not worth it -- nor can I be trusted to come up with any tricky CSS effects today. Thanks for confirming my thoughts. Thanks for any help you can provide this sick lady. Take care of your cold. Thanks! I'd still be in bed if I hadn't spent the first three days of this week so. Work calls! Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] pros and cons of separate css files for IE and non-IE?
George Ornbo wrote: On 3/28/07, david [EMAIL PROTECTED] wrote: Use a common style sheet, with one (or more) second IE-only stylesheets linked into the HTML via conditional comments. No hacks needed. I'd second that. Try and avoid hacks entirely if you can. The box model hack is easy enough to avoid if you code defensively. If you really need to hack use conditional stylesheets. Hacking in the same stylesheet can cause problems in newer browsers, especially IE7. It can cause problems, but not if you do it right. For instance, if you use the star html hack in your main style sheet to feed a rule to IE 6 and lower, and IE 7 doesn't need the different rule, then there is no harm in including it in your style sheet. You're only hacking dead browsers at this point, so you're safe. (I suppose you could argue that they could add back support for star html to IE 8, but even in that extremely unlikely case, you'd have to go back to all your sites anyway to fix other things if the IE team was that foolish, so it wouldn't hurt to have this one extra hack to fix.) If, on the other hand, you need that different rule to be read by IE 7 in addition to IE 6 and lower (which I find is usually the case -- IE 7 needs almost as many hacks as IE 6), then you're probably best off just feeding that rule to all versions of IE via a separate sheet hidden from other browsers through conditional comments. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] ADMIN Re: CSS color names values versus accessibility
Let's make sure that this thread stays on topic. Please no more posts about: -- the various spelling of words in the USA versus the UK -- what may or may not be included in CSS 3 -- anything else off-topic It's fine to discuss the accessibility implications of certain CSS rules, but please do not stray into discussing accessibility in and of itself. Keep the connection to practical CSS, or don't post it here. Thanks for your cooperation, Zoe Gillenwater css-d list moderator __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] perfect font sizes- any sample solutions?
Jukka K. Korpela wrote:
On Mon, 26 Mar 2007, ~davidLaakso wrote:
html {font-size: 100%;}
body {font-size: 1em;}
and set individual selectors in em.
Does that really summarize the collective wisdom? Logically, setting font
size to 100% or 1em is equivalent to not setting it all, assuming that no
other style sheet sets it. Due to browser bugs, they might matter. But is
this really relevant nowadays?
Moreover, why 100% in one rule and 1em in another? That sounds like
invoking _both_ the bugs in % implementation _and_ the em bugs.
As far as I know, there are fewer bugs with % than with em, though this is
of course difficult to measure.
So why not just set in % for anything that should be relatively sized, and
not set html or body size at all?
Exactly. I've never understood why some people set a base font size in
percentages, and then duplicate it with ems. I set a base font size in a
percentage, then use percentages throughout to size other elements
relative to that base. Of course, the base is going to be different for
every user because they have different defaults, but that's ok. My sites
are made to handle a good degree or font and window resizing.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Safari miscalculating bottom for absolute positioning
I'm not a Mac user, so I'm not skilled at debugging problems in Safari
and am wondering if some of the Mac CSS gurus can help me. I have a
footer div, relatively positioned, that contains two anchor elements
which are absolutely positioned to appear on its bottom. This works
everywhere except Safari. Safari adds a great deal of space below the
footer and positions the anchors at the bottom of the page.
The space is not filled with the background color of the footer div, so
I know Safari is not extending the height of the footer div.
Also, if I change the bottom value to a top value, the anchors do sit at
the top of the footer, so I know it is not a case of them not
recognizing that they ought to be positioned in regards to the footer
div and not the body.
If I change the font size, the gap between the bottom of the footer and
the anchors widens or contracts accordingly. I'm not sure what this
means, but it's another clue, perhaps.
The bug occurs on every page of this site:
http://www.hsrc.unc.edu
Here's the CSS for the footer and its child elements.
#footer {
position: relative;
clear: both;
padding-top: 1px;
background: #e1eef0 url(../images/footer_bg.jpg) repeat-x;
font-size: 90%;
}
#footer p {
margin: 0;
margin-top: -8px;
padding: 20px 80px 10px 58px;
background: url(../images/footer_swoosh.gif) no-repeat;
}
#contact-btn {
position: absolute;
bottom: 0;
right: 75px;
width: 70px;
}
#sitemap-btn {
position: absolute;
bottom: 0;
right: 10px;
width: 57px;
}
As I said, I'm not an experienced Safari debugger, so I'm not sure what
I should even try in order to squash this bug. The only thing I tried
was giving the 0 values a unit, 0px, but that didn't work. I don't have
any other ideas.
Thanks,
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Safari miscalculating bottom for absolute positioning
Alex Robinson wrote:
the problem seems to be related to #project-areas and #latest-news.
Remove those two blocks and the problem goes away. As do the two
blocks. Of the two blocks it's #project-areas which is doing the most
damage. Try setting #project-areas p and #project-areas ul to display:
none to see what I mean.
I guess this is to do with fact that Safari somehow remembers the
height of the body element based on the dimensions of the elements
present at load time. I've seen this kind of thing happen when
removing elements with javascript and the same sort of thing seems to
be happening because of the absolutely positioned elements. I hadn't
seen this exact behaviour of yours before, but it certainly looks like
Safari is hanging on to its notion of where #footer starts out...
Ah yes, that makes sense. It's probably due to the negative margin
technique this site uses that pulls the sidebar up into a hole (because
not just the home page displays it, and the other pages don't have those
two divs you mentioned).
The good news is that the nightly builds of WebKit do not display this
behaviour.
That is good. How often do updates to Safari come out?
The way I work around this sort of thing at the moment is to target
Safari
http://tanreisoftware.com/blog/?p=39#safari
so that the offending blocks are hidden and add a class onload so that
they get shown again. Not pretty, but the best I've been able to come
up with so far
http://www.fu2k.org/alex/css/cssjunk/hsrc
html[xmlns*=] body:last-child #project-areas, html[xmlns*=]
body:last-child #latest-news { display: none; }
html[xmlns*=] body.enabled:last-child #project-areas,
html[xmlns*=] body.enabled:last-child #latest-news { display: block;
Thanks. I'll consider doing this.
Alternatively, put the button links inside a div (or similar) and
position those. Safari doesn't seem to get things quite so badly wrong
then.
Yeah, I thought about doing this as well, but I hate mucking up the HTML
just to kill a bug that will go away soon. I'll take another look at it,
and my logs, and decide if it's really worth it to do anything or just
live with it.
Thanks,
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] default box margins for tags
Bradley Wright wrote: On 21 Mar 2007, at 18:21, ~davidLaakso wrote: Bradley Wright wrote: To alleviate cross-browser issues like this myself, I tend to use a reset CSS file which reverts all browser styling to a blank slate, allowing you to start from scratch and render them however you please. An example is the Yahoo! User Interface library CSS file: http://developer.yahoo.com/yui/reset/ Everyone is entitled to an opinion. I /do not/ agree with yours. Set only what is necessary to set. Sometimes resetting the styles is necessary for a better cross- browser experience. I think David was saying exactly that. Reset the styles that you need to reset for a better browsing experience. Don't reset the styles that you don't need to reset, or that the user ought to have the majority of control over. Keep the CSS lean, mean, and on-target. How is an extremely small CSS file resetting default styles going to add much bloat to the overall styling of the page? Again, I think what he meant is not that the global reset rule is adding a lot of filesize, but that your CSS file should only contain the bare minimum of things you need to change from the defaults, or, more broadly, the bare minimum of declarations to achieve a particular effect. When people use the global reset rule, they follow it later in their sheets with rule after rule adding back in those margins that they just did away with. That's fine if you want to do that, but David, myself, and others find it safer to keep everything in place until we need to change it, instead of the other way around. This isn't so much a filesize issue, for me anyway, but rather one of complexity: being able to keep track of all the things I have done, which rules are affecting each element, where a buggy behavior might be coming from, etc. It will be far easier to maintain and revise. And it will be more future proof. How will it be more future proof if the next version of IE, Firefox, or Safari has different default styling? Do I then need to go through all my style sheets and update them because the vendors decided to use padding instead of margin to offset list elements? Why not just do away with all vendor-based styling to begin with? That is much more future proof in my opinion. Well, this list is not a place to discuss what the vendors, or W3C, ought to do or not do, as it doesn't affect what we have to do to deal with the reality of vendors now. I can't really comment on whether the global reset rule is more or less future proof than any other approaches. I do agree with David that it is easier to maintain and revise when you don't use it, though, but this is much a matter of personal preference and habits. There's no use trying to convert either side over: we can each offer what we find useful about our particular method, but in this case it's not really possible to assert that either is better than another inherently. It's really up to the developer and even the particular site. As David said, it's just an opinion. Best, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] CSS Development General Question
Urb LeJeune wrote:
h1 h2 h3 h4 h5 h5 { header rules}
For the benefit of the newbies, I think the selector Urb meant to write is:
h1, h2, h3, h4, h5, h6
Without the commas it would only select some remarkably invalid markup
that most people are not likely to have. :-)
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] aligning data with css
Rolf Mortenson wrote: What I've discovered is that I can't be sure how many columns I'll have (dynamically generated), which means that setting alignment by column won't work consistently. So I'm now thinking that the only way I can do this is to add a class to each cell based on data type - something like td class=date and td class=percent td class=value, and define the alignment for those classes... which might also give me an added hook for adding additional visual cues to distinguish different data. Considering that I know what type of data it is and how I want each type of data aligned (left, right or center), but I don't know which column they'll appear in, is there a better, more efficient way? That's the only way, other than using JavaScript to dynamically change your CSS to match whatever columns end up getting output. But that's a discussion for another list, of course. Anyway, there's nothing wrong with using classes like this if you have to. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Re Solved: IE6 Layoutgala 24 floats and percentages question
Tony Lush wrote: regarding http://warwickhanger.com/index.php?id=106 By reducing the data table size to 85% instead of 90 we created enough white space cushion that IE6 behaves as well can be expected. Defined margins instead of Auto aligned the promotional boxes on the left appropriately. Thanks -- Tony Tony, Something that often helps when dealing with IE problems miscalculating widths of tables is to wrap the table in another div and give this div a width. If you've found another solution that works in your case, that's great, but I just wanted to point out this tip for others who may be having similar problems. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Horizontal Rule Styling
david wrote:
Barney Carroll wrote:
When I've been required to create horizontal rules I usually just create
a div.horizontalRule. However if you still want to keep the HR for the
sake of non-CSS agents, you could wrap your HR inside a classed DIV, and
have
.horizontalRule
{clear:both;height:2px;width:100%;background-color:orange;}
.horizontalRule HR
{display:none;}
Question: With CSS off, would that leave extra space above and below the HR?
It shouldn't. Divs don't have default margins in any browsers that I
know of. The div should only be as high as its horizontal rule when CSS
is off.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] IE 6 Float Problem
Rodney Toliver wrote: Actually this problem manifests itself in IE6 and lower. I have posted a very simple SAMPLE page to illustrate the problem. Note: Other problems will be evident on the page but please pay them no mind. This is only a test page used to display my problem. I have a simple 3-column style layout with a header above. The left column, which I have named leftcol, is positioned fine. In the next column, I have a container that I have named rightcontain which I also floated left to position it beside leftcol. In IE7 and Firefox (the newer browsers), all seems to be fair and good. In IE 6 and lower, rightcontain slides up under leftcol. Is there a rendering bug that I am not paying attention to or have I neglected to do something? How can I fix this? Page: http://www.accd.edu/spc/distance/test/110606/default3.html CSS: http://www.accd.edu/spc/distance/test/110606/styles/ff3.css Rodney, Actually, the page looks fine to me in IE 7 and IE 6. In Firefox, it is messed up. I'm afraid I don't have the time right now to look into why that is, but I can suggest you fix the XHTML validation errors you currently have. Those could certainly be part of the problem. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] font style in disabled text boxes ie
Ross Hulford wrote: The font in disabled textboxes takes on a horrible grey indented look (ie) does anyone know the property and how to overwrite it? Ross, Many form elements are difficult to style -- and often with good reason. You can try the various links on our wiki page for more information: http://css-discuss.incutio.com/?page=FormElements Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Problems with custom image-bullets (IE of course)
Sarah McCall wrote: Can I just ask what kind of code the '[if lte IE 6] ... [endif]' is? Even though it works, I like to know the details of how, and what other programming languages I need to think about learning to enable me to make the fullest use of CSS. Sarah, They're called conditional comments. See the link Jukka sent earlier: http://www.quirksmode.org/css/condcom.html Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Firefox !important Image Print Style
L. Robinson wrote:
I've set img to display: none; in the print style sheet of one of my
sites as I want no images on a printed page. There are, however, two
images that _do_ need to print out for the user. I've specified those
images (checkmarks and crossmarks within tabular data cells) display by
adding a declaration of td img { display: block !important; } to insure
that they do (otherwise they won't in IE).
Problem solved? Hardly. Attempt to preview or print the page in Firefox
and the browser freezes. IE, Opera, et al are fine with it, but FF
chokes on the contradiction.
Can we see a page that exhibits the problem? It may very well be a FF
bug that you can do nothing about. You may want to search Bugzilla.
What's the better way?
I suppose you could always reverse it: leave *all* images to their
normal display values in the print sheet, and set the images you *don't*
want to print to display: none. But I can't tell if your current markup
would allow this without seeing your page. We can give you more relevant
help if you show us exactly what you're working with.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] The width: expression(...) hack not working
~davidLaakso wrote: Jukka K. Korpela wrote: I've seen many references to the trick of setting maximum width on IE 6 and older using an expression(...) value for width. I steal from Georg Sortun http://www.gunlaug.no/contents/wd_additions_14.html. http://www.gunlaug.no/contents/wd_additions_14.html Best, ~dL I've never been able to get the width expression thing to work, ever. Now, I've never tried Georg's examples, but they boggle my mind in their complexity, so I haven't had the courage to. Instead, I just stick a good ol' JavaScript (usually the doxdesk one) in my pages that reads the max-width set in my CSS without any additional work from me. IE expressions are pretty much JavaScript, and they don't work when JavaScript is off, so I have no qualms about using a real script to handle IE's deficiency instead of maddening myself with expressions. By the way, Jukka, to start a new thread, do not reply to an existing message. When you do this, your message gets threaded on to the old thread, which messes up the archives and makes it less likely that others will see your message and subsequently reply to you. You must send a new message with an appropriate and descriptive subject line to css-d@lists.css-discuss.org in order to start a new thread. Thanks, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Margin Padding: Best Practices
~davidLaakso wrote: Spellacy, Michael wrote: I was just wondering what the best practice is for handling default user-agent margin and padding? ...trimmed]. Just wondering what the right thing to do is. Thanks! Spell I do not know what the right thing to do is. My opinion is to only declare what is necessary to achieve the goal or resolve a particular issue or problem at hand. In other words, do not kill the default values. This is sometimes difficult (at first). But it is a better learning experience in the long run. And it is more future proof method-- far easier to maintain and revise. I do what David and Georg do -- only override defaults when I need to, and leave the rest intact, since they can be very useful. There's nothing wrong with using one of those universal selector resets if you want, but I've never found it to be helpful, or at least not preferable to what I'm already doing and used to. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] ADMIN Re: Small-as-possible text in Opera?
Felix Miata wrote: On 2007/02/28 12:38 (GMT) Barney Carroll apparently typed: At a certain point, it is reasonable to run out of sympathy, budget and realistic conception for user-end customisation. Heaven forbid that anyone should choose to _personalize_ their _Personal_ Computer. Let's all please make sure that we keep this thread on-topic. If anyone has practical advice for Barney on how to modify his CSS to accomplish his goal, please share that. All other comments about users, etc, are not appropriate on the list. Thanks for your cooperation, Zoe Gillenwater css-d list moderator __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] negative margined sidebar moving when window narrowed in IE
Richard Grevers wrote: rhetoric value=2 cents Am I missing something here? Many posters to this list (and I'm not implying that Zoe is one of them) seem to get rather upset when floats drop in narrow windows, and I simply don't get that. The fact that floats can drop when there's not enough room to do justice to several columns is a primary reason to use floats - its why they are better than tables. The key, of course is to make the correct column drop, which I would say should be any column but the primary content, with main navigation having second priority for not dropping. I completely agree with everything you've just said. The problem is that I've never been able to get a client to agree to it. They can't handle the idea of a column dropping and would much rather foist a horizontal scrollbar on their visitors. I do all the client education I can muster, managing to get them to agree to a liquid layout, real text for navigation buttons, etc, but the column dropping is beyond my powers of persuasion. :-) My only wish is for some property that would make the remaining floats expand into the space left by the dropped float. I think there are such things that depend on JavaScript. It might be possible to get a layout like this from pure CSS using table display properties, but I've never tried. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] negative margined sidebar moving when window narrowed in IE
~davidLaakso wrote: Zoe M. Gillenwater wrote: Gunlaug Sørtun wrote: I have moved leftcolumn into the bottom of contentwrapper, but the source-order is otherwise the same and nothing is added or subtracted... http://www.gunlaug.no/tos/alien/Zoe/test_2882.html ...so, maybe it'll do. It is possible to turn this into a robust 3 column with the addition of one more wrapper. Do you really need another wrapper though? Here's the same layout with only a single div for a right third column added: http://www.pixelsurge.com/experiment/negative_margins_4.html Seems to work fine in FF 2, IE 7, IE 6, and Opera 9. Am I missing something? Zoe I do not think you are missing something. But I sometimes think I suffer from OCD (obsessive-compulsive disorder) :-) . Please see: http://www.chelseacreekstudio.com/ca/cssd/zg.gif But that's not a problem -- the third column overlaps in all browsers. That's what it's supposed to do. It's just that in IE6, the middle column expands to hold the picture, so the overlap occurs not just on the overflowing pic but the entire column. In a real layout, I'd have a min-width to prevent these things, but want to make sure that even if someone puts content that is too big even for the min-width, the columns won't drop. That's all I really care about -- no columns dropping. Georg, where would I add the extra wrapper you refer to? And would this prevent the overlap in all browsers? Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] IE Rendering Problem
Jon Hughes wrote: On the left navigation for this page, the vertical spacing is the same on ALL of the pages, EXCEPT for the main page. They do use a different css file, but it has the same content. Anyone know why? This has been frustrating me for a long time now. Http://www.firemountaingems.com/ Jon, I'm not seeing this problem on IE 6 or 7. Did you fix it, or is it happening in another version of IE (please always specify versions of browsers)? Or perhaps I'm misunderstanding you -- are you referring to spacing between the list items, or the space above the list as a whole? Can you give us more details please? Thanks, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] header image size
jeffrey morin wrote: i have a header image which is 649px and i put it inside a div that is 660px wide then set a background image repeating horizontally to fill up the existing space. now it works fine on opera and ff of course but ie6 is not giving me the extra header width. does anyone know why this is happening? i am so close to finishing this site and ie6 is killing me here! Can you give us a URL to look at? Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] list-style-image horizontal spacing
Steve Clason wrote: I recall list-style-image being problematic but I don't remember the details. A search through the archives would probably turn something up, but ... It's problematic because you can't control the spacing or alignment of it at all. Which is too bad, because the nice thing about list-style-image is that if the user has images turned off, she gets regular bullets instead. The tip originated on this list, I think. If I'm going to use an image for a list I put the image as a background-image for the li, then set margins/padding on the li appropriately. Since you can adjust the position of a background-image, that seems to provide the necessary control. Yep, this is the standard way to do it. You'll need to suppress the bullets on the ul element, which means that if the user doesn't have images on she won't see any bullets. But this is usually not a showstopper. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Horizontal Navigation with Images
Matthew Stoneback wrote: When lining images up horizontally, is there a inherit amount of padding or margin on the left and right sides? Basically, why can I not line two images up flush against one another? If an example is needed, I can post a link. If your images are inline, which they are by default, and you have them placed on separate lines in the HTML, all browsers are going to add a gap between them. This is exactly the same as if you placed two words on separate lines in the HTML -- browsers automatically add spaces between inline elements in the same linebox. If you want to change it, you can switch the images to blocks and float them side by side, or you can get rid of the whitespace in the HTML, or you can use negative side margins to close the space (which isn't very precise). Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Design repository less fancy than CSS Zen Garden
martin f krafft wrote: Thank you. I feel I may not have made myself clear enough: I know plenty sites with great layouts which serve as source of inspiration. However, what I am looking for are sites like csszengarden.com, which have different designs all for the same XHTML file. Hmm, I'm not sure why seeing the same XHTML gives you good graphic inspiration. I would simply recommend you peruse the thousands of well-designed real sites that are in the many CSS design inspiration galleries: http://css-discuss.incutio.com/?page=DesignInspiration Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] negative margined sidebar moving when window narrowed in IE
Zoe M. Gillenwater wrote:
Philippe Wittenbergh wrote:
On Feb 15, 2007, at 12:39 PM, Gunlaug Sørtun wrote:
I have moved leftcolumn into the bottom of contentwrapper, but the
source-order is otherwise the same and nothing is added or
subtracted...
http://www.gunlaug.no/tos/alien/Zoe/test_2882.html
...so, maybe it'll do.
For the large image (applies to IE6 on narrow windows) I wrap the
image in a box:
.img {margin:0 -200px 0 0; position:relative; height:0;}
/* right margin equivalent to size of sidebar */
I'm not seeing the need for this -- the layout holds together fine in
narrow windows for me. What is this supposed to do?
Ok, so it's supposed to stop IE6 from expanding the div to hold the
photo, right? But I actually like this sometimes, and wish I could use
display: table-cell on the div for other browsers to get them to do the
same thing.
By the way, do any of you think we're ready to start using display:
table layouts, and just feed IE the alternate CSS for these negative
margin layouts? I've written article about it, but I haven't ever used
it for a real site. I'm getting ready to complete rebuild two big sites
that will probably not get rebuilt for several years after this, so I
want to choose my layout method wisely.
Hmm, I guess it wouldn't work for a page with a left sidebar, unless I
change the source order so that the left column comes first in the
source, which I don't want. I guess it's a good reminder why table
layouts stunk: no control over source order, just cell after rigid cell. :-)
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Design repository less fancy than CSS Zen Garden
martin f krafft wrote: also sprach Zoe M. Gillenwater [EMAIL PROTECTED] [2007.02.16.1416 +]: Hmm, I'm not sure why seeing the same XHTML gives you good graphic inspiration. I would simply recommend you peruse the thousands of well-designed real sites that are in the many CSS design inspiration galleries: http://css-discuss.incutio.com/?page=DesignInspiration I am not really looking for inspiration, rather for a collection of different CSS designs that I could interchange at will without having to change the XHTML. Ok, but why, then? You said you were trying to make your own site, right? So won't you be making your own XHTML? Or do you mean that you're looking for tried and true XHTML structure of basic types of layouts with designs already applied -- aka you want to buy templates? Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] negative margined sidebar moving when window narrowed in IE
Gunlaug Sørtun wrote: I have moved leftcolumn into the bottom of contentwrapper, but the source-order is otherwise the same and nothing is added or subtracted... http://www.gunlaug.no/tos/alien/Zoe/test_2882.html ...so, maybe it'll do. It is possible to turn this into a robust 3 column with the addition of one more wrapper. Do you really need another wrapper though? Here's the same layout with only a single div for a right third column added: http://www.pixelsurge.com/experiment/negative_margins_4.html Seems to work fine in FF 2, IE 7, IE 6, and Opera 9. Am I missing something? Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Design repository less fancy than CSS Zen Garden
martin f krafft wrote: also sprach Barney Carroll [EMAIL PROTECTED] [2007.02.16.1712 +]: If you have massive difficulty finding resources you intend to sell, I think getting your website together should come after a career rethink. Are you after Wordpress.com, perchance? And what, exactly, are the skills you're trying to sell? My work has nothing to do with web design. I just want to have a nice looking, standards-compliant homepage and the ability to change designs without having to change the XHTML everywhere. Ok, gotcha now. It sounds like you do want to use blogging software, then, or any sort of CMS system where you can easily change skins or themes. I recommend you look into that as your solution. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] min-width in IE 6 on inline/block element?
Sophie Dennis wrote: IE6 treats width as min-width No it doesn't. This is a common myth. IE treats height like min-height, but not width like min-width. Case in point: make a page with a div with a red background. Give it min-width 500px. Observe that in Firefox the div will grow to fill the window at all widths except 500 and below, at which point it's fixed at 500px. Observe that in IE the div will never grow to fill the window but will always be 500px. Not the same at all. Not picking on you, Sophie -- lots of people make this mistake -- but this myth continues to get propagated and it's one of my pet issues to squash it. :-) Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] negative margined sidebar moving when window narrowed in IE
Gunlaug Sørtun wrote: Zoe M. Gillenwater wrote: Speaking of being proven wrong ;-), Georg, do you have an index on your site indicating what each of your layout pages is demonstrating? Have I done something wrong..? :-) No, you're just much, much smarter in CSS than I am, so you often prove me wrong -- which I like. :-) No, I have no index for those demo/test pages. That's my public playground and I thought each page was self-descriptive enough. The pages themselves are, but I have to click through to every single one to see what it is and compare them with each other, instead of having an index that lists two column fixed header etc. If you don't have an index, no worries of course, just checking. Haven't studied in depth, but I think an article in the last ALA is somewhat close to what I'm doing... http://www.alistapart.com/articles/multicolumnlayouts This is basically the same sort of thing which I've been using for awhile. But I too haven't studied it in depth. Now I'll have a look at your latest... http://www.pixelsurge.com/experiment/negative_margins_3-dd.html ...and who knows what may come out of _that_ ;-) That is *not* mine. Like I said, it's just the exact same thing as the one I found on Dynamic Drive. I just put it on my server so I could test it with a big image inside. Don't want to take credit where it isn't due. :-) Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] negative margined sidebar moving when window narrowed in IE
Philippe Wittenbergh wrote:
On Feb 15, 2007, at 12:39 PM, Gunlaug Sørtun wrote:
I have moved leftcolumn into the bottom of contentwrapper, but the
source-order is otherwise the same and nothing is added or
subtracted...
http://www.gunlaug.no/tos/alien/Zoe/test_2882.html
...so, maybe it'll do.
How is IE7 doing, btw? (I really dislike blind hacking.)
I use basically the same technique on a couple of sites. Holds well
in iExploder 7.
The technique I use is exactly the same, except I use a margin on the
container div instead of padding. Padding is better because that way you
don't need to add yet another container div if you want a background
(especially faux column one) behind the columns. This holds up well in
IE7 and IE6 with no problems that I've seen. I think I shall switch to
it. Thanks!
One note though; the wrapper should have position relative as well.
I've seen the sidebar jumping to the centre in IE when resizing.
I'm not seeing it on Georg's demo page, but I have seen such a thing on
more complex pages I've made with my similar method. So yes, it's
probably safest to include it.
For the large image (applies to IE6 on narrow windows) I wrap the
image in a box:
.img {margin:0 -200px 0 0; position:relative; height:0;}
/* right margin equivalent to size of sidebar */
I'm not seeing the need for this -- the layout holds together fine in
narrow windows for me. What is this supposed to do?
By the way, do any of you think we're ready to start using display:
table layouts, and just feed IE the alternate CSS for these negative
margin layouts? I've written article about it, but I haven't ever used
it for a real site. I'm getting ready to complete rebuild two big sites
that will probably not get rebuilt for several years after this, so I
want to choose my layout method wisely.
Thanks,
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] CSS to NOT cache a single image
Timothy Martens wrote: Wondering if there is someway to have an image NOT cache. I'm using an animated gif as a background image on a link:hover. It works consistently in Firefox, but Safari only plays it on the first instance of hover unless the page is reloaded. Not sure about IE. Working example here: http://www.splashdesign.com/dev/css/cssd/ Hi Tim, Remember that CSS is a language for creating style, not an all-purpose web development tool. The caching of images is not a style issue and is controlled by a combination of your server settings and the user's browser settings. I suggest you Google for stop image caching or use another webdev list to find the solution to your problem: http://css-discuss.incutio.com/?page=OffTopic Best, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Dead (or covered?) links in Safari (Was: Complex layout works on MSIE 5 6 but not 7
Stephane Bortzmeyer wrote: On Thu, Feb 01, 2007 at 10:46:20AM +0100, Stephane Bortzmeyer [EMAIL PROTECTED] wrote a message of 20 lines which said: Many thanks. I used the new one as a basis for my site. Now, http://www.bortzmeyer.org/ has the new stylesheet. With Firefox and Konqueror, it is OK, I'll test with MS browsers later. A Safari user recently discovered a bug: the links in the left column are dead, they do not respond to clicks. (Other links, in the main column), are OK. It appears only in Safari, it seems. This is a bug in Safari 1.3 and 2.0: http://www.456bereastreet.com/lab/float_negative_margins/ The workaround is to put position: relative on the sidebar, apparently. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] min-width in IE 6 on inline/block element?
Sophie Dennis wrote: In fact, isn't this the same as height/min-height? It isn't that height in IE6 is *the same as* min-height. It's that IE will expand a box to fit its content, regardless of height/width specified. So in IE6 height: 500px won't give the same effect as height: 100%; min-height: 500px will in other browsers, just as width: 500px doesn't give the same effect as width: 100%; min-width: 500px. No, you're right about the combination of height and min-height, but I was merely referring to each of those properties when used independently (which they usually are, or should be most of the time). So, IE will treat a div with height: 500px; the same as other browsers treat a div with min-height: 500px;. It treats height exactly like min-height. But yes, if you start combining properties, you can't always get IE to emulate what better browsers will do. Now I've engaged brain here I think I may need to join your mission to squash sloppy thinking on this one ;-) [hangs head in shame...] No shame, but I would appreciate the backup on my mission. ;-) Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Personalize predefined colors
Barney Carroll wrote:
Alberto Garcia Quesada wrote:
There are any way of create in my CSS a list of predefined colors, some
like:
rojo {color:#FF;}
from more lated i can used it with:
border-color: rojo;
Alberto,
You cannot define terms in CSS. What you're asking for would be very
useful but is outside of the scope of pure CSS - you would need to use
an application (www.stylespread.com - very simple and powerful tool to
manage CSS) that makes these associations for you, or some kind of
clever javascript to parse your CSS code and translate all your colours
back into hex numbers.
Right -- for an example of a programmatic approach, see our wiki page on
the subject:
http://css-discuss.incutio.com/?page=CssConstants
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Divs misaligning in IE only
Anne E. Shroeder wrote: http://www.language-works.com/IRF/about/ CSS: http://www.language-works.com/IRF/css/irfstyles.css I'm sure this is super simple -- the main body text of my page is shoving down below the left nav bar in IE. It's not just IE -- it happens in FF too. It's because you have a div between the leftnav and maincontent divs called nowrap. Get rid of this div. Then, get rid of the float on maincontent. Either float both the columns and give them both widths but not margins, or float the left column only and give the right column no width and a large left margin. You're mixing the two methods for creating basic two column float layouts, which doesn't work. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] negative margined sidebar moving when window narrowed in IE
I've been playing around with various negative margin layout techniques this afternoon, not because I don't like the one I typically use but because I like to see what else is out there every once in a while. I found a negative margin technique that differed from both my method and the famous Ryan Brill method, and it involves giving the sidebar a -100% margin in the same direction it's floated. Here are two instances of it: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/ http://blog.html.it/layoutgala/LayoutGala13.html However, my test for negative margin layouts is always putting a big picture in the fluid column and seeing how the various browsers deal with having the browser window sized down to the point that the image overflows. Basically, I'm trying to see if IE will drop a column or produce a horizontal scrollbar. Curiously, when I applied the big-image-test to this new negative margin technique, it resulted in the left sidebar moving around when the window is narrowed in IE, both 7 and 6 (don't care about older versions right now). Here's the exact same Dynamic Drive layout, but with a big image added and background colors: http://www.pixelsurge.com/experiment/negative_margins_3-dd.html I know why IE is doing this: it expands the contentwrapper div instead of letting the image overflow. The -100% margin is based on the width of contentwrapper, so when contentwrapper is bigger than the window, the left sidebar is no longer placed against the left edge of the window. You can emulate this in Firefox and other good browsers by giving contentwrapper a min-width and decreasing past it. What I'm interested in, then, is not why it happens but if there is any way to stop it (short of using overflow: hidden, which obviously works but kills the needed scrollbars). Like I said, I'm just playing around, so this is not urgent, but I'm curious. I've tried setting position: relative on various divs, giving contentcolumn layout (the others already have layout), and messing with margins. Haven't come up with anything, and I don't think there is a fix, but I'm happy to be proven wrong. Speaking of being proven wrong ;-), Georg, do you have an index on your site indicating what each of your layout pages is demonstrating? I'd love to take a closer look at your preferred negative margin layout technique. Thanks, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] CSS horisontal menu 100% width?
Stib AB wrote: I want an ulli menu to have 100% width. My problem is that it is dynamic numbs of li-items so i cant set a fixed width, I also want the UL to be 100% fluid. All li on ONE row, so the li will share the 100% Pelle, Sounds like you are trying to emulate a table-based layout, which I don't advise, but can be done: http://mrclay.org/web_design/tabs/ What I *do* advise, is letting the content adjust to its content and just centering the set of list items in their ul: http://css.maxdesign.com.au/listamatic/horizontal15.htm http://css.maxdesign.com.au/listamatic/horizontal31.htm http://css.maxdesign.com.au/listamatic/horizontal19.htm If you want to prevent the list items from wrapping to multiple rows and generate a horizontal scrollbar instead, you'll probably need to set a min-width on your layout in ems. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] 3px IE gap issue
Brian Middleton wrote: I am having an issue with a two-column layout and know that the culprit is the 3px jog bug in IE/PC. I have gone through the PIE tutorial on this issue and tried to fix this bug by adding dimensions to elements in the sidebar and other bits of hackery, but have produced no results. I was hoping someone could point me in the direction of a fix for this and give a brief description on what was causing the bug and why the fix worked. My layout is here.. http://www.centerweight.com/clients/defenders/ Brian, The easiest way to fix the Three Pixel Text Jog is just to float both columns. When you float #sidebar, you'll need to remove its left margin and add a width. This should take care of the jog/gap. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] preventing table cells from expanding
Douglas Fraser wrote: At 15:16 -0500 2/2/07, Zoe M. Gillenwater wrote: Douglas Fraser wrote: At 11:24 -0500 2/2/07, Zoe M. Gillenwater wrote: Douglas Fraser wrote: I have a set of the links the client wants displayed in a grid format. Using a table is the obvious solution, even if it's not the correct thing to do presentation wise. The issue is that they want the text of the links to turn bold as the mouse hovers over them. Ok, that's all fine, but the problem is the table cell gets resized width-wise and so the other columns shift around. That looks bad Access to the real page is controlled, but I went and made a static page that does not have working links, but you can see the effect I'm (not) after. Just hover over the director names http://www.acmefilmworks.com/menus.html I agree with Sophie -- you either need to set a width or stop bold on hover. The design is super tight as it is. It's not going to stand up to text resizing anyway, so you might as well set fixed widths for each of the columns. the client now wants to fiddle with fonts and the like, probably go smaller, so that is going to help things. some columns will be needlessly wide I fear if width is set... shrugs You'll still need to set widths. Otherwise, the content will overflow when you bump the text up (as people like me will do when you make it smaller, thus defeating the whole purpose of making it smaller ;-)). It's going to be a very finicky layout no matter what you do. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] IE mac bugs
jeffrey morin wrote: i am not too familiar with the IE mac bugs out there. i have a page with a 2 column layout and the left column seems to have extra padding on the right pushing it out and causing the second column to not float up and rest next to it. i am confused because i have the padding-right set to 0.does anyone know what is causing this? Not without seeing a page. Please post a URL to a live page to the list. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] word wrapping in block element with set width
Sandy Gonzales wrote: hi guys, i have a question about word wrapping. I notice when i set a width to a block element that the text inside won't wrap, which makes sense i guess since the element retains its size.. for example: http://www.rh-v2.cpdev.sudjam.com/tutorial.php?cat=26 is there anyway after setting a width to the white box element containing the text, i could resize the browser, making it very narrow and have the text somehow wrap according to the browser size instead of the element its in. No. But if you want the width of that block of text to change size with the window, why not just remove its fixed with entirely or set it in percentages? I don't see why you would want the white background to stay a fixed width but its content inside contract and expand in and out of its background. Perhaps I'm misunderstanding your question... Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Absolutely positioned element doesn't expand its container
Reuben D. Budiardja wrote: I am trying to implement some simple design which basically have: header, content, footer. They are one after another so I use div for each of them with relative positioning. Inside the content I want to have more flexibility so there I have several div elements with absolute positioning. The problem is that the height of content does not expand with the elements inside it. Therefore, footer which follow right after content lies overlappingly with the elements of content. The page below is the basic example of my problem: http://www.budiardja.org/tmp/css_test.html and its css: http://www.budiardja.org/tmp/style.css I put in solid border so that it's easier to identify the elements. Hi Reuben, As Georg, explained, absolute positioned elements are removed from the flow. This is why absolute positioning is not a good way to create columnar layouts. Floating is the standard method. I suggest you learn float theory solidly and reconstruct your layout using floats. Here's a basic article on the subject: http://www.communitymx.com/abstract.cfm?cid=F41AE Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Dreamweaver/css bug
Phil Turner wrote: Has anyone experienced their design view disappearing in Dreamweaver, seems ok with table based sites, but now I am positioning everything with css it doesnt like it Phil, What version of DW are you using? I've never seen it display a completely blank page in Design View, even in DW 6, which had awful CSS support. The latest version, 8, is quite good at displaying CSS, but still messes up occasionally. This is ok because no one is going to be viewing your page in DW. If you're getting a completely blank page, I suggest validating your markup and CSS and fixing any errors. If that doesn't fix it, and you have to work in Design View, you'll need to either upgrade DW or downgrade your page. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] preventing table cells from expanding
Douglas Fraser wrote: At 11:24 -0500 2/2/07, Zoe M. Gillenwater wrote: Douglas Fraser wrote: I have a set of the links the client wants displayed in a grid format. Using a table is the obvious solution, even if it's not the correct thing to do presentation wise. The issue is that they want the text of the links to turn bold as the mouse hovers over them. Ok, that's all fine, but the problem is the table cell gets resized width-wise and so the other columns shift around. That looks bad Browsers don't do dynamic padding / margins, table cells can't take a max-width Using a table does not look like the right thing to do. I can make this grid using all divs - using all divs solves the problem of things shifting around - and positioning them nicely with PHP based logic (using the less supported display: properties is not an option (IE...)) but the problem is the width of the text / # of characters in a link is all different, so I can not easily make the columns to be spaced out nicely like when a table is used. I could write some javascript to get the browser to calculate the ultimate max width of a column and thus shift things around on page load to space out columns in a regular fashion, but if there is an easier way... I have not tried table-layout:fixed yet, but I suspect that won't help as the client would like no forced breaks in the text (e.g. this-is-a-really-long-link not get broken in the middle due to a fixed width column). And the number of columns may differ from page to page... And would table-layout prevent the cell/table from getting redrawn / expanded anyways? Access to the real page is controlled, but I went and made a static page that does not have working links, but you can see the effect I'm (not) after. Just hover over the director names http://www.acmefilmworks.com/menus.html I agree with Sophie -- you either need to set a width or stop bold on hover. The design is super tight as it is. It's not going to stand up to text resizing anyway, so you might as well set fixed widths for each of the columns. Another thing you could play around with, but which probably wouldn't end up being robust enough, would be to use letter-spacing to space out the letters a little bit when not hovered in order to create space for the bolding. Then, when you hover, take the letter-spacing back down to zero. It might work, but probably not well enough to stop all text bumps. Also, to start a new thread, do not reply to an existing message. When you do this, your message gets threaded on to the old thread, which messes up the archives Interesting... I did hit reply-all to something but only because I'm lazy and didn't want to type css-d I did change the subject and To: headers to that of a new message but you're telling me there is some hidden header that gets brought over? that eudora didn't bother to display? Software is just getting too clever these days Yep, Thunderbird was not tricked. :-) Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Footer fixed to bottom of browser
Daniel Hammond wrote: I'm trying to get this effect: http://alistapart.com/d/footers/footer_css2.html (I want the footer to stick to the bottom of the browser window even with very little page content) ...by using the techniques described here: http://alistapart.com/articles/footers I'm testing it here: http://www.objectivedesigns.com/2/index.htm My CSS is here: http://www.objectivedesigns.com/2/index.css My relevant CSS looks to me like it should work correctly, but as you can see, it doesn't. Any suggestions? FooterStickAlt is the newest method for this effect: http://www.themaninblue.com/writing/perspective/2005/08/29/ Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] CSS positioning
Miriam Battersby wrote: I have managed to fix the problem that was the subject of my earlier question re css style sheet not showing up - it was a problem with the Dreamweaver template - the link was within an editable region in the header. However I now have a positioning problem seen in both Firefox and IE, which occurred after I had been tweaking the left hand column! I suspect it has a mathematical basis, but can't quite get my head around it today. Any ideas? Miriam, Please remember when creating a new thread to insert your URL into it. It would also be appreciated if you would post back to the old thread first to report that you fixed it and how you did so. This will allow people who may come across your message in the archives later to know what happened. On http://www.cheekyjumpingcastles.com.au/, you have a number of validation errors. I would clean those up first and see where that gets you. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Faux columns not even
Ian Young wrote: The one in this article: http://www.communitymx.com/content/article.cfm?cid=AFC58 Now, I admit that I have moved the header div in my example, but here is the three column original with color added and the columns are not even. Have I missed something? http://www.iyesolutions.co.uk/templates/whs/threecol.htm Yes. The tutorial describes how to use background images to create the appearance of equal height columns. You're trying to use background colors, and that won't work, because the columns are never actually equal height. You've also removed the clearfix properties that allow the wrappers to contain their children floats and show their background images all the way down. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] thumbnail gallery with captions
David Sharp wrote:
Trish Meyer wrote:
I do pics and captions for an art gallery, but each image is in its
own floated div - as in
http://www.vivagallery.org/exhibits/SCORE_2006/index.html
Thanks for replying Trish,
This is a good solution and probably what I will have to end up going
with, but it does have two drawbacks compared to what I would /ideally/
like to have. Firstly each picturebox is the same defined width - I
guess to create the illusion that they are centered when really they are
floated left. I would prefer the picturebox to be the width of the image
plus padding. Secondly (although I guess pretty much related to the
first) is that this solution again would look very left aligned when
dealing with either a variable number of images, or conversely a fluid
container width.
Is there no way to do this inline, or conversely simulate a kind of
{float : center}?
Georg already addressed your concern about the overall left alignment of
the gallery.
I wanted to address your concern about having a fixed width on each div
that holds a photo, instead of leaving it widthless and having it
shrinkwrap to the size of the picture. You can do this, but it doesn't
work well if you have a caption within the div. If the caption grows
wider than the photo, so will the div. This is why you usually see divs
holding both photos and captions fixed in width. You'll often see the
divs fixed in height as well (as the Eric Meyer-based examples cited
earlier were) but this is problematic because the caption text can grow
longer or larger and excede that height. The heights are set, though, to
keep subsequent floats from catching on one another.
You could consider creating two classes, one called portrait and one
called landscape, and setting the widths in these. I do a similar sort
of thing in most of my sites where I float images within the text. I
generally develop two set sizes for horizontal and vertical images
respectively, and apply these classes to the image divs.
You'll still need to worry about the height issue, though. Using Georg's
suggestion of inline-block gets around that:
http://www.brunildo.org/test/ImgThumbIBL.html
http://www.brunildo.org/test/ImgThumbIBL2b.html
http://www.brunildo.org/test/ImgThumbIBL3.html
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Specificity
Chris wrote: I have obviously failed to understand a crucial aspect of CSS which deems that the table row style declaration does not overwrite the previous style for a specific cell within that row. Please enlighten me! Not all CSS properties are inherited. Background color is one of the ones that is not inherited. The td doesn't inherit the background color of the tr, so it keeps its own color. This is an inheritance issue, not a specificity one. You can see which properties are and are not inherited here: http://www.w3.org/TR/CSS21/propidx.html Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] IE 6 breaks list
[EMAIL PROTECTED] wrote:
I am working on a box for text, constructed with a list, here:
http://kurtnimmo.com/css_tests/test.html
Looks great in Firefox, Mozilla, Flock, etc. But in IE 6 the top li with
its background separates from the next list item, creating an ugly gap. Is
there a hack for this? Here's the code and CSS:
ul class=box
li class=boxtop/li
li class=boxmiddlep class=boxtext.../li
li class=boxbottom/li
/ul
}
ul.box {
width: 198px;
}
.boxtop {
list-style: none;
background: url(images/boxtop.png) no-repeat;
height: 10px;
}
.boxmiddle {
background: url(images/boxtile.png) repeat-y;
list-style: none;
width: 198px;
}
p.box {
margin: 0px;
padding: 0px 0px 0px 12px;
width: 170px;
}
.boxbottom {
background: url(images/boxbottom.png) no-repeat;
width: 198px;
list-style: none;
height: 11px;
I haven't seen any responses to this, and I still see the problem in
your page, so I'm posting this well after the original message.
I'm betting that the gap is coming from the fact that IE6 expands boxes
to hold potential text, even if you set their height to something small.
Give the first li a tiny font-size and line-height and see if that fixes it.
That being said, this should not be marked up as a list. It should be a
series of divs:
div class=box-outer
div class=box-inner
p
/div
/div
Give the outer div the repeating center graphic. Give the inner div the
top graphic. Give the p the bottom graphic.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] IE6 transparent PNG and RTL
Ido Dekkers wrote: for some reason when i use the png fix (with the htc file) the transparancy problem is fixed with no problem. but the background image is pasted to the left instead of to the right as the css tells it to ? Ido, The hacked transparent PNGs in IE are not actual background images, so they don't respond to the background-position or background-repeat properties. In fact, they don't even tile like background images at all. If you must have a transparent PNG on the right side of a container, your only option is to nest a div, position this div to the right side, then place the PNG background on this div. Alternately, depending on your layout, you could just feed IE6 and lower GIFs and let them have a slightly less pretty experience. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Floats and Overflow
Tribou, Eric wrote: Anyone using floated layouts have any tricks to share regarding the use of images or other objects within your floats that go wider than the float allows? That seems to be my biggest problem; things like images are thrown into columns that get too narrow and force columns to drop/wrap. I've used some tricks like negative right margins on images to fake their width to 0 or setting an image as the background to a 100% wide DIV. Hopefully there are tricks out there I'm just not aware of. Any suggestions you might offer would be appreciated. Certain types of negative margin layouts will allow some browsers to auto-expand divs and prevent them from wrapping down, generating a horizontal scrollbar instead. Here's a really simple example: http://www.pixelsurge.com/experiment/negative_margins_2.html In IE6, the yellow div with the big image stays propped open to the width of that image. In FF, it doesn't stay propped open, but at least the side float doesn't drop down or get overlapped. If you want FF to stay propped open too, you can feed it its own style sheet using table display values. I wrote an article on this a while back: http://www.communitymx.com/abstract.cfm?cid=EB8C5 But, this article was written before IE7 came out. Unfortunately, IE7 no longer has IE6's bug of auto expansion, nor does it have FF's support for table display values. Does this mean this method is dead? Perhaps. I haven't had a chance to play with it since IE7 came out. The best solution, of course, is to not let your structure get too small for your content, or to not put content that is too big for your structure into it. In other words, design for your content. The typical min-width solutions apply here. By the way, to start a new thread, do not reply to an existing message. When you do this, your message gets threaded on to the old thread, which messes up the archives and makes it less likely that others will see your message and subsequently reply to you. You must send a new message with an appropriate and descriptive subject line to css-d@lists.css-discuss.org in order to start a new thread. Thank you for your cooperation and participation. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] IE7 truncates nav button text
Ian Piper wrote: http://www.bbfcontracts.com/ the buttons look fine in IE6 but in IE7 the bottom third or so of the button text is truncated. I think it might be because of the line- height: 5px; but I seem to remember that without this the button text looks wrong in IE6. Do you mean the buttons in the left menu? If so, I cannot reproduce the problem in IE7 on Windows XP SP2. They are not cut off, and appear just the same as in Firefox. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Image height ignored for div height in IE6
Aleve Sicofante wrote: I'm experiencing a problem with IE6. I have a div that takes its size from its content, which is both text and one image. In Firefox and IE7 the height of the div is properly calculated, but in IE6 only text is taken into account. You can see the effect here: http://www.vieira.es/test/index.html (This will be noticed in 1280 x 1024 or higher full screen. Lower resolutions won't show the issue.) Pablo, I suggest getting rid of the align=left on the image and floating it left instead. Then use your favorite float containment method on its parent div: http://css-discuss.incutio.com/?page=ClearingSpace Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] UL and LI Borders question
Fred Janon wrote: I have a UL with some LIs. I want a 1px border around all the LIs with no 2px border between the LIs. I have been fiddling around with the UL and LIs borders but I can't find a simple solution to it. My best solution so far is to have no border on the UL and the top, left, right borders for all the LIs except the last one which has all 4 borders to get the bottom border. Depending on the styles on your ul, you could simply assign the bottom border to the ul. This would allow you to avoid having to put a class on the last li. The other ideas about negative top margins are fine as well; I just wanted to throw another option out there. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] New With Problems
Marian, One thing to note about all your pages: they contain a number of validation errors, and cleaning these up first should be done before any of the other things I mention. It's the best start towards a well rendering page. Marian Rosenberg wrote: http://www.anandatour.com.cn/test/index.html Looks great in Mozilla. Text can be scaled up/down with no problems. For some reason, however, IE refuses to align my 3 columns correctly. I keep getting 2 columns + 1. I thought the problem was that div id=main has margins of 4% and it isn't accepting that these divs are inside that div so is adding the percents together. But, when I get rid of main altogether and change the column widths in the CSS so that it definitely adds up to 100% it still won't line up right. IE has problems computing percentages when the parent element doesn't have a width declared (which is what the percentage widths are based on). Try declaring a width on #main. If that doesn't work, I would suggest simplifying the layout you have now. If it's an acceptable source order, I'd move the left column first in the source and float it left with an assigned width and no margins. Move the third column second in the source and float it right with an assigned with and no margins. Then just let the third column be in the flow with no width declared so it just takes up the rest of the space. Give it some side margins to keep it from touching the side columns. Leaving this column flexible should leave room for IE to get dimensions wrong without falling apart. http://www.anandatour.com.cn/test/beachinfo.html My nemesis. Looks great in Mozilla. Internet Explorer insists on having the table start right under the end of the paragraph introducing people to the beaches. I had kept tables here in the first place because it was the only way I could figure out how to have Sanya start underneath the picture of the woman on the beach. I don't know how to work with tables any more, but I know that if I was going to recreate this page with CSS, I'd float the Hainan image left and add a float containment method (http://css-discuss.incutio.com/?page=ClearingSpace) to the Hainan div. Then I'd just add a clear to the Sanya header and it would start below the Hainan image. http://www.anandatour.com.cn/test/hotel.html Hey, this one actually works in both browsers! Yay! And it looks cool too. The only thing I want to say about this page is *please* remove all that redundant and useless alt text on that sliced map image. It is making your page less accessible, not more: imagine using a text browser or screen reader and having to see or hear the text clickable sliced map of Hainan over and over again. It has nothing to do with CSS, I just noticed it and wanted to point it out. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] CSS and 508 compliance
Jim wrote: Would anyone in the U.S. have any tips regarding Section 508 compliance, or any links to sites that may have CSS tips? Section 508 and CSS have very little to do with one another. The only Section 508 requirements with a CSS implication is the rule to not have information conveyed only in color, and of course the rule to make sure sites are readable without CSS. This, however, is mainly accomplished with proper markup and logical source order. An easy way to test it is to view your page in a text browser or with the styles turned off (using the Web Developer toolbar or similar tools). Now, if you're talking about accessibility in general, not just 508 (which is really the bare minimum), there are more CSS implications, but most of it has to do with markup and scripting. I don't really know what you are specifically looking for, so I'll just recommend the book Web Accessibility from friendsofed as a good source. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Floats and 100% height ...
Grady Kelly wrote: I am building a UI for a web application. I am using 100% heights for a lot of the outer elements, like this: wrapper - this has 100% height div1 - this has 100% height/div1 div2 - this has 100% height/div2 div3 - this has 100% height/div3 /wrapper this works all fine and dandy. the problem that I am having however, is with divs inside div1, div2 and div3. When I give these divs 100% height, they end up being 100% the height of the browser window, not the containing div. When viewed in a browser, I end up with a certain number of pixels whitespace at the bottom of the page. That make sense? Is there a way to give divs 100% height of their parent? That's what they are doing. Their parents have a height equivalent to the browser viewport because *their* parents (wrapper, and then body, and then html) have a height equivalent to the browser viewport because that's what 100% equals when there's no parent with a height other than viewport set. They each fill up their parent, and you haven't told any of them to *not* be the height of the viewport. We'll need to see a page to figure out what height you really want and help you set it. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Browser alignment differences
Daniel Hammond wrote: Sadly, none of that did anything to fix the problem. Any ideas on making the container extend down to 100% of the vertical space? Keep in mind that once you have content in the page this will probably become a non-issue. I wouldn't worry about it. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] ul not stretching to accomodate inline lia element heights
martin f krafft wrote: http://seamus.madduck.net/~madduck/abacons6/leistungen/1.html http://seamus.madduck.net/~madduck/abacons6/css/screen.css If you look at the top menu bar as well as the subcategories below the page's h1, you'll see how the vertical padding on the a elements (as well as li.current) I was using to try to make the navigation bars a bit thicker doesn't actually do what I want. How can I ensure that the ul (which has the outside border) stretches vertically to accomodate the taller li elements it contains? Give the ul the same amount of top and bottom padding. That's how padding works on inline elements -- it pushes out content to the left and right, but not above and below. The linebox doesn't expand to hold that padding. So you have to expand the linebox yourself. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Using CSS for inline formatting
Christina Hope wrote: Basically this is close...I probably should explain it a bit better. Basically I'm looking for the look of tables but without using tables. So I need everything that should be a column ex - fn, department, role, note etc. to left align in what would be the cell in the table. No offense to the microformats advocates, but I think this data ought to be in a table. It will be much more accessible that way, and easier for you to style to boot. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/
