RE: [css-d] Rounded tabs in IE
Hi Tammy,
The following url may assist
http://www.telstra.com.au/standards/accessibility/training/comparison.htm .
I wrote this a few months ago. The stylesheet for the horizontal tabs is
below. You will have to sdjust the margin and padding offsets to suit your
images but it should give you a few leads. In this example the active tab
also displays a tick in the tab to the left of the text, you will not
require this.
Hope it helps
Graham Cook
www.uaoz.com
style
/* Styles for horizontal tabs */
#horizTabs{
display:block;
height:20px;
width:100%;
margin:0px 0px 10px 0px;
padding-top:5px;
background-color:#6699ff;
}
.sTTab {
background-color:#6699ff;
pading:0px ;
margin: 0px;
height:20px;
white-space: nowrap;
display:inline;
}
.sTTab li{
pading:0px ;
margin-right: 3px;
height:20px;
display:inline;
white-space: nowrap;
background:#99ccff url(tab_left_inactive.gif) top left
no-repeat;}
.sTTab li.siteactivetabnavL0 {background:#fff ;}
.sTTab a{
font-family: Verdana,Arial,sans-serif; font-size: 11px;
color: #003366;
background: url(tab_right_inactive.gif) top right no-repeat;
text-decoration: none;
height:20px;
margin:0px 0px;
margin-top:-5px;
text-align : center;
vertical-align : middle;
font-weight:normal;
padding:3px 8px 5px 8px;
}
* html .sTTab a{padding:02px 8px 5px 8px;}
.sTTab li.siteactivetabnavL a{
font-weight:bold;
}
.sTTab li.siteactivetabnavL{
background: #fff url(tab_left_inactive.gif) top left
no-repeat;}
/* End styles for horizontal tabs */
/style
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Tamara Jackson
Sent: Wednesday, 26 October 2005 2:08 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] Rounded tabs in IE
Hi everyone
I'm working on my first CSS website, and have run into a problem. I'm
trying to create a rounded tab, but it just won't display properly in
IE. I have two different attempts at getting this working:
First go -
http://www.meetup.developer.graphyx.net/blacksmith/test/index.html
Displays fine in FF and Opera on Windows (don't have a Mac), but the
left part of the tab won't display in IE.
Second go -
http://www.meetup.developer.graphyx.net/blacksmith/test/test2/index.html
Displays the same in FF, Opera and IE, but only if I have an extra span
tag with a letter in it that goes below the normal font line (in this
case, a p).
Can anyone help me out with getting the tab to display properly?
Thanks :)
Tammy
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Mac Problem (site causes browser crash)
Following a site check (thanks everyone), it transpires that the site: http://www.freshclickmedia.com/previews/endo/home.htm causes a browser crash on the Apple Mac (reported specifically on IE 5.2.3, but I'm now concerned about other mac browsers.) you have made extensive use of the inherit keyword. As you can read about here http://www.l-c-n.com/IE5tests/misc/#crash, Mac IE does not like that keyword. As an experiment, I simply searched for and commented out all instances of that keyword and your site worked just fine. I was not aware of that problem on IE Mac - thanks. I expect you are using all those inherits in order to placate validator warnings about color and background-color. If so, I would suggest simply ignoring the validator. You still have valid code, and all your backgrounds are working just fine at any zoom level that doesn't cause element overlap (which for me occurs at 300%). A warning means something could go wrong that can't be mechanically checked. If a human check shows everything is fine, the warnings can be safely ignored. Absolutely right - my original CSS code didn't have those inherits. Headed over to the validator, and it threw up warnings. Little did I know that including them would crash the browser! I'll be a little less concerned with warnings in the future. If there is some other reason for having all those inherits in there, hopefully Phillipe's pages will suggest some useful workarounds. HTH, -- -Adam Kuehn Thanks Adam and Phillipe (also BJ and eatme for their help). __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Good looking fluid-width sites
From: Christian Montoya [EMAIL PROTECTED] It's completely relevant. You have to resize your browser window after the page loads to see that it's stuck in IE 6 sp 2. Then, if you reload the page at the new resolution, the javascript works and the layout snaps into place. But only on reload, not immediately like it does in FF. -- -- C Montoya rdpdesign.com ... liquid.rdpdesign.com ... montoya.rdpdesign.com I honestly think your browser is not set up correctly. That's the only explanation. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Good looking fluid-width sites
Al Sparber wrote: I honestly think your browser is not set up correctly. That's the only explanation. Yeah... the only explanation is that we (those of us who have seen the issue) are idiot n00bs. Of course your work is flawless... wtf were we thinking? I don't use IE for anything other than testing. Why would I care how it's set up or change anything? I want a default installation for testing -- right out of the box with SP2 all Windows updates in place--I've changed nothing. If the browser is not set up correctly you can blame Microsoft. I don't know what else to tell you other than I am done with this thread and with any attempt to try and help with the issue. -- Best regards, Michael Wilson __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Site check - esp. Mac UNIX
Hi all (Susan, this has the 'you are here' effect) I've been tidying up my code and added a 'you are here' effect; hopefully I've not broken anything. Would you be able to check it for me, especially on Mac and UNIX; I'd be interested on how it handles at different resolutions as well if anyone has the time. You can test the 'you are here' with a couple of pages: index from 'Home' top right below slogan and from logo top left components from 'COMPONENTS' left sidebar and slogan top right support from 'SUPPORT' left sidebar privacy from 'Privacy' at bottom html: http://public.softectra.com/dev/lang/markup/css/cssd/261005_1/index.html css: http://public.softectra.com/dev/lang/markup/css/cssd/261005_1/css/modern.css Thanks all. Mark. -- Mark Batty __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tabs inside of containers
Hi, I am trying to build a horizontal list menu (using an unordered list) and I want to place it inside of a container along with other things such as a header and a search form. Also, I'd like to make it flexible so that if a user increases the font size, the navigation tabs enlarge with the font. I've tried to do this from scratch and from a ton of other menus I've found in the Wiki, but I can't seem to get the horizontal list to display:block, float:left and stay inside of the container. If anyone can point me to an example of something like that I'd appreciate it. Something like that? http://icant.co.uk/articles/flexible-css-menu/ -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background color/color declarations - why?
Hi Ron, Pringle, Ron wrote: snip Again, no color or background-color is applied to this since all paragraph text is colored on the p tag and I obviously want the background image in the secondaryBottom div to show through. And yet the validator throws specific errors indicating that I haven't declared background-color to go with the (i assume, inherited) color declaration. I haven't seen this warning on elements with inherited color. Can you give us an example? Declaring a color on each and every element that inherits color for its text seems patently absurd (and overkill) and declaring a background color on the elements mentioned above would obviously destroy the layout. Yes -- you've done exactly what the warning is there for -- you checked out your page, determined that you didn't need to change anything in this instance, and moved on. No worries. :-) I've used the Firefox Web Developer Toolbar to test my pages with no color and/or with no images and everything appears to be readable/accessible with no problems. I've even run the site through the color blindness tools to ensure that when background colors/images are used, they still work for all types of color blind users. Am I missing something here? Yes. The possibility that someone may have a user style sheet set up with his or her own colors, which may end up contrasting with your colors. So the idea is that if you're going to reset one of the user's preferences (color or background color), make sure you reset both of them so they don't inadvertantly match and make the text unreadable. I don't understand the point of the validator invalidating my css on these issues. It doesn't invalidate your CSS, just gives you warnings of things to pay attention to. I'm inclined to ignore these issues with the validator, but at some point I'm going to have to explain to my bosses exactly WHY the code doesn't validate and why that's ok. A machine can't tell if you are doing something well. It can only check if you are following certain rules to a T. So it gives you a warning and relies on you to check and make sure the code in question is not causing any problems, because it can't tell. Thus, you shouldn't ignore the warnings, in that you should read them and see if they are valid -- but if they aren't, you don't have to worry about fixing them. Remember, the validator is only a tool. Your bosses shouldn't care if your pages validate, as long as you know why they don't validate and know the errors aren't causing any 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 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New article on PIE - In Search of the One True Layout
snip I can reproduce it consistently, and make nearly all the boxes disappear simply by inserting my cursor at the beginning of any heading and dragging through the content past the bottom of the box. If I keep dragging downward, I can make all of the boxes (except the purple one) scroll upward and off screen. snip Anyone else, since Alex needs confirmation? Donna Casey Yup, and very pretty the effect is (although it's clearly not what was intended): Win 2000(SP4), Firefox 1.0.5. Works as expected on IE6 and Opera 8. Regards, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background color/color declarations - why?
Pringle, Ron wrote: I'm trying to understand exactly why the W3C CSS validator now spits out errors for instances where you do not declare a color on a property with a background-color declaration, or vice versa. It doesn't. The validator spits out WARNINGS for that situation, not ERRORS. Those are very different beasts. This has come up a lot recently. Please search the archives and read the Wiki validation page. http://css-discuss.incutio.com/?page=CodeValidation Am I missing something here? I don't understand the point of the validator invalidating my css on these issues. I'm inclined to ignore these issues with the validator, but at some point I'm going to have to explain to my bosses exactly WHY the code doesn't validate and why that's ok. Just to reiterate, the code DOES validate, which should go a long way toward satisfying your bosses. -- -Adam Kuehn __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] background color/color declarations - why?
I originally replied to this off-list, but as the link looks like being useful to more people than Ron, I'll send it here too: Hi all- I'm trying to understand exactly why the W3C CSS validator now spits out errors for instances where you do not declare a color on a property with a background-color declaration, or vice versa. As has been discussed here within the last 48 hours, it isn't giving errors - it's giving warnings, and fairly meaningless ones at that. See: http://archivist.incutio.com/viewlist/css-discuss/64774 for details. Cheers, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New article on PIE - In Search of the One True Layout
I am running Windows XP Pro SP2 with Firefox 1.07. Are you saying you didn't test this on Windows? No. I'm saying that I don't have access to a Windows box at the moment and that I can only use the OS X versions which obviously don't have the problem. Yes I obviously didn't test for this exact problem in this exact browser on this exact platform. Probably because the OS X and Windows XP version of Firefox gave the same behaviour so many times inn my repeated save reload rituals that I often would check Firefox (or indeed Netscape) on the platform I was at and not repeat the test. What would be most useful is if someone with access to a Windows box and a bunch of Gecko-derived browsers could work on a simplified test case that shows what combination of nestedness, overflow: hiddens etc cause things to happen. Does the negative margins cause the problem? If noone else will, then I will. But considering that it's now been shown that Gecko's float engine has been wrong all along (even before Firefox 1.5) and that Firefox 1.0 has problems with the combination of overflow: hidden and position: relative, I'm pretty sure that that will be eventually, rather than urgently. Anyhow, even if no one is up for doing the test case, can someone please say whether the problem occurs on either the boxes or the borders examples? Or even the simple unadorned one? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New article on PIE - In Search of the One True Layout
On Wed, 26 Oct 2005 12:05:32 -0400, Donna Casey [EMAIL PROTECTED] wrote: Anyone else, since Alex needs confirmation? Donna Casey Wow. How'd you do that!?!?!? OS X FF 1.0.7 Don't see it in Safari or Opera 9pr1 Mac - under Tiger -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Styling input button+select box -- still looking for answer
Hi. Posted this the other day and didn't see any answers. Please help if you can. I have a select box set up with a 20px image as the submit button. I've tried several approaches to get the select box and the button to line up so that they're more or less vertically centered (the gif is taller than the select box. I'd like the select box to appear left of the gif, equidistant from the top and bottom of the gif. None (adjusting margins, padding, placement on each element, placing them in a container div, etc) seem to work. The offending button can be seen at www.thedebauchers.com/align.php I'm using this code: div style=position:absolute; top:300px;left:300px;height:100px;width:200px; img src=test.gif height=67px align=left Select your zip code form method=post action=whatever.php select name=zip option 60701/option option 60706/option /select input type=image src=arrow.gif / /form /div __ Yahoo! FareChase: Search multiple travel sites in one click. http://farechase.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New article on PIE - In Search of the One True Layout
On Wed, 26 Oct 2005 13:15:55 -0400, Alex Robinson [EMAIL PROTECTED] wrote: Anyhow, even if no one is up for doing the test case, can someone please say whether the problem occurs on either the boxes or the borders examples? Or even the simple unadorned one? Boxes did not act the same FF 1.0.7... -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/mail/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Tabs inside of containers
Thanks for your response. The problem I'm having is not the look of the links. I wanted to have a header section of the page that contained all of the things in that section. I finally gave up on that and used this html: div id=header div id=newnav ul lia href=#Link 1/a/li lia href=#Link 2/a/li lia href=#Link 3/a/li lia href=#Link 4/a/li lia href=#Link 5/a/li li class=searchFormSearch: input type=text size=20 / input type=image src=images/button-go.gif name=go //li /ul /div /div div id=topClassUNCLASSIFIED/div div id=decorate1/div I applied a background image to #header and another one to #decorate1 and used absolute positioning for #topClass to achieve the look I wanted. Everything flexes and it works fine. I'm just disappointed that I couldn't put everything in a container. Maybe that's not important. Thanks. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Good looking fluid-width sites
This message *may* be viewed as a pointless addition to this argument, but, I don't like to see a guy on his lonesome in a fight!! :D best, -Stuart I'd like to request that everyone on CSS-D stop making this into a fight. I am not fighting, and as I'm the one who brought up this bug, anyone who says I am fighting or tries to add fuel to the fire is only making me look bad. So don't do it. This is a discussion list, most of us are adults, let's discuss. The problem here is clearly one that manifests itself on certain versions of IE 6, definitely default installations. I don't know what the problem is and I don't have time to isolate it, it might be related to the Javascript and not IE itself, but it's up to Al to decide whether to pursue the bug, or decide that it's an insignificant problem and move on. As far as I'm concerned, if customers were happy with it, then that's what counts. Unless anyone has anything new to add to the discussion, we ought to close it. -- -- C Montoya rdpdesign.com ... liquid.rdpdesign.com ... montoya.rdpdesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Tabs inside of containers
Beauchamp Michael J CONT NPRI wrote: Thanks for your response. The problem I'm having is not the look of the links. I wanted to have a header section of the page that contained all of the things in that section. I finally gave up on that and used this html: div id=header div id=newnav ul lia href=#Link 1/a/li lia href=#Link 2/a/li lia href=#Link 3/a/li lia href=#Link 4/a/li lia href=#Link 5/a/li li class=searchFormSearch: input type=text size=20 / input type=image src=images/button-go.gif name=go //li /ul /div /div div id=topClassUNCLASSIFIED/div div id=decorate1/div I applied a background image to #header and another one to #decorate1 and used absolute positioning for #topClass to achieve the look I wanted. Everything flexes and it works fine. I'm just disappointed that I couldn't put everything in a container. Maybe that's not important. Michael, I don't understand why you couldn't put everything in a container, nor what is wrong with the markup above. What was the problem that you saw when you tried to put everything in a container? And why did you want to put everything in a container in the first place? A link to the page with the problem would probably be helpful. 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/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New article on PIE - In Search of the One True Layout
From: Alex Robinson [EMAIL PROTECTED] Yes I obviously didn't test for this exact problem in this exact browser on this exact platform. Probably because the OS X and Windows XP version of Firefox gave the same behaviour so many times inn my repeated save reload rituals that I often would check Firefox (or indeed Netscape) on the platform I was at and not repeat the test. FYI In the past year, we've found many rendering differences between same versions of Firefox between Windows and OS X (and also among Safari on Jaguear, Panther, and Tiger). Most of these issues are exacerbated when dynamically changing properties, so a static CSS developer would not see them very often. By the way, while I don't agree with all the techniques you are using, my hat's off to you for the amount of time and effort you've obviously devoted. Where did you find the time? Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Good looking fluid-width sites
Christian Montoya wrote: This message *may* be viewed as a pointless addition to this argument, but, I don't like to see a guy on his lonesome in a fight!! :D best, -Stuart I'd like to request that everyone on CSS-D stop making this into a fight. I am not fighting, and as I'm the one who brought up this bug, anyone who says I am fighting or tries to add fuel to the fire is only making me look bad. So don't do it. This is a discussion list, most of us are adults, let's discuss. The problem here is clearly one that manifests itself on certain versions of IE 6, definitely default installations. I don't know what the problem is and I don't have time to isolate it, it might be related to the Javascript and not IE itself, but it's up to Al to decide whether to pursue the bug, or decide that it's an insignificant problem and move on. As far as I'm concerned, if customers were happy with it, then that's what counts. Actually, even if one person in 1000 encountered the issue, I'd love to isolate it. We don't use this technique in any of our commercial products, but we do use a similar technique for simply doing a min-width. If you have the time, let me know if this page works for you. When making the window narrower, the min-width expression should kick in at about 750px. http://www.projectseven.com/products/menusystems/pmm/pagepacks/utopia/vertical_liquid.htm On this whimsical one, a full script is used to set equal height columns. They should, in this implementation, animate to full height: http://www.projectseven.com/tutorials/css/pvii_columns/col2fixed.htm Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] background color/color declarations - why?
Yes. The possibility that someone may have a user style sheet set up with his or her own colors, which may end up contrasting with your colors. So the idea is that if you're going to reset one of the user's preferences (color or background color), make sure you reset both of them so they don't inadvertantly match and make the text unreadable. Zoe Adam, Zoe, et al - Apologies for not searching the list archives before posting. Normally the recent discussions would have caught my eye, but I haven't been receiving listmail due to being out of town last week. I do realize the limits and uses of the validator as a tool. What I was rather obtusely searching for was the enlightenment Zoe provided above. The why behind the warnings. Regards, Ron __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New article on PIE - In Search of the One True Layout
Donna Casey wrote: 1)http://www.positioniseverything.net/articles/onetruelayout/example/rounded 2) insert cursor just before text Block2 in the green inner box As well, you cannot get the boxes back by reloading the page or hitting back button and returning, though you can click the example link on : Anyone else, since Alex needs confirmation? I get the exact same in Firefox v1.0.7. -- Best regards, Michael Wilson __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Frustration learning css for layout
CSS is clearly elegant and powerful, and I have little difficulty using it to style elements. And using divs for layout - which I'm new at - works pretty well designing for ONE browser. But trying to make the layout look right for 'all' browsers is driving me nuts (and I suspect I have company). I've read possibly hundreds of pages of code/hack advice, yet it seems that every fix I make breaks something else, and I often have no way to know if the advice I'm following is truly savvy or not. Are there any agreed-upon (or widely accepted) fundamentals (conditional comments vs. hacks; the 'best' box-model hack; best source for reliable hacks; top 3 issues to address, when and how to position divs, etc)? Without knowing or understanding some basics, I get the feeling that I'm building on quicksand, and thinking fondly of tables. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Good looking fluid-width sites
Christian Montoya wrote: This message *may* be viewed as a pointless addition to this argument, but, I don't like to see a guy on his lonesome in a fight!! :D I'd like to request that everyone on CSS-D stop making this into a fight. Christian, I have emailed you privately on this. The problem here is clearly one that manifests itself on certain versions of IE 6, definitely default installations. I would add, q...manifests itself on certain versions of IE 6, definitely insCERTAIN/ins default installations/q!! Unless anyone has anything new to add to the discussion, we ought to close it. Couldn't agree with you more, mate!! best, -Stuart __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] New article on PIE - In Search of the One True Layout
Suggestion for a fix: remove the position: relative in .wrapper h2 Ingo's fix worked for me FF 1.0.4 on XP. -Nigel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ALA Sprite based menus issues
I have several drop down menus which have several items on each. In total that is 31 different options. Quite a bit of code went into making the onmouseover events work, and it doesn't quite work well in all browsers and it doesn't scale well (there is a lot of broken code in the js). The first part is suckerfish dropdowns which I got working fine. Then I decided since each menu has several options, using sprites ALA (http://www.alistapart.com/articles/sprites) would improve the situation no end and remove the nasty JS once and for all. Anyway I encountered some problems and thought it might be the dropdowns causing them so I have temporarily removed them and then I realised (or I think I have) my problem: I have an image called menu1.gif. This menu has 5 options in it. When you put they mouse over it they light up. Normally this would require 10 images, but now we are using just 1 and saving a potential 7 kb in size. This is good. Now the problem is when I try to set the :hover effects. The hover uses background images which can only have an offset from the original, which should allow me where to specify the new image from but it isn't working. It either shows nothing, or all items. I think this is because I am using multidimensional x rather than y like the article did. I thought about moving the image so they were above each other but that would cause the same problems. I would prefer to have a single large image for each menu but I can't see how I could do that. Now the only solution is to create a 31 images with their off and on states. and have seperate CSS code for each - something I would rather not do. Any ideas? Thanks, Graham Reeds. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] problem with caption box
Trish Meyer wrote: At 9:29 AM -0400 10/25/05, David Laakso wrote: You might take a look at these methods for setting images and captions(note the file is 4.01 consequently the p is not closed): http://www.w3.org/Style/Examples/007/figures.html It doesn't help me with my next problem of captioning a bunch of images, which you can see at http://www.sfvartclub.org/artaroundtown.htm I'm supposed to be putting two lines of text (the name of the artist, and the title of the artwork), under each image. Right now they all just float left with a border and margins. There are 7 images. Make a 50px square thumb for each one. Float all 7 in a single horizontal row. Make 7 identical pages like that. Put a different full size image (with the name and title benaeth it) positioned above the thumbs on each of the 7 pages. Click the appropriate thumb to see its enlargement. Trish ~dL -- David Laakso http://www.dlaakso.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New article on PIE - In Search of the One True Layout
Small testcase: http://www.satzansatz.de/cssd/tmp/fxselectbug.html Confirmed with Firefox 1.0.5 [Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.9) Gecko/20050711] Not scrolling/bug fixed in Firefox 1.5beta2 [Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b5) Gecko/20051006] That's fantastic Ingo. From Donna's original mail to me I thought she was saying it was broken in FF1.5b, but I now see she actually meant 1.07. I was going to say can you file a bug, Ingo, but if they've fixed it, they've fixed it. Suggestion for a fix: remove the position: relative in .wrapper h2 Seems to fix it in your test file too here (http://www.positioniseverything.net/articles/onetruelayout/example/rounded). H. I can't remember exactly why that pos: rel is there (I did make that example just before last Christmas). It's no doubt there because of a peekaboo issue in IE Win. When I'm next in front of a batch of Windows machines, I'll make sure to confirm and incorporate this fix. Ingo, many thanks for that. Once again you've just got to say I love you css-d ;) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Frustration learning css for layout
Without knowing or understanding some basics, I get the feeling that I'm building on quicksand, and thinking fondly of tables. I totally sympathize but you hit the nail on the head... to master any piece of web technology (or just about anything really) you've got to get a thorough understanding of the basics first, otherwise, yeah, it can be a time-consuming and frustrating learning process. Personally, I floundered for weeks trying to figure out CSS on a new site design and it wasn't until I sat down for the weekend and read a book on CSS that it all came together. But, if it helps, three practical suggestions: 1) make sure your HTML and CSS code validates, first and foremost 2) avoid hacks if you can; use them if there's no other way around them 3) take it step-by-step; try coding for a one-column site first and get that going on multiple browsers; then try adding a second column -- what happens when you float the column? or use relative positioning?; then try adding a heading and a footer; then code your navigation; etc. In other words, start simple and build upon success. Good luck and have fun with it! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Present nested tabular data without using table tags
(bear with this one. it takes a lot of non-CSS setup before I get to the
actual CSS question)
I am working on a report-generating application that includes the ability to
do nested subreports. For example, suppose the user defines the following
reports:
Report 1: Pets. Displays Name, Kind of Animal
Report 2: Kids: Displays First Name, Last Name, Age.
Includes Report1 as a subreport (i.e. to show the pets for each kid found)
Report 3: Adults. Displays First Name, Last Name, Age
Includes Report3 as a subreport (i.e. to show the kids for each adult found)
The output might look something like this:
http://home.comcast.net/~rob.freundlich/css/report.html (very crude
formatting for now, but it should give the general idea). If you look at
the source for the link, you'll see lots of nested tables. I don't think
that's a conceptual problem here, since I'm displaying tabular data.
However, there's a *HUGE* practical problem with it: Internet Explorer (6.0)
doesn't render table rows as it receives them, even if I use table-layout:
fixed.
In the example I give above, it's not noticeable, since it's a small,
pre-generated file. However, my app might be generating hundreds or
thousands of rows, each of which might have a deep subreport or subreports,
and it's pushing the data out to the browser as it renders, rather than
waiting for the whole report to be completed before sending it to the
browser. The intent there is to show the user results as they are
generated; this gives the user a better feeling of responsivness, and can
actually help them if the data they want is near the beginning of the report
(because they don't have to wait for the full render).
What I've noticed, though, is that even if I've pushed (for example) rows
1 - 10, IE might not yet be displaying them. I can see my app generating
them (through internal logging), and if I View Source in IE, I see the data
(so I know IE has received it), but IE steadfastly refuses to render them
until it hits some blackbox state. So my user's experience is choppy and
slow even if my app is smoothly producing data.
OK, enough setup. On to the CSS questions.
According to Microsoft's web site
(http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/re
ference/properties/tablelayout.asp), using table-layout: fixed should
cause the table to render one row at a time, instead of waiting for the
entire table to be received. I have used table-layout fixed and fulfilled
all of the conditions they specify in that article (not in the sample link I
provided above, I know, but in my app I do it), and I still see the behavior
I'm describing. It's definitely an improvement over waiting for the whole
table, but it's *not* row-by-row as they state on their site.
Since this application is being written primarily for IE 6, this is a
problem for me, and I find myself wondering the reverse of the usual
tables-vs-CSS question: is it possible to nicely present tabular data nicely
without using tables?
Well, of course it is. I could use DIVs for the rows and SPANs for the
fields in each row, and define a class for each field, and end up with
something like this:
div class=mainReport
div class=row
span class=col1John/span
span class=col2Smith/span
span class=col337/span
/div
div class=row
div class=subReport1
div class=row
span class=col1Rover/span
span class=col2Dog/span
/div
/div
/div
div class=row
span class=col1Bill/span
span class=col2Jones/span
span class=col329/span
/div
/div
The problem with this, and the reason tabular data is best presented as
tables, is that I have to give every span a class and then set up
hierarchical styles such as mainReport row col1 {
css-for-col1-in-main-report }; mainReport col2 { sic }; subreport1
col1 { sic }; and so on. Definitely doable, but it adds a lot of metadata
(compared to the table technique, where I can put formatting on th's, cols,
or whatever, instead of each and every td.
Another possibility in an ideal world would be to use adjacent-sibling
selectors to specify CSS for the columns. But of course, since I'm
targeting IE6, that's not an option for me.
Can anyone offer an alternative? (note: if you can suggest a way to fix
IE's table behavior, please respond to me off-list)
Rob Freundlich
Males are biologically driven to go out and hunt giraffes. - Newt Gingrich
Some folks you don't have to satirize, you just quote 'em. - Tom Paxton
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Frustration learning css for layout
David Agnew wrote: CSS is clearly elegant and powerful, and I have little difficulty using it to style elements. And using divs for layout - which I'm new at - works pretty well designing for ONE browser. But trying to make the layout look right for 'all' browsers is driving me nuts (and I suspect I have company). I think this article says it well... http://www.wait-till-i.com/index.php?p=172 I've read possibly hundreds of pages of code/hack advice, yet it seems that every fix I make breaks something else, and I often have no way to know if the advice I'm following is truly savvy or not. Lots of old and outdated articles around - check dates. Also a lot of relative new articles that repeat old stuff without checking and testing what works and what doesn't. CSS and browser-support is still very much a moving target, with constant browser-upgrades, and even seasoned web developers have their frustrated moments while trying to stay on top of it and separate the useful stuff from a maze of browser-bugs. Are there any agreed-upon (or widely accepted) fundamentals (conditional comments vs. hacks; the 'best' box-model hack; best source for reliable hacks; top 3 issues to address, when and how to position divs, etc)? Only one rule that most web developers seems to agree on: - design in Opera, Moz/Firefox, Safari first (in whatever order you like), and correct things in IE/win later. This makes sense when we look at actual standard support: http://nanobox.chipx86.com/browser_support.php The rest is basically 'personal preferences', where we often agree to disagree :-) (once we've got the hang of it). Without knowing or understanding some basics, I get the feeling that I'm building on quicksand, and thinking fondly of tables. Oh, and I left tables because they were too unstable... The basic is found on http://www.w3.org/, although it can be hard to find all bits and pieces in that maze of a site. This page should lead to some useful resources: http://www.w3.org/Style/CSS/learning regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari bordering a td that has NO style to it
on 10/26/05 9:41 AM, Johnnie Blevins at [EMAIL PROTECTED] wrote:
It looks like a bug from here, but I won't swear to that.
You could get around it (at least in the case you showed), by adding
the following entry to your style sheet.
td[colspan]{
border: 1px solid transparent !important;
}
Unfortunately, this seems to break (slightly) in the current Firefox,
and very badly in Firefox 1.5.
Is there any way to get only Safari to see that rule? I really want this to
work across all browsers as much as possible. MY other option is to just
make more than one table per row set, but that's less ideal to me.
--
-
Scott HanedaTel: 415.898.2602
http://www.newgeo.com Novato, CA U.S.A.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New article on PIE - In Search of the One True Layout
Duckworth, Nigel wrote: Yep, exactly as Donna described. But...I can also make everything disappear by clicking on the little square box in the top right with the [x] in it. ;) Seriously though, who does this (besides us)? And is this problem unique to this method? I suppose someone wanting to nick your copy would do this - nice anti-theft device Alex! well, except for the client that wants to be able to copy and paste content from their site into whatever they want to use it in... it's quite common for folks to copy/paste something, from an address to phone number to entire paragraphs...and use it in other media, don't you think? and even if they accidentally did it, you cannot get the content back by refreshing. I'd say it was buggy behavior at best. I doubt seriously if my clients would think of it as an anti-theft device. Donna __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New article on PIE - In Search of the One True Layout
windows xp pro sp2, not osx Tom Livingston wrote: Wow. How'd you do that!?!?!? OS X FF 1.0.7 Don't see it in Safari or Opera 9pr1 Mac - under Tiger __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] New article on PIE - In Search of the One True Layout
I didn't mean to stir up trouble, I just thought you'd want to know. I didn't mean to cause the boxes to disappear at all - they just did for some reason and I finally figured out what I must have done to cause it. Of course I wanted to know Donna. It's an excellent catch. Anything that impedes the user should be eradicated. I can say that with a cheesy grin on my face now that Ingo has made the test case and chased it down ;) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] New article on PIE - In Search of the One True Layout
well, except for the client that wants to be able to copy and paste content from their site into whatever they want to use it in... it's quite common for folks to copy/paste something, from an address to phone number to entire paragraphs...and use it in other media, don't you think? Darn, my marketing spin/joke fell totally flat. Guess it's the way I tell 'em. I agree, it's definitely a problem, but thanks to Ingo there's a fix. Nigel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ALA Sprite based menus issues
My description probably wasn't the best in the world so here's a link to some code that demonstrates my problem: http://homepage.ntlworld.com/graham.reeds/sprites/ Thanks, G. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Safari and another td issue
http://www.newgeo.com/web/css/z/index.html The images are 112px wide, I also have the td's all set to 112px wide, yet I get this border. The outer table will be variable in that I do not know how many images are to fit in the table, could be 1-5, so I can not easily set a width to the table. I have found that if I set the td and table both to some very small width, it works, but then in IE, the type and the price get those widths as well. Surely, there must be a way to get this to line up right. Basically, there should be no white showing. -- - Scott HanedaTel: 415.898.2602 http://www.newgeo.com Novato, CA U.S.A. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 2 Column layout + equal height problem
Hi, I've got the age-old problem of trying to create a layout that has two columns that appear to be equal height, one fixed width and one fluid, no matter which column has more content in it. http://www.aycee.co.uk/x_temp/test.html (http://www.aycee.co.uk/x_temp/test.css) The layout looks just how I want it to in IE (in IE 6 anyway, not sure about others) except the right column doesn't quite stretch the full height of the content div - there's a gap at the bottom of about 20 or 30px, whereas I want it to meet the footer. I have even more problems in Firefox though, the top of the column doesn't touch the banner above it, again a 20 or 30px gap, and this time the grey column only stretches as far as the content, nowhere near the footer. I'm pretty sure the FF height is something to do with the column being floated right but I've tried numerous thigns and I can't get the layout to work properly in either browser, let alone both! If anyone could shed any light on this for me I'd be very grateful. Cheers, Ali :o) ... Alison Lee [EMAIL PROTECTED] http://www.aycee.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Validation
At 07:56 PM 26/10/2005, Gunlaug Sørtun wrote: Vicki Stebbins wrote: For me, I'll now include in my written estimate of a job, a clause which says something about 'warnings' in validation services just to cover all avenues. If you come up with a good text then let me know - off list, I guess. Clients are often worse than the validator about validation (if they have any idea about it), so I certainly could use a written statement to hold them back... :-) regards Georg Hi Georg, You're not the only one to ask, I normally try to keep this sort of statement simple, not too much jargon as it confuses people. (Haven't we all had the client that used lots of jargon without a clue what they were talking about!) When I have something put together I'll send through off list to you and anyone else interested, and if anyone else has something already I'm sure I'd like a look at their's also... it's certainly good to pool resources with this sort of thing. Regards 8-) Vicki __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Good looking fluid-width sites
From: Christian Montoya [EMAIL PROTECTED] To: Al Sparber [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: Wednesday, October 26, 2005 7:00 PM Subject: Re: [css-d] Good looking fluid-width sites When making the window narrower, the min-width expression should kick in at about 750px. http://www.projectseven.com/products/menusystems/pmm/pagepacks/utopia/vertical_liquid.htm Both that site, and the flubber, work for me in IE 6. Did you change the flubber layout? Seems like there's a new link on the page. There is a link now in this page: http://www.projectseven.com/csslab/testing/minmax/cssp5.htm The link loads a second page that simply has the min-width set to a smaller value and the max-width to a larger value. Do both pages behave for you or just one? -- Al __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Put gap in list styled for navigation
Hi
I've got a ul that I've styled as a nav bar. Fine. My client has now
asked to have a gap the width of 1 list item to separate the last two
list items as they are links to external sites. If you want to take a
look, go to: http://www.digitalbeginnings.shef.ac.uk
Here's the basic code:
xhtml
ul id=sidenav
lia href=index.htmHome/a/li
lia href=background.htmBackground to the study/a/li
lia href=aims.htmResearch Aims and Questions/a/li
lia href=methodology.htmMethodology/a/li etc
/ul
css
ul.sidenav {
width: 150px;
margin-top: 0px;
margin-bottom: 0;
margin-left: 0;
position: relative;
margin-right: 447px;
padding: 0px 0px 175px;
background-image: url(../images/sponsors.gif);
background-repeat: no-repeat;
background-position: center bottom; etc
}
#sidenav ul{
margin: 0;
padding: 0;
}
#sidenav li {
list-style-type: none;
margin: 0px;
text-align: center;
padding: 0;
}
All I have to do, I thought was introduce a class extLinks:
li.extLinks {
margin-top: 10px;}
yet when I apply this to the first external link, nothing happens.
OK, so I tried introducing a div id=extLinks to wrap around the last
two links, again with margin-top:10px and even padding-top: 10px. Still
nothing.
I tried throwing the baby out with the bath water, making the whole
thing div id=sidenav with two uls one on top of the other. Still
nothing.
I'm missing something really obvious, right. But what?
TIA
Paul
http://www.pauljinks.co.uk
{
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari and another td issue
From: Scott Haneda [EMAIL PROTECTED] http://www.newgeo.com/web/css/z/index.html The images are 112px wide, I also have the td's all set to 112px wide, yet I get this border. The outer table will be variable in that I do not know how many images are to fit in the table, could be 1-5, so I can not easily set a width to the table. I have found that if I set the td and table both to some very small width, it works, but then in IE, the type and the price get those widths as well. Surely, there must be a way to get this to line up right. Basically, there should be no white showing. If I'm understanding the white you don't want (on either side of the images), it is there because of the side padding on the td.featuredTitle and td.featuredTitle elements. Remove that, and there is no more white beside the images. Hope that helps, ~holly ps - are you sure those images are 112px wide? When I view them separately they seem to be 125px wide... __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Good looking fluid-width sites
There is a link now in this page: http://www.projectseven.com/csslab/testing/minmax/cssp5.htm The link loads a second page that simply has the min-width set to a smaller value and the max-width to a larger value. Do both pages behave for you or just one? They really do both work. I wonder if the other users who saw the problem before still see it. -- -- C Montoya rdpdesign.com ... liquid.rdpdesign.com ... montoya.rdpdesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] background color/color declarations - why?
From: Pringle, Ron I'm trying to understand exactly why the W3C CSS validator now spits out errors for instances where you do not declare a color on a property with a background-color declaration, or vice versa. It's just a sanity check sort of a tip. Just intended to alert you to the possibility of snafus like white text on a white background, which might be inherited and so on. It is intended to be a warning, rather than an error. I think the W3C have acknowledged that they have changed the css validator and that it isn't quite right at present. -- Peter Williams __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Put gap in list styled for navigation
I tried throwing the baby out with the bath water
Poor baby! How could you throw him out?
I'm missing something really obvious, right. But what?
Did you try using padding?
#external { padding-top:1em; }
Also, I recommend putting the external links in a second UL, since
using CSS to differentiate them from the internal links only helps
visual users. You could do:
ul
lione/li
litwo/li
/ul
p id=extExternal links:/p
ul id=external
lione external/li
litwo external/li
/ul
#ext { visibility:hidden; } /* or whatever to hide visually but not
from other agents */
#external { padding-top:1em; }
--
--
C Montoya
rdpdesign.com ... liquid.rdpdesign.com ... montoya.rdpdesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Put gap in list styled for navigation
On 10/26/2005 6:01 PM Paul Jinks wrote: I've got a ul that I've styled as a nav bar. Fine. My client has now asked to have a gap the width of 1 list item to separate the last two list items as they are links to external sites. If you want to take a look, go to: http://www.digitalbeginnings.shef.ac.uk snip I'm missing something really obvious, right. But what? I believe I'd go with two lists. -- Steve Clason Web Design and Development Boulder, Colorado, USA www.topdogstrategy.com (303)818-8590 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] One True Layout Centered
On 10/26/05 6:45 PM, anathema [EMAIL PROTECTED] wrote: I discovered Alex Robinson's One True Layout [props bro!] the day it was published and have been trying to make it a fixed width centered design. Obviously it is easy in standard compliant browsers simply by putting a margin: 0 auto; on the wrapper. The next course of action would be to use text-align: center on the body for IE. However, IE 5, 5.5 and 5.2 Mac get it wrong and the wrapper is left aligned. This clearly?? has to do with the float: left. How about feeding the wrapper - margin: 0 12.5% 0 12.5%; - for IE 5/Mac? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] One True Layout Centered
margin: 0 12.5% 0 12.5%; Can you explain where you got 12.5%? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] One True Layout Centered
On 27 Oct 2005, at 7:45 am, anathema wrote:
I discovered Alex Robinson's One True Layout [props bro!] the day it
was published and have been trying to make it a fixed width centered
design. Obviously it is easy in standard compliant browsers simply by
putting a margin: 0 auto; on the wrapper. The next course of action
would be to use text-align: center on the body for IE. However, IE 5,
5.5 and 5.2 Mac get it wrong and the wrapper is left aligned. This
clearly?? has to do with the float: left.
Here is the layout.
http://www.webnonsense.org/testing/one/
Here is the css. MY additions are at the bottom.
http://www.webnonsense.org/testing/one/assets/css/non-equal-heights.css
There are various problems with your file, as far as IE mac goes:
1/ the hack you use to serve the float on wrapper to old IE 5 win - IE
Mac fails to recover and sees the float property
2/ the filter you use on the ruleblock
#header /* */, #footer /* */ {
margin: 0 auto;
}
IE Mac ignores those rules (the explanations on dithered.com are just
wrong [1]. Solution, delete those empty comments, just do #header,
#footer { ...}
3/ For IE mac, you set the #wrapper to display:inline-block. This means
it is still an *inline* element and cannot be centered by the use of
margin:auto. Instead, use {text-align:center} on the parent block (the
body in your case).
for [one], your best course of action is to hide those two rules from
IE Mac. You already hide some rules from that browser (within the
backslash (/*\*/) in a comment rule block). The problem then is that
mixing those various hacks will create even more problems. Instead, use
another filter to hide form IE Mac:
@media screen {
#wrapper
{
display: block;
float: left;
float /* */: none;
}
}
[1] http://www.dithered.com/css_filters/css_only/index.php
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 Column layout + equal height problem
Alison Lee wrote: I've got the age-old problem of trying to create a layout that has two columns that appear to be equal height, one fixed width and one fluid, no matter which column has more content in it. http://www.aycee.co.uk/x_temp/test.html (http://www.aycee.co.uk/x_temp/test.css) Alison, There is some info on any column longest on the List wiki/FAQ -- http://css-discuss.incutio.com/ Check the faux column link on that page. If you are up for starting from scratch, try the 2 col layout on this page: http://www.alistapart.com/articles/negativemargins It will walk you through the faux col business. And it is a very stable robust layout. If you prefer a fixed width layout, simply wrap it in a giant wrapper with a fixed width assigned to it. Alison Lee Regards, ~dL -- David Laakso http://www.dlaakso.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] One True Layout Centered
There are various problems with your file, as far as IE mac goes:
1/ the hack you use to serve the float on wrapper to old IE 5 win -
IE Mac fails to recover and sees the float property
2/ the filter you use on the ruleblock
#header /* */, #footer /* */ {
margin: 0 auto;
}
IE Mac ignores those rules (the explanations on dithered.com are
just wrong [1]. Solution, delete those empty comments, just do
#header, #footer { ...}
Are you sure you are talking about IE 5.2 Mac. That filter works on
my version of IE 5.2 Mac
3/ For IE mac, you set the #wrapper to display:inline-block. This
means it is still an *inline* element and cannot be centered by the
use of margin:auto. Instead, use {text-align:center} on the parent
block (the body in your case).
Text align center does not work as i stated in the original post.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] One True Layout Centered
One more thing to add - the issue / problem is not with the #footer and #header. Those are dealt with easily by using text-align: center and margin: 0 auto; Anathema __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 2 Column layout + equal height problem
From: Alison Lee [EMAIL PROTECTED] http://www.aycee.co.uk/x_temp/test.html (http://www.aycee.co.uk/x_temp/test.css) The layout looks just how I want it to in IE (in IE 6 anyway, not sure about others) except the right column doesn't quite stretch the full height of the content div - there's a gap at the bottom of about 20 or 30px, whereas I want it to meet the footer. I have even more problems in Firefox though, the top of the column doesn't touch the banner above it, again a 20 or 30px gap, and this time the grey column only stretches as far as the content, nowhere near the footer. David had good link suggestions where you will find out about how to create the illusion of full height colums for your page. The gap below the banner in FF is due to white space in your HTML. Put the closing div tag for the banner on the same line as the opening one, and the gap will disappear. It's possible that the problem in IE at the bottom of the page has a similar cause. If not, check for default margins or padding that haven't been zeroed on elements at the bottom of that column, or within the footer. Hope that helps, ~holly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
