Re: [css-d] text-transform both lowercase AND capitalize?
On Fri, Sep 19, 2008 at 12:08 AM, Holly Bergevin [EMAIL PROTECTED]wrote:
From: Chang Huang [EMAIL PROTECTED]
Thanks all. It would be nice to have the option 'text-
transform:lowercase capitalize;' though.
I guess I'm missing the point here, but when I type, I automatically type
words with capital letters at the beginning and lowercase ones following as
needed.
And It Seems To Me That It's Not That Hard To Do It For Every Word If
Needed.
Though for the most part, that looks a bit strange. I guess it might be
useful for a headline or something like that.
Anyway, my $.02 USD
~holly
Perhaps the data he is working with is coming from an external source where
everything is typed in all caps. While there are JavaScript and PHP based
ways to do what he desires, he may not be a coder in the regard, and is
looking for a way within his own means of converting the data to a more
presentable format.
Remember, we only know the situation in regards to what we're told. Being
disparaging about his question isn't what this list is about: He offered a
valid question which, unfortunately for what he wanted, was shot down.
To get a bit more off topic, Chang, if you don't know JavaScript well, you
can accomplish it using something like this:
document.onload = function() {
document.getElementById(YouIDNameHere).toLowerCase();
}
And then rely on the text-transform: capitalize to make it look decent.
-Jack
--
-Jack Timmons
http://www.trotlc.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS stylesheet broken with IE6, 7 and 8 but not Firefox
Hi.
I am trying to create a 3 panel layout with css. It has a left pane for nav
links, a bottom panel for a copyright notice and a right scrollable panel
for the sites main content. When it is viewed in Firefox 2 or later, the
layout/design works like a dream (you have the blue panel on the left, the
green one at the bottom and the red one extends from the top of the page to
the edges of the blue and green panels). When I run it in IE 6, 7 or 8 it is
sort of broken. In IE, the panel for the main content shows up like a red
strip that goes across the top of the screen and leaves a huge white blank
space where the red content is supposed to be at (refer to the Firefox
layout above). To see the differences between the 2 browsers, go to
www.test.eternityrecords.org/index2.aspx and remember the IE version is
supposed to look like the Firefox version. Would anybody have any ideas on
how to make all browsers show this layout like firefox does?
Here is the CSS code that I have in question. I put the entire section of
css code here in case something might be wrong with a part I'm not seeing
somehow.
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#LeftPanel, #Footer {
position: absolute;
top: 0;
left: 0;
width: 200px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to scroll to enable*/
background-color: navy;
color: white;
}
#Footer{
top: auto;
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
width: auto;
bottom: 0;
right: 0;
height: 120px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to scroll to enable*/
background-color: green;
color: white;
}
#MainContent{
position: fixed;
top: 0;
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
bottom: 120px; /*Set bottom value to HeightOfTopFrameDiv*/
overflow: auto;
background-color: red;
color: white;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
margin-top: 0;
}
* html body{ /*IE6 hack*/
padding: 0 0 120px 200px; /*Set value to (0 0 HeightOfTopFrameDiv
WidthOfLeftFrameDiv)*/
}
* html #MainContent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
* html #Footer{ /*IE6 hack*/
width: 100%;
}
Now, to put the CSS above into context, here is the asp.net 3.5 master page
(html code for it anyways):
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head runat=server
meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1 /
title/title
link href=Styles/StyleSheet.css rel=stylesheet
type=text/css /
/head
body
form id=form1 runat=server
div
id=LeftPanel
div class=innertube
This is the left panel
/div
/div
div id=MainContent
div class=innertube
asp:ContentPlaceHolder ID=ContentPlaceHolder1
runat=server
/asp:ContentPlaceHolder
/div
/div
div id=Footer
div class=innertube
Bottom panel
!--asp:Label ID=CopyrightLabel
runat=server Text=Label Font-Names=Arial/asp:Label--
/div
/div
/form
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] workaround to inherited opacity
Hi all, Thank you for your insightful comments. At the moment I'm leaning towards using small background PNG32s in the DIVs for the transparency effect, with a conditional style sheet for IE6 that uses alternate background images. Best, Rob Rob Emenecker @ Hairy Dog Digital www.hairydogdigital.com Please note: Return e-mail messages are only accepted from discussion groups that this e-mail address subscribes to. All other messages are automatically deleted. __ 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] padding or margin differences between Firefox3 for the Mac and Firefox3 for the pc
On Sep 19, 2008, at 1:16 AM, Nancy Johnson wrote: I was having the same problem before with safari and someone suggested body: first of type. I am concerned that it breaks in Firefox 3.1. 1. Since you'll be using a doctype that triggers strict mode, if I understood correctly,, the difference you saw between WebKit (Safari) and Gecko (Firefox) will disappear, making your little hack unnecessary (the difference is due to a different box-model interpretation in quirks mode). 2. If you're not using a doctype that triggers strict (standard compliant mode), you should. That levels of the differences between browsers. And you'll simplify your life. A refresher on doctypes: http://hsivonen.iki.fi/doctype/ PS-1: Fx 3.1 is not yet ought. A beta is due in October somewhere. The behaviour I mentioned won't change, though. PS-2: bottom-posting, please, when replying to the list. Thank you. Philippe --- Philippe Wittenbergh http://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/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] fixed in IE
Hello folks,
the following code works in FF and Chrome, but not in IE:
#copy {
position:fixed;
bottom:0px;
margin-bottom:5px;
margin-right:5px;
margin-left:5px;
text-align:center;
width:98%;
background-color:#F0F0F0;
color:#D2B48C;
}
div id=copy
Copyrightcopy; 2008
/div
thks in advance
_
Cansado de espaço para só 50 fotos? Conheça o Spaces, o site de relacionamentos
com até 6,000 fotos!
http://www.amigosdomessenger.com.br
__
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] workaround to inherited opacity
Hi Bill (and Al), Whenever you expose IE7 to a filter you kill font-smoothing. This is a great approach, but the font-smoothing will be an issue. ...Rob Rob Emenecker @ Hairy Dog Digital www.hairydogdigital.com Please note: Return e-mail messages are only accepted from discussion groups that this e-mail address subscribes to. All other messages are automatically deleted. __ 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] fixed in IE
Leandro Coutinho wrote:
the following code works in FF and Chrome, but not in IE:
#copy {
position:fixed;
bottom:0px;
margin-bottom:5px;
margin-right:5px;
margin-left:5px;
text-align:center;
width:98%;
background-color:#F0F0F0;
color:#D2B48C;
}
div id=copy
Copyrightcopy; 2008
/div
Which version of IE?
- IE6 doesn't support 'position: fixed' at all.
- IE7 does support 'position: fixed' when document triggers standards mode.
Fix for IE6 depends on layout/design, so we have to see the actual page
first.
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] CSS stylesheet broken with IE6, 7 and 8 but not Firefox
Andy Borka wrote: Would anybody have any ideas on how to make all browsers show this layout like firefox does? You mean something like this...? http://www.gunlaug.no/tos/alien/ab/test_08_0919.html Not very useful for anything, but I think it looks the same around the board. 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] CSS stylesheet broken with IE6, 7 and 8 but not Firefox
Andy Borka wrote: I am trying to create a 3 panel layout with css. RE:www.test.eternityrecords.org/index2.aspx This is one way to sort of do it [1]. Fwiw, sites that do not restrict content and allow the software to just do its little thing unhampered tend to be more functional, useful, and successful. [1] http://www.chelseacreekstudio.com/ca/cssd/test-51.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Aaargh! Img borders persist
Kim Brooks Wei wrote: http://blackboxnyc.com/soulsearching/index.html#nymf Ok, I give up. Please somebody, tell me how to get rid of the border under my imgs on hover. Thank you for Much Appreciated Help, as always . . . Kimi Nothing to do with your question but it may be in your client's interest to at least consider fixing at least one of the 230 markup errors, validating the CSS, and getting the primary content off the left rail in IE/6 and IE/7... -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Aaargh! Img borders persist
img {
border: 0;
}
Always seems to work for me!
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of David Laakso
Sent: Friday, September 19, 2008 1:17 PM
To: Kim Brooks Wei
Cc: CSS Discuss
Subject: Re: [css-d] Aaargh! Img borders persist
Kim Brooks Wei wrote:
http://blackboxnyc.com/soulsearching/index.html#nymf
Ok, I give up. Please somebody, tell me how to get rid of the border
under my imgs on hover.
Thank you for Much Appreciated Help, as always . . .
Kimi
Nothing to do with your question but it may be in your client's interest
to at least consider fixing at least one of the 230 markup errors,
validating the CSS, and getting the primary content off the left rail in
IE/6 and IE/7...
--
A thin red line and a salmon-color ampersand forthcoming.
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
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] text-transform both lowercase AND capitalize?
At 12:08 AM -0500 9/19/08, Holly Bergevin wrote: From: Chang Huang [EMAIL PROTECTED] Thanks all. It would be nice to have the option 'text- transform:lowercase capitalize;' though. I guess I'm missing the point here, but when I type, I automatically type words with capital letters at the beginning and lowercase ones following as needed. And It Seems To Me That It's Not That Hard To Do It For Every Word If Needed. Though for the most part, that looks a bit strange. I guess it might be useful for a headline or something like that. Anyway, my $.02 USD ~holly I've somewhat followed this thread but still don't know what the OP wanted. However: And It Seems To Me That It's Not That Hard To Do It For Every Word If Needed can be done via: text-transform: capitalize; Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Flash object has extra bottom margin in FF3, but not in IE
I'm experimenting with a Flash banner on a page, just a set of changing images.
Works perfectly, but in FF3 there's one or two pixels of extra transparent
bottom space (margin ?) that I can't get rid of. No problem in IE7 or IE6.
It happens with the default Adobe mark-up, and with SWFObject2, so the problem
probably lies with the object. I've tried 'object {margin: 0; padding: 0;
border: 0;}' but no change. The defined height of the 'movie' is the same as
the basic images, 120px.
The image under the movie has a 1px white border at the top, but this gets lost
in FF3 (it's there all right, but hard to see). The two images are inside one
div#banner, but putting them in their own divs makes no difference.
http://www.holidaymullandiona.co.uk/pages/accn/bb-sw-mulle.php (Adobe)
http://www.holidaymullandiona.co.uk/pages/accn/bb-sw-mullf.php (SWFObject2)
It's unusual for something to work 'better' in IE than FF. Anyone able to help,
please ?
Tim Dawson
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] clearing a CSS float
I often run into something like this:
ul id=menu
lia href=..Link A/a/li
lia href=..Link B/a/li
/ul
h1Fancy Title/h1
pBlah blah blah ... /p
Where I am using floats in the ul menu above. This happens when I am using
columns as well.
The problem is that h1 shows up just to the right of the menu.
To try and correct that - I've added h1 { clear: both } but this obviously
doesn't work. If I wrap the h1 in a div, then all is well if the div has
style=clear: both ... but that sounds like html for the sake of style.
I'd like to keep layout OUT of the html but I'm not sure what the common
approach is here ... I've even gone as far as adding
div style=clear: bothnbsp;/div to get out of float mode ... which
works great ... but isn't elegant and not in the spirit of CSS at all.
Thoughts?
-Luther
*
HOPED FOR:*
*LinkA* *LinkB*
*Fancy Title
*
Blah Blah
*ACTUAL (not exactly, but similar):*
*LinkA* *LinkB** Fancy Title
*
Blah Blah
*Current CSS:
*
ul,
ul li
{
list-style: none;
float: left;
margin: 0;
padding: 0;
}
ul li
{
display: block;
float: left;
padding-right: 10px;
}
__
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] text-transform both lowercase AND capitalize?
At 10:11 AM +1000 9/19/08, Chang Huang wrote: Thanks all. It would be nice to have the option 'text- transform:lowercase capitalize;' though. Of course, you always have that option -- just about anything can be done, if you can describe it. The only problem here is that this list normally doesn't discuss using css coupled with other languages to extend its application. The very simple css is here: http://www.webbytedd.com/b2/capitalize/a.css The example (with very simple code) is here: http://www.webbytedd.com/b2/capitalize/ Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] clearing a CSS float
Luther Baker wrote:
ul id=menu
lia href=..Link A/a/li
lia href=..Link B/a/li
/ul
h1Fancy Title/h1
pBlah blah blah ... /p
Current CSS:
ul,
ul li
{
list-style: none;
float: left;
margin: 0;
padding: 0;
}
ul li
{
display: block;
float: left;
padding-right: 10px;
}
Hi Luther,
Try this:
ul, li {
list-style: none;
margin: 0;
padding:0;
}
ul {
display:inline-block; /* IE Float Clear, Part 1 */
overflow: hidden; /* Float Clear */
}
ul {
display:block;/* IE Float Clear, Part II */
}
li {
display:inline; /* IE Double Margins Bug Fix */
float: left;
padding:0 10px 0 0;
}
That should put anything after the UL below the UL. The only time this
fix won't work obviously is if you're using a fly-out menu. In that
case, you can leave the IE fix in place, but would need to adjust the
fix for other browsers using the :after pseudo element on the UL.
Hope it helps.
Bill
--
~~~
Bill Brown, MacNimble.com :: From dot concept to dot com since 1999
WebDevelopedia.com, TheHolierGrail.com, Cyber-Sandbox.com, Anytowne.com
The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
__
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] Flash object has extra bottom margin in FF3, but not in IE
Tim Dawson wrote:
http://www.holidaymullandiona.co.uk/pages/accn/bb-sw-mulle.php
(Adobe)
It's unusual for something to work 'better' in IE than FF. Anyone
able to help, please ?
Add...
div#banner object {display: block;}
...and Firefox should behave as intended.
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/
[css-d] IE Clearing Bug
Hi Folks, I've been working on an IE clearing bug for the past 3 days and have exhausted all my patience and knowledge of CSS. I've tried the following fixes along with my own experimentation: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ http://www.positioniseverything.net/easyclearing.html Is there any chance I could get some assistance with this bugger? The best example (for IE) is located at: http://techsoup-global.org/node/1132 Thank you, James __ 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] Flash object has extra bottom margin in FF3, but not in IE
Gunlaug Sørtun wrote:
Tim Dawson wrote:
http://www.holidaymullandiona.co.uk/pages/accn/bb-sw-mulle.php
(Adobe)
It's unusual for something to work 'better' in IE than FF. Anyone
able to help, please ?
Add...
div#banner object {display: block;}
...and Firefox should behave as intended.
regards
Georg
Thank you. That's fixed it. I'm clearly having trouble remembering that both
images and objects are in-line elements ! No cure for old age, I'm afraid.
Tim
__
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] clearing a CSS float
Wow!
Krystian - h1 doesn't seem to clear for me by default (XHTML strict,
firefox) - but when I explicitly include it - it DOES work. I mistyped it
earlier but thanks to you, I revisited it and noticed ':' instead of ';'
Bill - wow! Now that's what I was looking for. Only the LIs are floating so
it makes perfect sense that UL starts and closes that box.
Super! Thanks so much!
-Luther
On Fri, Sep 19, 2008 at 2:08 PM, Bill Brown [EMAIL PROTECTED] wrote:
Luther Baker wrote:
ul id=menu
lia href=..Link A/a/li
lia href=..Link B/a/li
/ul
h1Fancy Title/h1
pBlah blah blah ... /p
Current CSS:
ul,
ul li
{
list-style: none;
float: left;
margin: 0;
padding: 0;
}
ul li
{
display: block;
float: left;
padding-right: 10px;
}
Hi Luther,
Try this:
ul, li {
list-style: none;
margin: 0;
padding:0;
}
ul {
display:inline-block; /* IE Float Clear, Part 1 */
overflow: hidden; /* Float Clear */
}
ul {
display:block;/* IE Float Clear, Part II */
}
li {
display:inline; /* IE Double Margins Bug Fix */
float: left;
padding:0 10px 0 0;
}
That should put anything after the UL below the UL. The only time this fix
won't work obviously is if you're using a fly-out menu. In that case, you
can leave the IE fix in place, but would need to adjust the fix for other
browsers using the :after pseudo element on the UL.
Hope it helps.
Bill
--
~~~
Bill Brown, MacNimble.com :: From dot concept to dot com since 1999
WebDevelopedia.com, TheHolierGrail.com, Cyber-Sandbox.com, Anytowne.com
The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
__
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] IE Clearing Bug
James Alvies wrote:
http://techsoup-global.org/node/1132
Looks like a tough one, and a bit too much style to comb through.
If nothing else works out, IE still has respect for the old
clearing-method...
HTML:
br class=clear /
/div !-- /container --
CSS:
br.clear {clear: both;}
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] IE Clearing Bug
James Alvies wrote:
Is there any chance I could get some assistance with this bugger?
http://techsoup-global.org/node/1132
Hi James,
You need a hasLayout fix on your #container element.
#container {zoom:1} should do the trick.
You can test this by visiting your page and entering this into the URL:
javascript:(document.getElementById('container').style.cssText=null)();
Make sure it's all on one line obviously, but that fixed it in my tests.
It's also only a local fix, meaning you can test that to set hasLayout
on an element on the local version you're viewing during development,
but visitors to the page won't benefit unless you include a hard-coded
hasLayout fix in the CSS.
Hope it helps.
--Bill
--
~~~
Bill Brown, MacNimble.com :: From dot concept to dot com since 1999
WebDevelopedia.com, TheHolierGrail.com, Cyber-Sandbox.com, Anytowne.com
The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] A Snippet for Testing IE Float Clearing
Hi All,
James Alvies wrote the list with a question about float clearing on a
layout with fairly complex source. I run XP and Vista on VirtualBox
inside my Ubuntu OS and hadn't installed any of the development tools
for IE. Wondering whether it would be possible to use the javascript
protocol to clear an element after the page had loaded, I came up with
the solution below. It's JavaScript, but since it pertains to a CSS fix,
I thought I'd send it along as an interesting method to test float
clearing without having to cycle back and forth to your IDE or text editor.
Not exactly sure why setting the cssText to null would clear a float,
but it seems to do the trick.
Here's the snippet:
javascript:(document.getElementById('container').style.cssText=null)();
Just replace 'container' with 'your-container-name' and paste it into
the URL after the page has loaded. If you're clearing the right
container, IE will adjust the layout.
Anyway, thought it was interesting, so I'm sending it along in case it
helps someone else.
Best Regards,
Bill
--
~~~
Bill Brown, MacNimble.com :: From dot concept to dot com since 1999
WebDevelopedia.com, TheHolierGrail.com, Cyber-Sandbox.com, Anytowne.com
The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] css for header, main, footer
Looking for some suggestions to be more css-zen-like. I normally use the following idiom. Please ignore the noise ... this example is mostly about breaking up the page with divs for HEADER, MAIN and FOOTER. div id=header menu app title subtopic blah /div div id=main div id=col1 style=float:left column 1 content ... /div div id=col2 style=float: left column 2 content here /div /div div id=footer pcopy; 2008 Enterprises .../p ul lia href=..contact/a/li lia href=..locations/a/li li.../li /ul /div So this affords me a decent layout template. I can put dotted lines around the MAIN ... or pad the header or footer differently. This also degrades nicely since things generally stay in place on the page. Unfortunately, I know I am letting the intended layout affect the position and labels of the html containers, HEADER, MAIN and FOOTER. If I look on the CSS ZEN GARDEN site - it is incredible - but I do see the words footer, preamble, pageHeader ... etc. So - it seems that layout is somewhat included - although it might be more meta/desriptive than it is positioning. Can anyone share brief rules of thumb or anecdotal type patterns to follow to avoid the type of positioning divs I am leveraging? -Luther __ 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] CSS stylesheet broken with IE6, 7 and 8 but not Firefox
Andy Borka wrote: The way the layout is supposed to work is to keep the nav links and a mailing list form in the left (blue box), the copyright in the bottom (green box) and have the main content in the red box. Of course, the backgrounds to all of these boxes will be reverted to white when the site design is finished as far as the layout goes. The sections for the links have to stay fixed on the page, so does the copyright. We can't have them scrolling off the screen in any way. Only the content is allowed to do that. It is the house rules.. re: http://www.test.eternityrecords.org/index2.aspx That being the case maybe this layout by Georg Sortun is more in line with your need? http://www.gunlaug.no/tos/moa_8c.html -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css for header, main, footer
Luther Baker wrote: Looking for some suggestions to be more css-zen-like. Can anyone share brief rules of thumb or anecdotal type patterns to follow to avoid the type of positioning divs I am leveraging? Seems to me what you have (primary and secondary content preceding the footer) is a better method than having the secondary content follow after the footer as in Zen Garden? But it may be one of those questions/answers that fall in the “The Right Way, The Wrong Way and The Army Way” category? -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] avoid using clear: both in empty div? and better use it when it is one of the styles of a class or ID?
I think we see a lot of examples of
div style=clear:both/div
which is to clear the floats above, but since it actually introduces HTML
mark up that does presentation stuff, is it actually a lot more cleaner to
have no such lines in the HTML code, but instead, use ID and classes, and
then in the stylesheets, use
#slideNavigator { clear: both; ... }
so that up above, the slides (photo thumbnails) might be floating to the
left, and the #slideNavigator is the left and right button control region
that does the clearing. That way, if we decide to move things around, such
as to move the #slideNavigator also floating to the left beside the
thumbnails, then we don't need to modify the HTML file, but can just change
the stylesheet. Then, presentation style info is well-contained in the
presentation file.
__
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] IE Clearing Bug
Bill Brown wrote:
http://techsoup-global.org/node/1132
You need a hasLayout fix on your #container element. #container
{zoom:1} should do the trick.
You can test this by visiting your page and entering this into the
URL:
javascript:(document.getElementById('container').style.cssText=null)();
The thing is that IE(6) ignores a '#container {zoom:1}' or any other
'hasLayout' trigger - even when styled inline, and won't react properly
until shaken. A simple attempt to resize fonts (the page uses fixed
fonts, btw) will do the shaking trick, but that's of no use for
anything but testing.
The huge number of stylesheets made me stop debugging and and instead
apply the old clearing-trick, as IE is known to threat a br with
clearing-styles as a special case.
Years have passed since I last had to use it for such cases, so apart
from that one br is enough to make IE react when 'hasLayout' is
triggered on the container, and two subsequent br was needed when
'hasLayout' was not triggered on the container. I've forgotten all the
buggy details that made such a special clearing-trick necessary, so
y'all free to go bug-hunting.
Nowadays I only use the br to cure certain unstable space after
float bugs in IE, since nothing else seems to work on those. IMO the
page in question suffers from a similar instability, but I can't track
down the exact cause.
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] Flash object has extra bottom margin in FF3, but not in IE
Tim Dawson wrote: No cure for old age, I'm afraid. Pity. Not much hope for me then - with or without CSS. 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] CSS stylesheet broken with IE6, 7 and 8 but not Firefox
Andy Borka wrote: re: http://www.test.eternityrecords.org/index2.aspx That being the case maybe this layout by Georg Sortun is more in line with your need? http://www.gunlaug.no/tos/moa_8c.html I would be interested in seeing the code for that design. The styles are embedded. Bring the page http://www.gunlaug.no/tos/moa_8c.html up in in Firefox/3.0.1. Right click on the pageView Page SourceThe styles are in the head of the document -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS stylesheet broken with IE6, 7 and 8 but not Firefox
Andy Borka wrote: The styles are embedded in the head of the document. Bring the page http://www.gunlaug.no/tos/moa_8c.html up in in Firefox/3.0.1. Right click on the pageView Page SourceThe styles are in the head of the document Is the stylesheet used for this layout fully compatible with IE6, 7, 8, Firefox 2, 3, Opera 9, Navigator 9 and Safari 3? Dunno. Test it. And let us know your finding. -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] fixed in IE
I use IE6, and I'm not using any doctype definition.
what I have to do to work in IE7?
thks
Date: Fri, 19 Sep 2008 15:20:03 +0200
From: [EMAIL PROTECTED]
To: [EMAIL PROTECTED]
CC: css-d@lists.css-discuss.org
Subject: Re: [css-d] fixed in IE
Leandro Coutinho wrote:
the following code works in FF and Chrome, but not in IE:
#copy {
position:fixed;
bottom:0px;
margin-bottom:5px;
margin-right:5px;
margin-left:5px;
text-align:center;
width:98%;
background-color:#F0F0F0;
color:#D2B48C;
}
div id=copy
Copyrightcopy; 2008
/div
Which version of IE?
- IE6 doesn't support 'position: fixed' at all.
- IE7 does support 'position: fixed' when document triggers standards mode.
Fix for IE6 depends on layout/design, so we have to see the actual page
first.
regards
Georg
--
http://www.gunlaug.no
_
Cansado de espaço para só 50 fotos? Conheça o Spaces, o site de relacionamentos
com até 6,000 fotos!
http://www.amigosdomessenger.com.br
__
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] IE Clearing Bug
discuss.org] On Behalf Of Gunlaug Sørtun
Sent: Friday, September 19, 2008 6:11 PM
To: Bill Brown
Cc: James Alvies; css-d@lists.css-discuss.org
Subject: Re: [css-d] IE Clearing Bug
Bill Brown wrote:
http://techsoup-global.org/node/1132
You need a hasLayout fix on your #container element. #container
{zoom:1} should do the trick.
You can test this by visiting your page and entering this into the
URL:
javascript:(document.getElementById('container').style.cssText=null)();
The thing is that IE(6) ignores a '#container {zoom:1}' or any other
'hasLayout' trigger - even when styled inline, and won't react properly
until shaken. A simple attempt to resize fonts (the page uses fixed
fonts, btw) will do the shaking trick, but that's of no use for
anything but testing.
Shaking is sometimes necessary when IE does not draw/redraw some elements
properly (for example with a show/hide script).
In such case I use the following:
document.getElementsByTagName(body)[0].style.zoom=normal;
document.getElementsByTagName(body)[0].style.zoom=1;
--
Regards,
Thierry | http://www.TJKDesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
