Re: [css-d] (no subject)
Help! I am not subscribed - these emails started coming at random - how do I unsubscribe? John E. Cavanaugh MD. There's always a wrong way to do the right thing ... Cavanaugh's Law On Oct 7, 2014, at 8:23, Barney Carroll barney.carr...@gmail.com wrote: IE and Mozilla have now committed to supporting -webkit- prefixed properties. The obvious problem is that the W3C is too slow and cumbersome for many people's desires and expectations of the web. IE6 came with a suite of incredibly powerful functionality that the rest of browser-land is only now catching up to (filter: anyone?). The problem then was that some of the earliest webapps were designed specifically for IE, back when there was no conceivable way of forking the code to achieve similar functionality in other browsers. VML was submitted 2 years before SVG started taking shape. IE6's lofty goals were almost reinstated in the HTML5 in the broadest sense that the W3 tried to make a PR splash about (embedded multimedia, file-system API, seamless vector graphics in HTML, CSS3 transforms filters). But once again, people have come to expect awesome stuff that the W3C is too slow to ratify to a universal consensus. So the responsibility (which, I agree, ultimately rests on website authors) comes down to managing expectations. It's tough to say no, especially when there's a lot of money in it and many people in the trade of web development are inclined to exploratory hacking anyway. It's becoming increasingly more difficult to tell people you can't, in good conscience, serve up code relying on unratified specifications, when implementation of such functionality is ubiquitous (and you know how to do it). A few years ago web development studios started finding the willpower to tell clients they wouldn't commit to like-for-like experiences in legacy Internet Explorer versions, and for a while standards-compliance seemed to be that bit more tenable – but recently I've come across numerous situations where people will say they only care about Chrome iOS support. As regards the 'reasonableness' of these various expectations, I think W3C compliant validity is at its most applicable when it comes to web sites consisting of many documents: you want these documents to be consistent with each-other and marked up to universal standards for reasons of posterity universal access. For my part, what I've been working on for the better part of the last year would be more accurately described as web apps: there's a single HTML document and it acts more as a wrapper for dynamic functionality. The term 'document' barely applies, and the use-cases are so esoteric and business-critical that the client will happily use a specific browser version in order to guarantee expected behaviour. Regards, Barney Carroll barney.carr...@gmail.com +44 7429 177278 barneycarroll.com On 7 October 2014 13:53, Philip Taylor p.tay...@rhul.ac.uk wrote: Barney Carroll wrote: I'm wondering how differently my career might have worked out if all those times IE came up I'd just told the client to get onto Bill Gates about it. If /every/ W3C-compliant web site had carried that text, the world might now be a very different (and much better) place ... I love Windows (7), completely fail to understand the masochistic appeal of *X, but nonetheless deeply wish that Mr Gates (and Mr Google, and all the rest of the Big Boys) cared more about complying to standards and less about seeking to define them. This guy identifies many of the problems in a nuthell : http://www.sitepoint.com/w3c-css-webkit-prefix-crisis/ Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
http://genpower.nazwa.pl/system/public.php?mz=955izn=59q=2wgd=z37 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Surprise your lover tonight!... http://stemopheino.nl/fashion.php?ggoogleId=64y4 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Post link. Could be 1 of many things: linking local files (that are on your computer but no one else's), invalid CSS or markup, different browser/version... Kevin On Sat, Jan 15, 2011 at 11:33 AM, amitabha ghosh amitabhaghosh...@gmail.com wrote: I have designed a page layout in css by using divs. but i am finding while opening in another browser computer it is breaking all the designs. can anybody help me to sort it out? -- amitabhaghosh __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Morning Amitabhaghosh You wrote I have designed a page layout in css by using divs. but i am finding while opening in another browser computer it is breaking all the designs. can anybody help me to sort it out? -- amitabhaghosh A clickable link to the page in question would provide us place to start to provide the help you seek. It would also be helpful to know in what browsers you're trying to view the page and and what Operating systems. (ie win xp pro etc) As an aside, it's also helpful to provide a subject in the subject line. (ie. page doesn't work in some browsers) It helps keep the archives straight. Best Jim Nannery aka www.oldcurmudgeon.net __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
I want to have a visible indicator that a field is valid or invalid
(easy
enough) as follows:
CSS:
style
input:valid + span::after { content: \2713 }
input:invalid + span::after { content: \2717 }
/style
but to no avail. It would appear that Firefox and Chrome both evaluate
the
value= only on load, and not after the field has changed. Anyone got
any
suggestions?
Too bad the structural pseudo-class empty can't help here.
May be we need something like that for form controls.
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
--- On Thu, 2/4/10, Woody Woodman wqq...@hotmail.com wrote: From: Woody Woodman wqq...@hotmail.com Subject: [css-d] (no subject) To: css-d@lists.css-discuss.org Date: Thursday, February 4, 2010, 5:24 PM I'm having difficulty determining why my columns at www.mlsmailinginc.com are overlapping in IE 8/Win and Safari/Mac but not in FireFox3.5/Mac. Also, although I've read just about every sticky-footer explanation I can find, when I try to implement the fixes, they don't work as evidenced at the site. Seeking any advice on what I am missing. Thanks in advance, Woodie __ Hi Woodie, Maybe the 63 validation errors in your HTML or the 38 validation errors in your CSS have something to do with it. Try working on fixing those first. Maybe one of them is causing your problem. Rod Castello _ Your E-mail and More On-the-Go. Get Windows Live Hotmail Free. http://clk.atdmt.com/GBL/go/201469229/direct/01/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Woody Woodman wrote:
I'm having difficulty determining why my columns at www.mlsmailinginc.com are
overlapping in IE 8/Win and Safari/Mac but not in FireFox3.5/Mac.
It's because you have left: 2em; on #nav (and it does overlap in mac
ff/3.5.7.
In your style sheet, delete these:
/*style type=text/css*/
/*#container-head */
/*/style*/
Amend this selector:
#nav {
position: absolute;
left: /*2em delete*/ 0;
top: 135px; width: 1em;
padding:0;
margin: -1px 0 0 -1px;
font: 1em verdana, arial, sans-serif;
text-align: left;
color: #ff; }
Also, although I've read just about every sticky-footer explanation I can
find, when I try to implement the fixes, they don't work as evidenced at the
site. Seeking any advice on what I am missing.
Validate the markup and css and bring it back to the list.
Thanks in advance,
Woodie
Best, ~d
--
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Hi does anyone know why I'm getting white spaces between sliced images ? I
have a bunch of img tags within the div and I can't figure out why the
images have spaces, and currently why half of the image slices look fine and
the rest look like a jigsaw puzzle.
hi, maybe you need:
img {
margin:0;
padding:0;
}
please post a code or link to it.
Virgil
http://www.jampmark.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Christopher R wrote:
Hi does anyone know why I'm getting white spaces between sliced images ? I
have a bunch of img tags within the div and I can't figure out why the
images have spaces, and currently why half of the image slices look fine and
the rest look like a jigsaw puzzle.
I'm guessing that you are seeing gaps underneath the images? If so, try
one of these:
img { vertical-align: bottom; }
- or -
img { display: block; }
Explanation: Images are inline elements, intended to display on the same
line as text. (Imagine PI symbols as images.) As such, they line up with
the baseline of text, with room underneath for descenders (the hooks
under p, q, etc.)
Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
On Wed, Feb 18, 2009 at 8:02 PM, Casey casey.li...@caseyftw.com wrote: Hi, I'm working with a series of divs: div div.../div div.../div div.../div div.../div div.../div /div The inner divs are all float: left'd. However, when the contents of the divs is too wide for the browser, the line of DIVs break. Is there a way to prevent this, other than setting a fixed width for the container div? (Yes, the alignment of the divs is crucial.) Thanks. - Casey Why couldn't you set a fixed width (perhaps to something arbitrarily high)? --Ankeet [ http://www.skyisturningred.com/ ] __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
On Wed, Feb 18, 2009 at 7:30 PM, Ankeet P mythic.bo...@gmail.com wrote: On Wed, Feb 18, 2009 at 8:02 PM, Casey casey.li...@caseyftw.com wrote: Hi, I'm working with a series of divs: div div.../div div.../div div.../div div.../div div.../div /div The inner divs are all float: left'd. However, when the contents of the divs is too wide for the browser, the line of DIVs break. Is there a way to prevent this, other than setting a fixed width for the container div? (Yes, the alignment of the divs is crucial.) Thanks. - Casey Why couldn't you set a fixed width (perhaps to something arbitrarily high)? --Ankeet [ http://www.skyisturningred.com/ ] __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Well, my contents are very variable. Sometimes, it's only a couple hundred pixels while at other times it's a couple thousand pixels, and I don't want there to be too much whitespace. (Unless there's a way to collapse whitespace, in which case, please tell me.) (By the way, I had originally typed a subject, but I sent it with the wrong email, so it bounced. When I sent the new message with the correct email, I forgot the subject.) -Casey __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Well, my contents are very variable. Sometimes, it's only a couple hundred pixels while at other times it's a couple thousand pixels, and I don't want there to be too much whitespace. (Unless there's a way to collapse whitespace, in which case, please tell me.) (By the way, I had originally typed a subject, but I sent it with the wrong email, so it bounced. When I sent the new message with the correct email, I forgot the subject.) -Casey Setting the 'white-space' property to 'no-wrap' takes care of eliminating word wrap in each separate element. As for eliminating whitespace in between the divs, I still got nothing. --Ankeet [ http://www.skyisturningred.com/ ] __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Casey wrote:
div
div.../div
div.../div
div.../div
/div
The inner divs are all float: left'd. However, when the contents of
the divs is too wide for the browser, the line of DIVs break. Is
there a way to prevent this, other than setting a fixed width for the
container div? (Yes, the alignment of the divs is crucial.)
Presumably, you want your divs to act like the cells of a table. In that
case, something like this might work for you:
CSS:
~~~
.table-row-ish
{
white-space:nowrap;
}
.table-row-ish div
{
display: inline-block;
display: inline !ie;
zoom:1 !ie;
}
~~~
HTML:
~~~
div class='table-row-ish'
div.../div
div.../div
div.../div
div.../div
div.../div
/div
~~~
Hope it helps.
--Bill
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.com
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
On Wed, Feb 18, 2009 at 8:09 PM, Bill Brown macnim...@gmail.com wrote:
Casey wrote:
div
div.../div
div.../div
div.../div
/div
The inner divs are all float: left'd. However, when the contents of
the divs is too wide for the browser, the line of DIVs break. Is
there a way to prevent this, other than setting a fixed width for the
container div? (Yes, the alignment of the divs is crucial.)
Presumably, you want your divs to act like the cells of a table. In that
case, something like this might work for you:
CSS:
~~~
.table-row-ish
{
white-space:nowrap;
}
.table-row-ish div
{
display: inline-block;
display: inline !ie;
zoom:1 !ie;
}
~~~
HTML:
~~~
div class='table-row-ish'
div.../div
div.../div
div.../div
div.../div
div.../div
/div
~~~
Hope it helps.
--Bill
Thanks! That works fairly well. I'm curious, what do !ie and the
zoom property do?) It works perfectly in Firefox, but in IE and
Safari, there's some quirk involving vertical alignment.
- Casey
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Casey wrote:
Thanks! That works fairly well. I'm curious, what do !ie and the
zoom property do?) It works perfectly in Firefox, but in IE and
Safari, there's some quirk involving vertical alignment.
!ie is a CSS filter used to target the MSIE family of browsers and zoom
is a Microsoft proprietary syntax commonly used (as in this case) to
ensure an element 'hasLayout' for IE. The !ie in this case is
unnecessary as no other browser recognizes it, but I use it to quickly
find IE-only rules when separating my style block out into external
(conditional comment filtered) style sheets.
Changing the second rule to:
.table-row-ish div
{
display:inline-block;
vertical-align: bottom;
display:inline !ie;
zoom: 1 !ie;
}
...should help with the vertical alignment issues.
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.com
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Hi Lee Bettridge:
you can use this IE hack:
element {
min-height: 200px;
height: auto !important;
height: 200px;
}
Stingna Zhou
RainCity Studios Inc.
Designer
www.raincitystudios.com
Lee Bettridge wrote:
Is there a way to set a min-height in IE6 so that an element can grow
if the text size is increased, the method needs to be compatible
with IE7 and Firefox / Safari / Opera.
__
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] (no subject) table cells
From: E McMahon [EMAIL PROTECTED]
Is there any way for me to display the parent row with equal height cells
while
the child row is set to display none?
http://thequarrygroup.com/table_row_alignment/tablesorter1.htm
Unless I'm misunderstanding the problem, this is an html issue, not css or
javascript.
The first two cells in each table row have a rowspan of 2, but the rest of
the cells in the row only span one row, so they are shorter than the first 2
cells of the row.
For example:
tr
td rowspan=2 class=collapsible
/td
td rowspan=2 class=collapsible_alt
a href=javascript:alert('Order #
SO71778')SO71778/a
/td
td
Purchase Mart
/td
td
PO19894146890
/td
td
Apr 18, 2007
/td
td
$1,503.98
/td
/tr
But from the looks of the behavior of the cell with 2 lines, it seems you
could just add br /nbsp; to the contents of each of the short cells so as
not to disturb whatever function is dependent upon them not being set to
span 2 rows.
I didn't look at the javascript code.
Hope that helps,
Nancy
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
E McMahon wrote: Hello - I was wondering if anyone has tripped over this... I do believe it's a CSS issue, but included jquery details as that is what I'm using to change display properties. I'm using jquery and the tablesorter plug-in (along with a tablesorter updated module to accomodate child rows - http://www.pengoworks.com/workshop/jquery/tablesorter/jquery.tablesorter.mod .js) to sort my db table. The collapsible rows have a 'extend-child' class which attaches them to the 'parent' row for sorting purposes. When a certain cell is clicked on the parent, the child row is displayed (the jquery goes and sets display to block). The child rows are set to display:none initially, and when the associated parent cell (tagged w/ a class of 'collapsible') is clicked, the child row displays. The jquery stuff works great, but it's the display I have a question about (so I came here)... Some of my actual db table rows have cells which vary in height. When I try to display them, with the child row below them (my particular app only has one child row/parent) the cells are unequal (I draw a border around the cells which makes it really obvious). Is there any way for me to display the parent row with equal height cells while the child row is set to display none? I'm seeing it in all of the browsers I've looked at - ff, ie, opera. Because the cell heights will vary, I have no way of really knowing a height or min-height to specify. I've doctored up the jquery tablesort demo/doc file (with the child row mod update) to show the problem (there's alot of overhead in butchering the actual app for you to see it..). The unequal rows don't really look that bad in this example, but do in my actual application - and the demo does show the problem. The doctored up jquery tablesort file is at http://thequarrygroup.com/table_row_alignment/tablesorter1.htm Any ideas, pointers greatly appreciated! Hi, The problem is related to the rowspan of the td element. Since the tr below that needs to be expanded is still there, and only the td elements are hidden, this effect appears. Best would be to only add the rowspan via Javascript when the actual expansion occurs. regards, Jens __ 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] (no subject)
Hi, The problem is related to the rowspan of the td element. Since the tr below that needs to be expanded is still there, and only the td elements are hidden, this effect appears. Best would be to only add the rowspan via Javascript when the actual expansion occurs. regards, Jens Some additional thoughts. Your jQuery module cannot interpret the rowspan correctly, since it seems to be built for simple rows without rowspan, and so you get the related effect. Either drop the rowspan and just indent the 2nd row with an additional td and colspan, or try adapting the jQuery script to only add the rowspan when the columns below get expanded. regards, Jens __ 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] (no subject)
Lee Bettridge wrote:
Hello,
Is there a way to set a min-height in IE6 so that an element can grow if the
text size is increased, the method needs to be compatible with IE7 and
Firefox / Safari / Opera.
Thanks.
__
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/
div.test {
min-height:100px;
height:auto !important;
height:500px;
}
Across IE7, FF 2,3, Opera and Safari this will trigger min-height just
fine. IE6 will just play along with the height that has been given
through the height attribute and will expand further, once the content
reaches the height.
regards, Jens
__
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] (no subject)
div.test {
min-height:100px;
height:auto !important;
height:500px;
}
Across IE7, FF 2,3, Opera and Safari this will trigger min-height just
fine. IE6 will just play along with the height that has been given
through the height attribute and will expand further, once the content
reaches the height.
regards, Jens
There are some more different ways using css hacks, which exploits
browser bugs, just like the example above:
#element {
min-height:500px;
}
* html #element
height:500px;
}
Alternativly you could use Conditional comments, which define a seperate
stylesheet for modifications that you use for a specific IE Version.
http://www.quirksmode.org/css/condcom.html
Before you resort to either hacks or conditional comments, be aware to
use them scarcly! Normaly you should not have to rely on either. Check
your layout before and see if you can make it with markup that does not
server either.
regards, Jens
__
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] (no subject)
Lee Bettridge wrote:
Is there a way to set a min-height in IE6 so that an element can grow
if the text size is increased, the method needs to be compatible
with IE7 and Firefox / Safari / Opera.
element {min-height: 200px; _height: 200px;}
...will make IE6 /behave/ as if it supported 'min-height'. That's
because IE6 (and older) has an auto-expansion bug that works in our
favor in cases like this.
The leading underscore is one way to make IE6 (and older) read
properties/values that the other browser will ignore. Any other
method/hack to serve that 'height: some-value' only to IE6 (and older)
can of course be used instead.
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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
I've been going made trying to centre my page. I'm trying to avoid using tables for positioning and have created divisions that I've put in place using absolute measurements. With a previous website I've simply used text-align:center in the body part and that seemed to work. With pure divisions, IE will recognize my centering but not Firefox and presumably not some of the other browsers as well. Any ideas? My site is going to measure up to 800 x 600 although I'm thinking of making it 1024 x 600. This problem has probably been discussed time and time again, so sorry in advance that I missed the previous discussions. Cheers, I found this article and a forum thread that helped me when I was trying to figure out the magic to make a page center in CSS. Others may know a wiser path than, I, however. :) http://articles.techrepublic.com.com/5100-10878_11-5296198.html http://www.webmasterworld.com/forum83/4577.htm Hope this helps... -- Words I have learned to spell from CSS-Discussion list - scissors, tortoise, hover (not hoover) __ 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] (no subject)
It may be possible to use floats to achieve your objective. Here is a link to a demo using floats: http://www.jimdavis.org/test/checkerboard.html This uses two floats, one that is 16em wide by 8em high, and a blank that is 8em square. The image within the wide float is floated left and is given a class to set the width and height of the image to 8em by 8em. This makes sure the image is sized to fit the containing element and allows the image to change size when the user re-sizes the text in the browser. I have only tested this on a PC with FF and IE7, so not sure of results in other browsers and OS's. Jim On Jan 31, 2008 10:15 AM, Kenoli Oleari [EMAIL PROTECTED] wrote: I am trying to create using CSS to make a page that looks like this: http://sfnan.org/iotc/templates-php/pie_1.php This page is a series of divs positioned somewhat like a checker board. This page is created by CSS using absolute positioning within a div that is positioned relatively. For various reasons, I am interested in assembling the checkerboard divs using something besides position:absolute __ 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] (no subject)
David Terrell wrote: Hello List, Could someone please let me know why and how to fix the aberrant spacing in the top level of my nav? I don't understand where it is coming from. Could someone also help me fix the margin problem that I'm having between #left-image and #main-text? I've included a link to a screenshot pointing out my problems. I see right off that you have multiple h1 tags that share the same ID. __ 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] (no subject)
From what I can see it appears to be the 6em width in your #nav li
selector...
#nav li {styles.css (line 119)
float:left;
padding:0.25em;
width:6em;
}
Change that width value to auto, or remove it entirely, and you may get the
results you want!
...Rob
__
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] (no subject)
Brian Simmons wrote:
I am having trouble with my links on the page. I have a top menu and a side
menu. When you click on any link the whole system breaks down
Yes indeed the clicks are trashing your layout, specifically a:visited
is doing you in ;)
In your stylesheet when you're declaring your link rules you
consistently drop part of the specificity for the :visited pseudo class...
#menu a:link, a:visited { --- you'd want that second part to read
#menu a:visited
color: #ff;
text-decoration: none;
text-align: right;
}
This mistake is repeated several times down the page, meaning that
cumulatively you're applying a lot of styles to ALL your :visited links.
SCL
__
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] (no subject)
On Mon, 31 Dec 2007 14:38:46 -, Brian Simmons [EMAIL PROTECTED] wrote: I am having trouble with my links on the page. I have a top menu and a side menu. When you click on any link the whole system breaks down. A link is provided in order to view the problem. Any help would be greatly appreciated. http://208.106.151.24/turner/ Try changing these: #menu a:link, a:visited #leftContent a:link, a:visited #RightMenu a:link, a:visited #extraSideBar a:link, a:visited to these: #menu a:link, #menu a:visited #leftContent a:link, #leftContent a:visited #RightMenu a:link, #RightMenu a:visited #extraSideBar a:link, #extraSideBar a:visited -- Andrew Frazier http://www.kidderminsterharriers.com ICQ: 77914158 Using Opera's revolutionary e-mail client: http://www.opera.com/m2/ __ 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] (no subject)
Thanks this fixed the problem.
Brian Simmons
[EMAIL PROTECTED]
www.simmonswebdesign.net
404.316.2655
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Shawn Lawler
Sent: Monday, December 31, 2007 11:31 AM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] (no subject)
Brian Simmons wrote:
I am having trouble with my links on the page. I have a top menu and a
side
menu. When you click on any link the whole system breaks down
Yes indeed the clicks are trashing your layout, specifically a:visited
is doing you in ;)
In your stylesheet when you're declaring your link rules you
consistently drop part of the specificity for the :visited pseudo class...
#menu a:link, a:visited { --- you'd want that second part to read
#menu a:visited
color: #ff;
text-decoration: none;
text-align: right;
}
This mistake is repeated several times down the page, meaning that
cumulatively you're applying a lot of styles to ALL your :visited links.
SCL
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Does anyone know why this page is not picking up the css style sheet like the javascrip is telling it to? http://www.pcg-advisors.com/new/theteam/brent.html It looks like you're not calling the correct path to the css - you're calling it at: http://www.pcg-advisors.com/new/theteam/mac_firefox.css When they are here: http://www.pcg-advisors.com/new/mac_firefox.css -- Susan R. Grossman [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Hi, The validator is reporting a number of errors in your mark-up. Go to: http://validator.w3.org/ and enter your URL to see the results of the validation test. Jim On Dec 20, 2007 1:33 PM, juliann wheeler [EMAIL PROTECTED] wrote: Does anyone know why this page is not picking up the css style sheet like the javascrip is telling it to? http://www.pcg-advisors.com/new/theteam/brent.html It is supposed to look like this one which happens to be working: http://www.pcg-advisors.com/new/index.html I can't tell why it's working with the home page and not the other one. Thanks! __ 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] (no subject)
Hi Juliann, I'm not sure why you would want to make so many different stylesheets in the first place, since you can make an almost 100% accurate stylesheet with one file to cover all browsers, but that's a different thing. Anyway... I think your css is in the wrong directory... You're using relative URLs. The css you're calling should be in www.pcg-advisors.com/new/theteam. It is in www.pcg-advisors.com/new Arno - Original Message - From: juliann wheeler [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: 20 December, 2007 11:33 PM Subject: [css-d] (no subject) Does anyone know why this page is not picking up the css style sheet like the javascrip is telling it to? http://www.pcg-advisors.com/new/theteam/brent.html It is supposed to look like this one which happens to be working: http://www.pcg-advisors.com/new/index.html I can't tell why it's working with the home page and not the other one. Thanks! _ The best games are on Xbox 360. Click here for a special offer on an Xbox 360 Console. http://www.xbox.com/en-US/hardware/wheretobuy/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
r paterso wrote:
Hello,I am trying to insert a background image into URLs that link to
pages outside our intranet and thus when clicked open a new window.
The image used is the common one seen on may sites, the little
overlapping windows. This code:
a.newWindow { padding-right: 14px; background:
url(/bcasinfo/images/productionFiles/icons/newWindow.gif) no-repeat
right center;}
works fine in FF-whatever regardless, and, most of the time in IE6.
However it does not work in IE6 when the sentence text that comprises
anchor wraps to a new line. What happens is the bg image stays on the
first line, usually overlapping the text, even as the padding-right is
visible on the line below.
The basic anchor rules have nothing unusual in their styling so I have
not included that code here.Any help would be appreciated.
Thanks,R.A. Paterson
Hi,
I've got this one for you:
css :: external link with icon/image, workaround for IE
http://home.tiscali.nl/developerscorner/css-discuss/test-link-iconENupdate.htm
Success and greetings,
francky
__
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] (no subject)
On Feb 16, 2007, at 10:14 AM, jeffrey morin wrote: is there a way to set an image as a border? No... but if the box you're bordering is fixed-width, you can combine a full-width background that contains the two side rails with :before/:after rules to give the top and bottom images. HTH, —ml— __ 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] (no subject image as border)
Mark Lundquist schreef: On Feb 16, 2007, at 10:14 AM, jeffrey morin wrote: is there a way to set an image as a border? No... but if the box you're bordering is fixed-width, you can combine a full-width background that contains the two side rails with :before/:after rules to give the top and bottom images. Hi Jeffrey. In principle: Yes... (even in IE, even liquid): * http://home.tiscali.nl/developerscorner/liquidcorners/liquid-corners-playgarden-08a.htm ... but the results will depend of the image you want to show. For a liquid design the (background repeated) images must be able to slide without shifting a part of the img. Maybe there are problems with the image you intend (and maybe also a solution for that). If problems, do you have a link to the img or to a testpage? Success and greetings, francky __ 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] (no subject) liquid corners
Julia Ccc wrote: Hello, Another problem. I'm implementing a css custom corners and border box with multiple divs inside the main box div. I want it to be expandible both by width and height. So the problem is that whan I don't specify float:right for the divs of right corners, they stick to the left corners and content div takes just the text widths. But when I specify float:right for the right corners they take their pace at the box, but the box expands automaticlly at 100% of available width. So the question is how to make the box (using the dloats of it's inside divs) take just th elength of text inside? Tnax in advance... Hi Julia, Indeed, often floats are floating away. :-) Some solutions without floating (instead of floats: with background positioning of the custom corners borders) you can find over here: * Liquid Round Corners http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm * One of the illustrations, maybe in the direction you´re searching: More Round Corners http://home.tiscali.nl/developerscorner/liquidcorners/more-rounded-corners_step1.htm If you don´t find what you are looking for, do you have a link to a testpage with your code? Salut! francky __ 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] (no subject) - styling readonly input
Timothy Martens wrote:
Hi CSSers,
Anyone know of a way to make a read only input element blend
perfectly in to the background in Safari? Renders properly in
Firefox. See: Tour Date field above calendar at:
https://www.mauimountaincruisers.com/bookings/
Aloha,
-tim
Alright Tim,
I had a look, I take it's the input for the total price down at the
bottom you're asking about?
Anyway if so, try this to reset the styles for that one input:
#total, #total:hover { color: #4a0400; border: 0; background: transparent; }
Should work for most browsers but I only tested it in FF2 on PC. I'll
check it in the rest of my browsers if you decide to implement it.
Rob O
__
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] (no subject)
Hugo Heriz-Smith wrote: http://www.stephenporterstudio.com/html/stainless.html So - if anyone has a suggestion of an elegant way to get that done, I'd love to hear it. I am hoping that there's a nicer way to do this than setting up 8 hidden tables that get swapped during the click. Depends on whether you want a page which basically doesn't tell visitors anything without full Javascript, CSS and image support, or if you want a page that (at least has a chance to) tell all visitors what this is all about - regardless of support. That's _your_ decision to make. If you want to check how much (or how little) information your page provides at a basic level at the moment, then you should open up your site to 'Lynxview'... http://www.delorie.com/web/lynxview.html ...and run it through there. I can't do that, but I have already checked it in the real thing - Lynx, and it doesn't tell me much about the sculptures at the moment. Suggestion: You already have a list (of thumbnails), so you can add pretty informative captions to each picture. Then you can show them, hide them (preferably with an 'off-screen' method) or position them one by one relative to the big picture, as the design requires and support allows for. The page will look the same and behave as you intend, but it will be a lot more informative on all levels. I can't do much with Javascript yet, so I can't tell you how to swap a caption on click. I know how to swap during :hover with CSS, but that's not good enough for what you've got there - it just tells me that it should not be too hard to achieve. Anyway, a well thought out mix of html, css and javascript should give you a pretty well-working, accessible and informative page for all visitors. regards Georg -- http://www.gunlaug.no __ 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] (no subject)
Hugo Heriz-Smith wrote: Hello, First of all - thank you again Georg for your help in getting this far. As I said the other day, I've been asked to redo this flash site, keeping it as close to the original as possible. http://www.stephenporterstudio.com in HTML. I'm doing just two pages for now - the opening page and the first gallery page. http://www.stephenporterstudio.com/html/ http://www.stephenporterstudio.com/html/stainless.html I've almost got both pages now - the biggest item I have left if getting the captions to change under the big picture on the stainless page as a new image is brought up by a click on the table to the left. So - if anyone has a suggestion of an elegant way to get that done, I'd love to hear it. I am hoping that there's a nicer way to do this than setting up 8 hidden tables that get swapped during the click. Javascript (OT for this list) would let you change specific elements via DOM. -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] (no subject)
Hugo Heriz-Smith wrote: I've almost got both pages now - the biggest item I have left if getting the captions to change under the big picture on the stainless page as a new image is brought up by a click on the table to the left. It's not elegant, and it would require (for accessibility) either a detailed alt tag or a page for the longdesc img option in the code, but you could add a white border to the big images themselves and include the caption as part of the image. __ 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] (no subject)
Wes Gamble wrote:
newDiv = popup.document.createElement('div');
newDiv.setAttribute('id', 'pdf');
newDiv.setAttribute('style', 'margin-top: 250px; text-align: center;');
newDiv.innerHTML = 'Please wait while your forms are
generatedBR/BR/IMG src=' + wait_image_url + '/';
popup.document.body.appendChild(newDiv);
I'd do it like this:
newDiv.style.marginTop = '250px';
newDiv.style.textAlign = 'center';
== Off-topic ==
This isn't a JS list, but if you're bothering to create the DIV using
correct DOM functionality then I'd create the contents that way too,
rather than using innerHTML.
== On-topic ==
I'd also make the img a block level element rather than using br
elements, but that's just how I roll. ;)
Brad
__
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] (no subject)
On 11/15/06, Bradley Wright [EMAIL PROTECTED] wrote:
Wes Gamble wrote:
newDiv = popup.document.createElement('div');
newDiv.setAttribute('id', 'pdf');
newDiv.setAttribute('style', 'margin-top: 250px; text-align: center;');
newDiv.innerHTML = 'Please wait while your forms are
generatedBR/BR/IMG src=' + wait_image_url + '/';
popup.document.body.appendChild(newDiv);
I'd do it like this:
newDiv.style.marginTop = '250px';
newDiv.style.textAlign = 'center';
It is an option. I'd do a
#pdf {margin-top: 250px; text-align: center;}
in the CSS file :-)
If #pdf normally has other styles you can also add a class with
newDiv.className = 'pop';
and set the CSS accordingly. Whenever you get the chance to let the
CSS parser do the work for you, do it.
--
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
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] (no subject)
There's always Doug Bowman's Sliding Doors:
http://www.alistapart.com/articles/slidingdoors/
It'll help you create expanding, EM width dependent tabs.
On 30/08/2006 16:03, Ross C wrote:
I saw a site a while back that had this (I'll try to find it).
I believe they had a background image for the tab that was like 150px wide
(and 20px high in your case) that had the borders for the top, right (or in
your case the chamfered corner), and bottom, then specified li
{border-left: 1px...}
So it's still expandable horizontally to scale with your text length.
I can see that this method would not work for everyone (for example, if your
li has a fluid height), but it may work for u.
-ross
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Poyner, Matt
Sent: Wednesday, August 30, 2006 9:55 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] (no subject)
I have a problem that I'm not sure how to solve. I am attempting to
create tabs with a small corner cutout. I know hot to place the small
corner image and get the rollover colors to work, etc.
The problem I'm having is that the 1px border I need on the top, left,
and right of each tab is showing around the image, so I turned border
off and am looking for a solution to create the borders I need.
Is there a way to specify a length for a border? For instance, if my
tabs are 30px wide and 20px high, and my corner image is 5px square, can
I specify the top border to only be 25px in length, and my right border
to be 15px high?
If not, is there a workaround for this?
Thanks for any help you can give.
My current code:
#newsTabs ul{
list-style-type: none;
margin: 0;
padding-bottom: 24px;
font: bold 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
float: left;
}
#newsTabs li {
float: left;
height: 20px;
color: #00;
padding-bottom: 0px;
margin: 2px 2px 0 2px;
/*border-top: 1px solid #9b988f;
border-left: 1px solid #9b988f;
border-right: 1px solid #9b988f;*/
background: url(/images/tabcorner.gif) 100% 0 no-repeat white;
}
#newsTabs a:link, #newsTabs a:visited {
display: block;
color: #00;
background-color: transparent;
text-decoration: none;
padding: 4px;
}
#newsTabs a:hover {
color: #00;
background: url(/images/tabcorner.gif) 100% 0 no-repeat #dde2dc;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Thanks, Ross. The expandable bg image did the trick. Exactly what I
needed to get it working.
I love this list! :-)
-Original Message-
From: Ross C [mailto:[EMAIL PROTECTED]
Sent: Wednesday, August 30, 2006 11:04 AM
To: Poyner, Matt; css-d@lists.css-discuss.org
Subject: RE: [css-d] (no subject)
I saw a site a while back that had this (I'll try to find it).
I believe they had a background image for the tab that was like 150px
wide
(and 20px high in your case) that had the borders for the top, right (or
in
your case the chamfered corner), and bottom, then specified li
{border-left: 1px...}
So it's still expandable horizontally to scale with your text length.
I can see that this method would not work for everyone (for example, if
your
li has a fluid height), but it may work for u.
-ross
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Poyner, Matt
Sent: Wednesday, August 30, 2006 9:55 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] (no subject)
I have a problem that I'm not sure how to solve. I am attempting to
create tabs with a small corner cutout. I know hot to place the small
corner image and get the rollover colors to work, etc.
The problem I'm having is that the 1px border I need on the top, left,
and right of each tab is showing around the image, so I turned border
off and am looking for a solution to create the borders I need.
Is there a way to specify a length for a border? For instance, if my
tabs are 30px wide and 20px high, and my corner image is 5px square, can
I specify the top border to only be 25px in length, and my right border
to be 15px high?
If not, is there a workaround for this?
Thanks for any help you can give.
My current code:
#newsTabs ul{
list-style-type: none;
margin: 0;
padding-bottom: 24px;
font: bold 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
float: left;
}
#newsTabs li {
float: left;
height: 20px;
color: #00;
padding-bottom: 0px;
margin: 2px 2px 0 2px;
/*border-top: 1px solid #9b988f;
border-left: 1px solid #9b988f;
border-right: 1px solid #9b988f;*/
background: url(/images/tabcorner.gif) 100% 0 no-repeat white;
}
#newsTabs a:link, #newsTabs a:visited {
display: block;
color: #00;
background-color: transparent;
text-decoration: none;
padding: 4px;
}
#newsTabs a:hover {
color: #00;
background: url(/images/tabcorner.gif) 100% 0 no-repeat #dde2dc;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
juliann wheeler wrote: http://www.juliannwheeler.com/phyve/Phyve_Final/index_final.html It looks great in Firefox, but in Internet Explorer many of the boxes are placed in the wrong place. Looks great :-) but not very usable. You should try to use those pages in Lynx - especially the front page, and add all the missing pieces (alt-attributes - with suitable content) that the W3C (X)HTML validator mentions as errors. What is Lynx? What will that achieve? Lynx is a browser, and it will tell if your pages/sites are constructed in such a way that they _can be used_ at the most basic level, which is a must when it comes to usability - and anything else in web design. No pages/sites can be made to work with css and/or javascript - only make them look and work better once the basics are in place. If the basics are missing, then we're only painting the dead with all the other stuff. That's what you have done, IMO. You can test _your_ pages/sites in Lynxview... http://www.delorie.com/web/lynxview.html ...and there you will find where to download the browser also - in case you need it. If you clock on who on the left nav you can see 4 different pages: Each of these pages has a heading above the content in a teal all caps font. Even though the placement of this box that holds this type is the same on each of these pages you can see in IE how it jumps around and is different on each one of these pages. Defaults are not identical across browser-land, so you'll have to set margins and line-height and what-not as you like it to turn out. It makes sense that defaults are not identical across browserland. But the 4 different pages mentioned above all have the same layout and same code. It doesn't make sense, why a SINGLE browser (ie Internet Explorer alone) would display each of these pages differently. Parts of IE's default is to ignore dimensions and calculate line-height in its own unique way. I know only too well that it doesn't make sense, but there isn't all that much that makes sense in IE. Now, you have not applied /complete styles/ to the elements you have problems with. Try doing that first, and we'll help you if any senseless bugs are still disturbing it - in IE. Still no way to make it work in _my_ Firefox, Opera or IE, since you have locked all (existing) text inside fix sized containers. Result: parts of the text is hidden from view, so I *have to* use Lynx (or rather Opera's user-styles) to be able to read what it says... regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Why not apply that fix to IE only and spare Firefox? You could do: Because...uh...umm...well...that's a good point. ;o) -Darrel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
On 7/6/06, Austin, Darrel [EMAIL PROTECTED] wrote:
I'm using a 3-column layout on our new site. To avoid the dreaded
'dropped column' problem in IE where if the total column widths are
greater than the width of the browser, one or more of the column DIVs
will jump down the page, I've set any element in the center column that
may be too wide to get wrapped in a div set to 100% and to have
overflow-scroll set on it:
http://www.mncourts.gov/district/2/?page=60
This works fairly well in both IE and Firefox.
However, in Firefox, the scrollbar will appear and disappear no matter
the specific width of the browser.
For instance, at 600px, 610px, and 615px, you may see the scrollbar, but
at 605px, 611px and 614px, it comes back.
I assume that this is some sort of rounding issue in Firefox? Any fix
for this?
Why not apply that fix to IE only and spare Firefox? You could do:
html body div { fix }
htmlbody div { no fix }
--
--
Christian Montoya
christianmontoya.com ... portfolio.christianmontoya.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Simon Kerr wrote: Hi all. I've been trying to think of a way to make a nice fluid layout. My page consists of three content areas that are inline. Behind them is a background image (www.i4cevents.com). When the browser is resized, the content areas should move and the background image should shrink or enlarge. So far, this works quite nicely in ff and opera, but the background image is not displaying correctly in safari. Any idea why? [...] Hi Simon, I'm afraid I have no experience with Safari, but I noticed (under Win98SE at 800x600 resolution) IE is dropping down; screenshot here http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-i4cevents-IE.jpg. At 1024x768 with a history or other sidebar turned on: also IE downwards... Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Simon, On Jul 3, 2006, at 4:41 AM, Simon Kerr wrote: Hi all. I've been trying to think of a way to make a nice fluid layout. My page consists of three content areas that are inline. Behind them is a background image (www.i4cevents.com). When the browser is resized, the content areas should move and the background image should shrink or enlarge. So far, this works quite nicely in ff and opera, but the background image is not displaying correctly in safari. Any idea why? Safari 2.0.3 seems to match firefox 1.5.0.x. What version of Safari are you testing with? Roger, -- Roger Roelofs [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Simon Kerr wrote: Hi all. I've been trying to think of a way to make a nice fluid layout. My page consists of three content areas that are inline. Behind them is a background image (www.i4cevents.com). When the browser is resized, the content areas should move and the background image should shrink or enlarge. So far, this works quite nicely in ff and opera, but the background image is not displaying correctly in safari. Any idea why? 22 screen captures: http://www.browsercam.com/public.aspx?proj_id=265681 Safari does not seem to be the problem. OTOH, all versions of IE /may/ be problematic(with or without a sidebar). Best, ~dL -- http://chelseacreekstudio.com/ca/ccs/pow/pow.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Feel free, and start designing layouts regardless. Sometimes the best way to learn is to break something and then fix it! On 05/05/06, Click This IT Solutions [EMAIL PROTECTED] wrote: Hi My name is Rudi and I'm just starting to use CSS. I have been using it for a while now but only for the formatting on my pages. I'd like to learn how to use CSS to design nice layouts like you pro designers. So in the meantime I'll just watch and learn. Bye for now. Rudi http://www.clickthis.co.za http://www.clickthis.co.za/ mailto:[EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- http://www.web-buddha.co.uk dynamic web programming from Reigate, Surrey UK (php, mysql, xhtml, css) look out for project karma, our new venture, coming soon! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
On 4/10/06, David Merwin [EMAIL PROTECTED] wrote: The issue is in IE for Windows. The menu on the left, extra padding and when you roll over it resets correctly. site: http://www.madeblue.com css: http://www.madeblue.com/wp-content/themes/pbv2/style.css I really want to stay with em and not convert to pixels for layout. Any ideas? ah, good ol' ie. see if this page can help you at all, as it lists quite a few hovering bugs for that browser: http://positioniseverything.net/explorer/percentages.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
You have just learnt your first lesson of designing using CSS. IE is not standards compliant, when coding CSS use firefox for previewing your site, once you have it how you want, then view in IE and apply conditional comments to fix it. Steve Frost Frank Rees wrote: Hi All, I have recently built my first CSS-dependent website. When it is rendered by MSIE it looks good; however, when rendered by Netscape it completely breaks down. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)Michael Larocque
Can someone change the subject to something that is not totally random? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)Michael Larocque
Michael Larocque wrote:
Hi all,
I've been beating my head against this for a bit too long, and I've
decided to ask for help. I've validated both the html and css. I
can't seem to figure out why there's a 3 pixel gap between the header
image and the nav bar. I've tested in both Safari and Firefox.
http://trinaread.com/t3st/ (html)
http://trinaread.com/t3st/style.css (css)
Mike
Please see if this helps:
#header img { vertical-align: bottom; }
Regards,
~davidLaakso
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
No subject?
Michael Larocque wrote:
http://trinaread.com/t3st/
The dark brown background of the nav is supposed to butt up against
the header graphic.
I must be missing something obvious. Grr.
Maybe... :-)
You're experiencing the effect of line-height on an inline element.
Try adding...
#header img {display: block;}
...and while you're at it you may as well delete the header-div
altogether and style the header-image directly.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)Michael Larocque
On 14-Mar-2006, at 17:18 , ~davidLaakso wrote:
Michael Larocque wrote:
Hi all,
I've been beating my head against this for a bit too long, and
I've decided to ask for help. I've validated both the html and
css. I can't seem to figure out why there's a 3 pixel gap between
the header image and the nav bar. I've tested in both Safari and
Firefox.
http://trinaread.com/t3st/ (html)
http://trinaread.com/t3st/style.css (css)
Mike
Please see if this helps:
#header img { vertical-align: bottom; }
Regards,
~davidLaakso
Thanks David. That did it. I'm not sure why its needed though -
everything had 0 margin and padding. Weird.
(Sorry for the lack of a subject line. I had sent the email
originally from a non-subscribed account. When I hadn't seen it on
the list I realized what I had done. I copy/pasted the email to the
subscribed account, but forgot to add a subject line. Mea culpa.)
Carpe viam,
Mike
Michael Larocque
Chief Cook and Bottle Washer
Prolumina Communications Inc.
http://prolumina.com/~mlarocque/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)Michael Larocque
On Mar 15, 2006, at 10:05 AM, Michael Larocque wrote:
On 14-Mar-2006, at 17:18 , ~davidLaakso wrote:
Michael Larocque wrote:
Hi all,
I've been beating my head against this for a bit too long, and
I've decided to ask for help. I've validated both the html and
css. I can't seem to figure out why there's a 3 pixel gap between
the header image and the nav bar. I've tested in both Safari and
Firefox.
http://trinaread.com/t3st/ (html)
http://trinaread.com/t3st/style.css (css)
Mike
Please see if this helps:
#header img { vertical-align: bottom; }
Regards,
~davidLaakso
Thanks David. That did it. I'm not sure why its needed though -
everything had 0 margin and padding. Weird.
Nothing weird at all. Images are inline images. They rest on the
baseline of the text. That baseline has some space at the bottom to
allow for descenders in glyphs (like the p, the q, the ...) to exist.
See this thread 10 days ago:
http://archivist.incutio.com/viewlist/css-discuss/71414
And this article on the Mozilla development site
http://developer.mozilla.org/en/docs/
Images,_Tables,_and_Mysterious_Gaps
PS - Line-height has *nothing* to do with this.
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)Michael Larocque
Michael Larocque wrote:
Michael Larocque wrote:
Hi all,
I've been beating my head against this for a bit too long, and
I've decided to ask for help. I've validated both the html and
css. I can't seem to figure out why there's a 3 pixel gap between
the header image and the nav bar. I've tested in both Safari and
Firefox.
http://trinaread.com/t3st/ (html)
http://trinaread.com/t3st/style.css (css)
Mike
Please see if this helps:
#header img { vertical-align: bottom; }
Regards,
~davidLaakso
Thanks David. That did it. I'm not sure why its needed though -
everything had 0 margin and padding. Weird.
Mike,
It is in /your best interest/ to follow Georg Sortun's suggestion(s).
Not mine.
Michael Larocque
Regards,
~davidLaakso
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)Michael Larocque
On 14-Mar-2006, at 18:30 , ~davidLaakso wrote: Mike, It is in /your best interest/ to follow Georg Sortun's suggestion (s). Not mine. Regards, ~davidLaakso Yeah, that's what I've done. I saw Georg's reply after responding to yours. Thanks everyone. Carpe viam, Mike Michael Larocque Chief Cook and Bottle Washer Prolumina Communications Inc. http://prolumina.com/~mlarocque/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)Michael Larocque
Philippe Wittenbergh wrote: PS - Line-height has *nothing* to do with this. That's right :-) It is strictly a 'font-size' related issue. BTW (since I haven't studied it in depth - or at all, really): Does choice of 'font-family' make any difference? Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] (no subject)
Hi Mike, Everything works just fine, except in IE6/Win...?The section headers do not display... BUT, if you scroll up/down, each header that disappears off screen and then returns will display, or if you wipe your cursor on the screen, they display, and will kind of stay...but once you mouse over the nav menu (not in the code) it disappears again... I believe this is the IE peekaboo bug: http://www.positioniseverything.net/explorer/peekaboo.html HTH, Prabhath -- http://nidahas.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
