Re: [css-d] site check please?
Chris Blake wrote: And 'stop the presses' is wrong, 'press' is plural. Uhh, not always, and certainly not when used as Jody is using it: as part of the age old saying: Stop the presses. This goes way back to the days of the printing press and refers literally to stopping the printing presses during the printing process because some new vital piece of information needs to be added to the news. -- !-- ! 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] PNG alpha transparancy
Gunther Van Butsele wrote: Hi, A young webdesigner colleague of mine insists on using PNG's with alpha transparancy in his designs, mostly because he uses a lot of gradients and he wants them to flow seamlessly into the other backgrounds. Personally, I think it's bad practice to use such a feature since it isn't supported by all browsers, something very specific to the PNG format. I also have the mindset that you can get the same result by using different techniques, without alpha transparancy. I find it odd that they don't teach you these things in school to be honest.. What do you guys think? Use it or lose it? I also insist on the use of PNGs, so my sentiments reside with your colleague. The cross browser support of the PNG format is comparable and nearly equivalent to JPG, with the exception of everyone's favorite red-headed step-child: Internet Explorer (especially version 6 and older). PNGs offer a great many more benefits than just the alpha channel transparency and strong calls for its widespread implementation have been issued by both the Free Software Foundation and the World Wide Web Consortium, as well as others. Learn more here: http://en.wikipedia.org/wiki/Portable_Network_Graphics Invoice for $0.02 USD to follow. 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] Image bullets and floated images
Stephen Tang wrote:
[snipped/]
list item. Is there any way to get the bullet images next to the list
items again? I don't want to jeopardize the text-wrapping either.
http://stephentang.info/floattest/test.html
Something like this ought to work for you:
~~~
body, ul, p, li, div
{margin:0;padding:0;}
.container
{height:600px;width:700px;border:1px red solid;}
.floatedobj
{border:1px blue solid;margin-right:20px;height:100px;width:300px;
float:left;}
p
{margin-bottom:5px;}
ul
{list-style:none;margin:0;padding:0;display:inline-block;}
ul
{display:inline!ie;}
ul li
{list-style:none;margin:0;padding:0 0 0 10px;
background:transparent url(bullet_hdr.gif) no-repeat scroll 0 8px;}
~~~
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] Fluid Page + Centered 80% Div + Thumbnails
Court Kizer wrote:
Here's a screenshot to give you an idea...
http://courtkizer.com/screenshots/Untitled.png
Something like this?:
~~~
!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'
html
head
meta http-equiv='content-type' content='text/html;charset=utf-8'
meta http-equiv='X-UA-Compatible' content='IE=8'
titleGallery/title
style type='text/css'
/* RESET */
ul,li{list-style:none;margin:0;padding:0;}
/* GALLERY */
ul{margin:0 auto;text-align:center;width:80%;}
li{height:200px;text-align:center;width:200px;}
li{display:-moz-inline-box;display:inline-block;display:inline!ie;zoom:1;}
/* DEMO */
ul{background:#009;}
li{background:#090;}
/style
/head
body
ul
lipic/li
lipic/li
lipic/li
lipic/li
lipic/li
lipic/li
/ul
/body
/html
~~~
--
!--
! 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] Hard to achieve pure CSS layout
Frederico Caldeira Knabben wrote: http://www.fckeditor.net/_temp/editor_layout.html This is a kind of a simple and basic need, and it's a pity to see this CSS limitation. So, I still have some faith... does anyone there have a brilliant solution for it? While this layout may be simple and basic aesthetically, programmatically, it is not: CSS allows for the rendering of element style on the fly. There is no way for the browser to know the height of the middle section while it is rendering the header section of your layout. Likewise for the footer and the middle section. At best, any configuration will be fragile in a cross browser setting. You could increase its robustness if you used known heights for the header and footer, which I gather is not something you want. If I were asked to code this for a client, I'd use a simple JavaScript, which could accomplish it quite easily. You might also find some answers in a search for CSS Frames or CSS Sticky Footer. 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] background images
Brian Hazelton wrote: I have been told by a couple people this is off topic, I am not sure how and to avoid angering eric any more I would like to get a clarification as to how it is off topic and would like to apologize to everyone if it is indeed off topic. Thanks I would opine that this is perfectly acceptable for this list as your question relates to whether or not to use CSS in a particular case. While it's not exactly a 'how-to' question, it certainly relates to CSS Best Practice. Furthermore, as list moderators go, I've always found Eric to be very rational and compassionate in his moderation of this list. I doubt his reaction would be anything akin to anger regarding your question. That being said, I think you'll also find Kathy's suggestion to check in on webdesign-l useful for answers to this question. -- !-- ! 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] :first-word?
Climis, Tim wrote: I've got a newsletter that includes interviews in a Q and A format. Usually, there's a question with a Q: in front of it, and then an answer with an A:. But I just discovered an interview with two people that goes: Q: Neal: Kirsten: My stylesheet currently uses :first-letter to style the Q and A. But that just styles the N and K on Neal and Kirsten, and what I'd really like to do is style the whole word. A first-word pseudo element would work perfectly in all my cases, but it appears that there is no :first-word pseudo element. Is there some trick I can use as a substitute? This depends on the context. Do you have any links to a sample or maybe even a hint as to the HTML used for this example? -- !-- ! 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] Acronyms
JWN wrote:
acronym CSS/acronym
CSS
acronym{ color: navy; more styles;}
You can give different acronyms (NATO, RADAR, CSS) different styles if you
want, but that, I think, is a topic for another post.
Just for the record, CSS is an abbreviation abbr, not an acronym.
Acronym's are pronounced, like POTUS, NASA, NATO, RADAR while
abbreviations are stated as letters, like CSS, HTML, FBI and CIA.
Technically, an acronym is in many ways just a subset of abbreviation,
while the inverse is not true.
This is all off-topic for this list (inluding the original post), so
pardon the additional noise but I thought it might useful to point out
for anybody reading this thread now or in the future.
--
!--
! 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] center float:left
AG wrote:
Here's the problem: - building a horizontal tabbed navigation bar
[snipped]
Any ideas would be greatly appreciated. Needs to work in IE6 and all
normal browsers.
Something like this?
~~~ [CSS]
style type='text/css'
ul.tabs,ul.tabs li{list-style:none;margin:0;padding:0;}
ul.tabs {
text-align: center;
}
ul.tabs li {
display: inline-block;
vertical-align: bottom;
}
ul.tabs a {
display: block;
overflow: hidden;
padding: 2px 5px;
white-space: nowrap;
width: 100px;
}
/style
!--[if lt IE 7]style type='text/css'
ul.tabs li {display: inline;}
/style![endif]--
~~~ [/CSS]
~~~ [HTML]
ul class='tabs'
lia href='/'Home/a/li
lia href='/'About Us/a/li
lia href='/'Contact Us is a really long link/a/li
/ul
~~~ [/HTML]
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] center float:left
AG wrote:
Bill, thanks for your reply. In your suggestion, it appears to me
that if you don't float the li, all links will stack up in the center
of the container.
My apologies, I thought that was what you were looking for . ;-)
Maybe something like this is better?
style type='text/css'
ul,li{list-style:none;margin:0;padding:0;}
ul.tabs {
background:#707070;
margin: 0 auto;
text-align: left;
width: 35em;
}
ul.tabs li {
background:#808080;
display: inline-block;
vertical-align: bottom;
width: 7em;
}
ul.tabs a {
background:#909090;
color: #fff;
display: block;
overflow: hidden;
padding: 2px 5px;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
ul.tabs a:hover {
background:#c0c0c0;
color: #000;
}
/style
!--[if lt IE 7]style type='text/css'
ul.tabs li {display: inline;}
/style![endif]--
ul class='tabs'
lia href='/'Link 1/a/li
lia href='/'Link 2/a/li
lia href='/'Link 3/a/li
lia href='/'Link 4/a/li
lia href='/'Link 5/a/li
lia href='/'Link 6/a/li
/ul
--
!--
! 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] External Links
Chris Akins wrote: I'm wanting to add indicators for links that leave our site. A little Googling included this info from MaxDesign: www.maxdesign.com.au/presentation/external/ I noticed the 2005 date of the article and just wondered if the info presented is still considered a good method or is there something better now? I'd be open to any good examples you folks have of nice external link style treatments. Hi Chris, I recently wrote an article for Jeff Starr of Perishable Press [1] about this. It involves some JavaScript, but it might be helpful. [^1] http://perishablepress.com/press/2009/01/20/targeting-external-links-intelligently/ 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] css3 selectors
Climis, Tim wrote:
I'm just curious, is there a css3 selector for previous siblings?
And if there is, how widely supported is it?
It'd be useful for styling paragraphs that come before (introducing)
lists for instance.
None exists, but you could use jQuery to do it:
style type='text/css'
media='screen,projection'
p.p_before_ul
{
font-weight:bold;
}
/style
script type='text/javascript'
src='http://www.google.com/jsapi'/script
script type='text/javascript'
google.load('jquery','1');
google.setOnLoadCallback(function(){
$('ul').prev('p').addClass('p_before_ul');
});
/script
Anyway, 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] Middle align?
Kim Brooks Wei wrote: I can't align the logo at the top of the page to the pagenav sitting to its right. Tried a bunch of things but none of them worked. Is there a link we can use to view the troublesome page? -- !-- ! 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] in IE6, 1st level LI in menu expands width on hover (to width of dropdown) -- can you help stop it?
Kir Talmage wrote:
I'm using a suckerfish-based nav menu at
http://www.alysonchasestudio.com (doctype is strict)
In IE6 (but not FF2 or 3, not IE7, not not -- as far as I've tested --
Safari or Chrome), when I hover over the top-level menu item, it will
expand to accommodate the (wider) widths of the drop down list. I
don't want it to do this, and I would prefer not to wrap the drop-down
items.
Can you please advise how to make IE6 stop this?
Add to css/ach_ie6.css:
#navmenu li{overflow-x:hidden;}
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] Firefox is covering the corner of a button with the background of the main div
Donald Davis wrote:
I am working on the book Javascript the Missing Manual, by David
McFarland, and I've noticed that during the tutorials, the corner of
the image for a link button is covered by the div for the middle
column. You can download the files at www.sawmac.com/javascript. The
button is not covered in the most recent IE. Any explanation/fix?
The #banner element needs a z-index.
#banner {/* global.css (line 221) */
background:#E6E2AF none repeat scroll 0 0;
position:relative;
z-index:999;/* == ADD THIS */
}
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] Styling fieldset legends
Climis, Tim wrote: I'm trying to get the legend text to drop down to the same baseline as the label text. But I have no idea how. Firebug isn't giving me any clues as to the default style that makes it hang out up there anyway. So I'm not sure what to set. Does anyone have any experience with this? Legends are buggy to style in nearly all browsers. By default, they tend to sit vertically centered on the border of the fieldset element. Many styles simply won't work on the legend tag. For some real fun, try figuring out how to add x-browser-safe word wrapping to a long legend. The best advice I've seen is to replace the legend with a header tag and that tends to be the solution I employ as well. Approximate placement of the legend/fieldset relationship: +--[ LEGEND ]--+ | FIELDSET | | | +--+ 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] inline-block ignored by IE6
Geoffrey Hoffman wrote:
I've already had a look at trying to force hasLayout, using zoom: 1 [1],
and other IE6/7 inline-block posts[2] but none seem to work in my case.
Any suggestions?
The display:inline must be in a separate rule for IE.
This should do it:
~~~
h1
{
border-bottom: 1px solid maroon;
display: inline-block;
font-size: 160%;
font-family: Times New Roman, Times, serif;
font-variant: small-caps;
}
h1
{
/* FOR IE: _MUST_ BE IN A SEPARATE RULE */
display: inline !ie;
}
h1Lorem Ipsum Dolor Sit Amet/h1
~~~
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] inline-block ignored by IE6
Milano wrote: Can't you use h1uTitle/uh1? The u tag is depracated [1] and is in many ways an inelegant solution. [^1] http://www.w3schools.com/tags/tag_u.asp -- !-- ! 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] Size calculations
Ib Jensen wrote:
I want a 2 column design with header and footer, a left nav- and
info-column, and a right content-column. Centered.
Header and footer : 90%
These two columns together: 80%
Left column: 20-25%
Content column : 80-75%
How do I change these measurements to: em
Use ems...and a calculator. Relying on the browser to calculate the
percentage is sketchy at best. You probably want something like this:
~~~
!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'
html
head
title%TITLE%/title
meta http-equiv='content-type'
content='text/html;charset=utf-8'
style type='text/css'
#head-frame,#main-frame,#menu-frame,#foot-frame {
padding: 1px 0; /* Fix margin collapsing */
}
#page-shell {
margin: 0 auto;
width: 80em;
}
#head-frame, #foot-frame {
background: #dedede;
margin: 0 auto;
width: 72em; /* 90% of 80em */
}
#page-frame {
background: #999;
margin: 0 auto;
width: 64em; /* 80% of 80em */
}
#page-panel {
background: #ccc;
margin-left: 16em; /* Same as #menu-frame width */
}
#main-frame {
float: right;
width: 48em; /* 75% of 64em */
}
#menu-frame {
display: inline; /* Fix IE double-margin bug */
float: left;
margin-left: -16em; /* Width x -1 */
width: 16em; /* 25% of 64em */
}
/* FLOAT BEHAVIOR SWITCH FOR STANDARDS COMPLIANT BROWSERS */
#page-panel:after {
clear: both;
content: .;
display: block;
font-size: 1px;
height: 0;
line-height: 0;
overflow:hidden;
visibility: hidden;
}
/* FLOAT BEHAVIOR SWITCH FOR IE */
#page-panel {
display: inline-block;
}
#page-panel {
display: block;
position:relative;
}
/style
/head
body id='www-css_sig-tld'
div id='page-shell'
div id='head-frame'
p%HEAD%/p
/div
div id='page-frame'
div id='page-panel'
div id='main-frame'
p%MAIN%/p
p%MAIN%/p
p%MAIN%/p
/div
div id='menu-frame'
p%MENU%/p
p%MENU%/p
p%MENU%/p
p%MENU%/p
p%MENU%/p
/div
/div
/div
div id='foot-frame'
p%FOOT%/p
/div
/div
/body
/html
~~~
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] Size calculations
Bill Brown wrote:
/* FLOAT BEHAVIOR SWITCH FOR IE */
#page-panel {
display: inline-block;
}
#page-panel {
display: block;
position:relative;
}
I lied: remove the position:relative from that last block. That's an
artifact from another template. Sorry.
--
!--
! 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] Size calculations
Ib Jensen wrote:
The template should fill a total of 90% of the viewport / screen.
I want the header and footer in the template to fill 90% of the
viewport / screen.
The left- and content-column in the template should only fill 80% of
the viewport / screen.
I don't know if this clears something.
If you don't care about IE, or you're not using full-height column
backgrounds, you can get away with this:
~~~
!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'
html
head
title%TITLE%/title
meta http-equiv='content-type'
content='text/html;charset=utf-8'
style type='text/css'
#page-frame,#core-panel
{width:90%;margin:0 auto}
#head-frame,#core-frame,#foot-frame
{display:table;margin:0 auto}
#head-frame,#foot-frame
{width:90%}
#core-frame
{width:80%}
#head-panel,#core-panel,#foot-panel
{display:table-row}
#header,#menu,#main,#footer
{display:table-cell;vertical-align:top}
#head-panel,#foot-panel
{background:#ccc;width:100%}
#menu
{background:#bbb;width:20%}
#main
{background:#ddd;width:80%}
/* Faking display:table-cell for IE as best we can */
#menu,#main
{display:inline-block!ie}
#menu,#main
{display:inline!ie}
/style
/head
body id='www-css_sig-tld'
div id='page-frame'
div id='head-frame'
div id='head-panel'
div id='header'
p%HEADER%/p
/div
/div
/div
div id='core-frame'
div id='core-panel'
div id='menu'
p%MENU%/p
p%MENU%/p
/div
div id='main'
p%MAIN%/p
/div
/div
/div
div id='foot-frame'
div id='foot-panel'
div id='footer'
p%FOOTER%/p
/div
/div
/div
/div
/body
/html
~~~
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] Epileptic DIV jumping in IE on initial page load (disappears after resize)
Ramon Felciano wrote:
Hi all --
I'm trying to track down the source of an annoying CSS jumping problem
that happens when loading http://www.emmacarlson.com/emmablog/ in IE.
During page load, the left-hand nav jumps back and forth between the
left size and center of the page, and often ends up stuck in the
middle after the loading completes. What is strange is that the
problem seems to go away if you let the page load and then resize it.
This might help:
#content-inner{zoom:1}
...ensures the content-inner container 'hasLayout'.
--
!--
! 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] print style sheet
Sandy wrote: Could you please take a look at something for me? I have been trying to write a print style sheet for this page, but it just isn't working. http://sandyfeldman.com/proposal/nathanieldett/nd_print.css http://sandyfeldman.com/proposal/nathanieldett/test.php when I try and print out of FireFox, it inserts random page breaks. When I try and print out of Safari, text comes out grey. I had a friend print it for me, and he got a big, black border where I had specified border : none; Opera's is not too bad, but I don't want to rely on that! You haven't specified a media for your nd.css style sheet so browser default to specifying this as media=all. I bet if you change this: link rel=stylesheet type=text/css href=nd.css / to this: link rel=stylesheet type=text/css media=screen,projection href=nd.css / ...you'll find your print styles much easier to manage. -- !-- ! 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] Menu problem with IE6+7
Sh wrote:
Hi,
I have a problem in IE (6+7) when mouse-over the menu where there's a
sub-menu (dreamweaver- spry), It shows a white cell under the sub
menu.
This doesn't show wither in FF, Safari and IE mac.
Any help will be greatly appreciated
Ah, SpryMenus. Hate's too strong a word, but it's close. What you're
seeing isn't actually a white cell, but rather an iframe hack included
by the SpryMenu JavaScript. It's frequently more harmful than helpful.
Your best solution is probably to remove the iframe creation part of the
javascript, or simply comment it out.
Another possible solution would be adding this to your site head tag:
!--[if lte IE 6]style type=text/css
.Menue iframe
{
filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
/style![endif]--
That's completely untested for your site, but it works quite well on my
(home-grown, non-Spry) menus.
Best of luck.
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] 1px jog help
rollandburn wrote:
Hi everyone, I have a layout that is falling victim to the 1px jog in
firefox and wonder if there is somebody could lend a hand. The
testing url is http://www.flexcomp.ca.php5-10.websitetestlink.com/
Changing the margin-left to -1px on the body worked for me in Firebug:
body{
background:#00 url(/assets/interface/bg_body.jpg) repeat-y scroll 50% 0;
color:#33;
font-family:Arial,sans-serif;
font-size:0.84em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4em;
margin:0 0 0 -1px;
padding:0 0 0 1px;
}
Does that do what you need?
--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] vertical align div
designer wrote: A properly marked up table with 1-row of 3-cells (in this case) is valid (and accessible) and is the only robust solution I know of for all browsers. The extremists will complain about table layout of course, but it's a case of being pragmatic in making the thing work - simply, and without any problems that I know of. I imagine there are layouts out there for which tables are the only answer, though I've yet to encounter any. I discovered that tables are pretty inflexible and not as accessible as one would like to believe. There must be a more elegant method, surely. Here's a solution which uses no tables and which more or less emulates what you're looking for, I think. It'd require a tweak here or there to match your styles, but it should do what you need. http://webdevelopedia.com/cssd/iyes.html Whether or not it's 'more elegant' is another matter entirely. 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] nav displaying incorrectly in IE
Daniel Hammond wrote:
URL: http://www.studentremix.org
The top navigation (Middle School, High School, Parents) displays
correctly in FF, Safari, and Opera, but IE really messes it up.
Internet Explorer doesn't support display:inline-block.
Changing this rule should help:
#navmenu li {
display: inline-block;
display: inline !ie; zoom:1 !ie;/* inline-block for IE */
height: 63px;
line-height: 63px;
margin: 0 0 0 14px;
padding: 0px;
vertical-align: bottom; /* might also need this */
}
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] CNNs CSS file
Atkinson, Sarah wrote: I was looking on CNNs site to see what there CSS file looks like And they have a grouping of common padding. Just though it was interesting. What do you guys think? Here is part of it: I guess they can get away with such bad practice because they're CNN. Ever tried validating the Microsoft website? I got 188 errors on the landing page last time. They, too, can get away with it because they're a titan. Joe Freelancer would have a hard time getting work using those practices, I think. -- !-- ! 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] Is the browser using clientWidth properties to determine the size of a box? (IE)
Bastien MOYET wrote: I have a box A of 300px (div for instance) with the overflow set to auto, which contains an other box B of 100%. If the height of B is lesser than A no scrollbar are displayed, which is OK. However if its height is greater than A, a scrollbar appears, which is still OK. But in firefox the B clientWidth is normally set to 283px (as stated in http://www.quirksmode.org/dom/w3c_cssom.html#t41, this property excludes scrollbar) so the B content is reduced, whereas in IE, the clientWidth also set to 283px, the B content isn't resized. So some content goes under the scrollbar and an horizontal scrollbar appears. You can find my test page at the adress http://www.fallengalaxy.com/~fedaykin/bloc.html or simply a picture of this bug at http://fallengalaxy.com/~fedaykin/scrollbar.png. If somebody has some tips to avoid this appearance I would appreciate. Remove the 'width:100%' and leave the default 'display:block' and 'width:auto' on the div. This will automatically make room for the scrollbar on the outer div. If you need to use a table, wrap the table in a div and set the table's width to 100%, but leave the wrapper div width at auto. Like this: ~~~ div style='border:1px solid black;height:200px;overflow:auto;' div style='height:150%;'!-- Do not set width! -- pContent here will scroll.../p /div /div div style='border:1px solid black;height:200px;overflow:auto;' div style='height:150%;'!-- Do not set width! -- table style='width:100%;' tbody tr tdContent here will scroll.../td /tr /tbody /table /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] Transparent Rows
Kathy Wheeler wrote: On 19/02/2009, at 1:02 PM, Bill Brown wrote: background: rgba(153,153,153,0.5); Ooooh ... rgba ... I like it. How well supported is the a (alpha)? http://css-tricks.com/rgba-browser-support/ -- !-- ! 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] Superscript issues
Gene Falck wrote: You wrote: Why do you use a span with a class when you already have the html tags for them? Can't you just tell the sup and sub tags to look the way you wish with css instead of making new classes? They are already there, and they seem more semantic (maybe not, kinda like b and i, I guess ). Is there something I'm missing? At the time I set things up with span and class I was disgusted with trying to use the sup and sub tags. No matter what I tried, the html tags persisted in giving me increased line heights so that my text which had some lines without superscripts or subscripts and some with looked pretty weird. Perhaps there is a good way to tame the tags but I didn't find it; once I wrote the sp and sb classed into my style sheet they worked quite nicely and I never looked back. Actually, the argument can be and *has been* made that sup and sub mix presentation with style in much the same way as the aforementioned b and i pair (and others). I go back and forth on this one. I don't work very frequently with mathematics, but I do know there is quite a bit of difference between 10 to the 5th power (10^5) and 105. While sup and sub are given default styles by browsers, they *do* also have a contextual meaning not conveyed by a span tag. On the other hand, I can see how they could be problematic to style attractively. Just thought that for once I'd toss out some ambivalence instead of stirring up another CSS Overlords thread. ;-) -- !-- ! 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] margin: 83_qem?
Peter-Paul Koch wrote: I encountered the following CSS declaration: margin: 83_qem Does anyone have any idea what kind of unit it is? Apparently it's used in Safari's internal style sheet (http://www.accessifyforum.com/viewtopic.php?t=5551), and I saw it mentioned in Nokia documentation (http://library.forum.nokia.com/index.jsp?topic=/Web_Developers_Library/GUID-9EA77434-CC44-429F-BDD3-3AF4357CCF69.html) Can't find a definition though, and the lack of W3C links suggests that this unit is non-standard. Could someone help? Hey PPK-- I believe qem stands for quirky em and is a proprietary Webkit syntax used to refer to a margin which can be collapsed when the page is in quirks mode. [1] If you're anything like me, you're already appreciating the irony that *you're* the one that wrote the list to ask about this. ;-) [1] http://www.opensource.apple.com/darwinsource/10.3/WebCore-106/khtml/css/css_valueimpl.h (about two-thirds of the way down the page) -- !-- ! 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] Styling DD
Casey wrote:
I'm trying to remove the indentation from my DD element. Text-indent
does not seem to do the trick. Any suggestions?
dd{margin:0;padding:0;}
-or, more extensively-
dl,dt,dd{margin:0;padding:0;}
--
!--
! 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] before pseudo element and opera
Scott Schumpert wrote:
I'd like to put an rightwards arrow in front of a link and using the
2192 code it works fine in safari, firefox and my preview in my css
helper. I even added the escaped hexadecimal code for the character
entity.
Do you have a link we can reference?
This works fine with Opera 9.63 on Ubuntu Ibex (x86_64):
~~~
a:before{content:\002192 ;}
~~~
--
!--
! 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] Transparent Rows
Wade Smart wrote:
What I was thinking was doing a transparent effect on each row.
.even {
background-color: #E0E0E0;
opacity:0.5;
filter: alpha(opacity=50);
}
That didnt work so my question is - can this ONLY work on a image and
now on a color?
One solution I've used to achieve something similar looks like this:
The CSS
~~~
style type=text/css
div.transparent-bg
{
background: url(http://www.domain.tld/1px-99-50.png);
background: rgba(153,153,153,0.5);
}
/style
!--[if lt IE 7]style type=text/css
div.transparent-bg
{
background: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr=#7799,
endColorstr=#7799);
zoom: 1;
}
/style![endif]--
~~~
The HTML:
~~~
div class='transparent-bg'
p
I can has transparent background?
a href='#home-menu'Go Home/a.
/p
/div
~~~
First, I set the background to a semi-transparent PNG [1]. Then, I
immediately override that setting with one for an RGBA background.
Browsers which recognize RGBA as a background-color setting will
override the previous background setting and apply only the RGBA background.
IE7 supports PNGs (more or less) so we leave it alone here. IE6 does
not, so we target it with conditional comments and use the proprietary
gradient filter to allow just the background to be semi-transparent
while leaving our text fully opaque. [2]
Anyway, hope it helps.
[1] data:uri images also work here,
if the CSS for IE6 is extended to include IE7.
[2] The caveat to using (any) filter is that Windows removes the
ClearType settings on blocks that use filtering, so your text
will look a little blockier in the filtered element, though not
in the children if I remember correctly.
--
!--
! 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)
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)
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] ASP.NET - Tableless Forms
christi...@netscape.net wrote: It seems to be a little-known fact that the W3C actually says that tables can be used to lay out (actually it says present) forms. More info here: http://developer.cmzmedia.com/?p=71 Yes, tables were not intended to lay out a whole web page but they do have legitimate uses. There's no need to throw the baby out with the bath water. I'm not sure I'd consider it little-known, but it is often mis-quoted. First of all, the W3C specs *allow* many (nearly all) elements inside tables and table elements, not just the ones cited in that article. The issue isn't one of allowed versus disallowed, but rather of could versus should. While each of the elements mentioned in the reference page cited in the article (text, preformatted text, images, links, forms, etc.) [1] *may* go inside a table, every one of those elements can be more easily styled and more flexibly controlled using CSS-based, semantically correct HTML source. In fact, even in the specs as far back as HTML 3.2 [2], tables are permitted, though not recommended for layout. The specifications state: HTML 3.2 includes a widely deployed subset of the specification given in RFC 1942 and can be used to markup tabular material or for layout purposes. Note that the latter role typically causes problems when rending to speech or to text only user agents. Note the last line of that paragraph, which is often excluded from references citing this particular line. The use of tables for layout *typically* causes causes problems when rending to speech or text only user agents...like search engines. While the technology employed by both speech software and search engines has progressed considerably such that most of those issues are certainly lessened if not alleviated altogether, the fact remains that tables are not the best way to manage layouts of anything except tabular data, including entire pages or sites. Chapter 10 [3] of Joe Clark's book, _Building Accessible Websites_, is a perfect example of the mis-quoting (or selective exclusion) of the 3.2 spec. His book is about accessibility and yet he omits the second part of that paragraph (the one about accessibility) and very nearly recommends using tables for the layout of a web page. (Please note: BAW was written in 2002 and I'm purposefully being awfully hard on Joe Clark here. In his defense, his recent writings seem to echo the thought that tables should not be used for page *or* element layout. [4]) [1] http://www.w3.org/TR/html401/struct/tables.html [2] http://www.w3.org/TR/REC-html32-19970114#table [3] http://joeclark.org/book/sashay/serialization/Chapter10.html [4] http://alistapart.com/articles/tohellwithwcag2#WCAG-documents:travesty-failure -- !-- ! 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] Tricky 3-col layout issue
http://www.theholiergrail.com/ Hmm. Seems to be a work in progress. Using those links on the left of the home page brings up a succession of pages with blank content this end. (Opera 9.6 on Win xp). ??? In its defense, I've been using the template (downloaded from the site) and so far worked fine for me, in various browsers. I'm using it for a current project so I'll have a more complete opinion in a few weeks/months. Erika Hi all-- I've been inundated with work recently (what recession?) and have little time to update theholiergrail.com with new content. I have a much more streamlined version which I plan to upload within the next few weeks but if anybody is eager for the new version and/or the accompanying PDF documentation, please let me off-list and I'll try to get it to you within 24 hours. Thanks. (And thanks, Erika, for the plug.) 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] Global Rules?
johny why wrote:
can i do something like this?: a.myclass !important { color:blue;
width:5em; }
Nope
thanks
You're welcome. ;-)
__
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] IE issue with positioning
Jeff Chastain wrote:
The issue I am running into is that I have a box which has a fluid width
(90% of the page). Within that box, I am attempting to absolutely place
another box at the very top, but with a 14px margin on both the left and
right side. The following CSS rules work just fine in FireFox
#container {
position: relative;
margin: 0 auto;
width: 80%;
#header {
position: absolute;
top: 0;
left: 14px;
right: 14px;
}
In IE however, the header box is positioned right, but it does not expand
the full width of its container. Instead it has an extra wide margin on the
right side. I think this could probably be fixed with a box model hack, but
I cannot figure out the right combination of rules to make IE behave.
Absolute positioning causes browsers to shrink-wrap the box, meaning
that a block-level box which once spanned the width of its parent is now
only as wide as its content. You work around this in FF and other
compliant browsers with your left/right settings. IE only honors one or
the other, though I think IE7 now allows you to set both.
Setting both the left and the right property causes the left of the box
to be absolutely positioned at value 'n' of the left property, and the
right of the box to appear at value 'n' of the right property. This
changes the default shrink wrapping for most browsers, making it more
block-like.
For IE, you have a few choices. Without a URL for reference, my guess is
that you might simply try removing the absolute positioning. If that's
not an option, you might also try setting the padding of #container to
something like padding:0 14px which would technically make your
#container box 28px wider than 80% of its parent.
HTH,
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] css3
David Laakso wrote: Is PC Safari and Chrome rendering (unable to view this end for a lot of boring reasons): 1/ border-radius 2/ box-shadow 3/ text-shadow http://chelseacreekstudio.com/ca/cssd/index.php Tested in XP/VirtualBox on Ubuntu Ibex: Safari and Chrome both appear to recognize your border-radius, box-shadow and text-shadow settings as they stand now. Hope it helps. Would have responded earlier, but there was some static on the list that I had to filter out first. ;-) -- !-- ! 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] Drop Caps
Ron Koster wrote:
http://css-discuss.incutio.com/?page=DropCaps
p:first-letter {
font: 2.5em/80% serif;
float: left;
padding: 0.2ex 0 0 0.2ex;
margin: 0;
overflow: visible;
}
and so I'm just wondering if there's a particular reason why...
a) 2.5em/80% is specified (ideally, for my own purposes, I'd like to
change that to 2.6em/38%); and
2.5em is the size of the font in relation to the parent element. In your
example, the first letter of every paragraph on the page would be 2.5
times the height of the font of the paragraph.
80% is the line-height, which does not require a unit, so I usually
write it in decimal form (.8 in this case).
b) if there's a specific reason for the padding: 0.2ex 0 0 0.2ex;
i.e. is there some reason why those couldn't just be all set to 0,
or, alternatively, why I couldn't indent the first letter (and, in
effect, the first line) a certain number of *px* (not ex)?
Try it:
http://www.w3schools.com/css/tryit.asp?filename=trycss_font
--
!--
! 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] Drop Caps
Ron Koster wrote: ...will it break in some browser or other? For one thing, for example, I'm not sure why extra padding is needed (or suggested) on two sides of the drop cap. Ron, I'm just leading horses to the Kool-Aid...I can't make 'em drink it. -- !-- ! 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] The CSS Overlords
Christie Mason wrote: I've been very happy that CSS removed the need to have font declarations littered through the code and being able to change colors etc from one shared CSS resource, but I'm still not convinced of the practical usefulness of it for positioning. I've written, erased, rewritten, and erased about ten different replies each time a new reply comes in on this thread. I almost feel out of the loop: I didn't know that this battle was still even waged anywhere. As a boy, my father had this pair of channel lock pliers that he used for everything. Putting a nail in the wall? Turn the pliers around. Got a screw to tighten? Grab that bad boy with the pliers and give it a twist (lefty loosey...). Got a splinter? Oh, how I wish I was joking, but no, get the pliers. They were everything: wire cutters, hammer, screwdriver, sometimes even pliers. He used the pliers because he always knew where they were, not because they were the right tool for the job. Sometimes, I get the sense that people are using tables for layout are a lot like my dad used his pliers -- they know where the tables are. CSS requires a change in thought process, a re-envisioning of a website from a different perspective. If you haven't been able to get your head around the benefits of CSS, I don't think you'll ever understand the syntax and basic guidelines behind its usage, particularly with regard to positioning. Layouts done in CSS are in my experience, more robust, easier to understand, easier to code, easier to javascript and easier to manage in nearly every other way. This rebuttal is ridiculously incomplete, but I don't even know where to begin in explaining the benefits of CSS over tables, or how to fit it all into one read-able email. I wish some examples had been cited as layouts which were difficult in CSS, but easy in tables...it's sometimes easier to explain the differences using a sample or two. -- !-- ! 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] Some css questions
4css aka deb wrote: Any help would be so greatly appreciated, there are so many different layouts out there and I really need to brush up on my skills again. Glad you're feeling better. Your questions cover a broad range of topics and replying to them would require a fairly lengthy email. Maybe have a quick look at the CSS-D Wiki to see if some of your answers can be found there. [1]:http://css-discuss.incutio.com/ -- !-- ! 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] Hide labeled link [a rel]
I want to hide all the links labeled rel=tag, maintaining visibility
for the rest of the content.
In theory, you could use this attribute selector:
a[rel~=tag]{display:none}
In practice, IE lte 6 do not support the attribute selector. You could
use a javascript solution for the older IEs or simply progressively
enhance the site for browsers that support the attribute selector.
--
!--
! 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] Random padding in firefox...
Jerod Venema wrote: Thanks all for the replies...the overflow: hidden does indeed do the trick, [snip] ...I'm still playing with it to figure this out... I just sent something like this to the list a while back, so pardon the redundancy, but it seemed to help some folks, so here it is again: Brief ASCII Overview of Collapsing Margins: Key: [m] = margin, [p] = padding, [b] = border I think it helps to think of margins as broken lines, or like the teeth of a zipper, so that the top and bottom margins might be represented like this: m m m m m m m m m m m m m m m (#px top margin) Lorem ipsum dolor sit amet... m m m m m m m m m m m m m m (#px bottom margin) m m m m m m m m m m m m m m m (#px top margin) Lorem ipsum dolor sit amet... m m m m m m m m m m m m m m (#px bottom margin) Visualizing it that way helps to make sense of why they collapse. The teeth fall into and around each other, resulting in a collapsed margin like this: m m m m m m m m m m m m m m m (#px top margin) Lorem ipsum dolor sit amet... m (#px collapsed top/bottom margin) Lorem ipsum dolor sit amet... m m m m m m m m m m m m m m (#px bottom margin) To switch the margins to a solid form, we can add padding or borders, which act as a sort of filling and make the margins solid like this: m (#px top margin) p (#px top padding) Lorem ipsum dolor sit amet... p (#px bottom padding) m (#px non-collapsed bottom margin) m (#px non-collapsed top margin) p (#px top padding) Lorem ipsum dolor sit amet... p (#px bottom padding) m (#px bottom margin) ...or use borders which achieve the same effect. m (#px top margin) b (#px top border) Lorem ipsum dolor sit amet... b (#px bottom border) m (#px non-collapsed bottom margin) m (#px non-collapsed top margin) b (#px top border) Lorem ipsum dolor sit amet... b (#px bottom border) m (#px bottom margin) -- !-- ! 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] Text Position Problem
Del Wegener wrote:
http://www.edi-cp.com/homepage_tests/edi-index.shtml
However, in IE 7 the text starts far down the page leaving a large empty
space to the left of the div which will contain the pictures.
What causes this? How do I fix it?
My guess is that your div#caption2 element is creating a block level
element which acts as a sort of clearing element in IE.
Probably adding:
div#content2{display:none}
...to your style sheet will do for now until you can determine what is
to be done with it (based on your comment in the source).
HTH,
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] Random padding in firefox...
David Hucklesby wrote:
On Wed, 14 Jan 2009 22:13:37 -0500, Bill Brown wrote:
Jerod Venema wrote:
www.frozenmountain.com, shows the behaviour. If you visit the
[snip:collapsing margin explanation]
Anyone have any ideas?
Collapsing Margin Bug.
#header { overflow: hidden;/* -- ADD */ /* padding-top: 1px; --
REMOVE */ }
Indeed that works. But I'm as confused as Jerod here - I don't see
evidence of margins on anything here. The only element that's likely
to have a margin is the UL, and Jerod has expressly set that to
zero. And poking around with Firebug, I can't see what is
overflowing.
So Collapsing Margin Bug does not seem to be an explanation. Could
you please elaborate?
I would elaborate, but I see Jerod has adjusted the code and I don't
have a local version (I used Firebug to troubleshoot). If Jerod (or you)
has/have the original code, I could explain it better.
--
!--
! 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] Div Overflow Issue
Robert Swilley wrote:
Ex. A: http://www.rswilley.com/test/index.html
Ex. B: http://www.rswilley.com/test/index2.html
If you look at example B you will see that this works until the content
overflows. Since #main height is set to 95% it is not growing.
This might help (more or less) in Example B:
#main {
/* height: 95%; --REMOVE */
min-height: 95%;/* --ADD */
}
--
!--
! 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] two column data
James E. Darfler wrote: I am working to change my web site from XHTML Transitional to XHTML Strict which requires more css. One of my pages was working with the transitional but gave me 130+ errors when converted. Now the layout is wrong. There should be two columns, one with the text to the left and rows of three photos to the right extending down the right side of the page. I have been trying changes for days to get it correct but I've run out of ideas. Both the XHTHL page and the css pages validate. Is there something simple that I'm missing? Any ideas would be appreciated. The web page is at: http://www.wayneactorscommunitytheatre.org/archive/joseph/bios/actors_bios.h tml Hi James, I think the issues are with the HTML, not with the CSS. Your image table begins on a new row in your table, so it won't show up /next/ to the name list, but rather below it. If you want to continue using tables, you might try reconfiguring your HTML to this sort of setup: table tr tdnames in lt;ulgt;/td tdphotos in lt;tablegt;/td /tr /table -or- table tr tdthree names in lt;ulgt;/td tdthree photos in lt;tablegt;/td /tr !-- Later, rinse, repeat -- /table An alternative is to put everything in a list, with the photos attached to each name, like the way Windows displays tiles and thumbnails. I've uploaded a re-working of the code here if you're curious about this sort of thing: http://www.webdevelopedia.com/cssd/wact-proposed.html Hope it helps. Bill __ 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] two column data
James E. Darfler wrote: Not quite right for me. The names may not have a corresponding photo and the photos may not have a corresponding bio. There isn't a one to one here. As for keeping the tables, it's what I have been using but I would change to a more css format if that would work better. Could you steer me in the right direction? Well, tables and CSS are not mutually exclusive. That is, they can be used together, though using them for layout is generally frowned upon by the CSS Overlords. You could certainly keep your tables and style them to some extent using CSS. Your tables, however, are in place to supply a certain layout, in place of using CSS. They are failing to do that and that issue lies with the source. In short, because you are using tables for layout, your issue has to be resolved at the source level (where the tables are coded) and not at the style level (where CSS is introduced). I'm not sure why you're so quick to write off the ul based solution. Why not use a no-photo-available graphic for actors who have't provided a headshot, and use a span in lieu of an anchor for actors who haven't provided a bio or resume? This would give you a greater separation of content and presentation. __ 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] Dont understand float drop
Fiona Hayward wrote:
Ive been trying to work out why I have a float drop in IE6 (but not in IE7,
5.5, or Firefox (Windows)).
http://www.fionahayward.com/visionprint/untitled2.html
Hi Fiona,
Looks like you've got something flowing out of one of your column boxes.
This fixes it:
#left,#content,#right{overflow:hidden}
...but you may also want to target exactly what it is causing the overflow.
Hope it helps.
Bill
__
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] Random padding in firefox...
Jerod Venema wrote:
I've got a weird bug that I can't figure out. Our website,
www.frozenmountain.com, shows the behaviour. If you visit the site, check
out #header. You'll notice that it has a 1px top padding. What's bizarre is,
if you remove the padding, the spacing jumps about an extra 10px. I can't
for the life of me figure out why. It only happens in FF3 (well..only being
liberal, I've only tested in FF and IE so far).
Anyone have any ideas?
Hi Jerod--
Collapsing Margin Bug.
Try this:
#header {
overflow: hidden;/* -- ADD */
/* padding-top: 1px; -- REMOVE */
}
Hope it helps.
--Bill
__
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] Browsershot alternative
I have seen references to browsershot on this list. Is there another similar site? Thanks Del Hi Del, BrowserCam.com - $39.95/month to $89.95/month BrowserShots.org - free BrowsrCamp.com - $19/month - Mac only LitmusApp.com - $49/month CrossBrowserTesting.com - Pay as you go Hope it helps. --Bill __ 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] Background
Keith Kaiser wrote:
When setting the background in CSS can you set the image width at the
same time?
Example;
background: #00ff00 url('smiley.gif width:50') no-repeat fixed center;
Or something like that anyway.
Thanks.
Hi Keith,
The short answer is No, you can't.
But the long answer is...well, actually, it's still No, you can't.
Sorry.
Hope it helps.
--Bill
__
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] IE pushes up my sidebars
John Shepard wrote:
IE pushes up both right and left sidebars on my homepage.
To view, go to: http://earthpedal.com
Anyone have a fix?
Thanks ahead!
John
Hi John,
Try this:
#content{zoom:1}
Also maybe wanna have a look at validating the source code, which has a
few errors.
Hope it helps.
Bill
__
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] IE pushes up my sidebars
It's not really fair to claim they need to validate if the answer you supply them is invalid itself. Other methods of gaining layout are available, height: 0 in a conditional comment being one I sometimes you. You can always view the chart on havingLayout [1] as an example of other methods. -Jack [1] - http://onhavinglayout.fwpf-webdesign.de/hack_management/ The validation of code is an assessment of the code quality. Choosing to employ a bit of invalid code because its benefits outweigh its detriments is not the same as simply having a page with errors. __ 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] Strangely positioned table
Thom Brown wrote:
Can someone have a look at this page for me and let me know what I've done
wrong? The table seems to be going to the right of its container when
viewed in Firefox, Safari or Chrome, but it's fine in Opera and IE. It was
fine before when there was another div above the one which contains the
table. That just displayed a simple image. When removing it, this problem
happens.
http://killingcupid.avengedsevenfold.co.uk/shows/
Hi Thom:
#menu{overflow:hidden}
...should do the trick.
Hope it helps.
--Bill
__
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] Text and image alignment
Does anyone have any suggestions how to correct this?
http://dev.howsmykiddriving.org
Hi Tim--
Validate the markup, for starters:
http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fdev.howsmykiddriving.org%2F
Errors in coding, even small ones produce unreliable and unpredictable
results. Different browsers use different methods to handle errors so
the output is inconsistent.
The extra spacing could either be related to collapsing margins (add
body * {margin-top:0} at the top of your style sheet to test/fix this)
or related to the height setting of 340px on #Content.
Hope that helps.
Bill
__
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] question about combining descendant selectors
Brett wrote:
I'm wondering if combined selectors have a lower specificity than
non-combined. For example in my stylesheet I have:
.hm #events_snip .date, .article { color: red; }
.hm #news_snip .date, .article { color: green; }
On the page the .article class shows up green, even though it is NOT
descendant from #new_snip, it is descendant from #events_snip. Why does
it do that?
Now, if I have this:
.hm #events_snip .article { color: yellow; }
.hm #news_snip .date, .article { color: green; }
The .article class shows as yellow. I don't understand this.
Hi Brett,
Specificity applies to each selector individually. Commas are used to
separate, not concatenate separators.
I believe you're expecting your selectors to behave like this:
.hm #event_snip (.date,.article) { color : green }
.hm #news_snip (.date,.article) { color : green }
...but selectors don't work like this in CSS.
The specificity of your selectors is applied in this manner:
!important (1-Author,2-User)
ID (1 for each ID in the selector)
Class, psuedo-class, attribute (1 for each specified)
Element (1 for each)
So, using your selectors, we get these scores:
.hm #events_snip .article { color: red; }
= 0,1,2,0
.article { color: red; }
= 0,0,1,0
.hm #news_snip .date { color: green; }
= 0,1,2,0
.article { color: green; }
= 0,0,1,0
.hm #events_snip .article { color: yellow; }
= 0,1,2,0
.hm #news_snip .date { color: green; }
= 0,1,2,0
.article { color: green; }
= 0,0,1,0
I've used commas because specificity is not base10, meaning 10 elements
does not equal 1 class, and 10 classes does not equal 1 ID and so on. We
can remove the commas for your example, and we can see that 120 is
greater than 10 and you set the .article to have a color of green
/after/ you set it to red. Since it's the same selector, red applies or
yellow in example two because your first rule has a greater specificity.
You can fix this by expanding your selectors like so:
.hm #events_snip .date,
.hm #events_snip .article { color: red; }
.hm #news_snip .date,
.hm #news_snip .article { color: green; }
...which will give you the specificity you want on the right selectors.
Hope that helps. I couldn't think of a good ASCII drawing for
specificity. ;-)
Best,
Bill
__
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] Firefox layout issue, works fine in IE7, Safari etc.
Graham Cox wrote:
The header in the page below displays incorrectly in Firefox v3.0.5 and
I'm struggling to work out the cause.
http://www.ultimatefooterad.com/salespage/index.htm
Hi Graham,
That's a collapsing margin issue. Adding this:
*{margin-top:0}
into your style sheet. Can't say which element has margining at the top,
but adding that (generally as the first rule of the style sheet) will
help cure that.
Best,
Bill
__
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] gap under header in IE
There is a small gap of space (about 2px) below the header on this
page in IE:
http://www.goldendragonhouse.com/specs.html
http://www.goldendragonhouse.com/main.css
Hi Anne--
Either of these oughta help:
#topboxrightspecs img { display : block }
-or-
#topboxrightspecs img { vertical-align : top }
Good luck.
Bill
__
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] Line Height IE7 problem with PVII TMM
Virgilio Quilario wrote: consider using lists instead of divs for menus. good luck. virgil Hi Joanne-- I just want to second what Virgil said here. I actually downloaded your page and set about translating the P7M div-heavy code into a more semantic assembly, but I got winded. ;) The P7M menus on your page use obtrusive, inline event handlers and an antiquated div based source. I would strongly suggest getting away from any kind of product like that. It's just doesn't fit in today's internet. If you'd like some help re-writing the menu into a more semantic, less obtrusive setup, please let me know off-list and I'll be happy to help with some HTML, CSS and JS re-coding for you. Cheers, Bill __ 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] Line Height IE7 problem with PVII TMM
Thanks for the offer Bill, but we've been around since 1998 and have a very good handle on things. I can't disagree with your underlying points, but it does work :-) Tree Menu Magic (original release 2001) will soon be upgraded to a more modern codebase. Prototype here: http://www.projectseven.com/products/menusystems/tmm2/folders/ We are a fairly large operation and have to work by a schedule. All things in good time ;-) Appreciate your comments, though. Hi again, Al! I wasn't offering to supply code to P7. I know you guys have been around forever and I know how arduous updating projects can be. We've exchanged emails before; I hope you know I wasn't trying to disparage your work. From our previous exchanges, I know you agree about semantic code. Good luck on the new version -- it looks great. Best, Bill __ 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] missing image in IE6, and a menu stacking issue
Debbie Campbell wrote:
My absolutely-positioned #challengeBtn link is missing in IE6 but
present in other browsers (the big blue 'Create a Group' button on the
orange bar):
Also, the submenus for the navigation bar are sliding under the content
in IE6/7. I've tried various z-indexes for different elements and cannot
get any changes to occur. Again, your help greatly appreciated!
Hi, Debbie--
First, the easy fix:
#header{z-index:1;}
...will fix your menu issue.
I suspect something's gone awry with your png fix and that's what's
causing the trouble on your challengeBtn link.
Setting the element to position:absolute after the page load causes it
to appear exactly as it should. Paste this into your address bar to check:
javascript:(function(){document.getElementById(challengeBtn).style.position=absolute;})();
Have you tried a simple template without the JS?
Hope it helps.
--Bill
__
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] Nested lists in columns
Hey Dan,
Here's the issue on your site:
(http://www.calvarygreenmeadow.com/schedule.htm)
In order to capture the floated elements, we have to alter the way the
browsers handle them. Under normal circumstances, floated elements are
given special consideration within the document flow. This is more or
less the essence of what makes them floated.
In this situation, we want them to be treated differently, so we have to
toggle this behavior. For standards-compliant browsers, we can use this
rule (in this case) to capture the floated elements:
~~~
.schedule li
{
overflow: hidden;
}
~~~
Internet Explorer has more trouble with this, requiring that we activate
the MS proprietary hasLayout property. There's a number of ways to do
this. In the original code I sent you, I used the MS zoom property.
This is unique to MS and does not validate. It also probably looked
pretty useless, which is maybe why you dropped it from your styles.
A better way to activate this behavior (as far as I'm concerned) is
through the use of display:inline-block. This CSS property is not
completely supported by IE -- it only works on elements with a default
display of inline. Interestingly enough, however, is the fact that it
will trigger the required hasLayout behavior we need to capture the
float. More interesting is that configuring the display back to the
desired setting doesn't de-activate hasLayout.
Thus, using this rule should allow all browsers to show consistent results:
~~~
.schedule li
{
display: inline-block;
}
.schedule li
{
display: block;
overflow: hidden;
}
~~~
They must be broken up into two separate rules as above or IE will not
activate hasLayout for the element.
In your current live version, the rule you need to replace begins around
line 131.
I wasn't sure if my explanation above was entirely clear, s...by way
of *further* explanation, consider an image floated in a paragraph:
~~~
p img {
float:left;
}
~~~
pp
p Homer Jay Simpson is a fictional main character in the animated p
p television series The Simpsons andp
p i___i father of the eponymous family. p
p i _//_\\ i p
ppi,//. ippp
i / \i
i _/ |i
i(.-,--. |i
i/o/ o \ / i
i\_\/ /\/\ i
i(__`--' ._) i
i/ `-. | i
i ( ,`-. | i
i`-,--\_ ) |-. i
i _`.__.' ,-' \i
i|\ ) _.-'|i
ii-\.'\ ,--+. i
i .' .' \,-'/ \ i
i / / / \ i
Demonstrated above is the default browser behavior regarding floats.
Under normal circumstances, this is exactly what we want so that when we
include another paragraph about Homer, we get this:
pp
p Homer Jay Simpson is a fictional main character in the animated p
p television series The Simpsons andp
p i___i father of the eponymous family. p
p i _//_\\ i p
ppi,//. ippp
i / \i
pi _/ |i
p i(.-,--. |i He is voiced by Dan Castellaneta and p
p i/o/ o \ / i first appeared on television, along with p
p i\_\/ /\/\ i the rest of his family, in The Tracey p
p i(__`--' ._) i Ullman Show short Good Night on April p
p i/ `-. | i 19, 1987. Homer was created and designed p
p i ( ,`-. | i by cartoonist Matt Groening while he was p
p i`-,--\_ ) |-. i waiting in the lobby of James L. Brooks' p
p i _`.__.' ,-' \i office. Groening had been called to pitch p
p i|\ ) _.-'|i a series of shorts based on Life in Hell p
p ii-\.'\ ,--+. i but instead decided to create a new set p
p i .' .' \,-'/ \ i of characters. He named the character p
p i / / / \ i after his father Homer Groening. Afterp
p appearing on The Tracey Ullman Show for p
p three years, the Simpson family got their own series on Fox, which p
p debuted December 17, 1989. p
p p
pp
Note, however, that changing the styles like this:
~~~
p {
display: inline-block; /* For MSIE gte
Re: [css-d] 100% height?
Aubrey Benasa wrote:
Hi there,
html: http://aubreybenasa.com/height/
css: http://aubreybenasa.com/height/styles.css
I can't figure out how to make the the full background-image appear on this
page. When you open the page at a height less than the height of the
background image (810px) and use the scrollbar to page down, the background
image and background color is cut off. only if you maximize the browser
window do you see the full background image and background color. I'm sure
it's a problem with the way i've set the height in the css. any tips?
thank you in advance,
aubrey
Hi Aubrey,
Try this:
div.bg
{
/* Add this to avoid margin collapsing */
padding-top: 1px;
}
div.container
{
/* Remove this
top: 127px;*/
/* Change to margin-top; keeps the element in the document flow */
margin-top: 127px;
}
I only tested it in Firefox 3/Ubuntu Ibex, but it should work well in
other browsers, too, I think.
Hope it helps.
--Bill
__
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] Nested lists in columns
Telecosm wrote: I fear this may not be possible, but I'd like to have a nested UL display such that the child elements are displayed alongside their parents. Here is a link to a working-copy of the code: http://www.calvarygreenmeadow.com/schedule_new_5.htm Thanks in advance for your help! Dan Hi Dan, Something like this, maybe: http://www.cyber-sandbox.com/cssd/ccg.html Hope it helps. --Bill -- !-- ! Bill Brown - macnim...@gmail.com - 484-809-8077 ! WebDevelopedia.com, TheHolierGrail.com, MacNimble.com ! 24 Countryside Drive, Johnston, RI 02919 -- __ 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] Problem with form in IE6 and IE7
Jukka K. Korpela wrote: Peter Bradley wrote: I have a form that I can't get to format properly in IE (6 or 7). It looks like you are using a definition list for the form fields. In addition to being illogical, it also causes trouble in styling. The dl element may have idiosyncratic rendering features in browsers, and using float often causes browser differences. It would be _far_ easier (and more logical) to use a table. If you have been forbidden from using a table, you could use simply label and input and div (or just br) elements, making the labels floated on the left with specific width, much the way you are doing now. (Using a table would be much more flexible, since then a browser would automatically select the width for the column of labels according to the width requirements of the longest label.) See a sketchy example at http://www.cs.tut.fi/~jkorpela/forms/tables.html#css Hi Peter, The DL.DT.DD family is a rare and unique jewel in the family of HTML tags and the only one I know of with such a relationship between the three elements in the sub-family. I've used it many times and been pretty happy with it. That being said, it doesn't fit in this case and there's already a set of tags for this. I can understand Jukka's suggestion to use tables to achieve the desired effect and I've looked at his page, but I'd like to offer an alternative. One thing that is commonly overlooked is that the label element is permitted to wrap around it's associated input element such that instead of this: label for=thingLabel Text:/labelinput name=thing id=thing ...we're also allowed this: label for=thingLabel Text:input name=thing id=thing/label When we make the label element display:block, we then get a row we can work with. Throw your label text into a span, add a little float and negative margin magic and we can very closely emulate what we could achieve with tables. I've prepared a snippet of your form using this method and published it at this URL: http://theholiergrail.com/cssd/spanish-intensives-form.html I hope it helps. --Bill -- !-- ! Bill Brown - [EMAIL PROTECTED] - 484-809-8077 ! WebDevelopedia.com, TheHolierGrail, MacNimble.com ! 24 Countryside Drive, Johnston, RI 02919 -- __ 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 6 strikes again .....
Ambient Glow wrote: I had a number of CSS issues with IE on this draft page, but, thanks to Gunlaug's help, most of them are worked out. The page is displaying fine for in IE7, but client says it is splitting in two and the navigation is detached in IE 6. http://ambientglow.com/garage/jfogg/sample-home.html CSS: http://ambientglow.com/garage/jfogg/_css/home.css Any idea on fixes? Thanks! Peg ambientglow Hi Peg, IE6 being the fragile kid on the playground these days is rather sensitive to HTML errors when rendering pages. You have an extra closing div [1] in there somewhere which is probably throwing off the DOM tree for IE6. The bigger kids are just making an assumption which is more in line with what you actually want, but ultimately, the less a browser has to assume about your intent, the better the page will display. [1] http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fambientglow.com%2Fgarage%2Fjfogg%2Fsample-home.html Best, Bill -- !-- ! Bill Brown - [EMAIL PROTECTED] - 484-809-8077 ! WebDevelopedia.com, TheHolierGrail, MacNimble.com ! 24 Countryside Drive, Johnston, RI 02919 -- __ 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] how do I get the hr / under the div?
Sandy wrote: After the larger div is closed, there is a hr / followed by a short paragraph. The hr / shows up on the right of the table of contents instead of under it. When I try to use a clear : left on it, the whole rest of the content moves way, way down under the menu on the left. How do I get this hr / to tuck nicely under the div? Hi Sandy, Your footer (which contains the hr) is contained within div#nowrap.right which has margin-left set to 300px. Presumably, you want your footer to be /outside/ div#nowrap.right which would put it to back to the margin and width of the greater parent div (div#container). The other option of course, would be to apply a negative margin-left to your footer, but this would cause problems in the long run. Anyway, hope it helps. --Bill -- !-- ! Bill Brown - [EMAIL PROTECTED] - 484-809-8077 ! WebDevelopedia.com, TheHolierGrail, MacNimble.com ! 24 Countryside Drive, Johnston, RI 02919 -- __ 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] Can't put #8220; in a blockquote?
Peter Bradley wrote: Ysgrifennodd Peter Hyde-Smith: Peter: You may need to wrap each block in a p.../p or div ... /div, blockquote p#8220;I found the teaching of exceptionally high standard.#8221;/p /blockquote Neither of those seem to work, either. I've posted the page to: http://www.apvx95.dsl.pipex.com/SpanishIntensives/feedback.html You'll see that the first blockquote is contained in a p/p block and the second in a div/div block. Peter, You've reversed Peter's instructions: This is wrong: pblockquote/blockquote/p This is correct: blockquotep/p/blockquote If you apply Peter's direction, I think you'll find greater success. Hope it helps. --Bill -- !-- ! Bill Brown - [EMAIL PROTECTED] - 484-809-8077 ! WebDevelopedia.com, TheHolierGrail, MacNimble.com ! 24 Countryside Drive, Johnston, RI 02919 -- __ 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] Can't put #8220; in a blockquote?
Peter Bradley wrote: Thanks to Peter, Benjamin and yourself. English never was my strong point. Cheers Peter No worries, mate. Here in America, the same can be said of about 90% of the population...and about me before my morning coffee. Glad it helped. Stay well. --Bill __ 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] Really need help - white spaces on zoom in using IE and FF
MEM wrote: http://www.cantinho.org/test6.html http://www.cantinho.org/css/teste_V6.css This layout is not an ordinary 3 columns layout with head and footer. He has to have the ability to change the border line differently on each column, and the columns height should always be the same and follow the footer. That's why I'm glad with this layout, is CSS, no table, (but I know that The issue is that white space when we use the zoom functions on IE or FF. Hi Márcio, For kicks, I coded the URL you submitted into TheHolierGrail framework. TheHolierGrail has support for all the border and background changing (including full-height columns) that you're seeking and has been tested in quite a few browser/os combinations. You can find a version with all of the code for TheHolierGrail here: Link: http://theholiergrail.com/cssd/cantinho-maximal.html Size: 3 KB (30 KB uncompressed) ...and this version contains only the code you need for your project: Link: http://theholiergrail.com/cssd/cantinho-minimal.html Size: 2 KB (11 KB uncompressed) It shouldn't break when zooming in any browser, but when stressed in IE (zooming to large text size or unbroken lengthy content like long urls) it will save itself by cutting off some content. There's a thousand arguments for and against the use of frameworks (even mine g) and I don't want to start a debate, but I thought I'd offer it up as a solution for you. I hope it helps. --Bill -- !-- ! Bill Brown - [EMAIL PROTECTED] - 484-809-8077 ! WebDevelopedia.com, TheHolierGrail, MacNimble.com ! 24 Countryside Drive, Johnston, RI 02919 -- __ 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] IE6 and IE7 Correct, everyone else wrong with negative margins
Mark Wheeler wrote:
http://dev.tonedeafdesign.com/test/test27.html
Any help is greatly appreciated.
Hi Mark,
You are experiencing collapsing margins, a semi-intended, somewhat
troublesome component of CSS design in compliant browsers.
Adding a small amount of padding or bordering will generally fix this.
Try this rule in your style sheet:
.balloon_middle {
width: 217px;
background: url(images/photo_balloon_middle_bg_slammed.png) repeat-y;
padding-top: 1px; /* ADD */
padding-bottom: 1px; /* ADD */
}
Hope it helps.
Bill
--
!--
! Bill Brown - [EMAIL PROTECTED] - 484-809-8077
! WebDevelopedia.com, TheHolierGrail, MacNimble.com
! 24 Countryside Drive, Johnston, RI 02919
--
__
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] IE6 and IE7 Correct, everyone else wrong with negative margins
Mark Wheeler wrote: Yep! That did the trick. I've run into this before, but it was a while back. What is it about adding the padding that does the trick? Mark Hi Mark. Glad it helped. Basically, I think when you have an element with no border or padding, the margin looks like this: m m m m -- top margin sometext m m m m -- bottom margin ...which means that when it's followed by another element, it looks like this: m m m m -- top margin sometext m m m m -- bottom margin m m m m -- top margin sometext m m m m -- bottom margin ...and the margins collapse like this: m m m m -- top margin sometext -- top and bottom margin sometext m m m m -- bottom margin ...like a kind of zippering effect. When you add a border or padding, it changes the nature of the imaginary box holding the content inside an element so that the margin now looks like this: m m m m sometext -- some bottom padding will create the solid margin -- allowing this margin to exist on its own... m m m m -- ...separated from this margin here sometext m m m m -- the border on this element will do it too sometext m m m m I know the ASCII might not be the best way to demonstrate this, but hopefully, it gives you at least some idea of what's going on there with the box model. Anyway, I'm glad you were able to get it working. --Bill -- !-- ! Bill Brown - [EMAIL PROTECTED] - 484-809-8077 ! WebDevelopedia.com, TheHolierGrail, MacNimble.com ! 24 Countryside Drive, Johnston, RI 02919 -- __ 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] IDs on W3C.org
[EMAIL PROTECTED] wrote: Sorry if this is a little bit out of left field, but I was looking over a colleague's work today, and I noted that he should be using IDs instead of classes for elements which appear once on a page. He told me that he had modeled what his page on the www.w3c.org splash page, and there were indeed elements which appear to be singletons (banner, navBlock) but used classes instead of ID. Is there some technical reason for these layout divs to be marked up with classes? I often battle with myself on this issue. I tend to use a single index file and pipe everything through it using PHP, so for me, the real question isn't whether or not something appears only once on a page, but whether or not it is permitted to be replicated. For example, I'm unlikely to replicate a footer, so this gets an id. Likewise, the masthead only appears once, so it too gets an id. I could very well replicate menus; admin menu, user menu, blog roll and so on, so they get classes. I don't use ads, so I can't comment on banners. Perhaps this is a different question for me, since I use my own templating system, but if something _might_ be replicated, or _could be_ replicated, I class it, otherwise, I identify it. Hope that makes /some/ sense. --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] Firefox 3 vs IE7 spacing between links
Keith LaFrenier wrote:
help is greatly appreciated.
Hi Keith--
Looks like your images need to be set to display:block.
To test it in IE7, call up your URL and paste this bookmarklet into the
address bar and press enter:
--- Copy and paste content below this line ---
javascript:(function(){a=document.getElementById('services-subcontainer').getElementsByTagName('img');i=a.length;while(i--)a[i].style.display=block;})();
--- Copy and paste content above this line ---
For a more permanent solution, place this rule in your style sheet:
--- Copy and paste content below this line ---
#services-subcontainer img {display:block}
--- Copy and paste content above this line ---
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] Firefox 3 vs IE7 spacing between links
David Hucklesby wrote: Of course, if your design includes images that need to display inline, that won't work. So be careful with this. Another possible solution is to declare vertical-align: bottom; on relevant images. David, Vertical-align:bottom doesn't remove the spaces on my IE7/WinXP. The CSS rule I sent through is targeting only the relevant images in his menu, not his entire design. It looks like Keith is using display:block and that seems to solve it. Best, 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] Site Check for IE layout issues
hard time getting a handle on how to ensure all of my content is in the right place in Internet Explorer 7 and 6. . You are running Proprietary HTML not XHTML strict. The resolution of this issue is best left to a list pro. I assume you are referring to the DOCTYPE ? Is the HTML proprietary because of the javascript for flash ( from Adobe) ? Should this be transitional or another HTML Doctype altogether ? I'm not a list pro and this may offer little in terms of resolution, but... As I understand it, Internet Explorer doesn't support XHTML, so even if you specify XHTML in the doctype and even if you made server-side adjustments to _ensure_ that you were sending XHTML to the browser, IE simply won't render it as XHTML, using instead it's own HTML interpretation. I've yet to see the real benefit to using XHTML over well-formed HTML and tend to use this doctype for everything as a consequence: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; It seems to deliver more consistent and predictable results cross-browser. 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] Site Check for IE layout issues
Alyda Gilmore wrote: That's not my understanding at all! I used the following for a number of years: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd; and recently switched to: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd; Source: http://en.wikipedia.org/wiki/Quirks_mode http://www.alistapart.com/stories/doctype/ Could someone else please verify? Hi Alyda-- I should add that IE reads XHTML, so it supports it in that sense, but it serves the pages as text/html not as application/xml+xhtml. I interpret that to mean that it's going to serve the pages as html, regardless of whether or not I've specified an xhtml doctype. Source: http://blogs.msdn.com/ie/archive/2005/09/15/467901.aspx It used to be possible to trick IE into serving documents as application/xml, but I'm not sure if this is still possible (or even used). Source: http://www.w3.org/MarkUp/2004/xhtml-faq#ie Two other useful questions on that page: http://www.w3.org/MarkUp/2004/xhtml-faq#texthtml http://www.w3.org/MarkUp/2004/xhtml-faq#mime11 Hope that 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] control td text
[EMAIL PROTECTED] wrote:
Thank you for your reply. But when I use the suggestion for the css of
{display: block: text-align: center; display: bold;}, it will work in IE
7 but not Firefox 3.0.3. I'm using td.boldcenter for the class name so my
codes looks like this:
tr
td class=boldcenter9-25-08/td
td class=boldcentera href=xxx.pdfName/a/td
tdThis is where some information would go that I do not
want centered or bold./td
/tr
Can you tell me what I'm missing for it to work in Firefox?
Tommy
Hi Tommy--
I might be tuning in a bit late here, but isn't this essentially what
you want?
table
tbody
tr
th9-25-08/th
tha href=xxx.pdfName/a/th
tdThis is where some information would go that I do not want
centered or bold./td
/tr
/tbody
/table
Should work in all browsers and doesn't even require CSS modifications
since HTML already has a tag in place for this sort of thing.
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] Suggestion
MEM wrote: But, I have no problems about bottom and top post. I don't think David was necessarily focusing on _your_ problems, Marcio. I kind of can organize things around here, and have it all on one single client, from meetings, to notes, to several e-mail accounts, all in one front-office that is not ugly I mean, not properly design, I mean, not easy to find what we want for, as google is. I'm not sure what any of that means. and you too can join us in enjoying and helping to keep this list well organized That's why I have suggested the newsgroup. :p I liken this to suggesting that we help people remember the names of all fifty United States by rearranging geographically into alphabetical order. The just as it is is not my way of thinking. Sorry. At least will never be without a proper reason for doing so. ;) I can understand this to some extent: You're saying that just because something has always been one way doesn't mean that's the right way. I think David is saying, If it ain't broke, don't fix it. I have to agree with David. So, I don't get why is Email much more convenient. Convenient is subject to opinion. Newsgroups are no more organized than email I disagree. Knew ya would. On a newsgroup you can easily search old posts/replys/e-mails. Here http://lists.css-discuss.org/mailman/private/css-d/ , you cannot do this, or at least, I don't know a easy way for doing it. Go here: http://css-discuss.markmail.org/ On a newsgroup you don't need this rules: http://css-discuss.incutio.com/?page=OffTopic . :) I can't imagine that's true. I can't imagine any place in the world where that could possibly be true. I need an OffTopic filter even when I'm riding the bus...and more frequently at family gatherings. So... I have to insist on the newsgroup think if no one can give me the right reasons why is a mailing list better then a newsgroup. (In case you haven't notice, I believe it isn't btw. ;) I'm not sure you've given any reasons why a newsgroup is better than a mailing list, either, but I'm also not going to lose sleep trying to convince you. You're pretty clearly set on having a newsgroup and I think it's a great idea. Let us know how to register for it once you get it going. Just my tooth sense. 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] Sidebar not expanding content div
Christopher Kip wrote:
works in IE but in all others can't figure out why the sidebar is
extending past the container vs. the container expanding to fit. I
have done this many times before, though slightly different layouts
and not had problems. Maybe a fresh pair of eyes...
http://chromacreative.com/testingserver/tritech/site/template.html
Maybe this'll help:
.pagewrapper #container {
overflow: hidden; /* -- Compliant Browser Float Clearing */
}
Best,
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] CSS popup windows
If you go to http://www.thepuppyplace.org/page53.html and click on
a link (Alabama for example) popups up a window with text inside.
Can someone suggest a website that I can learn this technique? Or
any other comments? Thank you.
This is better handled through JavaScript than CSS.
That being said, I tend to use Prototype http://www.prototypejs.org in
all my projects making something like this possible (and simple):
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
htmlhead
meta http-equiv=content-type content=text/html; charset=UTF-8
titleSimple New Window/title
script type=text/javascript
src=http://www.google.com/jsapi;/script
script type=text/javascript!--
google.load(prototype,1.6);
// --/script
script type=text/javascript!--
var set_blank_targets = function () {
$$(a[rel='external']).invoke(writeAttribute,target,_blank);
};
Event.observe(document, 'dom:loaded', set_blank_targets);
// --/script
/headbody
a href=ala.html rel=externalAlabama/a
/body/html
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] Scalable CSS Buttons That Work in All Browsers
Elli Vizcaino wrote:
They look great in all browsers: IE6, IE7 and Safari but is slightly
off in FF3. And I haven't been able to come up with a solution that
will make it work in all. It seems like FF3 is throwing a margin
around the span that I can't control.
Hi Elli--
I adjusted this:
.lgt_blue_btn, .wht_btn {font-weight: bold;
color: #FFF;
padding-right: 5px;
text-align: center;
width: auto;
overflow: visible;}
to this:
.lgt_blue_btn, .wht_btn {font-weight: bold;
color: #FFF;
padding-right: 0;/* Set to to 0 for FF3 */
text-align: center;
width: auto;
overflow: visible;}
to get it to work in FF3 on my Ubuntu box.
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] Scalable CSS Buttons That Work in All Browsers
Thierry Koblentz wrote: Hi All, Was just wondering if anyone knew of any good sliding door techniques or anything else that would allow me to create scalable buttons in the major browsers: IE6, IE7, FF, Safari. [snip] I have this page up: http://tjkdesign.com/articles/buttons/input-type-button.asp I can't find the time to write an article/tutorial about the technique, but you should be able to figure things out. Hi Elli! How's things in the Big Apple? Thierry also has an excellent resource here: http://tjkdesign.com/lab/uploader/buttons.asp It has more elements in the source than you're using but seems quite robust across the browser spectrum. Let me know if it helps, but give the credit to Thierry. If it's not quite what you need, I'll see if I can't dig something else up for you. Best, 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] 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] 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/
Re: [css-d] workaround to inherited opacity
Rob Emenecker wrote: I have a project where client wants a semi-opaque border on both a masthead and a content area of their page. The masthead and content areas are both contained in DIVs that center left-to-right over a tiled background. I am trying to figure out an effective workaround the issue of opacity inheritance, so that I can get the visual appearance of an 100 OPAQUE masthead DIV nested in a semi-opaque DIV. The Winning Sports Club has to sit on top of the semi-transparent DIV. What is the best way to go about achieving this effect? (I'm trying to avoid Hi Rob, In the past, I've used a combination of RGBA, IE's gradient filter and PNGs (for Opera and FF2) to achieve this effect. Hedger Wang has a similar experiment out there somewhere on the same thing. Here's my experiment with it: http://www.webdevelopedia.com/better_opacity.html and http://theholiergrail.com/sandbox/rgba-cross-browser.php 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] workaround to inherited opacity
Al Sparber wrote:
From: Bill Brown [EMAIL PROTECTED]
Not good. Whenever you expose IE7 to a filter you kill font-smoothing.
That's a showstopper. Best to go purely with PNGs for IE7 and forget about
older browsers in the name of progressive enhancement.
Not good? Seems harsh. It's a workable solution in some cases, to be
sure, don't you think? IE7 is the only browser in my testing which
garbles the ClearTyping on filtered elements...the others seem fine. So,
you could feed PNGs to Opera, FF2 and to IE7 with conditional commenting
if you were hung up on the ClearTyping.
I don't use Windows, but when I do, I find ClearTyping to be just awful
so I disable it anyway. You could also disable ClearTyping on your site
completely (call it: for consistency's sake) by using this:
body{filter:none}
Personally, I don't think it's a show stopper, but I can see from this
post (and your other posts on the net about the subject) that you do.
S'all good. I was just offering up my experience, even as not good as
it is.
Thanks.
--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] just using CSS, can I center a sentence both horizontally and vertically in a window (viewport)
Philippe Wittenbergh wrote: On Sep 16, 2008, at 1:31 PM, Bill Brown wrote: http://www.webdevelopedia.com/vertical_centering_unknown_height.html That can't work correctly on IE 7, as far as can tell. That browser supports selectors of the type #vc-frame[id], but has no support for display:table-*. I'm not surprised that davidL is reporting a failure. One would have to throw IE into Quirks mode for it to work. (I haven' seen the thing 'live on IE', as I'm nowhere near to a Windows machine). Sorry guys-- The monitor has died on my Windows machine and I'm waiting for a new one to come in. I was under the impression that IE7 was supporting display:table-*, but clearly, that's incorrect. Presumably, moving the IE only code block into a conditional comment block will fix that. If you get a chance, please have another look at: http://www.webdevelopedia.com/vertical_centering_unknown_height.html ...and let me know how it fares. I should have a new monitor for the Windows Beast tomorrow, so I can test before sending off any more bad info. I don't have a Mac or access to one, so I'm also a little curious to know how it does on a Mac OS. Thanks. 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/6 IE/7 nav line-height
David Laakso wrote: In this test page, the only way I've been able the keep the last two links from gaining height is to assign a line-height /in pixels/ to #nav ul for the IEs (and they still look a little whacked (taller) to me. Anyone up for an explanation and/or better fix for this little mystery? uri (css embedded): http://www.chelseacreekstudio.com/ca/cssd/nav.html Hi David-- It appears to be connected to your font-variant:small-caps declaration. If I had to guess, I would suppose Windows doesn't have a way to translate the non-breaking space into some lower-case/lower-height version of itself, so it doesn't translate the space into anything, but leaves it the same height as a font-variant:normal character. This obviously pushes the height of the box to make room for the taller character. I couldn't find a work-around beyond specifying the line-height in pixels as you'd done. Hope it helps. --Bill -- ~~~ TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com Bill Brown, Web Developer - From dot concept to dot com since 1999 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] Conditional CSS Comment Not Working
Stan McCoy wrote: !--[if IE 6] link href=css/avalon_ie6.css rel=stylesheet type=text/css media=screen / ![endif]-- !--[if IE 7] link href=css/avalon_ie7.css rel=stylesheet type=text/css media=screen / ![endif]-- link href=css/avalon.css rel=stylesheet type=text/css media=screen / Hi Stan, The order of the style sheets is probably causing you the problem here. Present your default first, then override for IE6/7 like this: link href=css/avalon.css rel=stylesheet type=text/css media=screen / !--[if IE 6]link href=css/avalon_ie6.css rel=stylesheet type=text/css media=screen /![endif]-- !--[if IE 7]link href=css/avalon_ie7.css rel=stylesheet type=text/css media=screen /![endif]-- That should do the trick. Hope it helps. --Bill -- ~~~ TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com Bill Brown, Web Developer - From dot concept to dot com since 1999 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] Any IE8 news?
Nancy wrote: I read somewhere that the next release of IE8 was coming out in August, but the MS site is still just offering Beta 1. Has anyone heard anything? I have some sites that break slightly in the beta, but I've been advised here not to do anything until the next version comes out. Here: http://blogs.msdn.com/ie/archive/2008/08/27/internet-explorer-8-beta-2-now-available.aspx and here: http://www.microsoft.com/windows/internet-explorer/beta/ Best, Bill -- ~~~ TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com Bill Brown, Web Developer - From dot concept to dot com since 1999 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] CSS IE6 help
Christine Kilger wrote:
You can view the CSS page here:
http://www.evergladesplan.org/index_NEW_2008.html
Again, any help would be much appreciated!
Hi Christine,
I was not as fortunate as Alan and David -- I was having some real
problems viewing your site. These adjustments seemed to help for IE6.
Add them at the bottom of your head element to see if they help you:
!--[if IE 6]
style type=text/css
/* place css box model fixes for IE 6 in this conditional comment */
#bgContainer {
width: 760px;
}
#container {
background-color: #fff;
}
#mainContent {
margin: 0;
}
/style
![endif]--
Good luck!
--Bill
--
~~~
TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com
Bill Brown, Web Developer - From dot concept to dot com since 1999
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] Overriding Inline Styles w Attribute Selectors !important
Elli Vizcaino wrote:
I was experimenting with attribute selectors to override inline
styles and it worked in FF but of course not in IE so I was
wondering, if there was anyway to take control of inline styles and
have it work across browserland.
CSS in stylesheet - p[style] {color: #000 !important; float: left
!important;}
HTML - p style=color: green; float: right;I like to write
CSS./p
Hi Elli--
You actually have two separate issues going on here. The first is
IE-lte-6's lack of support for the attribute selector in CSS. Your
second issue is one of specificity.
The values for specificity are calculated like this:
a,b,c,d,e
...where...
a = author !important styles (+2 for user !important styles)
b = inline styles
c = id styles
d = class and attribute styles
e = tag styles
(* is 0, it has no value)
So, for example, the specificity in your examples:
Your CSS:
p[style] {
color: #000 !important;
float: left !important;
}
...has a specificity of 1,0,0,1,1 in normal browsers, 1,0,0,0,1 for IE6.
Your HTML:
p style=color: green; float: right;
...has a specificity of 0,1,0,0,0 in all browsers.
To make this work cross-browser (ahem IE6), you have to class or ID the
element which will allow IE6 to pick up the style sheet styles and not
the inline styles. Interestingly enough, I noticed in testing this for
you that IE6 will acknowledge the use of !important, but only if the
rule is not re-declared within the same style block.
For example:
p.special {
color: #000 !important;
float: left !important;
}
p.special {
color: #00f;
}
...works just fine in IE6, while:
p.special {
color: #000 !important;
color: #00f;
float: left !important;
}
...does NOT. IE6 seems to over-write the !important rule, rather than
applying both rules and using specificity. When the styles are broken
out into two blocks, IE6 seems to pick it up just fine and apply
specificity correctly.
I believe IE7 and all the modern browsers support attribute selectors,
so you should be fine cross-browser land, except for IE-lte-6.
I hope that helps.
--Bill
--
~~~
TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com
Bill Brown, Web Developer - From dot concept to dot com since 1999
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/
