Re: [css-d] positioning background images in IE 8/7
On Tue, Apr 10, 2012 at 12:16 AM, Debbie Campbell d...@redkitecreative.com wrote: In this page in IE 8/7: http://www.redkitecreative.com/projects/tax/ The background images in the three blue boxes are out of position. Even putting the CSS style into the ie8.css stylesheet makes the background images disappear from the page completely... How do I get them to move up in IE 8 and 7? I was able to get the desired placement in IE8 by adding the following properties to the CSS for div.blue-box-content: position: absolute; top: 0; left: 0; width: 100%; The box is positioned absolutely in relation to div.blue-box because that box already has position:relative. Since the box doesn't actually contain anything, you have to tell it how big to be. You already have height:310px set in your stylesheet, so I only needed to set its width. In IE8, the background-position properties are being interpreted properly, but the position of div.blue-box-content is determined differently. In most browsers, div.blue-box-content is at the top left corner of div.blue-box, but in IE8 it's below the H3 text. So, the background image is placed 112px from the top of the div.blue-box-content like it's supposed to be, but the div itself is in the wrong place. I figured all of this out using the Developer Tools built into IE9. I was able to see the problem immediately when I set a background-color on div.blue-box-content. -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com -- Debbie www.redkitecreative.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] position fixed and resizing issues
On Mon, Apr 9, 2012 at 9:48 PM, Matteo Bertuz
bertamini.mat...@gmail.com wrote:
Hi everyone
I have a little problem with positioning a div with fixed option and make
sure that will be completely visible when someone resizes the window.
Here is an example:
--
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
html lang=en
head
meta http-equiv=Content-Type content=text/html; charset=utf-8
titleTest Page/title
style type=text/css
body {
margin:0;
padding:0;
}
#fi {
position: fixed;
right: 50px;
width: 300px;
height: 200px;
background-color: red;
}
/style
/head
body
div id=fi
this content, if resized horizontally, slips down the edges of the
viewport.
The div is hidden partially.
/div
/body
/html
--
if you try to view this page and resize your browser window horizontally (and
so the viewport) less than 300px, well, the div partially disappears under
the left edge. Is there a way to make sure that the div will be completely
visible, for example by showing the scrollbars when necessary?
I think it'll work if you set max-width:300px, width:100%, and overflow:auto on
your fixed-position div. I haven't tested it, but that should mean that the div
will be 300px with scrollbars when your viewport is larger than that and the
width of the viewport when it's smaller than 300px.
On second thought, I think it'll still have 50px cut off of the left. Try
setting max-width:350px, width:100%, right:0, background-color:transparent on
your fixed-position div and putting another div inside of it for your content
with position:absolute, top:0, left:0. That way, the content should still be
50px from the right like you want it to be, but its content will all be
accessible.
I haven't tested this. Give it a try. Let us know what works.
--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com
Thank you in advance,
M
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] position with div in stead of table
On Tue, Apr 10, 2012 at 6:43 AM, David Hucklesby huckle...@gmail.com wrote:
On 4/9/12 10:11 AM, Marie-Ange Demeulemeester wrote:
Hi, I need a block with two columns.
Despite of the quite simple code by using a table, I’ve tried to have
the same result with DIV.
The requirements are:
· The columns have an equal height
· Each column has a different background-color
· 2 columns: first column always width 100px, second the rest
of the screen (100% minus 100px)
· The title and rule has to have the whole width of the
second column, and not equal to the width of the text in that column.
(Not OK in FF, in Chrome, )
· This must be X-browser: IE6+, FF 3+; Chrome, Safari
My tryout:
http://users.telenet.be/MarieAnge/banner1.html
If somebody can simplify the code, please don’t hesitate.
I found two ways to do it without using tables, but they both have
some problems.
You can find my results at http://www.ghodmode.com/testing/marie I'll
also post the code at the bottom of this message.
-- DIV.thirdbanner --
The first one uses CSS tables, which don't work in IE7 or earlier.
-- DIV.secondbanner --
The second one just uses floats and positioning, but requires a fixed height for
just about all of the containers. You only really have to set a fixed height
for the outermost div, though, because the others are set to height:100%.
Unless the content changes dynamically, I think this is a viable solution with
good support for older browsers that we shouldn't support any more :P
To get the right height I rounded up the computed height of the contents,
divided by the font size to get em, and set it explicitly to that. It didn't
fit in IE6, so I added 1 more em.
If you do it this way, you'll have to change the height whenever you change the
content.
-- IE6/7 --
I think David was right with regard to tables and IE6/7 support, but I
personally feel that we don't need to support IE6/7 any more. So, I would
choose the first method. Of course that depends on your situation and the
requirements of your page.
If you visit my page (http://www.ghodmode.com) in IE7 or earlier, you get a nice
little bar at the top telling you that the site may not render correctly in your
browser.
--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com
Well, I was about to reply affirmatively when I noticed you seem to have
an unstated requirement - that the image is vertically centered! The
only way to get this working in IE 6 and 7, along with your other
requirements, is the solution you came up with - namely, an actual
table. While there are many ways to make the columns *appear* to be
equal height, table display is the only way I know to get actual heights
to match. While you can apply table display in browsers with good CSS
2.1 support, this does not include IE 6 and 7. Sorry.
Hopefully someone on this list will prove me wrong. :)
--
Cordially,
David
My results:
!doctype html
html lang=en
head
meta http-equiv=content-type content=text/html: charset=utf-8
titleBanner/title
style type=text/css
body {
}
div.thirdbanner {
width: 95%;
margin: 30px 2.5%;
border: 3px solid #666;
}
div.thirdbannercontent {
display: table;
width: 100%;
background-color: #ddd;
}
div.thirdbannertxt {
display: table-row;
}
div.thirdbannertxt div.colimg {
display: table-cell;
vertical-align: middle;
width: 100px;
}
div.thirdbannertxt div.coltxt {
display: table-cell;
background-color: #aaa;
padding-left: 0.5em;
}
div.thirdbannertxt div.coltxt h3 {
background-color: #ccc;
padding: 0.5em 0.5em 0.5em 0;
margin: 0 0.5em 0 0;
}
div.fourthbanner {
position: relative;
left: 2.5%;
width: 95%;
height: 11em;
}
div.fourthbannercontent {
background-color: #ddd;
border: 3px solid #666;
height: 100%;
}
div.fourthbannertxt {
height: 100%;
}
div.fourthbannercontent div.colimg {
height: 100%;
width: 100px;
position: relative;
float: left;
}
div.fourthbannercontent div.colimg img {
display: block;
position: absolute;
width: 100px;
height: 84px;
top: 50%;
margin-top: -42px;
}
div.fourthbannercontent div.coltxt {
overflow: auto;
margin-left: 100px;
background-color: #aaa;
padding-left: 0.5em;
height: 100%;
}
div.fourthbannercontent div.coltxt h3 {
margin: 0 0.5em 0 0;
padding: 0.5em 0.5em 0.5em 0;
background-color: #ccc;
}
/style
/head
body
div class=thirdbanner
div class=thirdbannercontent
div class=thirdbannertxt
div class=colimg
img width=100 height=84
src=http://users.telenet.be/MarieAnge/x.jpg;
/div
div class=coltxt
h3Title/h3
stronghighlighted text/strong spannormal text a
href=#link/a normal text/span
ul
libullet list1/li
libullet list2/li
/ul
hr
tekst under
Re: [css-d] position with div in stead of table
On Tue, Apr 10, 2012 at 12:28 PM, David Hucklesby huckle...@gmail.com wrote: ... Nice one, Vince. One small issue: The div.colimg (float) sitting beside div.coltxt (new block formatting context) -- your second solution -- does not need the 100px left margin. For some reason Webkit makes div.coltxt 100px too short, and you end up with a 100px gap on the right. Remove margin-left and Webkit agrees with Mozilla. Thanks David. That's a good catch. That left margin is entirely unnecessary. I should've tested it in webkit. I think that margin was left over from an earlier attempt in which I had the left block (colimg) absolutely positioned. I think I understand why it's shorter than intended. Since I didn't set a width and it's not floating, div + margin should take up the width of the div.fourthbannertxt -100px for div.colimg... I think. What I don't get is why that gap is on the right instead of the left. I thought the margin would bump up against the right edge of the image inside of div.colimg. I know that margins ignore floating elements, but I thought it wouldn't ignore non-floating contents of floating elements. I was wrong ... The webkit developer tools shows the left edge of the div.coltxt (including margin) is at the left edge of div.fourthbannertxt, behind div.colimg, not at the right edge of the image like I would've expected. I definitely had a misconception here because Firebug also shows the left edge of the div.coltxt (including margin) at the left edge of div.fourthbannertxt... The margin of div.coltxt is ignoring div.colimg and its img in both Firefox and Webkit. hehe ... never stop learning :) -- Vince -- Cordially, David __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] preview web page in web page
On Tue, Mar 13, 2012 at 1:25 AM, Zhi-Qiang Lei zhiqiang@gmail.com wrote: Excuse me, I'm not pretty sure if this is the right place to ask this question. I want to create a page which can preview other page. The previewed one should not be styled by its stylesheet. Much like a sandbox or layer mask. What technique can I use? Thanks. Ya, it's probably not the right place. I don't think you're looking for a CSS solution. You should probably ask on WebDesign-L. It's another list similar to this one, but with a more general scope. Here's the URL: http://webdesign-l.com/ -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com Best regards, Zhi-Qiang Lei zhiqiang@gmail.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] classes...?
On Sun, Mar 11, 2012 at 8:37 AM, Tedd Sperling tedd.sperl...@gmail.com wrote: On Mar 10, 2012, at 11:09 AM, Ghodmode wrote: In this field, we live on a never-ending stream of meaningless phrases. Here are a few more examples: Dynamic HTML Object Oriented Programming Web 2.0 AJAX Semantic Web Rude Web (http://fm.no-ip.com/Auth/rudeweb.html) Social Network Progressive Enhancement Graceful Degredation Progressive Degradation Responsive Design Adaptive Design Really? Object Oriented Programming, AJAX, and Progressive Enhancement are not meaningless phrases. I guess it's a matter of perspective, but before understanding the concepts behind them... - Object Oriented Programming: I felt that this was an especially good example. Not only the name, but every underlying concept is a metaphor that requires explanation. Classes aren't the things you ditch so that you ditch when you smoke a joint behind the bleachers. Objects aren't things you can hold in your hand. Inheritance isn't something you're hoping for when your Great Uncle Bartholemew passes away. And so on... Even experienced C programmers that I asked when I was first exposed to Java said they didn't understand OO before doing a lot of reading. - AJAX: The expansion of the acronym wasn't ever in a headline, only in the explanation. So, the first thing that came to my mind was http://en.wikipedia.org/wiki/Ajax_%28cleaning_product%29 Even after understanding the concept, an XMLHttpRequest isn't necessarily asynchronous and the data returned isn't necessarily XML, so the name is dubious to me. - Progressive Enhancement: Sure it makes sense after you read about it, but to me the explanation was necessary for the term to have meaning. As for the rest, I dunno, but these stood out as meaningful. Anyway, the specific meaning of the individual terms wasn't the point. In fact, I just made up at least one of them. The point was that we create catchy names for our ideas, techniques, and technologies and that they don't necessarily have to be accurate. -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com Cheers, tedd _ tedd.sperl...@gmail.com http://sperling.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS to auto-adjust iframe content?
On Sun, Mar 11, 2012 at 1:02 PM, Keith Purtell keithpurt...@keithpurtell.com wrote: On 3/10/2012 9:11 AM, Ghodmode wrote: It's not really a CSS question, but a basic HTML question. Iframes have a scrolling property that defines whether or not the iframe should have scroll bars... http://www.w3.org/TR/html4/present/frames.html#adef-scrolling However, the default setting will give the iframe scroll bars. So, unless you see scrolling=no in the code, I think there might be something else going on there. Do you have some code you can share with us to help you solve the problem? -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com Here's a temporary link to their code. I'll take a look at the w3 link while anyone who cares to can comment on the following: It's supposed to fit inside a tall slender area, and the publisher wants the full text width visible via different viewports. One of my co-workers thinks the only solution is JavaScript. (NOTE: The publication is a relatively tame girlie/lifestyle magazine, just letting you know in advance in case you dislike such) ... http://www.keithpurtell.com/kthings/if.htm What you linked to there _is_ Javascript. There's no iframe there, no CSS, and not really much HTML to speak of either. I'm guessing that this page is the source (src) of the iframe, but your problem is most likely in the page that contains the iframe itself. Also, this question isn't really on-topic for the CSS-D list. Maybe you should consider posting this question on WebDesign-L: http://webdesign-l.com/ -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com -Keith __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Object height and width issues
On Mon, Mar 12, 2012 at 3:41 AM, David Laakso laakso.davi...@gmail.com wrote:
On Sat, Mar 10, 2012 at 8:09 AM, David Thorp
mailingli...@allaboutabundance.com wrote:
Just to clarify, what I mean is, as soon as I add
resize:horizontal; to the div.sidebar {}, it breaks.
--
It is a little difficult to help because you seem a little confused
about CSS [look and feel] versus scripting/programming .
Nevertheless, a quickstart example. No floats, no absolute
positioning, and no fixed positioning used. The page proper is a two
column CSS Table. The left column -- that I assume will contain
tabular data -- is set appropriately an html table. I have no idea why
you would want one of those table columns to disappear but jquery has
been used to make it happen. I do not think that a vertical scroll
bar to control the height of that table is needed, either. If
anything, you might consider query show/hide 25 lines of it at a time.
Open in a full window and drag to 480px mobile:
http://ccstudi.com/dt.html
Cursory checked in IE/9. Safari, Opera, Firefox, and Anroid/2.2.2.
Best,
Lawrence of Arabia
Hi Larry :P
You missed a few details.
- He wants a header along the top, outside of the columns.
- He wants the columns to scroll independently and doesn't want the body to
scroll at all. All overflow happens within the columns.
I tried to accomplish this using CSS tables and failed because of the
independently scrolling part.
The table cell expands vertically when there's more content than fits whether
it's a real td or an element with display:table-cell.
I couldn't get it to work even with table-layout:fixed.
--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com
--
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Object height and width issues
On Mon, Mar 12, 2012 at 3:41 AM, David Laakso laakso.davi...@gmail.com wrote:
On Sat, Mar 10, 2012 at 8:09 AM, David Thorp
mailingli...@allaboutabundance.com wrote:
Just to clarify, what I mean is, as soon as I add
resize:horizontal; to the div.sidebar {}, it breaks.
--
It is a little difficult to help because you seem a little confused
about CSS [look and feel] versus scripting/programming .
Nevertheless, a quickstart example. No floats, no absolute
positioning, and no fixed positioning used. The page proper is a two
column CSS Table. The left column -- that I assume will contain
tabular data -- is set appropriately an html table. I have no idea why
you would want one of those table columns to disappear but jquery has
been used to make it happen. I do not think that a vertical scroll
bar to control the height of that table is needed, either. If
anything, you might consider query show/hide 25 lines of it at a time.
Open in a full window and drag to 480px mobile:
http://ccstudi.com/dt.html
Cursory checked in IE/9. Safari, Opera, Firefox, and Anroid/2.2.2.
Best,
Lawrence of Arabia
Hi Larry :P
You missed a few details.
- He wants a header along the top, outside of the columns.
- He wants the columns to scroll independently and doesn't want the body to
scroll at all. All overflow happens within the columns.
I tried to accomplish this using CSS tables and failed because of the
independently scrolling part.
The table cell expands vertically when there's more content than fits whether
it's a real td or an element with display:table-cell.
I couldn't get it to work even with table-layout:fixed.
--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com
--
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Object height and width issues
Sorry about the double posting. I don't know how it happened. I thought I had clicked send already, and apparently I had, but the window didn't go away like it should have. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Object height and width issues
On Sat, Mar 10, 2012 at 12:55 AM, David Thorp
mailingli...@allaboutabundance.com wrote:
Hi again Vince,
Ok, well as recommended by you in the other thread, I've started over, and in
this case I'm now using your code below as a starting point. As I noted in a
previous reply, it seems to be right on the mark... except I've run across
one little snag...
See here:
http://davidthorp.name/published/browser-0d.html
...and the corresponding css here:
http://davidthorp.name/published/css/browser-0d.css
I've done as you described here:
You don't necessarily have to make the left sidebar 100%-30px. If you set
the
top bar to position:absolute, other elements will go behind it. So, you can
make the left sidebar 100% height. 30px of it will be obscured at the top,
but
you can fix that with a margin on its first child.
But the problems now begin when I add overflow-y: scroll; to my sidebar.
It does manage to scroll everything perfectly except for the fact that the
top 30 pixels of the scroll bar are obscured by the top bar... and so it just
looks a little weird.
I've tried a few things, without success. I'd very much like to know how to
get the scroll bar positioned correctly.
I figured out how to do it using absolute positioning. Rather than set a
vertical size on the elements, I just set their top and bottom positions. The
top position is the height of the toolbar and the bottom is 0. It seems to work
fine in all of the relevant desktop browsers.
http://www.ghodmode.com/experiments/sidebar/
--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com
Note: I've aded opacity: 0.8 to my top bar (toolbar) so you can see the
scroll bar behind it. In the finished version of this there will be no
transparency (ie. it'll be opacity: 1;). The problem isn't the fact that
it shows behind the toolbar. The problem is just that it's not positioned
correctly.
Thanks again for your help!
David.
On 01/03/2012, at 1:54 PM, Ghodmode wrote:
On Sun, Feb 26, 2012 at 3:58 PM, David Thorp
mailingli...@allaboutabundance.com.au wrote:
Greetings all...
I'm relatively new to both CSS, and this list, but I've had some very
positive experiences on other lists for other programming tools, so I'm
hoping this list will be similar :)
I've been learning css from the w3schools website, which seems to be pretty
good as a crash course, but I'm having some difficulties getting
positioning and dimensions of objects to work the way I want. I'm not sure
if this is because I don't properly understand the rules and concepts, or
I'm just getting syntax or something simple like that wrong.
If anyone can help me I'd be grateful...
I have a number of div objects arranged in various positions:
1. A toolbar across the top that is the full width of the window
(width:100%) and 30px in height.
2. A sidebar down the left hand side, that starts under the toolbar (so the
top border of it is 30px down the page). It's 138 px wide.
3. Then a content area takes up the rest of the window.
I want each of these objects to take up the full height and width of the
window (wherever a height and width is not set), regardless of the size of
the window, without ever going over the edges of the window. I will use
the overflow property to generate scroll bars if the content within each of
these objects is larger than the size of the window allows.
So this means that:
1. the sidebar's height essentially needs to be (100%-30px).
2. the content area's height needs to be (100%-30px), and its width needs
to be (100%-138px).
If I set the height of these two objects to auto, then they only go as far
down the window as there is content in them, which if that's less than
there is room in the window, then they don't reach the bottom of the window.
If I set the heights to be 100% then they stretch beyond the height of the
window by exactly the 30 pixels of the toolbar, and they force the window
scroll bars to appear - no matter what size i make the window.
I understand of course that I can't do this:
object {
height:100%-30px
}
(well at least it's my understanding i can't do that, and I tried it and it
didn't work, but feel free to correct me if I'm wrong there somehow).
I'm also having some (different) challenges with the width of the content
area, but let's come back to that - one thing at a time.
Clearly I'm missing something... What's the best practice for getting the
heights the way I want them?
It's difficult to define the _best_ practice. You'll quickly find out that
there are many ways to do anything you might want to do.
You don't necessarily have to make the left sidebar 100%-30px. If you set
the
top bar to position:absolute, other elements will go behind it. So, you can
make the left sidebar 100% height. 30px of it will be obscured at the top,
but
you can fix that with a margin on its first child
Re: [css-d] CSS to auto-adjust iframe content?
On Sat, Mar 10, 2012 at 5:20 AM, Keith Purtell keithpurt...@keithpurtell.com wrote: We have a client where I work whose online publication has one area on a page defined as an iframe to pull in data from Twitter feeds. Data comes in fine. But this area does/doesn't have vertical/horizontal scroll bars showing up depending on your screen resolution or device. His tech who handles this doesn't know how to fix it, and he's asking us for help. Normally our system is a PDF-to-PNG process (how we publish for Web) not HTML/CSS/JavaScript. We do some of the latter for a few situations. I never use iframes. Wonder if someone can just point me in the right direction for info on how he can revise CSS to adapt iframe to different visitor platforms? (No link available at this time.) Thanks! It's not really a CSS question, but a basic HTML question. Iframes have a scrolling property that defines whether or not the iframe should have scroll bars... http://www.w3.org/TR/html4/present/frames.html#adef-scrolling However, the default setting will give the iframe scroll bars. So, unless you see scrolling=no in the code, I think there might be something else going on there. Do you have some code you can share with us to help you solve the problem? -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com Keith __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] classes...?
On Fri, Mar 9, 2012 at 6:17 PM, David Thorp mailingli...@allaboutabundance.com wrote: Greetings all... again... ;) I'm familiar with some concepts from object oriented programming. In particular something which i think is called encapsulation. In languages like C++ you build classes which are portable mini programs that do stuff. You can pick them up and plug them into any C++ program, you don't have to know how it works, you just know what it does and its input and output and you can just use it without any fuss. I'm looking at how HTML and CSS work, and wondering if there's some way to do similar things like this in web development. I understand javascript and php are both object oriented languages, but I'm just talking about html and css. For example... with the help of Vince (ghodmode) and a couple of others on this list I have built a really nice simple list layout. (see: http://www.davidthorp.name/testingstuff/ghodmode-a.html). Say I know want now to pick that list up and put it somewhere in the middle of another larger page (something with a lot more stuff in it, say http://www.davidthorp.name/testingstuff/browser-0c.html). Or more accurately, I want to pick that list up and put different versions of it (ie. same layout but perhaps different numbers of columns, different alignments in each column, etc) into various locations in a more complex layout. Ideally I want to keep that list in it's own file and just refer to it from the main file. I don't want to have to copy and paste the code from the list file into the main file. If this was C++, that would be relatively simple. The class would have methods that you can call with different parameters for different situations (eg. number of columns, alignment in each column, whatever). You then add a #include statement at the beginning of your main file, that effectively makes the class part of your program, and you call it from the main file with method calls and parameters, in each different situation. So... my question is... Is this possible in web development at all? Is it possible just with plain HTML and CSS files? I'm not up to date with OO lingo, so I'm not sure if this is encapsulation exactly. HTML and CSS doesn't really comprise of a complete programming language, but there are _conventions_ that make it possible to create reusable HTML and CSS code. I emphasize the word conventions because there aren't any rules or controls in place to help you do it right. What I think you want to look at and learn is OOCSS. It can get pretty complex and without those controls in place, it's all on your discipline as a coder to do it right. The GitHub Wiki: - https://github.com/stubbornella/oocss/wiki The presentation: - http://www.stubbornella.org/content/2009/03/23/object-oriented-css-video-on-ydn/ Or just the slides: - http://www.slideshare.net/stubbornella/object-oriented-css YouTube to the rescue: - http://www.youtube.com/results?search_query=object+oriented+css If not, is this where I need PHP? Can I achieve the above with PHP? PHP isn't necessary, but it does make this kind of thing easier. And if the answer to that is no, then is there any way to achieve this concept at all? Or am I just barking up the wrong tree here? There's a million ways to achieve this in web development. They're all the right tree for someone. You just need to find the right tree for you... Get to barkin'... I think that means you have to start reading a lot. -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com Thanks! David. PS. for what it's worth the data in the records/rows in the list are ultimately going to be generated dynamically by PHP or other calls to a database, so the above question is only really about the table, the divs, and the css styling, not the data in the list. Hope that makes sense. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] classes...?
On Sat, Mar 10, 2012 at 1:33 AM, David Thorp mailingli...@allaboutabundance.com wrote: I've had a couple of private replies saying that this question is off-topic because it's nothing to do with css. If that's really the case, then I apologise for the noise, but before we come to that conclusion may i just clarify something... For the record, my two-cents-worth... You asked about creating reusable HTML/CSS code. That's absolutely, directly on-topic for this mailing list. You explained that your frame of reference came from your past experience with OO programming languages, but your question wasn't about those languages. -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com ... If, despite the above clarification, this question is still off-topic, then again, I apologise. Please feel free to tell me, and I'll pipe down :) Thanks! David. *in a similar way to how I've learnt recently, for example, (thanks to people on this list) that it's best not to use tables for layout. On 09/03/2012, at 9:17 PM, David Thorp wrote: Greetings all... again... ;) I'm familiar with some concepts from object oriented programming. In particular something which i think is called encapsulation. In languages like C++ you build classes which are portable mini programs that do stuff. You can pick them up and plug them into any C++ program, you don't have to know how it works, you just know what it does and its input and output and you can just use it without any fuss. I'm looking at how HTML and CSS work, and wondering if there's some way to do similar things like this in web development. I understand javascript and php are both object oriented languages, but I'm just talking about html and css. For example... with the help of Vince (ghodmode) and a couple of others on this list I have built a really nice simple list layout. (see: http://www.davidthorp.name/testingstuff/ghodmode-a.html). Say I know want now to pick that list up and put it somewhere in the middle of another larger page (something with a lot more stuff in it, say http://www.davidthorp.name/testingstuff/browser-0c.html). Or more accurately, I want to pick that list up and put different versions of it (ie. same layout but perhaps different numbers of columns, different alignments in each column, etc) into various locations in a more complex layout. Ideally I want to keep that list in it's own file and just refer to it from the main file. I don't want to have to copy and paste the code from the list file into the main file. If this was C++, that would be relatively simple. The class would have methods that you can call with different parameters for different situations (eg. number of columns, alignment in each column, whatever). You then add a #include statement at the beginning of your main file, that effectively makes the class part of your program, and you call it from the main file with method calls and parameters, in each different situation. So... my question is... Is this possible in web development at all? Is it possible just with plain HTML and CSS files? If not, is this where I need PHP? Can I achieve the above with PHP? And if the answer to that is no, then is there any way to achieve this concept at all? Or am I just barking up the wrong tree here? Thanks! David. PS. for what it's worth the data in the records/rows in the list are ultimately going to be generated dynamically by PHP or other calls to a database, so the above question is only really about the table, the divs, and the css styling, not the data in the list. Hope that makes sense. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] classes...?
On Sat, Mar 10, 2012 at 6:43 AM, Tim Arnold tim.arn...@gmail.com wrote: ... And that name! Though she named it OOCSS, it is most certainly not object oriented in the way that a real OO language is. To call it that has just muddied the waters between developers and front end people and kind of made us (front end folks) sound like we don't know what we're talking about. Sigh. You're absolutely right. OOCSS isn't Object Oriented... it isn't even programming. But I think the name is okay. There are some valid comparisons between OO concepts and OOCSS conventions. It's all just buzz-words and marketing anyway. They don't mean anything until we read and experiment and create for hours and hours to understand the underlying concepts. In this field, we live on a never-ending stream of meaningless phrases. Here are a few more examples: Dynamic HTML Object Oriented Programming Web 2.0 AJAX Semantic Web Rude Web (http://fm.no-ip.com/Auth/rudeweb.html) Social Network Progressive Enhancement Graceful Degredation Progressive Degradation Responsive Design Adaptive Design That said, HTML and CSS are not object oriented and, as far as I can know, never could be. Certainly bits of HTML and CSS can be created using OO languages, but that's about web development and CMSes, not CSS. I also absolutely agree that HTML and CSS are not object oriented. Strictly speaking, I'd say that coding HTML and CSS shouldn't even be considered programming. But we can create our code in a way that makes it easier to reuse. The cascade allows us to implement some form of inheritance and interfaces. I'm sure there are other comparisons that could be made, too. -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com Best, Tim -- tim.arn...@gmail.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Object height and width issues
On Sat, Mar 10, 2012 at 9:05 PM, David Thorp mailingli...@allaboutabundance.com wrote: Duh. Brilliant. Now that you present that, it's pretty obvious. Haha. Thanks. But now we have another challenge. How do we make the sidebar horizontally resizable, without disappearing behind the headerbar and content (or covering them up)? ie. it needs to move the left edge of those as we move the right edge of the sidebar. That's a job for Javascript. I spent a good couple of hours trying a few things this afternoon, and I've tried a few more just now on your code... without success. :( The problem seems to be because the sidebar is positioned absolute-ly, we have to set the content and headerbar to absolute positioning as well...? Yep. Well, not the headerbar, but the content and sidebar have to be positioned absolutely because we don't have any way to determine the remaining vertical space in the window after we subtract the height of the header. If you wanted to give the header a percentage height (like 5%) instead of a fixed height, you wouldn't need the absolute positioning. There seems to be no way to make the left edge of the content and headerbar relate to the (movable) right edge of the sidebar...? What do you think? Well, you would have to use Javascript to monitor the mouse position during throttled click and drag mouse events on the edge of the sidebar and use that information to resize the sidebar and the content area. Way off-topic for this list... and it makes my head hurt. On the other hand, if you just want to toggle the sidebar open or closed when clicking on a grippy -type thing, that would be much easier. -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com Gotta say, it's frustrating that CSS seems to be so unintuitive in some ways, but I'm grateful for the likes of you to help. So thanks, yet again... David. On 10/03/2012, at 11:45 PM, Ghodmode wrote: On Sat, Mar 10, 2012 at 12:55 AM, David Thorp mailingli...@allaboutabundance.com wrote: Hi again Vince, Ok, well as recommended by you in the other thread, I've started over, and in this case I'm now using your code below as a starting point. As I noted in a previous reply, it seems to be right on the mark... except I've run across one little snag... See here: http://davidthorp.name/published/browser-0d.html ...and the corresponding css here: http://davidthorp.name/published/css/browser-0d.css I've done as you described here: You don't necessarily have to make the left sidebar 100%-30px. If you set the top bar to position:absolute, other elements will go behind it. So, you can make the left sidebar 100% height. 30px of it will be obscured at the top, but you can fix that with a margin on its first child. But the problems now begin when I add overflow-y: scroll; to my sidebar. It does manage to scroll everything perfectly except for the fact that the top 30 pixels of the scroll bar are obscured by the top bar... and so it just looks a little weird. I've tried a few things, without success. I'd very much like to know how to get the scroll bar positioned correctly. I figured out how to do it using absolute positioning. Rather than set a vertical size on the elements, I just set their top and bottom positions. The top position is the height of the toolbar and the bottom is 0. It seems to work fine in all of the relevant desktop browsers. http://www.ghodmode.com/experiments/sidebar/ -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com Note: I've aded opacity: 0.8 to my top bar (toolbar) so you can see the scroll bar behind it. In the finished version of this there will be no transparency (ie. it'll be opacity: 1;). The problem isn't the fact that it shows behind the toolbar. The problem is just that it's not positioned correctly. Thanks again for your help! David. On 01/03/2012, at 1:54 PM, Ghodmode wrote: On Sun, Feb 26, 2012 at 3:58 PM, David Thorp mailingli...@allaboutabundance.com.au wrote: Greetings all... I'm relatively new to both CSS, and this list, but I've had some very positive experiences on other lists for other programming tools, so I'm hoping this list will be similar :) I've been learning css from the w3schools website, which seems to be pretty good as a crash course, but I'm having some difficulties getting positioning and dimensions of objects to work the way I want. I'm not sure if this is because I don't properly understand the rules and concepts, or I'm just getting syntax or something simple like that wrong. If anyone can help me I'd be grateful... I have a number of div objects arranged in various positions: 1. A toolbar across the top that is the full width of the window (width:100%) and 30px in height. 2. A sidebar down the left hand side, that starts under the toolbar (so the top border of it is 30px down the page
Re: [css-d] Vertical Text Alignment confusion
On Fri, Mar 9, 2012 at 9:47 AM, David Thorp mailingli...@allaboutabundance.com wrote: Brilliant on both counts. Thanks! Except... Now (in Safari both mac and windows) I'm getting little resize boxes on each cell in the list. I also notice these on the on the grey side bar and at the bottom of the list as well. They seem to show up anywhere i've set overflow, although i thought they were only for when I set resize. I'm missing something here... once again. I added the properties to my zstripes demo pages (all 3) and made the width of the first column unreasonably small. I didn't see the resize boxes. I can only guess that you're seeing a resize handle, but that should only happen in text areas (I think). If that's what it is, setting resize:none should fix it, but I'm not sure exactly what you're seeing. Note: I don't have an OSX environment to test with. On the other hand, I'm getting wildly different results in IE9 with just about everything. (I don't really care about IE8 or below as this is ultimately going to be an internal web application for which I will specify minimum requirements = IE9) In IE9: • the column widths don't seem to be following the rules • the graphic behind the Organisation Name heading is wrong. • the borders between certain objects are white instead of black • it doesn't seem to be following the sans-serif fonts i've requested. On my demo pages, the column widths are following the rules in IE9. None of the things we've discussed so far should have any effect on borders, graphics, or fonts. I've heard of minor inconsistencies between browsers, but this seems over the top. Is this typical? Why don't CSS and HTML just do what they're told? Ahh... If only it were that simple... Ya I guess it's kind of typical. Strictly following recommended practices (like avoiding using tables for layout) definitely minimizes inconsistencies, but they're always there. I think you're already getting lost in your deeply-nested tables and overlapping elements. This is why I created demo pages instead of trying to work directly with your code. Well, again thanks for all the help. Any further direction here will be equally appreciated! If I were in your situation, I'd start over with a pencil and a piece of paper. Draw a picture of what you want the page to look like, then add one part at a time. Using pencil and paper prevents you from getting hung up on things like colors and fonts. Those are minor details that can easily be corrected when the major stuff is in place. It sounds like a lot of work, but I think its easier than fixing what you have right now. -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com David. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] extra blank rows in table to fill window.
On Fri, Mar 9, 2012 at 9:53 AM, David Thorp mailingli...@allaboutabundance.com wrote: Brilliant, that's hit the nail on the head, at least in Safari (both Mac and Win). It doesn't seem to be working in IE9 though. Did I miss something? I can see you've specifically put code in there for -ms-... (That's for IE, right?), so how come not working? :( You didn't miss anything, but I did. I forgot to put in a background image for my IE fix. It's fixed now. Currently Internet Explorer has no support for CSS gradients. I've read that the -ms- vendor prefix will work in IE10, but I haven't set up an IE10 testing environment yet. Does anyone on the list have IE10 set up? If so, could you try out http://www.ghodmode.com/testing/dthorp/zstripes/v3 and tell us if the gradient works? -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] extra blank rows in table to fill window.
On Mar 9, 2012 4:36 PM, Markus Ernst derer...@gmx.ch wrote: Am 09.03.2012 09:12 schrieb Ghodmode: http://www.ghodmode.com/testing/dthorp/zstripes/v3 That's very cool! I have no IE10 to test, though. I also like the ellipsis thing. If you remove the 10% from the first-child of the rows, the effect is even more impressing, when some longer words are introduced or the font size is increased in the browser. Ya, the 10% was only there because I was trying to reproduce the bug described previously. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical Text Alignment confusion
On Thu, Mar 8, 2012 at 12:53 PM, David Thorp
mailingli...@allaboutabundance.com wrote:
Greetings all,
Thanks again to those who helped me last week. A couple of new problems now.
First, here's the code:
http://www.davidthorp.name/testingstuff/browser-tables-2.html
http://www.davidthorp.name/testingstuff/css/browser-tables-2.css
My confusion lies with the display of text in various situations...
Vertical alignment of labels relative to fields in forms. Eg. On the right
hand side of the page the Organisation Name label is aligned with the top
of the field entry box, when I'd like it to be centre-aligned (vertically).
I've tried everything I can think of but I'm not getting it.
The text in the label is vertically aligned within its line-height. So, you
just need to have the line-height set to the same as the height of the input
text boxes.
For example, this works:
/* from http://www.davidthorp.name/testingstuff/css/browser-tables-2.css at
* about line 207 */
.form label, .form input {
display: block;
width: 60%;
line-height: 1.8em;
height: 1.8em;
}
Note that I don't know what the default height of an input box is, so I set it
explicitly.
If the window is made small enough such that the column width of the list is
not wide enough to hold all the text (eg. All About Abundance P/L in the
first row of the list), then it wraps the text and doubles the height of the
row. I would like it, instead, to just hide whatever text it can't fit and
NOT adjust the table row height. This is the same with the table heading
(Organisation Name) as well. Again, I've tried everything I can think of
but I can't seem to stop it from wrapping.
The white-space property is used to prevent word wrapping:
/* http://www.davidthorp.name/testingstuff/css/browser-tables-2.css at about
* line 158 */
.list td {
padding: 1px 10px;
white-space: nowrap;
}
ref: http://www.w3.org/TR/CSS21/text.html#propdef-white-space
--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com
I have some other questions relating to this entire page, but I'll put them
in separate emails so as not to make one too long.
Any guidance would be most appreciated. :)
Thanks!
David.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] extra blank rows in table to fill window.
On Thu, Mar 8, 2012 at 1:22 PM, David Thorp mailingli...@allaboutabundance.com wrote: Hi all, Another question on my current project... Again, first, here's the code: http://www.davidthorp.name/testingstuff/browser-tables-2.html http://www.davidthorp.name/testingstuff/css/browser-tables-2.css Also look at this image for reference: http://www.davidthorp.name/testingstuff/FinderWindow.png So here's the thing. That Finder list shows alternating table rows (white/light blue) regardless of if there's any data in the row. Empty table rows fill the window height if the window is larger than the number of rows holding data. I want the same effect in the list part of my page. Note that the container for the list is set to overflow, so a (vertical) scrollbar appears if the window is too small (vertically) for all the rows with data to appear. But any solution we come up with for displaying the empty rows when the window is taller than the data needs to ensure no scroll bar appears then. I can't even begin to make sense of that mess of deeply nested tables at your site. This is one of the drawbacks of using tables for layout. It's hard for others to understand your code and will probably even be hard for you to understand it if you return to it in the future after not working on it for a while. I managed to put together a very simple demo of the effect you're looking for: http://www.ghodmode.com/testing/dthorp/zstripes/ It uses a background image like in your second idea, but it sets the background on both the table and its container. This demo solves the problem of changing row heights using the CSS3 property background-size. This way you only have to make changes in your CSS if you change the row height. Unfortunately, this isn't supported in IE8 or earlier. While we're relying on CSS3, it occurs to me that we should be able to implement this without using images at all if we use a CSS3 gradient with several color stops. I haven't tried it yet, though. You can support most browsers with a fixed height and line-height that matches the height of a row in your background image, but like you already noted, you would have to change the image if you changed the height of a row. -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com I've thought of a couple of ways I might accomplish this. 1. put another table behind the data one, with the same settings but no data in it. This could be a very large number of rows. Trouble is the presence or existence of the scroll bar is defined by the overflow setting of the container object, and since both tables (the one with data and the one with empty rows) are in the same containing object I can't win. I'm trying to get my head around the idea that maybe I can somehow have two container objects with different overflow settings, but that's starting to do my head in and I'd like to see if there are any other common/recognised methods of achieving this. 2. I could create a small jpeg that looks like two blank rows of the same table and set it to repeat. But then if I decide to change the row height of the table rows for the data list, then I have to put in a different image, and that'll just get messy. Each of these has issues, or is potentially pretty complicated, and I keep telling myself surely there's an easy way to do this. Logically I just think there should be some way to create a table with an indeterminate number of rows and that just grows automatically (by increasing the number of rows, not by increasing the height of each row) to fill the available space, kinda like an image set to repeat does. Has anyone ever done something like this before, and is there an easy way to do it that I'm missing? Thanks! David. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical Text Alignment confusion
On Thu, Mar 8, 2012 at 5:54 PM, David Thorp
mailingli...@allaboutabundance.com wrote:
Hi Vince,
Thanks for another helpful reply. That all makes sense.
One small problem with the nowrap...
See this:
http://www.davidthorp.name/testingstuff/browser-0b.html
http://www.davidthorp.name/testingstuff/browser-0b.css
I've created a couple of really long values in the list and the problem is
the nowrap makes the length of the text override the width of the column.
How do i get the column width to override the text and just cut the text off
in each cell (td) not over the whole row?
Sorry, I forgot about that. You'll want to set the table-layout property for
the affected table to fixed (at about line 148 of
http://www.davidthorp.name/testingstuff/css/browser-0b.css). Then set the
overflow:hidden for the affected table cells (line 160ish)
(Then if there's a way to make it automatically add an ellipsis (...) at the
end of a row of text that's been cut short, that would be even more awesome.
ie. a really really rea…) ;)
There's a text-overflow:ellipsis property you can set. Support isn't perfect,
but I think other browsers will simply ignore the property. So, browsers that
support it will show the ellipsis and browsers that don't will just cut off the
text. I haven't tested this thoroughly:
.list td {
padding: 1px 10px;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
(also note the vendor-specific -ms- and -o- versions)
ref: https://developer.mozilla.org/en/CSS/text-overflow
--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com
Thanks!
David.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] extra blank rows in table to fill window.
On Thu, Mar 8, 2012 at 6:36 PM, David Thorp mailingli...@allaboutabundance.com wrote: I agree, the nested tables are not great, but I hit all sorts of problems trying to do it with divs and floats, and while I had a couple of helpful tips from people on this list about that I haven't got my head quite around them yet. A couple of people suggested it's not so bad to do it in tables, but I'd still like to do it without them. So I'll be returning to that particular goal later. In the meantime, thanks for your demo, although that doesn't really achieve what I'm trying to achieve. The purpose is for each row of the table to be alternating colors. It's not just a pretty pattern to sit behind the table. hmmm... The background-size property is supported in Chrome and Safari, but they don't seem to render it as expected. Firefox and IE9 render it as you described with the colors accurately aligned with the rows, but Chrome and Safari don't. I can't tell exactly why it's happening. Looking at computed styles in Chrome shows that the background-size is 1px larger than it should be. Another surprise, Firebug doesn't show a computed value for the background-size property. I can only guess it's a mathematical precision thing. Changing the em values only slightly (from 1.3/2.6 to 1.2/2.4) corrects the problem in Safari and Chrome. Look again: http://www.ghodmode.com/testing/dthorp/zstripes/ Here's version 2, which should work everywhere necessary, but would require you to change the image if you changed the row height: http://www.ghodmode.com/testing/dthorp/zstripes/v2/ Maybe you're onto something with the CSS3 gradient idea. Perhaps the ideal solution would be somehow programmatically generating the background image to match the row height. Perhaps I'll look into that. Any thoughts? I'll also see if I can come up with a version 3 that uses the CSS3 Gradients. -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com David. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] extra blank rows in table to fill window.
On Thu, Mar 8, 2012 at 7:57 PM, Ghodmode ghodm...@ghodmode.com wrote: ... Look again: http://www.ghodmode.com/testing/dthorp/zstripes/ Here's version 2, which should work everywhere necessary, but would require you to change the image if you changed the row height: http://www.ghodmode.com/testing/dthorp/zstripes/v2/ ... I'll also see if I can come up with a version 3 that uses the CSS3 Gradients. Here's version 3. Using a CSS3 linear-gradient. As expected, there's no support in Internet explorer, so I've added some rules that switch to fixed height and line-height in IE. Enjoy: http://www.ghodmode.com/testing/dthorp/zstripes/v3/ And I couldn't have figured it out without these: http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/ https://developer.mozilla.org/en/CSS/linear-gradient#Browser_compatibility -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Custom Theme Problem
On Tue, Mar 6, 2012 at 5:17 PM, Alan Vickery a...@newebirl.ie wrote: Hi This is my first time posting to css.discuss. I was pointed here by wordpress.org I'm building (or trying to) a completely custom theme from scratch. Its taking me a while to do but I think a better understanding of the themes will pay off in the long run. Me too. I'm currently trying to get my head around the plugin API so that I can understand how to add some useful theme options to the theme... ugh! Anyway, I'm having a problem that I just can't get the answer to. The main content has a content box with 3 div's in it. The top and bottom div is just for an effect on the site while the middle div contains the page and post content. The problem is, I can't close the gap between the 3 div's to give me the effect I want. Here is the site: http://thevickerys.eu/ as you can see on the home page and the sample page the gap is closed between the first and second div bit I can't close the lower div up to the second div. On the next sample page I can't close the gap between all 3 div's. Here is the css that related to the 3 divs. ... I have been at this for days and I can't move on until I fix this. its driving me nuts and I'm starting to loose hope in it. Can anyone help??? I currently only see the problem on the main page. If you add overflow:hidden to div.content, it prevents the margin on div.content from collapsing with the margins of its child elements and fixes the problem. The bottom margin on p.location is extending beyond the bottom of div.content and effectively pushing div.contentborderbottom down. -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com -- Alan Vickery __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Custom Theme Problem
On Tue, Mar 6, 2012 at 9:22 PM, HallMarc Sales
sa...@hallmarcwebsites.com wrote:
Try this instead
p.location {
text-align: left;
padding-left: 20px;
margin: 0;
padding: 12px 0 12px 20px;
}
Margins apply to the outside of an element so no background is inherited by
the space created while padding is applied inside the element and as such
is within the background area.
That'll definitely work, but it may create some (admittedly minor)
inconsistencies if the user changes font size... This one paragraph will be
different from all of the others.
I can see that the 12px top and bottom padding match the _computed_
top and bottom
margins, but the user-agent stylesheet uses em for the top and bottom margins.
If you want to trade margin for padding, I recommend you use the same relative
unit that the default stylesheet uses.
So, there are two solutions (so far).
Set overflow:hidden on the containing block:
div.content {
overflow: hidden;
}
The only potential problem here is if you actually want to see a child of the
content block that is positioned outside of the content block.
Or change the margin on the problematic element to padding:
p.location {
margin: 0;
padding-left: 20px;
padding-top: 1em;
padding-bottom: 1em;
}
Another problem I see with the second solution is that you have to change your
CSS if another element ends up at the bottom of the container.
--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com
Thank you,
Marc Hall
HallMarc Websites
www.HallMarcWebsites.com
610-446-3346
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] evenly distribute a horizontall menu
On Tue, Mar 6, 2012 at 1:30 AM, Michael Beaudoin mich...@ba-doyn.com wrote:
I have a list that makes a horizontal menu. How would it be best to evenly
distribute the menu items horizontally as not all the menus are the same
width?
I'd say the *best* way would be to use CSS tables, but then you'd lose
support for IE7.
So, the next best solution is to specify a width for the list items.
It could depend on the how big your menu area is, how many menu items you have,
how long the menu names themselves are, and how your menu area is sized (fixed
width, pixels, ems, etc), but you can probably use percentages.
This might be a good start:
nav class=menu
ul class=menu_list
li class=menu_item
a class=menu_link href=#somewheremenu item/a
/li
li class=menu_item
a class=menu_link href=#somewheremenu item/a
/li
li class=menu_item
a class=menu_link href=#somewheremenu item/a
/li
li class=menu_item
a class=menu_link href=#somewheremenu item/a
/li
li class=menu_item
a class=menu_link href=#somewheremenu item/a
/li
/ul
/nav
nav.menu, ul.menu_list {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
li.menu_item {
width: 20%;
}
a.menu_link {
display: block;
text-align: center;
max-width: 100%;
}
--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com
Thanks,
Michael
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] evenly distribute a horizontall menu
I forgot... add list-style: none to either the ul or the li ... you
probably already knew that, though
On Tue, Mar 6, 2012 at 11:33 AM, Ghodmode ghodm...@ghodmode.com wrote:
On Tue, Mar 6, 2012 at 1:30 AM, Michael Beaudoin mich...@ba-doyn.com wrote:
I have a list that makes a horizontal menu. How would it be best to evenly
distribute the menu items horizontally as not all the menus are the same
width?
I'd say the *best* way would be to use CSS tables, but then you'd lose
support for IE7.
So, the next best solution is to specify a width for the list items.
It could depend on the how big your menu area is, how many menu items you
have,
how long the menu names themselves are, and how your menu area is sized (fixed
width, pixels, ems, etc), but you can probably use percentages.
This might be a good start:
nav class=menu
ul class=menu_list
li class=menu_item
a class=menu_link href=#somewheremenu item/a
/li
li class=menu_item
a class=menu_link href=#somewheremenu item/a
/li
li class=menu_item
a class=menu_link href=#somewheremenu item/a
/li
li class=menu_item
a class=menu_link href=#somewheremenu item/a
/li
li class=menu_item
a class=menu_link href=#somewheremenu item/a
/li
/ul
/nav
nav.menu, ul.menu_list {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
li.menu_item {
width: 20%;
}
a.menu_link {
display: block;
text-align: center;
max-width: 100%;
}
--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com
Thanks,
Michael
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu Hovering Issue
On Tue, Mar 6, 2012 at 10:08 AM, cssl...@bassonhook.com wrote: Was wondering if anyone could help me figure out why my sub menu has a delay when hovering from the original menu. Sometimes it works but most times it takes about 3-5 hovers before sub menu stays visible. Link is here: http://www.fnfsportsfishing.com. By the way, I created it using a css3 generator that I purchased and the support there is not very good which is why I thought I'd try here. I think it's because of the positioning of your submenu. ul#navmenu ul has a top:103% and I think that extra 3% creates a little gap between the menu title and the menu contents. When the mouse cursor is over the gap, the :hover on ul#navmenu li is no longer there and the submenu disappears. _If_ I'm right, you should be able to fix the problem by changing that 103% to 100%. -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image not displaying in correct position
On Fri, Mar 2, 2012 at 3:36 AM, Erica Cavin ecav...@verizon.net wrote: On this page: http://www.risingstarquilters.org/join_update.html the small arrow that should appear next to Back to questions displays far to the left in Chrome and Safari. It displays properly in Firefox and IE. Any thoughts as to why? It looks like IE9 displays the same as Chrome and Safari, but IE8 displays the same as Firefox For starters, it's not a background-image. It's a list-style-image, so the background-position property doesn't have any affect. The list-item is as wide as the block and the text is aligned to the right. It looks like Firefox puts the bullet to the left of the text and the others put it to the left of the block. I hate to say it, but I think Firefox's presentation is wrong in this case. The spec says The marker box is outside the principal block box.. Since the left of the list item's principal block box is all the way over on the left, that's where the bullet should be. For the desired effect, you should set list-style-position:inside. This will have no effect in Firefox, but the others will render the bullet as the first inline box in the principal block box as defined in the spec. Ref: http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com CSS here: http://www.risingstarquilters.org/styles2.css Thanks! Erica -- Attic Windows Web Design http://atticwindowswebdesign.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background image not displaying in correct position
This bug was reported in January 2000: https://bugzilla.mozilla.org/show_bug.cgi?id=25291 After twelve years and only 13 comments, I'd guess that no one cares enough to fix it :( -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com On Fri, Mar 2, 2012 at 12:17 PM, Ghodmode ghodm...@ghodmode.com wrote: On Fri, Mar 2, 2012 at 3:36 AM, Erica Cavin ecav...@verizon.net wrote: On this page: http://www.risingstarquilters.org/join_update.html the small arrow that should appear next to Back to questions displays far to the left in Chrome and Safari. It displays properly in Firefox and IE. Any thoughts as to why? It looks like IE9 displays the same as Chrome and Safari, but IE8 displays the same as Firefox For starters, it's not a background-image. It's a list-style-image, so the background-position property doesn't have any affect. The list-item is as wide as the block and the text is aligned to the right. It looks like Firefox puts the bullet to the left of the text and the others put it to the left of the block. I hate to say it, but I think Firefox's presentation is wrong in this case. The spec says The marker box is outside the principal block box.. Since the left of the list item's principal block box is all the way over on the left, that's where the bullet should be. For the desired effect, you should set list-style-position:inside. This will have no effect in Firefox, but the others will render the bullet as the first inline box in the principal block box as defined in the spec. Ref: http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com CSS here: http://www.risingstarquilters.org/styles2.css Thanks! Erica -- Attic Windows Web Design http://atticwindowswebdesign.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Object height and width issues
allows them to be next to
* the side bar. Without this, block elements inside the content
area would be
* 100% wide and make the content area too wide to be next to the
left_bar. It
* would be forced below the left_bar.
*/
div.content * {
float: left;
}
--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com
Thanks for any help!
David.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] linked current page help
On Sun, Feb 26, 2012 at 6:54 AM, Stuart King zinlo...@gmail.com wrote:
URL:
http://skingdesign.com/rc_site/pages/rec_lemony.html
I cannot figure out how to make the current page underlined and with a
darker color (#6B382B) so it stands out.
Since each of your recipe pages is in a paragraph element, add a class to that
paragraph element for the active page.
For example, your stylesheet can contain this:
div.c_33 p.active {
color: #6b382b;
text-decoration: underline;
}
Then, in rec_lemony.html:
p class=active... Lemony Mush.../p
--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com
Help.
Thank you,
Stuart
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Need help with space between nav bar and content
On Mon, Feb 27, 2012 at 1:25 PM, Theresa Jennings theresajennings2...@gmail.com wrote: Here's a sample of the interior pages (the home page is handled a little differently): http://mdh-test.com/HealthySkin/Healthy_Skin_Story.shtml Style sheets, so you don't have to look for them: mdh-test.com/HealthySkin/main.css mdh-test.com/HealthySkin/ddsmoothmenu.css In Safari and Chrome (Win and OSX), the white #box juts up against the bottom of the text of the navigation. There should be a 1px space between the bottom of the nav bar and the top of the white box, like there is on the home page. It does it perfectly in all the other browsers. If I add extra margin pixels in the CSS to make the white box go down in Safari and Chrome, then it goes down a bunch in FF. Bleccch. On the home page, there is no #box rule. I have validated the html (woot!), and the css validates except for a few things having to do with the smoothmenu and the webkit hacks. I've been futzing with the original code. Can you help me, please? I imagine I'm going to need to hack the CSS a little. The short answer: Change your selector for the #box (about line 285 in main.css) from: #box to: div#wrapper #box Explanation: It looks like you're having a weird specificity problem and you might have even stumbled into a bug in Webkit that I haven't seen before. In your main stylesheet, the #box is set with a top margin of 8px. In your ddsmoothmenu stylesheet the '*' selector is set with margin 0. There's no way that the general asterisk selector should override the more specific #box selector, but chrome's developer tools show that is exactly what's happening. The even more specific selector div#wrapper #box seems to correct the problem, but this shouldn't be necessary at all. This is an interesting problem. I'm going to need to experiment with it and see if I can reproduce the problem on a simple page. Ref: http://www.w3.org/TR/CSS2/cascade.html#cascading-order I'm curious... Why are you creating your 1px space like that? I see the -7px bottom margin on the bottom of your navigation ul and the 8px top margin on div#box leaves the 1px you wanted, but why not just use a 1px margin on either the nav ul or the #box? Thank you. -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com Theresa Jennings __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Need help with space between nav bar and content
Please ignore my previous post on this thread... it's entirely wrong. See below for more detail. On Mon, Feb 27, 2012 at 7:01 PM, Ghodmode ghodm...@ghodmode.com wrote: On Mon, Feb 27, 2012 at 1:25 PM, Theresa Jennings theresajennings2...@gmail.com wrote: Here's a sample of the interior pages (the home page is handled a little differently): http://mdh-test.com/HealthySkin/Healthy_Skin_Story.shtml Style sheets, so you don't have to look for them: mdh-test.com/HealthySkin/main.css mdh-test.com/HealthySkin/ddsmoothmenu.css In Safari and Chrome (Win and OSX), the white #box juts up against the bottom of the text of the navigation. There should be a 1px space between the bottom of the nav bar and the top of the white box, like there is on the home page. It does it perfectly in all the other browsers. If I add extra margin pixels in the CSS to make the white box go down in Safari and Chrome, then it goes down a bunch in FF. Bleccch. On the home page, there is no #box rule. I have validated the html (woot!), and the css validates except for a few things having to do with the smoothmenu and the webkit hacks. I've been futzing with the original code. Can you help me, please? I imagine I'm going to need to hack the CSS a little. The short answer: Change your selector for the #box (about line 285 in main.css) from: #box to: div#wrapper #box Explanation: It looks like you're having a weird specificity problem and you might have even stumbled into a bug in Webkit that I haven't seen before. In your main stylesheet, the #box is set with a top margin of 8px. In your ddsmoothmenu stylesheet the '*' selector is set with margin 0. There's no way that the general asterisk selector should override the more specific #box selector, but chrome's developer tools show that is exactly what's happening. I misunderstood what I read in Chrome's developer tools. It's not the asterisk selector that's overriding the top margin on #box. In your stylesheet at about line 293, you have a media query that will only be accepted by webkit browsers. It's overriding your #box top margin with a 1px top margin. That, along with the -7px bottom margin on the navigation, makes the #box move up under the bottom of the navigation text. I agree with Markus Ernst. As this example proves, hacks like these are likely to cause problems. Have you seen situations where Firefox and Webkit interpret CSS differently? I've never heard of any significant differences other than Webkit's support for newer CSS3 features. -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make drop down third level links always remain up top
On Fri, Feb 24, 2012 at 8:48 AM, Neal Watkins nealwatk...@gmail.com wrote: on the link belowhttp://constructweb.com/test/index.html hover on the nav - discover san diego on the third level links that show up on hover is there a way to make them all have show up the same horizontally ( just under the header ) instead of relative to there 2nd level link? It shouldn't be a problem. Set float:left on the li that you want to be horizontal. Then give the ul that contains them a width sufficient to allow them to be horizontal. I'm not sure exactly how you want it to look, but I played around with your site a little bit using Firebug. I added a horizontal class to the ul that contains the Menu Features submenu. Then I set float:left on ul.sd-main-navm.horizontal li and width:1000px on ul.sd-main-navm.horizontal. If that doesn't get you closer to how you would like it to look, draw a picture of how you want it to look and put it on that test site for us to see and I'm sure we can come up with a solution. -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com Thanks for taking a look Neal __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Cross Browser Font Rendering Issues
On Sat, Feb 25, 2012 at 4:50 AM, Matthew Willis matt...@em-w.com wrote: Hi CSS-heads, I'm working on a site map, using background images with lines connecting the various site pages. The problem I'm having is that fonts render differently over different operating systems and browser. I thought that by using px rather than em for font-size would control the height of the fonts, but that hasn't been the case. Does anyone know of any strategies for this, short of replacing the text with images? Here is what i'm working on to get a better idea of what I'm talking about. http://fat-hair.com/2012stage/ftr-sitemap.php It already seems to line up well for me on Linux and Windows, but I noticed that you aren't setting the line-height of the text and you're adjusting the vertical position of the background image down a little. That was to correct for the height of the text being taller than the height of the image, right? A detail that might help you out is that text is vertically centered on its line height. You can even make the line-height smaller than the font size. So, if your background image is 11px, you can make your line-height 11px also and it should line up pretty well. This could make text overlap vertically a little, but that's not a problem here because you're using header elements for your text and their default margins prevent the text from overlapping. I tried it out on your site and it worked well, but I also had to change the vertical background position to 0. And if that doesn't work ... You're using the generic font family sans-serif, so you're letting the OS/browser decide what font to use. It's more likely that they're different fonts than that they're the same fonts rendering differently. You would probably be better off using web safe fonts, which means that they're likely to be available on all of your target platforms. A web search for web safe fonts will help you decide what fonts to use. I just did it and here's my first result: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com Thank you! Matthew __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] need a little help with links
On Sat, Feb 25, 2012 at 4:28 AM, Melinda Odom i...@designhosting.biz wrote:
Hi,
I have the middle links on this page setup and working when you click on one
of the links and it goes to that page that link stays a changed color.
http://www.designhosting.biz/design.html
I am trying to do the same thing for the top menu but it doesn't work. I even
tried adding the id and class from the middle links to the top links and it
still will not work.
Any help is greatly appreciated.
In your middle links (inside of div#subPageLinks) it looks like your default
color is defined for the links that have the class subLinks and the active link
is the one without the class. That seems a little backwards to me, but hey...
whatever works :)
To do your main navigation the same way, define the color for the current page
in your CSS. It should be something like
div#nav a { color: #00ccff; }.
Then give the links in your navigation bar (div#nav) a common class and set a
color on that class as the default color. If the class was mainLinks, then it
might be something like
div#nav a.mainLinks { color: #99; }.
Finally, in each page remove the class from the link for that page's link.
For example, in design.html, the Design link wouldn't have the class mainLinks.
A more conventional way to do it would be as Tom Livingston suggested. Use a
class just for the active page. I like to use the class active for this. In
each page, add the active class to the active page's link, then in your
stylesheet you could add the highlight color:
div#nav a.active { color: #00ccff; }
This is the way I actually recommend doing it and you should probably do it this
way for your middle links, too.
--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com
Thank you!
Best Regards,
Melinda L. Odom
1605 Dechard Street
Van Buren, Arkansas 72956
Cell: 479-226-6040 CST
Design Hosting, Inc.
i...@designhosting.biz
Join Me on Twitter
Amazon Wish List
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] :: desktop and portable devices ::
On Tue, Feb 21, 2012 at 1:01 PM, David Laakso laakso.davi...@gmail.com wrote: Greetings from San Juan... Constructive comments and suggestion on the index page of this site gratefully appreciated... http://ccstudi.com/site/portfolio/x/ Looks good from here. Default Android browser 2.3.7 iPod Touch 3.1.3. Firefox mobile 10.0 and 12.0a1 is executing the Javascript a little slow, but that probably has more to do with Firefox than with your code. I'm curious about the 102% font size. I've seen you use it before. Is that the implementation of a trick I don't know about, or do you just want the font to be a little bigger than the users' settings? Thank you. -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com aside This end: Android/2.2.2 running Opera Mobile and Opera Mini; and, HP Pavilion g4 Notebook PC. Thanks. Best, Elvis Crispo Puerto Rico -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Inappropriate uses of CSS3
On Sun, Feb 19, 2012 at 5:49 PM, Barney Carroll barney.carr...@gmail.com wrote: ... Elliot Jay Stocks' idea of transitioning all layout metrics on viewport resize [1] is definitely a fun trick, but in practice the effect is neither conducive to better user experience nor aesthetically pleasing. This trick is being used all over the place now – even Gmail does it. hmmm It might be fun to try to create some stupid CSS3 tricks sites. Just how obnoxious could we get? We could provide Paceaux with some great examples and play around with some things we would never do on a production site. I'm thinking of links that zoom in and do a full 360 degree rotation on hover ... ... maybe a bouncing ball to follow along with the text on a site like in some karaoke videos ... ... how about an animated cursor implemented in CSS3 http://joescursors.tripod.com/NeonCrPg.htm ... Hey! This is a great time to start up that discussion of allowing HTML in mailing list email again! :P -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com [1] http://elliotjaystocks.com/blog/css-transitions-media-queries/ Regards, Barney Carroll barney.carr...@gmail.com +44 7429 177278 barneycarroll.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 showing gap
On Mon, Feb 20, 2012 at 12:33 AM, Ed Goodson e...@copywritecolombia.com wrote: Hi all I have been able to replicate the gap in ie7 using a third party ie testing program I attach the screen shot here: http://alluresurgerycenter.com/ie7.jpg Why is there this gap in ie7? www.alluresurgerycenter.com Thank you Short version: Set text-align: left for li.haschildren. Read on if you want to see how I arrived at that conclusion... It's interesting that I can't reproduce this problem in IE9's IE7 mode. Only in IETester and real IE7. I guess the IETester folks deserve some credit for that. http://www.my-debugbar.com/wiki/IETester/HomePage I can't figure out exactly why it's happening. I can only say that I've seen IE act weird before with regard to absolute positioning if you don't tell it precisely where to place the elements. I tried to figure it out. The size of the gap is about 110px, but I couldn't find any margin or padding that accounts for that. The specification doesn't clearly define what's supposed to happen when an absolutely positioned element has one of its positions set to auto. It does give an example, starting with might result in something like, which seems to imply that the property defined as auto would be relative to where it would have been if it were not absolutely positioned... confused yet? I am. http://www.w3.org/TR/CSS21/visuren.html#propdef-left http://www.w3.org/TR/CSS21/visuren.html#comp-abspos IE7 seems to be putting it farther to the left than where it would be if it wasn't absolutely positioned. Then, your left margin is moving it to the right, creating that gap... There's a clue here, somehow... The displacement is exactly half the width of the element. EUREKA!! #main_top had text-align: center, so all of its children did, too. Since the positioned element was supposed to be centered, IE7 thought it was the element's center that should have the left position set to auto... or something like that... I'm confused, but the easiest solution is to set text-align: left on li.haschildren. See Internet Explorer _does_ make sense... you just have to turn your brain inside-out first. :) I did fix it in my testing environment, though... - Add position: relative to #suckerfishnav. - Add position: relative to li.haschildren. There currently aren't any styles set for this class - Set the left margin on #suckerfishnav li ul ul to 0. You're using both absolute positioning and margin to position your sub-menu... it's confusing. That's at approximately line 62 of main.css. - Set left to 0px for #suckerfishnav li:hover ul. That's the first drop-down. - Set left to 220px for li li:hover ul. That's the second level drop-down. It looks like you're set up for a lot deeper menu levels, but it's really hard to read your CSS code. I recommend you add some meaningful class names so that you can do away with selectors like #suckerfishnav li.sfhover ul ul ul ul. I think it'll save you a lot of time and effort later. You can tell I write these paragraphs and sentences in completely random order while I'm working on a problem rather than after I figure it out, right? It's my particular brand of insanity. -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] slider with a pager - browser inconsistent
On Mon, Feb 20, 2012 at 8:46 AM, Alex Creedy alex.cre...@hoof.net.au wrote: I am putting together a slider with a pager so you can navigate to individual slides. The pager uses 'bull;' bullets for the dots. http://www.alexcreedy.com/slider/slider_v2.html The bullets have a font size: 2em and line-height:1em The position of the bullets is slightly different in browsers, I have only tested on Mac: firefox, safari, chrome so far. For example in Firefox they sit slightly higher in their pager box. The Chrome position is pretty good. How can I set the same position across these browsers? On Linux and Windows, they look the same on Chrome, Firefox, IE9, and Safari. Regards, Alex __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Inappropriate uses of CSS3
On Fri, Feb 17, 2012 at 5:14 PM, David Laakso laakso.davi...@gmail.comwrote: On Fri, Feb 17, 2012 at 12:08 PM, Paceaux pace...@madebypaceaux.com wrote: Howdy all,\ I'm writing a blog post on inappropriate or tacky uses of CSS3./trimmed --- Oh, my... how easy. Try writing a blog post on appropriate uses of CSS3. And live up to it on your own site... Best, ~d PS Do you have a CSS question? Chelsea Creek Studio http://ccstudi.com On Sat, Feb 18, 2012 at 1:53 PM, bill scheider smallvoiceshout...@gmail.com wrote: Ouch :) -- Wisdom tells me I'm nothing. Love tells me I'm everything. Between the two my life flows. -- *Nisargadatta Maharaj* Ya David, I gotta admit, that was kinda harsh. At least offer the guy some constructive criticism instead of an unexplained jab at his site. I think his site (http://frankmtaylor.com) looks pretty good. Take that with a grain of salt... Being more of a coder than a designer, I'm notoriously bad at design. e.g. http://www.ghodmode.com Besides that, he's asking for examples of inappropriate use of CSS3. I'd say that counts as an on-topic CSS question. As to the original question, I was going to give http://mothereffingtextshadow.com as an example of (intentionally) bad CSS3 text shadows. However, the site doesn't seem to be functioning for me right now. I'm still putting it here because the problem might be just me. I have a flaky internet connection. -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Text positioning in FF and Chrome - They go opposite ways
On Tue, Feb 14, 2012 at 2:35 PM, Andrew C. Johnston attyjohns...@yahoo.com wrote: Hi All, wonder if I can tap into the wetware database with a question. I have a lot of teaser boxes that entice users to click on them, with text in the boxes. Nothing shaking or flashing or anything (yet). Due to my design's limitations (or my own) I need to keep this box fairly short, I guess not anything over 100 px. The problem is that FF and Chrome seem to handle the spacing I am doing in completely opposite ways, which makes the text in the box never quite centered. Check it out, newest Chrome and FF (Linux version): http://www.rayxi.com/lsat-exam-information-rayxi In FF the text is a little too low, almost to the bottom border. In Chrome, a little too high. Any workaround for this? Smaller box or bigger? Bigger box and smaller text? Maybe my margins and spacing are working at odds? Set the height, font-size, and line-height to the same value. In an inline element, text is vertically centered on its line-height. -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com Any help would be appreciated. Thanks in advance, Andrew __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] h tag and float problem
On Tue, Feb 14, 2012 at 1:32 AM, Carol Swinehart ckfswebdevelopm...@gmail.com wrote: I have a fairly simply design with one main area and a pullout box that appears on the right. If I put h tags like h2 tag in the area on the left even if I have it set to float: left it forces all the text below the pullout box. If I set the text area to float left the h tags go below the text which is now positioned correctly to the left. I can not get the h tags to behave the way they are suppose to and want subtitles for my paragraphs. Any suggestions most appreciated. Without seeing any code, it's difficult to give a good answer, but my best guess is that you want to want to float both the h2 and the text area to the left and also set clear:left on both. I don't know how your pullout box is implemented, but I would usually implement that kind of thing with absolute positioning so that it doesn't affect other page elements when it's pulled out. -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com Carol F. Swinehart ckfswebdevelopm...@gmail.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Apportioning the window width dynamically.
On Mon, Feb 13, 2012 at 12:10 AM, bruce.som...@web.de wrote: With critically appreciated assistance from Vince Aggrippino, I'm learning! Aw shucks :) Please consider the page at http://www.maireadnesbitt.com/index_next_tt.html . Is there a technique that will cause the middle section (text) to use the entire available width between the thumbnails at the left and the photo at the right, and yet to adjust 'gracefully' as the width of the window is decreased (continuously)? If you use percentage widths on #left_third, #middle_third, and #caption, the widths of the blocks will adjust with the size of the window, but those borders will throw it off because the width of the border is added on top of the block's width. Just playing around with this, I removed the borders and set the widths to 20% for the #left_third, 50% for the #middle_third, and 30% for #caption. If you want to make sure those thumbnail images don't get cut off, you can set a min-width on the #left_third. I tried this with min-width:155px, but the percentages get thrown off when 20% is less than that min-width. If you really want the borders, then you need to take their width into account for your measurements. That's not easy to do with percentages. Current best practice says you should be using the 'em' unit for sizing. If you're just using the borders while you work on the page to see where the blocks start and end, I recommend using background colors instead. That way it doesn't mess up the layout. I recommend reading about Fluid Grids for some guidelines about using 'em': http://www.alistapart.com/articles/fluidgrids/ You might also want to consider using media queries to tweak your site's layout at different window widths. Here's an excellent article about Responsive Design that discusses media queries: http://www.alistapart.com/articles/responsive-web-design/ ... but keep searching the web. There's a lot of good information on the web about media queries, including some conflicting opinions about when/if/how they should be used. You have a really wide site and you might want to consider some significant changes to the layout. For example, the thumbnails and site navigation could be horizontal and the #caption pic could be one of the thumbnails. If you want to consider making the navigation horizontal, but there's too many links, consider making a 'media' page and consolidating a lot of that content there. Then you could replace several of those links with a single media page. -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com Bruce __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] DIV won't float: right as intended
On Mon, Feb 13, 2012 at 4:51 AM, Tim Dawson t...@ramasaig.com wrote: I have been trying for several hours to get a DIV containing four absolutely positioned images to 'float: right' up beside a left column which is floated left. http://webadit.co.uk/cakelady2/?page=wedding The HTML5 validates, as does the CSS3, and I cannot see why the DIV remains resolutely below the LH column. I've tried 'float:left', but it just goes to the extreme left of the screen at the same level. Arguably in HTML5 I should be using something other than a DIV, but that shouldn't prevent DIV from working. There were some IE 9 CSS hacks, but I've disabled them for this example. It's not the images, the problem remains if I substitute a short para of text. Fairly obviously I'm missing something trivial (though vital). Perhaps another pair of eyes will see it. Either float div.left to the left, or put div.right earlier in the code than div.left and I believe it will have the desired effect. When you float an object, content after it can flow up beside it, but it can't move up beside content earlier in the source document. -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com Regards, Tim Dawson -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Keeping a DIVision in the foreground.
On Tue, Feb 7, 2012 at 8:30 PM, bruce.som...@web.de wrote: ... Now, it seems that there should be some way to prevent any of the three sections from overlapping. Can you help? I'm not sure how you want it to look exactly, but here are some ideas... You're using percentage widths for your #left_third and #middle_third, but the contents of #middle_third have a fixed width of 650px. Technically, the three sections aren't overlapping, but the blocks inside of #middle_third stick out of the right side of their containing block. Since the small picture links in #left_third are absolutely positioned, there's not much you can do to prevent them from being cut off on the right as their containing block gets smaller, but you might like the result better if you used a semi-transparent background on the #middle_third. You could create a very small semi-transparent white block in your favorite graphics program and set it as the background-image instead of using an opaque white background. If you remove the fixed width from the #Tinkerbell and #CelticWoman blocks, the text will wrap inside of #middle_third instead of sticking out. To prevent that picture in the #caption block from being pushed down, you can set a width on the block (50% would fill out the rest of #infoblock) and set max-width:100% on the image inside of it. That way, it'll stay where it is and the image will just get smaller when the block gets smaller than the image. -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com Regards, Bruce __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertical Rhyme
On Fri, Feb 3, 2012 at 9:14 PM, Jered Boxman je...@boxman.org wrote: Hi all, I just subscribed too this list, apologies up front if I make mistakes. I don't have much experience with mailing-lists, I even believe the concept is older then I am. And thanks in advance if you consider to reply (: My issue: I have some trouble styling tables. When I add a top or bottom border they mess up my vertical rhyme. You can see my vertical rhyme here: http://jered.boxman.org/vortex/vertical-rhyme/ . At the moment my table doesn't have a top or border bottom. Does anyone have a suggestion how to solve this properly? I think you mean vertical rhythm :) Borders do that. It's a known problem when trying to establish a vertical rhythm. You have to offset the table's position by an amount equal to the combined height of the horizontal borders. You have to do it with the 'em' unit so that it doesn't get messed up again if the user changes font size. It's discussed in more detail at the 24 ways site: http://24ways.org/2006/compose-to-a-vertical-rhythm -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com Cheers, Jered __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Keeping a DIVision in the foreground.
On Fri, Feb 3, 2012 at 11:17 PM, bruce.som...@web.de wrote: On the page at http://www.maireadnesbitt.com/index_next_tt.html all looks as intended with wide windows. As the width is decreased, the large photo is dropped 'downscreen'. All right, too. But the information in the middle slips under the thumbnails at the left and under the menu at the right. I tried giving the DIVision with the information a higher z-index value, but it didn't help. Is there some other way to keep the information visible? The z-index will only work for positioned elements, but I realize you don't want to change the positioning of your div#middle_third. You can use position:relative to fix that. I tested it on Firefox using z-index:10 on the div#left_third and position:relative; z-index:20 on the div#middle_third. It worked, but the text was hard to read because div#middle doesn't have a background. Adding a white background fixed that. -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com Bruce __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Page height trunaction
On Thu, Feb 2, 2012 at 4:30 PM, Jay Tanna jta...@rocketmail.com wrote:
...
You also need to put height: 100% for * like this:
* {
margin: 0px;
height: 100%; /* this is required for anything to be 100% */
/* padding: 0px; */
}
All elements need to have height 100%? That doesn't make sense. What
about the elements that need to have height left at auto?
I think you might be trying to address the same problem that I
addressed earlier in the thread when I said to set the height on the
html and body elements to 100%.
--
Vince Aggrippino
a.k.a. Ghodmode
http://www.ghodmode.com
Good luck.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Page height trunaction
On Fri, Feb 3, 2012 at 3:52 AM, Chris Morton salt.mor...@gmail.com wrote: A solution is to put your gradient in a separate block and give that element these rules: position: fixed; top: 0; left: 0; width:100%; height:100%; z-index: -999; ... and apply your gradient to that block instead of the body. I tried this, creating a *#super_wrapper* block between the body and * #wraper*, then modifying the about/Management page accordingly. In Chrome, this froze the page, making it unscrollable (with no visible scrollbars). Adding an *overflow: scroll;* to this css code made a scrollbar appear, but the page was still frozen. I copied your code and added the div#super_wrapper with the style rules I suggested and it worked great in FF, Google Chrome, and Safari. Even IE7/8/9 recognized the filter property and applied the gradient, although there are other significant rendering problems in IE. Did you apply position:fixed or overflow:hidden to the wrong element? Here's my version (sorry, no images :) ): http://www.ghodmode.com/testing/eigen.html -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com An even better solution is not to add a block for the gradient, but create a pseudo-element in the CSS: Nope; too many potential viewers are still using IE. Yesterday I had to add a compatability meta tag in the *head* in order to have IE8 render pages like IE7. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Flexible inside inside a wide div
On Wed, Feb 1, 2012 at 9:26 PM, Markus Ernst derer...@gmx.ch wrote: ... position:absolute does the same as position:fixed, exept that the element is scrolled with the rest of the page. Not exactly. position:absolute positions an element within the first ancestor with position other than static. position:fixed always positions the element within the viewport. -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com HTH Markus __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Flexible inside inside a wide div
On Wed, Feb 1, 2012 at 8:04 PM, Chris Blake ch...@3pointdesign.com wrote: Hello CSS Discuss, I have a 1920 wide div containing an image slide show. Inside that div are the controls. At the moment they sit in a 940px wide container, but i want the 'previous' and 'next' buttons to float either side of the browser. Fixed does this but I don't want them to stick when the page scrolls. Making the inside absolute and width 100% would just stretch it to the width of the outer div. Same with float left/right. Any ideas? You have to position them absolutely within a block that's the width of the viewport. None of the blocks in the hierarchy between the outer block and the block with the controls can have a position. You might be able to do what you want just by putting the controls outside of the block. Something like this: div class=div1 style=width: 1920px; div class=slideshow style=width: 940px; img src=picture1.jpg alt=Pig wearing lipstick /div /div div class=controls a href=# onclick=previous(); return false; -- /a a href=# onclick=next(); return false; -- /a /div If you let us see an example of your code, we can probably give a better answer. -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com Thanks, CB __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Page height trunaction
On Thu, Feb 2, 2012 at 7:45 AM, Chris Morton salt.mor...@gmail.com wrote:
Nope... I replied too soon. Setting html and body to a height of 100% works
for most pages in Chrome, but not this one:
http://eigen.com/about/Management.shtml
Also, in IE8 I can force a scroll bar to appear, but it's pretty much
static. I don't want to set the height to something like 150% to force
scrollability, as this will miss up other pages that are much shorter.
Ideas?
That's a slightly different problem. In the first page, all of your content
was shorter than the viewport and you didn't need to scroll. But it
shows that my solution was wrong for people with smaller browser
windows.
This time, the body and html are sized according to the viewport like
I said, but the content overflows the body because it's longer than
the viewport and you have to scroll.
A solution is to put your gradient in a separate block and give that
element these rules:
position: fixed;
top: 0;
left: 0;
width:100%;
height:100%;
z-index: -999;
... and apply your gradient to that block instead of the body.
That will put a block with a gradient behind everything that doesn't
scroll when the
window scrolls.
An even better solution is not to add a block for the gradient, but
create a pseudo-element in the CSS:
div#wrapper:before {
content: ;
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#007E9E,
endColorstr=#A8D4DB);
/* For Internet Explorer 8 */
-ms-filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#007E9E,
endColorstr=#A8D4DB);
background-image: linear-gradient(bottom, #A8D4DB 33%, #007E9E 77%);
background-image: -o-linear-gradient(bottom, #A8D4DB 33%, #007E9E 77%);
background-image: -moz-linear-gradient(bottom, #A8D4DB 33%, #007E9E 77%);
background-image: -webkit-linear-gradient(bottom, #A8D4DB 33%, #007E9E 77%);
background-image: -ms-linear-gradient(bottom, #A8D4DB 33%, #007E9E 77%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.33, #A8D4DB),
color-stop(0.77, #007E9E)
);
}
Both of these have compatibility issues with IE. IE 8 doesn't support
pseudo-elements and IE 7 doesn't support fixed positioning. Also,
fixed positioning in mobile browsers is either not supported or has an
unusual implementation.
This is a lesson to both of us to remember to check the page for
different window sizes.
I'm not sure how the scrollbar thing is related, but check out this
quote from the HTML5 Boilerplate documentation:
http://html5boilerplate.com/html5boilerplate-site/built/en_US/docs/css/#html-
blockquote
[optional] overflow-y: scroll : Forces the display of a vertical
scrollbar even on pages which are smaller than the viewport
height. IE displays a vertical scrollbar regardless of viewport
height and this ensures that it also appears in non-IE. Doing this
prevents what appears to be a horizontal shift of page content
when a scrollbar appears on longer pages.
/blockquote
--
Vince Aggrippino
a.k.a. Ghodmode
http://www.ghodmode.com
On Mon, Jan 30, 2012 at 2:18 PM, Chris Morton salt.mor...@gmail.com wrote:
Thanks, Vince. That appears to have worked the magic.
On Mon, Jan 30, 2012 at 1:27 PM, Ghodmode ghodm...@ghodmode.com wrote:
My monitor isn't that big, so I'm not really certain, but if I zoom
out enough that the page fits without scrollbars, I think I see the
problem.
The html and body elements actually have a size like other
elements. If they're not defined, they're just the size of their
contents. If you set them to 100%, width and height, it should fill
the screen:
html, body {
width: 100%;
height: 100%;
}
--
Vince Aggrippino
a.k.a. Ghodmode
http://www.ghodmode.com
Thanks
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] desktop. tablet. mobile.
On Tue, Jan 31, 2012 at 10:31 AM, David Laakso laakso.davi...@gmail.com wrote:
First pass: http://ccstudi.com/site/portfolio/w/
Constructive comments and suggestions are always appreciated.
Thanks.
Giving it the benefit of the doubt, I'll call it a mobile first
design. It looks pretty good on a mobile screen, but I have to scroll
to see the pic of the naked lady with the full body tattoo (Ms April).
If there were a full 12 months there, it would probably be more
scrolling up and down than I'd want to do to see all of the pics.
For this layout, I'd recommend moving the nav closer to the top as the
first child of the article element and make it horizontal. Then put
the contact information on the right. You might want to consider
horizontal month tabs, too.
So, now what are you going to do with media queries to adapt the
design to wider screens?
For wider layouts, I'd recommend putting the nav on the left
(vertically, like it is now). Also put the month tabs on the side
vertically and change their display so that the active one has an
inverse white bg and #99a7b4 letters and maybe give it an arrow-like
end to point at the container. So, left would be the nav. Then the
month tabs in a narrow vertical strip on either side of the container.
div#container in the middle, and contact info farthest right.
Here's a CSS-only arrow-type thing that might inspire you:
ul#tabs li a.tab {
padding-left: 1em;
}
ul#tabs li a.tab.active {
background-color: white;
border: 0 none !important;
color: #99A7B4 !important;
height: 1.9em !important;
line-height: 1.9em !important;
padding: 0;
}
ul#tabs li a.tab.active:before {
border-bottom: 0.97em solid #99A7B4;
border-right: 1em solid white;
border-top: 0.97em solid #99A7B4;
content: ;
display: block;
float: left;
overflow: hidden;
}
Note that the !importants are in there to override the !importants in
the site's current code.
If you really like the narrow layout, consider complementing it with
some kind of
tileable abstract background for the div.page which contains the
article. Or you could do something neat with gradients.
DISCLAIMER: I'm a coder. I've never been accused of being a designer :)
--
Vince Aggrippino
a.k.a. Ghodmode
http://www.ghodmode.com
Best,
~d
--
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] multiple columns
On Tue, Jan 31, 2012 at 11:15 AM, John j...@coffeeonmars.com wrote:
I would like to arrange some text into multiple columns...I'm thinking 4 or
5; the text in question lends itself to that.
Looking at the tutorial linked below, it says IE doesn't support it. It
doesn't specify IE 6 or 5, just IE, and I assume it means ANY IE, which isn't
too cool.
Can anyone recommend a method of arranging text in multiple columns that IE
does support...at least the newer versions?
thank you!
John
http://www.w3schools.com/css3/css3_multiple_columns.asp
The old way is to use separate elements to contain the different
columns, then use floating or positioning to get the desired layout.
There's an even older way that actually still works, but if I even
mention tables here I'll get burned to a crisp... oops... I hope no
one heard that :)
The main benefit of the new CSS3 way is that you can let the browser
figure out where to start the new column.
If you already know where you want your columns to break, just use the old way.
Otherwise, you could use the columns for the browsers that support it
and think of the IE rendering as a graceful degradation. I think this
is the option I would choose.
In general, I wonder if the combination of Firefox and Chrome users
have enough market share that we can begin to consider a limited
deprecation of IE-specific code... Ya I know... That's probably just
wishful thinking.
Don't forget about Google Chrome frame:
http://blog.chromium.org/2011/06/introducing-non-admin-chrome-frame.html
http://code.google.com/apis/libraries/devguide.html#chrome-frame
http://www.chromium.org/developers/how-tos/chrome-frame-getting-started#TOC-Detecting-Google-Chrome-Frame-and-P
I copied this from the HTML5 Boilerplate code:
!--[if lt IE 7 ]
script
src=//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js/script
scriptwindow.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})/script
![endif]--
It'd be a pain in the butt, but it would probably be possible to
emulate columns using Javascript. It might be an interesting
experiment, but I guess it would be a waste of time in the grand
scheme of things.
--
Vince Aggrippino
a.k.a. Ghodmode
http://www.ghodmode.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Page height trunaction
On Tue, Jan 31, 2012 at 2:48 AM, Chris Morton salt.mor...@gmail.com wrote:
Consider dev.eigen.com
On a 25 LCD monitor set at 1920 x 1200, why doesn't the gradient fill come
all the way to the bottom of the screen?
My monitor isn't that big, so I'm not really certain, but if I zoom
out enough that the page fits without scrollbars, I think I see the
problem.
The html and body elements actually have a size like other
elements. If they're not defined, they're just the size of their
contents. If you set them to 100%, width and height, it should fill
the screen:
html, body {
width: 100%;
height: 100%;
}
--
Vince Aggrippino
a.k.a. Ghodmode
http://www.ghodmode.com
Thanks
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Make logo GIF active in CSS
On Tue, Jan 31, 2012 at 6:31 AM, Chris Morton salt.mor...@gmail.com wrote:
Please consider dev.eigen.com, using Google Chrome.
It used to be that a viewer could click on the company logo in the upper
left corner and be taken to the site's home page. Somewhere along the way
this link relationship has become broken.
Any ideas how to fix it within the CSS stylesheet?
It's not really a CSS problem. You currently have this in your HTML:
h1a href=index.htmlinnovation by Eigen/a/h1
But the link won't work unless the h1 is inside the anchor. Like this:
a href=index.htmlh1innovation by Eigen/h1/a
It's because of the negative text indent you're using to hide the text
of the heading while still making it accessible to screen readers:
/* http://dev.eigen.com/css/homepage.css (line 107) */
h1 {
text-indent: -9009px;
}
When the link is inside the heading, it's 9009 pixels over to the left
because the link is just the text. But when the heading is inside the
anchor, the whole h1 is the link, not just the text.
--
Vince Aggrippino
a.k.a. Ghodmode
http://www.ghodmode.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Gradient That Works With IE?
On Sun, Jan 29, 2012 at 9:09 AM, PL polockh...@sprintmail.com wrote: ... I would like to make this sidebar a bit more interesting by adding a bit of a gradient below where the menu's deepest position is. I immediately realized that using a 968 x 1px gif was not going to work because the the height of the container is variable depending on the content. I have two choices: ... Two: use css to create a gradient in a newly created 200px wide sidebar in the container div. ... Is there another way to accomplish a variable page height gradient using CSS that would work with IE? If you have seen a page that does this, a link to the page would help me study how it is done. IE supports gradients through the non-standard CSS property filter: http://msdn.microsoft.com/en-us/library/ms533754.aspx Here's an example that should work for you cross-browser: background-color: #3D6554; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#3d6554', EndColorStr='white'); background-image: -webkit-gradient(linear, left top, left bottom, from(#3d6554), to(white)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #3d6554, white); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image:-moz-linear-gradient(top, #3d6554, white); /* FF3.6 */ background-image: -ms-linear-gradient(top, #3d6554, white); /* IE10 */ background-image: -o-linear-gradient(top, #3d6554, white); /* Opera 11.10+ */ background-image: linear-gradient(to bottom, #3d6554, white); */ Most of that (except for the last line) came from css3please.com For your needs, I don't recommend adding a new block for the gradient. Instead, apply the gradient properties to the #container div and set the background-color of the content div to white. For more robust CSS3 support, I recommend taking a look at CSS3PIE. It implements a lot of CSS3 features through an Internet Explorer behavior and VML code. -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com Here is my test page (which will be in a constant state of change and the junk at the bottom is a goner). http://www.broadstonere.com/index_test_4.php Thank you, Patrice __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] current page on #sidenav
On Fri, Jan 27, 2012 at 2:24 PM, Jukka K. Korpela jkorp...@cs.tut.fi wrote:
2012-01-27 7:55, Stuart King wrote:
http://skingdesign.com/todd/pages/pairings.html
now the current page on #sidenav needs to be red. I have tried to do this
-
not successful.
Add
#sidenav ul li a#current { color: red; }
You have tried a simpler selector, just #current, but such a rule loses, in
the cascade, to
#sidenav ul li a{
/* stuff omitted here */
color: #00;
/* stuff omitted here */
}
Yucca
Yep. Yucca's right. The key phrase is css specificity and it can be
a pain in the butt. Here's an article about it:
http://www.htmldog.com/guides/cssadvanced/specificity/
I've run into this problem a lot less often since I learned about the
Object-Oriented CSS concept:
The GitHub Wiki:
- https://github.com/stubbornella/oocss/wiki
The presentation:
-
http://www.stubbornella.org/content/2009/03/23/object-oriented-css-video-on-ydn/
Or just the slides:
- http://www.slideshare.net/stubbornella/object-oriented-css
And a fairly recent article on the topic from SmashingMagazine:
-
http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
--
Vince Aggrippino
a.k.a. Ghodmode
http://www.ghodmode.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I Have a Really Big 'm'
I think we're going around in circles. Here's my existing experiment page: http://www.ghodmode.com/experiments/emsize.html I'm going to do another one with more information. It's a square block, 1em wide and tall, with a lowercase 'm' inside it. I used Javascript (jQuery) to get the width and height of the block and the numbers it comes up with match what Firebug friends say for the computed height and width. It shows that an em is as wide as it is tall, but it's not the size of the letter 'm'. Since the block's width is the same as its height, that shows that em is both a horizontal measurement and a vertical measurement. However, the letter doesn't fit, so an em isn't based on the size of a letter in the font specified... at least not the letter 'm'. more inline ... On Wed, Jan 25, 2012 at 6:28 AM, Tim Climis tim.cli...@gmail.com wrote: From my this, it really visually appears as if the em is not an m or an M in even the most plain typeface. That's when the text is centered. If it's left or right aligned, you can fit in two more m. As has been discussed before in this thread, em is not a horizontal measure. It is a vertical measure, and is defined as the size of the font. But a 1em block is a square. It's the same size vertically as it is horizontally. How can it be only a vertical measure, or only a horizontal measure? The problem is, it's not a measure of anything. It's relative to the font size, but none of the letters in the font are necessarily 1em tall or wide. This is the part I didn't understand before. Directly from the CSS 1 spec (just to show that it's always been defined this way - at least in CSS) ems, the height of the element's font http://www.w3.org/TR/CSS1/#units You copied that from the comment in one of the example code blocks, not the actual description of the unit. It still leaves the question: How big is that? What it actually says is The relative units 'em' and 'ex' are relative to the font size of the element itself. It doesn't go on to say how they relate to the font size. The CSS 2.1 spec gets more precise, particularly in regard to x-height. http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#length-units The CSS 2.1 spec does make it much clearer by linking to the font-size property definition. So, the 'em' is the font-size. But then it says The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. That makes me ask Huh?! How is it computed? How big is an 'em'?! If they just took that word computed out of there, it would have been easier for me to understand. That's perfectly clear to some of you on this list? What I think it should say is that 1em is equal to the element's font-size. If the font-size isn't defined, the size of the em is equal to the user agent's default font size. -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I Have a Really Big 'm'
On Tue, Jan 24, 2012 at 3:08 PM, Jukka K. Korpela jkorp...@cs.tut.fi wrote: 2012-01-24 8:23, Ghodmode wrote: So, how big is an ‘em’? I set up a small experiment to tell me just that. I don’t see the point of the blog entry or the experiment. You acknowledged misconceptions. That's the point... to put aside the misconceptions for myself and those with similar experience. http://www.ghodmode.com/blog/2012/01/i-have-a-really-big-m/ The text says ‘Letters aren’t all 1em wide.’ I find that an odd formulation, since _no_ letter is 1em wide. Ya, but we (myself and others who have the same misunderstanding) think the 'm' is 1em wide. Understanding that it isn't is part of the point of the experiment and article. You seem to argue against the wrong idea that em is the width of the letter ‘m’. But that’s not the most common common misconception; people think that em is the width of the _capital_ letter ‘M’. And it is easy to see that these misconceptions are wrong if one just _looks_ at things. Okay. Fair enough. Capital 'M'. However, it still amounts to the same thing... the widest letter in the alphabet. We could probably have used another letter, but that wouldn't have shown the relation to the name of the unit. I hope you're not implying that anyone who didn't understand that the 'M' isn't 1em wide just wasn't paying attention... I mean, I don't care what you say about me, I make lots of mistakes, but you might offend someone ;} What things do you look at to see that 'M' isn't 1em wide? Before I did that experiment page I didn't have anything to look at that showed me a comparison of a 1em block to a single letter. For example, putting ‘M’ or ‘m’ in a 1em by 1em box is quite sufficient. Using any font. I don’t see why you would need Web fonts for this. It's based on the size of the font, so I was worried that it would actually fit within the 1em box. As you pointed out, I haven't been paying attention. So, I wasn't sure that a regular font would demonstrate the point. I wanted a font that was fancy enough to stick out of the block. If I used one of the generic font family names, I couldn't be sure about which font would replace it on the client side. If I used a specific font (I considered Comic Sans MS :) ), I couldn't be certain that it would be available on the client side. I chose to use a web font to get a consistent representation everywhere and because it was sufficiently fancy that I could be confident it would be bigger than its container. Thank you for your helpful and constructive comments. -- Ghodmode http://www.ghodmode.com Yucca __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] TwoQuestions: min/max-width, change layout with width
On Tue, Jan 24, 2012 at 5:07 PM, Felix Miata mrma...@earthlink.net wrote: On 2012/01/23 10:35 (GMT+0800) Ghodmode composed: 960px is a good max width... for most site visitors. ...where most is as little as 50% + 1 of today's visitors. I consider that a gross exaggeration except in cases where you know your demographic includes no netbook or handheld devices. At the other end are today's high resolution users, and tomorrow's much higher resolution users. IOW, the size of a px, until such future time as a CSS px and a device px are normally not identical, and probably even after that time for a long time to come, if not indefinitely, is an unknown size that bears an unknowable relationship to legibility and usability on users' screens, because px size depends on px density, which varies considerably among environments. I don't know about the original poster's target demographic, but 960px works well on a modern computer or a modern mobile device whether it's tablet, netbook, or handheld. The handhelds will initially show the site zoomed out, but they're designed for that. Pinching, tapping and zooming is the normal use case for a handheld device. Netbooks aren't a problem. The Asus EeePC is already pretty old, but it handles a 960px web site pretty well. It's resolution is 1024x600. I don't know about the current generation of netbooks, but I expect resolutions to go up. High resolution users can see and use a 960px wide web site quite well also. Here are a few real-world examples of fixed width sites: http://www.mashable.com 972px http://www.stackoverflow.com 960px http://developers.whatwg.org/ 820px http://lifehacker.com/ 980px http://developer.yahoo.com/ 974px http://paulirish.com 936px These are some really successful web sites with talented developers using fixed width layouts. Their sites all look great everywhere. OTOH, the em unit bears a predictable relationship to both legibility and usability, and thus is the better way to determine how wide is wide enough. It makes a big difference how wide is 960px on a display on which 960px is nearly the full width of the screen (1024x768), or one on which it is less than half a screen wide (e.g. 2560x1440); and similarly where 960px is 60em wide (16px browser default), or one in which 960px is less than 24em wide (e.g. 3840x2160 or higher; considerably more than 16px browser default). Well, em is obviously a better unit in most cases, but it doesn't have that much to do with the original question. What's a good target width? Platforms currently use pixels to define their viewports. Working within that limitation, we can come up with a target number. Then perform the necessary calculations to convert to em. Just like you said, we start with a pixel number, then make an educated guess about default font size on target platforms in order to convert to em: 960px / 16px = 60em Screen densities are rising and will continue to rise. The main thing holding them back from rising more and faster is DTEs that presume yesteryear's crude average density and make little or no allowance for things to work properly when density is more than a little bit higher. Em units make no such anachronistic assumption, even going so far as to allow respect for user settings without significantly disrupting layout. What's DTE? It doesn't seem like anything is holding back screen densities. I''m a novice, but I keep hearing about retina and super amo oled plus and 4k HD displays. It seems like hardware capacity is out-pacing software capacity. -- Ghodmode http://www.ghodmode.com -- The wise are known for their understanding, and pleasant words are persuasive. Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 ** a11y rocks! Felix Miata *** http://fm.no-ip.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] TwoQuestions: min/max-width, change layout with width
On Wed, Jan 25, 2012 at 3:43 AM, Felix Miata mrma...@earthlink.net wrote: On 2012/01/24 19:15 (GMT+0800) Ghodmode composed: I don't know about the original poster's target demographic, but 960px works well on a modern computer or a modern mobile device Debatable... I guess some of this stuff is a matter of opinion. In each of the screenshots, you're saying that the site could make better use of the horizontal space available, right? In my humble opinion, those sites make effective use of horizontal space and presentation of their content. When more fits on the screen than just the web site it's a good thing. I'd make the browser window only big enough to show the site, then use the rest of the space for other windows. But that's just me. Consider also the general rule that content shouldn't exceed some horizontal width. It often applies to coding practices and communications mediums... even some mailing lists. How wide it should be is a matter of opinion, and I think that's the original question... What do we, as a community, think is a good width. I don't know about the current generation of netbooks, but I expect resolutions to go up. High resolution users can see and use a 960px wide web site quite well also. Clearly not... Here are a few real-world examples of fixed width sites: http://www.mashable.com 972px http://fm.no-ip.com/SS/SC/sc-mashable2560-01.jpg http://www.stackoverflow.com 960px http://fm.no-ip.com/SS/SC/sc-stackoverflow2560-01.jpg http://developers.whatwg.org/ 820px http://fm.no-ip.com/SS/SC/sc-whatwgdevel2560-01.jpg http://lifehacker.com/ 980px http://fm.no-ip.com/SS/SC/sc-lifehacker2560-01.jpg http://developer.yahoo.com/ 974px http://fm.no-ip.com/SS/SC/sc-yahoodevel2560-01.jpg http://paulirish.com 936px http://fm.no-ip.com/SS/SC/sc-paulirish2560-01.jpg These are some really successful web sites with talented developers using fixed width layouts. Their sites all look great everywhere. Maybe you need to define what you mean by talented, successful and look great. Clearly here these sites don't make much of anything big enough to evaluate, certainly providing little evidence of enough talent to both understand and care about the impact of screen density on px layouts from the perspective of non-designer web users. NAICT from here they all look like they were designed for print. Here's what I meant: talented = I think that these people are smarter than me, with regard to web d. They've had significant experience working on high-visibility sites and/or they've made significant contributions to the web d. community, earning my respect. successful = lots of visitors look great = pretty These are all my opinion, from my point of view. I wasn't trying to refer to some normative definition. Note: There are talented designers/developers working on ugly sites with no users. e.g. ghodmode.com :( There are extremely successful sites that are ugly and have clueless designers/developers. e.g. facebook.com There are beautiful sites with clueless designers/developers and no visitors. They're usually flash-based. In most cases it's about appropriate line lengths, which are always measurable in em. Not everyone agrees on what is too long or not. If you want 15 word lines and two columns straddling the center with 2-4 word lines, 60em or so may be a good starting point. Yep. That's the answer to the original question. That wasn't so hard, was it? It doesn't seem like anything is holding back screen densities. I''m a novice, but I keep hearing about retina and super amo oled plus and 4k HD displays. It seems like hardware capacity is out-pacing software capacity. Your first sentence and third sentence conflict. For the most part, pixel densities _are_ being held back for lack of software support. For several years, desktop displays had a fairly wide range of sizes for any given resolution. More recently the range has been much narrower, with more discrete resolutions available than previously, and depending on manufacturer, a range of about 3 or less for each one up to the highest of the high volume sizes (1920x1080). Okay. I don't get it. This is clearly a topic that you understand much better than I do. If you're talking about the desktop environments, is it related to web d.? -- Ghodmode http://www.ghodmode.com -- The wise are known for their understanding, and pleasant words are persuasive. Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 ** a11y rocks! Felix Miata *** http://fm.no-ip.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http
Re: [css-d] I Have a Really Big 'm'
Thank you very much Paceaux. Youve made a number of good points. I think I'll do a follow-up blog entry. more comments inline ... -- Ghodmode http://www.ghodmode.com On Wed, Jan 25, 2012 at 4:06 AM, Paceaux pace...@madebypaceaux.com wrote: I think other comments have kind of addressed that for most of us in this discussion group, we knew that the em isn't one M. For the record, I didn't know before I created that experiment page. I thought that, for any given font, the lowercase 'm' was exactly 1em wide, but I wondered how it handled an m with a tail or flourish like the web font I chose. Regarding your article, I have a few thoughts: 1. Experiments have results. For the sake of your readers, provide the results of the experiment. 2. explain the experiment. I can see you've bordered out the width and height, but for a reader unfamiliar with em calculation, they won't understand the relationship that pixels will have to it. I agree. I may update it to make this more clear. For, me it became clear when I saw that the 'm' stuck out the right side of the 1em box, but I realize that might not be clear to everyone. 3. I'm struggling to understand your thesis or argument. Is it that the em is not the best letter to measure by? Or is it that the em isn't always an em? The statement I have a really big m doesn't support either of the arguments. That's fine if it doesn't, but you should clearly, in the first two sentences, state your argument/thesis. I don't think I really had an argument. It was just the question How big is an 'em'?. The title was partially supposed to be funny. Maybe I should have put an ellipsis: I have a really big... 'm'. Well, humor isn't my strong suit, but I was also referring to the fact that sometimes a letter 'm' is bigger than normal because of a flourish or tail in a scripty font and I wanted to understand if/how that affected the size of the unit. I'm not formally educated, so the proper form of a thesis statement or formal argument eludes me. I just like to read a lot about web d. stuff. I only understand about 40% of it, though. For the rest I write it down on the wall, then bang my head against it repeatedly until I understand. When I'm done, if there's still more ink than blood on the wall, I call it a success. A few other things to consider: em is generally thought as the relative width of the relevant font. The CSS2 spec, however, doesn't say that explicitly. It refers to the em square That's the cause of confusion for me... If it's the relevant width of the font, what's the height of 1em? My experiment page shows that it's the same as the width, but I didn't know that before I created it. ex is relative height of the relevant font. Some UAs may base x-height on a measurement between o and the baseline. I've read where the em is calculated based on the default font size. so you may want to rerun the experiment with a default font. That doesn't help. If an ex is the relative height, what's the width of an ex? I like the idea of re-running the experiment. I think I'll try a few different fonts. I wonder if an 'm' is an 'em' in a monospace font. Also: I think if you're making the argument that an em isn't always an M, why not also check to see if an ex is an x Not argument, discovery. But you're right. I didn't bother with ex because it's em that everyone is adamant about using. I did wonder why no one ever mentions ex. Since it's relative to the font size, isn't it just as good as em? In fact, since it's a little narrower than em, wouldn't it be a better unit to use when we're trying to aim for a target width in terms of the number of characters? Thank you. /email signature id=paceaux Frank M Taylor http://frankmtaylor.com @paceaux /signature On Jan 23, 2012, at 11:23 PM, Ghodmode wrote: I wrote a new blog entry inspired by past discussions on WebDesign-L and CSS-D: I Hava a Really Big 'm' blockquote Contemporary wisdom says that we should use the relative unit ‘em‘ for most, if not all, element measurements in web design. So, how big is an ‘em’? I set up a small experiment to tell me just that. Continue reading → http://www.ghodmode.com/blog/2012/01/i-have-a-really-big-m/ /blockquote I appreciate any comments, questions, or complaints. Thank you. -- Ghodmode http://www.ghodmode.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I Have a Really Big 'm'
On Wed, Jan 25, 2012 at 9:31 AM, Paceaux pace...@madebypaceaux.com wrote: geeze, this morning I thought I knew this stuff. Now I'm lost. See... it was a good blog entry... it made ya think :) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] TwoQuestions: min/max-width, change layout with width
On Tue, Jan 24, 2012 at 7:50 AM, Freelance Traveller
edi...@freelancetraveller.com wrote:
Question the First:
After seeing plenty of discussion, here and on other forums focussing on
website development, I've decided that maybe it's a good idea to
implement max-width (and possibly min-width) settings on my site. The
sense I get from the discussion is that a max-width of 960px is probably
the best choice.
What's a good reasonable value for min-width, given that I have a fixed
120px vertical nav bar down the left side of the page?
Sub-Question: Should max-width (and min-width, if deemed appropriate) be
applied to the HTML tag, the BODY tag, or should I enclose everything in
a DIV and apply it to that?
Question the Second:
Would it be better, instead of setting min-width, to allow the page to
reformat itself so that instead of a left nav, it has a horizontal
breadcrumb trail for nav across the top? If so, can someone point me to
material that will explain how best to do so?
I would say that min-width depends on your content.
960px is a good max width... for most site visitors.
I'd recommend implementing a few different fixed-width designs with
the help of media queries. Implement designs for 760px and 960px.
The default virtual viewport width for Android mobile devices in
portrait mode is 800px and the default for iOS is 980px.
... Yes, people are visiting your site on mobile devices.
If your site is (or can be) especially relevant to mobile users, you
might want to take a look at the viewport meta tag and start with a
320px width layout. Then work your way up to 960px. Perhaps 320,
480, 600, 760, and 960 are appropriate.
It sounds more complicated than it is. Take a look:
/* styles for 320px width go here */
@media all and (max-device-width: 480px) {
/* modifications for 480px go here */
}
@media all and (max-device-width: 600px) {
/* modifications for 600px go here */
}
@media all and (max-device-width: 760px) {
/* modifications for 760px go here */
}
@media all and (max-device-width: 960px) {
/* modifications for 960px go here */
}
The important buzz-phrases to be used in your search engine of choice
are adaptive web design, responsive web design, and media
queries
Recommended reference material:
http://developer.android.com/guide/webapps/targeting.html
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
http://www.alistapart.com/articles/responsive-web-design/
http://simplebits.com/notebook/2011/08/19/adapted/
--
Ghodmode
http://www.ghodmode.com
--
Jeff Zeitlin, Editor
Freelance Traveller
The Electronic Fan-Supported
Traveller® Fanzine and Resource
edi...@freelancetraveller.com
http://www.freelancetraveller.com
http://come.to/freelancetraveller
http://freelancetraveller.downport.com/
®Traveller is a registered trademark of
Far Future Enterprises, 1977-2009. Use of
the trademark in this notice and in the
referenced materials is not intended to
infringe or devalue the trademark.
How can anyone trademark a commonly used dictionary word? That's just
stupid.
Freelance Traveller extends its thanks to the following
enterprises for hosting services:
CyberNET Web Hosting (http://www.cyberwebhosting.net)
The Traveller Downport (http://www.downport.com)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] I Have a Really Big 'm'
I wrote a new blog entry inspired by past discussions on WebDesign-L and CSS-D: I Hava a Really Big 'm' blockquote Contemporary wisdom says that we should use the relative unit ‘em‘ for most, if not all, element measurements in web design. So, how big is an ‘em’? I set up a small experiment to tell me just that. Continue reading → http://www.ghodmode.com/blog/2012/01/i-have-a-really-big-m/ /blockquote I appreciate any comments, questions, or complaints. Thank you. -- Ghodmode http://www.ghodmode.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] positioning search button
On Thu, Jan 19, 2012 at 3:58 AM, Debbie Campbell d...@redkitecreative.com wrote: In IE on this page: http://www.greendrakephoto.com/site/contact/ The little green-bordered square's image content is showing up underneath the panel. Can someone help please? The image content isn't showing up underneath the panel. It isn't showing at all. The problem is caused by the location of your IE-specific stylesheet. Without a full path, resources are relative to the stylesheet. The images directory is in the same place as Wordpress' style.css, but your IE stylesheet is in a subdirectory. So, it can't find the image. Move your ie.css to the same place as style.css, change your references to match the new location, and it'll fix your problem. Better yet, don't use a browser-specific stylesheet. I kinda like Paul Irish's method using conditional comments: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ ... but I'm doing User Agent detection in PHP on the server side. -- Ghodmode http://www.ghodmode.com/blog -- Debbie Campbell www.redkitecreative.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE8 headbanger issue, and could you please take a peek in other IEs for me?
On Thu, Jan 19, 2012 at 9:38 AM, BJ Novack b...@ninjawebservices.com wrote: I've been banging my head against this for too long. Why does IE8 drop the div class=checkout-progress and everything below it right to the bottom of the dang page? I've tried taking my clearing fix of overflow:auto off that div, I've tried assigning a width to the page content as is in the IE7 stylesheet, I've tried narrowing the elements within the page content for IE8 . . . and a bunch of other things that had no hope of working, like all my old IE6/7 and haslayout hacks, but I tried 'em anyway. No love. Test case here: http://doneinstyle.com/test/oaktreetest2/index.htm IE9 does it too. It looks like the border on the div.checkout-progress is making it wider than its container and then wrapping it around sidebar_right. If you take off the property width:100% it fixes it. Unless they're floated or have a fixed width, DIVs take up the available width by default. By giving it a fixed width (100%), the width of the block itself was 100%, then the borders added to that. -- Ghodmode http://www.ghodmode.com/blog Actual code from here: http://oaktreehomeandgarden.co.uk/shop/ It happens when you view the shopping cart. Test page validates at W3 for both html and css (though there is some jquery css generated by the cart that doesn't validate, and the actual cart generates some unencoded ampersands in URLs.) All help appreciated greatly. -- Best regards, BJ http://ninjawebservices.com mailto:b...@ninjawebservices.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE8 headbanger issue, and could you please take a peek in other IEs for me?
On Thu, Jan 19, 2012 at 11:42 AM, Ghodmode ghodm...@ghodmode.com wrote: On Thu, Jan 19, 2012 at 9:38 AM, BJ Novack b...@ninjawebservices.com wrote: I've been banging my head against this for too long. Why does IE8 drop the div class=checkout-progress and everything below it right to the bottom of the dang page? I've tried taking my clearing fix of overflow:auto off that div, I've tried assigning a width to the page content as is in the IE7 stylesheet, I've tried narrowing the elements within the page content for IE8 . . . and a bunch of other things that had no hope of working, like all my old IE6/7 and haslayout hacks, but I tried 'em anyway. No love. Test case here: http://doneinstyle.com/test/oaktreetest2/index.htm IE9 does it too. It looks like the border on the div.checkout-progress is making it wider than its container and then wrapping it around sidebar_right. * correction... not wider than its container, just wider than the horizontal space allocated for it by the padding on its container. If you take off the property width:100% it fixes it. Unless they're floated or have a fixed width, DIVs take up the available width by default. By giving it a fixed width (100%), the width of the block itself was 100%, then the borders added to that. Now that I look at it, my question isn't why does the element move to the bottom in IE, but why doesn't it in Firefox? The effect is the same: the div.checkout-progress is wider than expected because of the borders and that makes it overlap (underlap?) with the sidebar. So it seems like moving it below the sidebar should be the correct behavior. If I give the #sidebar_right a background-color in Firebug, it cuts off the right end of the div.checkout-progress and makes the problem easier to see. -- Ghodmode http://www.ghodmode.com/blog Actual code from here: http://oaktreehomeandgarden.co.uk/shop/ It happens when you view the shopping cart. Test page validates at W3 for both html and css (though there is some jquery css generated by the cart that doesn't validate, and the actual cart generates some unencoded ampersands in URLs.) All help appreciated greatly. -- Best regards, BJ http://ninjawebservices.com mailto:b...@ninjawebservices.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] flexible height of div
On Wed, Jan 18, 2012 at 6:58 AM, Martin mhe...@gmail.com wrote:
Hi,
I've got a div (#main) which normally should have the height of 733px
because that's the height of the background pic.
On some pages the text goes over this height. The text is inside #content.
This pushes the footer down but the background remains
in the same position. I'd like to keep extending the #main div vertically if
the text goes over the height.
I understand that because the text is in #content and the background picture
is in #main, it might be tricky. I put the background in the #main and
created
#main in the first place cause I'd like the background picture to go behind
#sidebar_left, #content, #sidebar_right (and not just #content)
What do you want to happen with the image when the height of the
content of div#main exceeds the fixed height? Do you want it to
stretch vertically to match the height of the area that contains the
text? Do you want it to tile? Do you want it to be centered
vertically on the area, or be at the top, or at the bottom?
I don't know how having the background image on the div#content would
help you if the text is taller than the image, but here's a way to do
it that would allow it to be behind the sidebars as well as the
content:
#main {
height: 733px;
width: 960px;
}
#content {
width: 492px;
text-align: left;
background-color: black;
background-image: url('../images/beer-bg.jpg');
background-repeat: no-repeat;
background-position: -165px 0;
}
#sidebar_left {
text-align: left;
width: 165px;
height: 733px;
background-image: url('../images/beer-bg.jpg');
background-repeat: no-repeat;
}
#sidebar_right {
width: 295px;
height: 733px;
background-image: url('../images/beer-bg.jpg');
background-repeat: no-repeat;
background-position: -657px 0;
}
div id=main
div id=sidebar_left class=floatjdoc:include type=modules
name=left //div
div id=content class=floatjdoc:include type=component //div
div id=sidebar_right class=floatjdoc:include type=modules
name=right //div
/div
As you can see, it's kind of cheating, and it only would work because
you're using fixed widths for everything.
Another way might be to actually put the image tag in there and use
absolute positioning and z-index to put it behind everything.
By the way, I didn't test any of this. So, if you use it or any
variation of it, you'll have to double-check the syntax.
--
Ghodmode
http://www.ghodmode.com/blog
I can't think of any other way of structuring it.
div id=headerjdoc:include type=modules name=top //div
div id=main
div id=sidebar_left class=floatjdoc:include type=modules
name=left //div
div id=content class=floatjdoc:include type=component //div
div id=sidebar_right class=floatjdoc:include type=modules
name=right //div
/div
div id=footer
#main {
height: 733px;
width: 960px;
background: black url('../images/beer-bg.jpg') no-repeat;
}
#content {
width: 492px;
text-align: left;
}
#sidebar_left {
text-align: left;
width: 165px;
height: 733px;
}
#sidebar_right {
width: 295px;
height: 733px;
}
Thank you
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] conditional styles don't seem to apply - why?
On Fri, Jan 13, 2012 at 8:45 PM, mem talofo.l...@gmail.com wrote:
Hello all,
I have this on my application:
!--[if lt IE 9]
link rel=stylesheet href=badbrowser.css/
![endif]--
Your syntax for the conditional comment looks right, so I'm with
HallMarc. Let's see the page or one that reproduces the problem.
Something did occur to me, though. Is the link for your regular
stylesheet after the badbrowser one? If so, the cascade is causing
the rule in the regular stylesheet to override the rule in the
badbrowser stylesheet.
Try it a different way. Replace your body tag with something like this:
!--[if lt IE 9]
body class=badbrowser
![endif]--
!--[if !IE] --
body
!-- ![endif]--
Then you can use a single stylesheet with something like this:
#some-selector {
width: 16em;
}
body.badbrowser #some-selector {
width: 14em;
}
You probably have already looked at the conditional comments
documentation:
http://msdn.microsoft.com/en-us/library/ms537512%28v=VS.85%29.aspx
... but you might not have seen this article at quirksmode which I
think gives an excellent example: http://www.quirksmode.org/css/condcom.html
--
Ghodmode
http://www.ghodmode.com/blog
Earlier I have declared the main.css (the one valid for all), with this:
#some-selector {
width: 16em;
}
On this badbrowser.css I have:
#some-selector {
width: 14em;
}
But when I look on IE8 he get's width:16em; no matter what.
I can absolutely guarantee that the selector is the same.
What am I doing wrong? Is the the expected behavior ?
k. regards,
mem
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] iframe troubles
On Wed, Dec 14, 2011 at 1:37 AM, Deighan, John jdeig...@pcgus.com wrote:
For some reason, when I try to create a position:fixed iframe element, it
gets an arbitrary height instead of filling to the bottom of the viewport as
I think it should. A sample HTML page is below. The only change I've made
from the version I'm using for testing is that I removed many lines like
pThis is paragraph N/p to shorten this message. You can simply
duplicate the existing line to create more content.
In fact, I should explain the content since being inside an iframe element,
it won't display anyway. The point is that to test whether I had the CSS top,
bottom, etc. properties correct, I took the file below and simply changed
iframe to div and /iframe to /div. When I do that, the div fills the
screen, whereas when it was an iframe, it got an arbitrary (and small) height
instead. Of course, when it's a div, it displays the content in the code
below, whereas when it's an iframe, it uses the 'src' attribute to fetch
content (you can use any arbitrary HTML file as content when it's an iframe).
So, the exact same file, but with only changing one element between a div and
an iframe, results in a drastically different layout. Can anyone explain this?
BTW, I'm using a Windows operating system (Actually, Windows 2003 Server, but
that should not be relevant) and my browser is Firefox 8.0 and it's up to
date. I've seen this problem elsewhere, though so there may simply be
something about how iframes behave that I don't understand.
What is the goal? There might be a different way to achieve it.
Since the z-index puts the #top_id in a layer above the iframe, could
you achieve the desired effect by making the iframe 100% height and
giving your #top_id an opaque background color? You would have to
make the html and body elements also 100% height for it to work. ...
html, body {
height: 100%;
}
#top_id {
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: silver;
}
#bottom_id {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
Rather than try to use the fixed positoning properties (top and
bottom) to define the height of the object, you could set a height on
html and body of 100% and then use percentage on the top element and
iframe. ...
html, body {
height: 100%;
}
#top_id {
height: 10%;
}
#bottom_id {
height: 90%;
}
There are some problems here, though. You'll lose the precise height
on the top element and borders and padding might mess up the layout.
It looks like you're trying to get a fixed header with a scrolling
body that would work on iOS v4, but that's just a guess.
If that's it, you might want to take a look at iScroll 4. It's a very
nice solution, but it has a Javascript dependency. The result uses
overflow:hidden on all of the page elements, then uses touch events to
control the visible part of the content.
http://cubiq.org/iscroll-4
--
Ghodmode
http://www.ghodmode.com/blog
html
head
style
.top {
position: fixed;
z-index: 999;
left: 0;
width: 100%;
top: 0;
bottom: auto;
}
#top_id {
height: 50px;
}
.bottom {
position: fixed;
z-index: 1;
left: 0;
width: 100%;
bottom: 0;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#bottom_id {
top: 50px;
background-color: lightGray;
}
/style
/head
body
div id=top_id class=top
pThis is the top div/p
/div
iframe src=/test1.htm name=detail class=bottom
id=bottom_id
h1Content/h1
pThis is paragraph 1/p
pThis is paragraph 2/p
/iframe
/body
/html
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] four-sided CSS3 drop shadow?
On Sun, Jan 15, 2012 at 8:58 AM, Alan Gresley a...@css-class.com wrote:
On 15/01/2012 8:16 AM, Tim Climis wrote:
On Saturday, January 14, 2012 4:06:30 pm Stephen Britton wrote:
I am experimenting with CSS3 drop shadows. Most examples only show it
working with two sides - usually the bottom and right or left side.
Is there a way to have the shadow cover all sides - top, bottom, right
and
left?
Here is some sample code that I have been working with. It only covers
the
bottom and right side.
-moz-box-shadow: 8px 8px 8px #ddd;
-webkit-box-shadow: 8px 8px 8px #ddd;
box-shadow: 8px 8px 8px #ddd;
You just have to make the spread of the shadow bigger than then offset.
box-shadow: 0 0 4px #ddd;
Or, with what you have:
box-shadow: 8px 8px 10px #ddd;
That'll give a 2px top and left shadow, and a 10px bottom and right
shadow.
---Tim
Not so. There needs to be a forth value in the box-shadow string to indicate
spread. Something like this spreads the shadow evenly on all sides.
box-shadow:0px 0px 0.5em 0.5em gray;
The spec goes into some detail in explaining the variations of box-shadow
(see example 29 and 30).
http://dev.w3.org/csswg/css3-background/#the-box-shadow
Unfortunately the webkit variation doesn't support the 4th number:
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-box-shadow
The blur radius will make the shadow appear on all four sides, though.
.box {
-moz-box-shadow: 0 0 10px black;
-webkit-box-shadow: 0 0 10px black;
box-shadow: 0 0 10px black;
}
--
Ghodmode
http://www.ghodmode.com/blog
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Dear Theo,
On Sun, Jan 1, 2012 at 7:57 AM, David Laakso da...@chelseacreekstudio.com wrote: Send colors your earliest convenience... particularly desperate for Cobalt Blue and Cadmium Yellow Deep. Cobalt Blue: #3C7F9D Cadmium Yellow: #FEE84E The secret to life, the universe, and everything in riddle form, or misdirected email? Vincent PS Happy New Year! -- Ghodmode http://www.ghodmode.com/blog P.S. 42 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem associated with social button
On Sun, Jan 1, 2012 at 12:27 AM, John Lockerbie catnapsm...@gmail.com wrote: In attempting to add a 'like' button to my pages I seem to have created a number of problems I don't understand. The first is that the character encoding is not found, though it's there; the others seem to require me to use a 'transitional' document, which I am. Can anybody tell me what I'm doing wrong? I'm not sure where you're getting the errors you described, but I looked at your page in the W3C validator and there are very few errors that aren't inside of the iframe created by the Facebook like button. You can't fix what's in that iframe. http://validator.w3.org/check?uri=http%3A%2F%2Fcatnaps.org%2Fislamic%2Fdesigntest.htmlcharset=%28detect+automatically%29doctype=Inliness=1outline=1group=0verbose=1user-agent=W3C_Validator%2F1.2 The test page is catnaps.org/islamic/designtest.html - JL -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Understanding the third argument of translate3d
On Wed, Dec 28, 2011 at 9:08 PM, Ghodmode ghodm...@ghodmode.com wrote:
On Tue, Dec 27, 2011 at 1:19 PM, Peng Yu pengyu...@gmail.com wrote:
Hi,
I thought that, among the 3rd google logo or the 4th google logo, one
should slip above the other should slip under the previous log,
because the z values are different. But both of them slip above the
previous logo. I guess that I still don't completely understand the
meaning of the third argument of translate3d. Could anybody help
understand it? Thanks!
I don't think I fully understand it myself yet, but I was able to get
the desired effect by adding the following two rules:
div#-z {
-webkit-transform: translate3d(0, 0, 100px);
}
div#z {
-webkit-transform: translate3d(0, 0, 200px);
}
I don't know if it's a bug or a poor implementation or a feature, but
some things won't animate. It looks like the Z axis is one of them.
So, when you tried to move div#-z back during hover, it didn't happen.
However, with the two rules above, div#-z is above div#y and below
div#z when the page renders.
I guess this effectively means that 3d transforms don't work because
the effect is the same as the regular translate function. I must be
missing some detail.
This issue has been bugging me, so I continued to work on it. I found
that the key to full use of the translate3d transform function is in
the -webkit-perspective and -webkit-transform-style properties.
-webkit-perspective:
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_perspective
-webkit-transform-style:
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_transform_style
The perspective gives a base distance in 3d space for transformations.
The larger the number is, the farther away the object is in 3d space.
The transform-style tells the browser whether or not to keep the
z-axis position during transformations. The default if it's not set
is to flatten the object and its children.
For example:
#container {
-webkit-perspective: 800px;
-webkit-transform-style: preserve3d;
}
Where the #container contains the elements manipulated with
-webkit-transform:translate3d.
I've prepared a live example that shows three elements laid out in 3d space
http://www.ghodmode.com/experiments/translate3d/
Tested on Chromium (Google Chrome) on Linux and Safari on Windows...
And I looked at it on Android stock browser (Android 2.3.7), Dolphin
Browser HD (Android), and Maxthon (Android), which are all
webkit-based but don't support any of this.
This article got me pointed in the right direction:
http://www.netmagazine.com/tutorials/create-progressively-enhanced-3d-css-rollovers
This page at caniuse.com tells me that there will be full support for
this stuff in IE10, FF10, and Android Browser 4.0
http://caniuse.com/transforms3d
--
Ghodmode
http://www.ghodmode.com/blog
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
style type=text/css
div {
position:relative;
left:200px;
top:200px;
-webkit-transition:2s;
}
div#x:hover {
-webkit-transform:translate3d(100px,0,0);
}
div#y:hover {
-webkit-transform:translate3d(0,100px,0);
}
div#-z:hover {
-webkit-transform:translate3d(0,-100px,-100px);
}
div#z:hover {
-webkit-transform:translate3d(0,-100px,100px);
}
/style
/head
body
div id='x'
px/p
img src=http://www.google.com/intl/en_com/images/srpr/logo3w.png;
/div
div id='y'
py/p
img src=http://www.google.com/intl/en_com/images/srpr/logo3w.png;
/div
div id='-z'
p-z/p
img src=http://www.google.com/intl/en_com/images/srpr/logo3w.png;
/div
div id='z'
p+z/p
img src=http://www.google.com/intl/en_com/images/srpr/logo3w.png;
/div
/body
/html
--
Regards,
Peng
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically centreing in Strict HTML 4.01
On Mon, Dec 26, 2011 at 9:27 PM, Aaron Gray aaronngray.li...@gmail.com wrote:
Is there another way with HTML 4.01 strict to vertically and horizontally
centre an img within a page other than boxing it by div's and turning
them into 'display: table' and 'display:table-cell', and aligning them to
center, middle ?
Hi Aaron. Use a table-based layout... well not really :D
.containing_element {
display: table-cell;
vertical-align: middle;
}
vertical-align only works on table cells and other elements that have
display:table-cell. Support is pretty good. It should be IE8+ and
all other major browsers.
I'd also recommend reading about anonymous table objects (
http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes ) that can be
created when you use display:table-cell. They can surprise you when
you're trying to line things up.
references:
http://www.quirksmode.org/css/display.html#t06
http://www.w3.org/TR/CSS21/visuren.html#propdef-display
http://www.w3.org/TR/CSS21/tables.html#table-display
http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes
Many thanks in advance,
Aaron
--
Ghodmode
http://www.ghodmode.com/blog
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What are the meanings of the arguments of border-image?
On Tue, Dec 27, 2011 at 9:20 AM, Philippe Wittenbergh e...@l-c-n.com wrote: On Dec 27, 2011, at 7:28 AM, Peng Yu wrote: It is not very clear to what exactly the arguments to border-image. I can't promise it's any easier to understand, but here's an article about how to use border-image: http://www.css3files.com/border/ The best way to figure it out is probably through experimentation. Make some guesses and see if they work. http://www.css3.info/preview/border-image/ The Working draft is not clear to me either. Could anybody help me understand what the arguments mean? Thanks! http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image-uri You're looking at a fairly old (and thus really outdated) text there. Here is the latest version: http://www.w3.org/TR/css3-background/#the-border-image (in general, when reading specs it is a good idea to scroll to the top of the document and check that you see the latest version – follow the link 'latest…') Now note that the border-image part of the spec is not well implemented in the release version of various browsers (and require vendor prefixes mostly). It's also just a Candidate Recommendation draft. It hasn't been finalized and may be subject to change at any time. http://www.w3.org/standards/techs/css#drafts http://www.w3.org/2005/10/Process-20051014/tr.html#RecsCR It's not well implemented, but it's available in most browsers: Safari: http://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-border-image Mozilla: https://developer.mozilla.org/en/CSS/border-image Opera just says it supports it and links back to the W3C page: http://www.opera.com/docs/specs/presto29/css/backgroundsborders/ http://www.opera.com/docs/specs/presto29/css/o-vendor/ Google Chrome: I couldn't find any documentation for Google Chrome support. It uses the same rendering engine as Apple's Safari, so most of Apple's documentation should work for Chrome as well, but I'd like to find a Chrome specific reference. Internet Explorer: Microsoft makes a browser, too! But it doesn't support border-image :( That's okay. I don't think anyone uses Microsoft's browser any more anyway ;) http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx#border If you really want to try it out with this obscure browser, I found the following: http://stackoverflow.com/questions/3567501/border-image-workaround-for-ie Philippe -- Philippe Wittenbergh http://l-c-n.com/ -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Understanding the third argument of translate3d
On Tue, Dec 27, 2011 at 1:19 PM, Peng Yu pengyu...@gmail.com wrote:
Hi,
I thought that, among the 3rd google logo or the 4th google logo, one
should slip above the other should slip under the previous log,
because the z values are different. But both of them slip above the
previous logo. I guess that I still don't completely understand the
meaning of the third argument of translate3d. Could anybody help
understand it? Thanks!
I don't think I fully understand it myself yet, but I was able to get
the desired effect by adding the following two rules:
div#-z {
-webkit-transform: translate3d(0, 0, 100px);
}
div#z {
-webkit-transform: translate3d(0, 0, 200px);
}
I don't know if it's a bug or a poor implementation or a feature, but
some things won't animate. It looks like the Z axis is one of them.
So, when you tried to move div#-z back during hover, it didn't happen.
However, with the two rules above, div#-z is above div#y and below
div#z when the page renders.
I guess this effectively means that 3d transforms don't work because
the effect is the same as the regular translate function. I must be
missing some detail.
--
Ghodmode
http://www.ghodmode.com/blog
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
style type=text/css
div {
position:relative;
left:200px;
top:200px;
-webkit-transition:2s;
}
div#x:hover {
-webkit-transform:translate3d(100px,0,0);
}
div#y:hover {
-webkit-transform:translate3d(0,100px,0);
}
div#-z:hover {
-webkit-transform:translate3d(0,-100px,-100px);
}
div#z:hover {
-webkit-transform:translate3d(0,-100px,100px);
}
/style
/head
body
div id='x'
px/p
img src=http://www.google.com/intl/en_com/images/srpr/logo3w.png;
/div
div id='y'
py/p
img src=http://www.google.com/intl/en_com/images/srpr/logo3w.png;
/div
div id='-z'
p-z/p
img src=http://www.google.com/intl/en_com/images/srpr/logo3w.png;
/div
div id='z'
p+z/p
img src=http://www.google.com/intl/en_com/images/srpr/logo3w.png;
/div
/body
/html
--
Regards,
Peng
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Vertically centreing in Strict HTML 4.01
On Wed, Dec 28, 2011 at 8:20 PM, Joergen W. Lang joergen_l...@gmx.de wrote:
Am 28.12.11 11:39, schrieb Ghodmode:
On Mon, Dec 26, 2011 at 9:27 PM, Aaron Grayaaronngray.li...@gmail.com
wrote:
Is there another way with HTML 4.01 strict to vertically and horizontally
centre animg within a page other than boxing it bydiv's and turning
them into 'display: table' and 'display:table-cell', and aligning them to
center, middle ?
Hi Aaron. Use a table-based layout... well not really :D
.containing_element {
display: table-cell;
vertical-align: middle;
}
This is exactly what the OP did *not* want. Aaron was explicitely asking for
a method to vertically and horizontally center an image *without* the use of
/display: table/ or /display: table-cell/.
Yes you're absolutely right. I don't know how I missed that. I'm
sorry for my misunderstanding.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A Holiday Treat from PVII
On Thu, Dec 22, 2011 at 5:03 AM, Al Sparber aspar...@roadrunner.com wrote:
Equal Height CSS Columns
Learn how to make your CSS columns automatically adjust to the height of the
tallest column in just a few minutes. This free productivity booster
includes a tutorial, and a bonus 3-column CSS layout all decked out for the
holidays with rounded corners and inset shadows!
display: table-cell
box-shadow: inset ...
border-radius: ...
Instead of using background images, CSS hacks, or CSS that is not yet
supported by all browsers, PVII Equal Height Columns uses modern DOM Script
to work its magic.
A.K.A. JavaScript? Doesn't that make this not the CSS solution that
the title implies?
I checked the demo page with JavaScript disabled. It doesn't work.
Accessibility... Portability... Security... anyone?
Go to Tutorial:
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
Key Features
Supports dynamic content height
If the height of any column ever changes, PVII Equal Height Columns will
make all necessary adjustments—instantly. The script monitors your page
every few milliseconds to see if the height of any column needs adjustment.
Your column height will always be perfect. If your page includes a panel
widget (like an accordion) that causes column height to change when you move
from panel to panel, the system will adapt to the new height seamlessly.
Every few milliseconds seems inefficient. I looked at the code. It's
every 20 milliseconds.
Using the same markup from the demo page for this tutorial, but
dumping all of the CSS and Javascript, this is much better
accomplished like this...
#layout-wrapper {
display: table;
border-collapse: separate;
border-spacing: 10px;
}
#columns-wrapper {
display: table-row;
}
.p7ehc-a {
background-color: white;
display: table-cell;
border: 1px solid black;
}
Javascript is only necessary to support IE7 and older.
Best Regards,
--
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998
I wish I could take credit for it, but this particular solution was
provided by 456 Berea Street back in May 2004 ...
http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/
PVII, it's time to update your site rather than promoting it by
posting outdated JavaScript-dependant solutions on a CSS mailing list.
--
Ebenezer Scrooge
a.k.a. Ghodmode
http://www.ghodmode.com/blog
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A Holiday Treat from PVII
On Fri, Dec 23, 2011 at 1:46 AM, Al Sparber aspar...@roadrunner.com wrote: On 12/22/2011 12:19 PM, Ghodmode wrote: display: table-cell box-shadow: inset ... border-radius: ... This tutorial was published in 2009: http://www.projectseven.com/tutorials/css/3-column-flex-display/ A.K.A. JavaScript? Doesn't that make this not the CSS solution that the title implies? The layout is part of the download package. I checked the demo page with JavaScript disabled. It doesn't work. Accessibility... Portability... Security... anyone? Security ;-) There are some security and privacy concerns about enabling Javascript in browsers when it isn't necessary. It's a common enough concern that we should take it into consideration when making web sites. ref: http://krebsonsecurity.com/2011/05/blocking-javascript-in-the-browser/ Obviously you are confused over what accessibility means. Accessibility means access to content. For instance, the gray links in this particular site (which happens to be yours): Accessibility is often an appropriate concern when dealing with Javascript because screen readers don't execute Javascript. However, since the Javascript isn't necessary for site navigation or access to content here, you're right. http://www.ghodmode.com/blog/ That's an accessibility problem. Not the height of columns :-) No, that's just an ugly site with a poorly chosen color scheme :( The coding of my site is crap. I admit it. I originally meant to make it a highly-customized and regularly updated modification of Wordpress, but I didn't stick with it. I'll fix it all when I get a round to it (http://en.wiktionary.org/wiki/round_tuit), but then I'll probably stop before it's done again. Instead of doing something productive with my time, like updating my own site, I spend it making curmudgeonly cynical comments about other people's sites... sorry about that :-} Every few milliseconds seems inefficient. I looked at the code. It's every 20 milliseconds. I'm afraid you are very wrong. Count to twenty milliseconds then look at this page: http://www.projectseven.com/tutorials/css/pvii_columns/examples/widget.htm I might be missing something here. I didn't mean to say that 20 milliseconds is too slow, but that it's too often. Admittedly, it's a small piece of code, but having the browser execute something 50 times per second doesn't seem like a good idea. I'm not enough of a Javascript ninja, and this isn't the right place to discuss it, but wouldn't it be better if code like this was associated with an event handler for onclick or something like that? Hmmm... is there a js-discuss mailing list? PVII, it's time to update your site rather than promoting it by posting outdated JavaScript-dependant solutions on a CSS mailing list. Update our site? OK. I'll start working on that immediately :-) You have a very Merry Christmas or whatever it is that you celebrate this time of year and make sure you scrutinize the motives behind every gift you get. Okay, you're right... I was a little harsh. It was the cheesy sales-talk of your first message that set me off. It reminded me of an infomercial. I made some valid points about the code, though. -- Al Sparber - PVII __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] amazing use of css..
On Thu, Dec 22, 2011 at 9:18 PM, Tomasz Borek tomasz.bo...@gmail.com wrote: Ghodmode, What version of Firefox? I had no slowdown on AT-AT. Also: I'm using FF8, but I think it might be because I'm on Linux. I think I remember hearing something about FF having hardware-accelerated graphics on Windows, but not on Linux. http://www.osnews.com/story/24264/No_Hardware_Acceleration_Firefox_for_Linux_Due_to_Buggy_X_Drivers 2011/12/22 Ghodmode ghodm...@ghodmode.com It seems like Mozilla should have already had enough time to regain their place as the superior browser, if they could, but it hasn't happened. For sites that incorporate HTML5/CSS3 or a lot of JavaScript, Webkit has to be the target platform. It's disappointing. Firefox has a better plugin / extension architecture. They focused first on memory usage and did that quite well. In Chrome own test for version 17 (or 16?) Chrome lost to FF8 (or 7?). Can't remember where I read it, but I read something like this. As for market shares - these seem to be divided by region. There are places where Chrome leads, there are places where FF does. But, you might have had a different meaning of superior browser in mind so... ;-) Chrome/Chromium/Webkit feels faster and has better CSS3 support. That's what I meant. Also, the mobile platform is becoming more important every day and most of the mobile browsers are Webkit based. There are too many differing sources of information about market share. It seems like Chrome adoption is increasing while both IE and FF are decreasing, but I don't really know. pozdrawiam, Tomasz Borek __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] amazing use of css..
On Tue, Dec 20, 2011 at 3:02 AM, Elli Vizcaino elli...@yahoo.com wrote: On Mon, Dec 19, 2011 at 1:12 AM, Michael Beaudoin mich...@ba-doyn.comwrote: I thought this was amazing and wanted to share. Hope you all don't mind. http://www.ruawebdesign.com/**css3-at-at/http://www.ruawebdesign.com/css3-at-at/ Michael Cool! Thanks for sharing! Here's another one. This guy has created prominent logo brands w pure CSS: http://www.ecsspert.com/play/css3-logos/ Elli Vizcaino Helping artists, entrepreneurs and small businesses knock the socks off the competition! http://www.e7flux.com Using Chrome (Chromium, actually :)) These are awesome. Using Firefox on the first linked page I get I'm sorry! :( But there's to much CSS3 awesomeness for your browser at the moment, so you won't be able to view all the logos in one place. But you can start browsing them one by one right now! The second one (the At-At) looks almost (but not entirely) the same in Firefox as it does in Chrome, but it slows FF down so much that even other tabs are almost unusable. No noticeable slow-down in Chrome. It seems like Mozilla should have already had enough time to regain their place as the superior browser, if they could, but it hasn't happened. For sites that incorporate HTML5/CSS3 or a lot of JavaScript, Webkit has to be the target platform. It's disappointing. Firefox has a better plugin / extension architecture. -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] @media handheld?
I was experimenting with media types in my stylesheet and I did the following:
div class=media_indicator
div class=handheld
/div
div class=screen
/div
div class=handheld
/div
div class=print
/div
/div
@media screen {
div.screen:after {
display: block;
clear: both;
content: screen;
font-size: 200%;
}
}
@media handheld {
div.handheld:after {
display: block;
clear: both;
content: handheld
font-size: 200%;
}
}
@media print {
div.print:after {
display: block;
clear: both;
content: print
font-size: 200%;
}
}
On an Android device, I viewed the page in the default browser,
Firefox, Dolphin Browser HD, and xScope Pro. I couldn't get
Opera Mini to load a page off the local network at all and Opera
Mobile would only load the page if I used the IP address, even though
the host name is in the hosts file on the device. I don't currently
have access to iOS or Windows Mobile devices.
Every browser I tested shows screen. I was hoping for it to say
handheld and screen, or just handheld.
Does the same thing happen on iOS and Windows Mobile browsers?
Is this an oversight of browser vendors, or am I misunderstanding the spec?
Here's the W3C description of the media types :
handheld
Intended for handheld devices (typically small screen,
limited bandwidth).
screen
Intended primarily for color computer screens.
I would consider these devices to be both a handheld device and have a
color computer screen.
This, also from W3C, seems unnecessary:
Media types are mutually exclusive ...
Maybe browser vendors were just making sure they didn't break existing
web sites that use the screen media type?
Just out of curiosity, I also tested in the text-mode browsers Elinks,
links, links2, and lynx. None of them support the :after
pseudo-element.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] DIV behind floating element
On Mon, Oct 17, 2011 at 4:08 PM, Philippe Wittenbergh e...@l-c-n.com wrote: On Oct 17, 2011, at 4:40 PM, Ghodmode wrote: I have a problem where a DIV is behind a floating element. Given the following code, the DIV.banner appears behind the DIV.logo_block at the left edge of the page. I've discovered that setting overflow:auto on div.banner fixes the problem, but I don't know why. Can someone help me to understand why this is happening? 'new block formatting contexts' http://www.w3.org/TR/CSS21/visuren.html#block-formatting That didn't do me any good. It doesn't say anything related to the scenario I've described and doesn't help me understand it. It does have a link to an explanation of the visual formatting model, though. It states the following: The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower. To me, this sounds like the edge of the DIV.banner must not overlap the edge of the DIV.logo_block, even though that seems to be exactly what's happening. But, like I said, there's something I don't understand. A DIV is an element in the normal flow that establishes a new block formatting context and its default overflow value is 'visible', right? So the preceding floated element should be cleared and the DIV.banner should be placed adjacent to it because there is sufficient space. So, what do I have wrong? Thank you. Philippe -- Philippe Wittenbergh http://l-c-n.com/ -- Ghodmode __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] DIV behind floating element
On Tue, Oct 18, 2011 at 7:46 PM, Alan Gresley a...@css-class.com wrote: On 18/10/2011 9:14 PM, Ghodmode wrote: On Mon, Oct 17, 2011 at 4:08 PM, Philippe Wittenberghe...@l-c-n.com wrote: On Oct 17, 2011, at 4:40 PM, Ghodmode wrote: I have a problem where a DIV is behind a floating element. Given the following code, the DIV.banner appears behind the DIV.logo_block at the left edge of the page. I've discovered that setting overflow:auto on div.banner fixes the problem, but I don't know why. Can someone help me to understand why this is happening? 'new block formatting contexts' http://www.w3.org/TR/CSS21/visuren.html#block-formatting That didn't do me any good. It doesn't say anything related to the scenario I've described and doesn't help me understand it. It does have a link to an explanation of the visual formatting model, though. It states the following: The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower. To me, this sounds like the edge of the DIV.banner must not overlap the edge of the DIV.logo_block, even though that seems to be exactly what's happening. But, like I said, there's something I don't understand. A DIV is an element in the normal flow that establishes a new block formatting context and its default overflow value is 'visible', right? So the preceding floated element should be cleared and the DIV.banner should be placed adjacent to it because there is sufficient space. So, what do I have wrong? Thank you. Did you read this. | In a block formatting context, each box's left | outer edge touches the left edge of the containing | block (for right-to-left formatting, right edges | touch). This is true even in the presence of floats | (although a box's line boxes may shrink due to the | floats), unless the box establishes a new block | formatting context (in which case the box itself | may become narrower due to the floats). So in your code, the div.banner_placeholder left edge is touching the left edge of the 'initial containing block' so applying overflow: auto makes the later part happen. | unless the box establishes a new block formatting | context (in which case the box itself may become | narrower due to the floats). More precisely, a box with a 'block formatting context' can not flow underneath a float but rather it sits beside it. I think I get it now. The part that I had wrong is that I thought a DIV started a new block formatting context by default. That's apparently not true and overflow:auto makes it establish a new formatting context. Thank you. -- Alan Gresley http://css-3d.org/ http://css-class.com/ -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] DIV behind floating element
I have a problem where a DIV is behind a floating element. Given the
following code, the DIV.banner appears behind the DIV.logo_block at
the left edge of the page.
I've discovered that setting overflow:auto on div.banner fixes the
problem, but I don't know why. Can someone help me to understand why
this is happening?
header
div class=logo_block
img class=logo src=images/Gm_96x96.png alt=Ghodmode
Development logo
/div
div class=banner
div class=banner_placeholder
h1Banner/h1
/div
/div
/header
div.banner_placeholder {
width: 468px;
height: 60px;
background-color: blue;
color: white;
}
div.logo_block {
float: left;
}
--
Ghodmode
http://www.ghodmode.com/blog
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Does display: none still download a bgnd image
On Sat, Sep 10, 2011 at 5:42 PM, Rick Lecoat li...@sharkattack.co.uk wrote: Hi all; With the current interest in mobile-first responsive design, I have a question that I’ve been unable to fully answer. Here’s the scenario: Assuming that I use the same page for both desktop and mobile (ie. NOT a separate mobile site or subdomain) then I will most likely streamline the mobile experience by having some sections of the page initially hidden using display: none. (User can click/tap to reveal that section as required). My question then, pertains to minimising bandwidth requirements, and it is this: if an element has a background image -- eg. background-image: url(/myImage.png); -- and *also* has display: none applied, does the browser download that image or not? Monitor your web server log and load the page using each mobile browser you want to test. That will give you a clear answer. On Linux, for example, this could be done with the following command: tail -f /var/log/apache2/access.log (Obviously the most relevant browsers for this question are the mobile browsers). I couldn’t see anything in the spec (http://www.w3.org/TR/2011/REC-CSS2-20110607/) to clarify this, so can anyone here shed any light on the matter? Thanks. -- Rick Lecoat -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] can style sheets be too long?
On Thu, Aug 25, 2011 at 5:29 AM, John j...@coffeeonmars.com wrote: As I evolve my site, I'm differentiating styles by altering the name so that I can adjust attributes. example: home page head and sub-page head might be mostly the same, but one might need different positioning or color. can my style sheet get too long? It only measures about 2K in size right now, but what if it got to a whopping 16K? As far as I know, there's not a limitation on the size. As Philippe Wittenbergh, mentioned, Internet Explorer limits the number of rules to 4095 and the number of stylesheets to 31 (not 32). Here are a couple of links that refer to this limitation in IE: - http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/ad1b6e88-bbfa-4cc4-9e95-3889b82a7c1d/ - http://support.microsoft.com/kb/262161 is that a big concern, or is the human angle a bigger deal in terms of keeping everything straight? It's annoying when IE imposes a limitation on us that none of the other browsers do, but I think that almost all sites should fit within the 31/4095 limit. Having said that, I have run into the stylesheet limitation on a large Django-based site with lots of developers working on lots of different parts of the site. But the problem only happened in development because we minified and combined the stylesheets before pushing into production. Also, there was a lot of room for optimization of all of the code that would have eliminated the problem entirely. Something that might help is the concept of Object-Oriented CSS which was presented by one of the Yahoo developers. The GitHub Wiki: - https://github.com/stubbornella/oocss/wiki The presentation: - http://www.stubbornella.org/content/2009/03/23/object-oriented-css-video-on-ydn/ Or just the slides: - http://www.slideshare.net/stubbornella/object-oriented-css thanks! J -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] why does clear:both not work on this div?
On Mon, Aug 22, 2011 at 12:57 PM, Lisa Frost birdiefr...@gmail.com wrote:
The green bar (mainMenu) should be below the white menu (topMenu)in this
design:
http://www.mycfoasia.com/dev/
css:http://www.mycfoasia.com/dev/css/mycfo_mainstyles.css
I thought putting a clear:both on #topmenu would work:
#topMenu {
float: right;
color: #FFF;
width: 600px;
margin: 40px 0 10px 0;
clear:both;
}
But i can't get anything to push it down.
Any pointers appreciated thanks
Like G.Sørtun said...
But you asked why... It's because the clear property specifies where
floating elements *other than* the current element cannot appear. So,
the way you had it set, #topMenu wouldn't have any floating elements
beside it, but #mainMenu isn't floating, so it isn't affected.
Setting clear:both on #mainMenu, as G.Sørtun said, says that #topMenu
can't be beside it because #topMenu is the floating element.
Lisa
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] round corners shadow
On Fri, Aug 19, 2011 at 10:46 PM, Frank fdari...@woh.rr.com wrote: I tried adding shadows to round corner boxes and on the right bottom, there's a space that's not filled in. Is there a way to fill that in with this type of round corner? Thank you. http://www.newbeginnings.info/roundcornershadow.html It's that rbottom block. It looks like old-style rounded corners. You would see the same problem for the rtop block, but the shadow offset is down and right. That block is actually not rounded. It's square with clear corners made to look round. It's inside of the container block and border-radius won't hide its square corners, even though they're clear because of the margins of the elements it contains. In this case, the standard rounded corners and the old rounded corners methods are incompatible. FrankD -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with div sizing?
On Sat, Aug 20, 2011 at 12:27 AM, Barry Brevik bbre...@stellarmicro.com wrote: Is there a way, with css, to make a FORM and a containing DIV hug the widest form element without specifically dimensioning the widths in pixels? Out of the box, the form and the div take up all of the available width in the browser. Here is a test page demonstrating my dilemma: http://www.manicreader.com/testpage.html Use float:left on the DIV#container, then on the element that follows it, use clear:left. TIA, Barry Brevik -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floating content problem
On Mon, Aug 15, 2011 at 1:36 PM, Kashif Sami contactkas...@gmail.com wrote: ... Also, this might sound pretty silly but what's the difference between screen size screen resolution? That may depend on the context of your question. Strictly speaking, size is the physical size of the monitor. It would be something like 22 inches diagonally. Resolution is expressed in pixels, like 1280x1024. In a perfect world, we could use absolute units (http://www.w3.org/TR/css3-values/#absolute0) in our stylesheets and our elements would actually be the size we specified, but I doubt it ever actually works out that way. It's more likely that you would need to worry about the distinctions between inner height (the size of the actual content area of the browser), window size (the size of the FF/Chrome/IE window including decorations, titlebar, and toolbars), and actual screen resolution. Why would you need to worry about screen size when making web pages? Thanks and regards, Kashif -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] trouble using attribute select to display document file type icon on link
On Tue, Aug 16, 2011 at 2:15 AM, Angela French afre...@sbctc.edu wrote: Yucca, the padding-left is to put a bit of space between the last letter of the link and the document icon. The issue with the icon appear to the far right is, in this case, because my links are list items. That space between the image and the last letter of the link would be to the left of the image, not the link. For example, this could be the box representation of an anchor: a[padding-left goes here]This is my PDF file.[padding-right goes here]/a If you use padding-left, but your background-position is set to the right, there will be an empty space at the left inside the link, but your background image will appear behind the text at the right-hand side. In this case, the image isn't even an element. It's just a property of the link, so you can't give it properties like padding. If you want to be able to see the image without text in front of it, you need to reserve some space inside the link's block for the image. That would be padding-right because the background-position is right. Angela French -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Is there a way of styling anchor tags within the body?
On Mon, Aug 15, 2011 at 12:34 AM, Geoff Lane ge...@gjctech.co.uk wrote:
Hi All,
My son has just asked for my help. Part of this needs me to style a
set of anchor tags to give fixed width and also 'mouseover' effect.
Unfortunately, this is to be incorporated in someone else's web page
and we don't have access to the head (and so can't link a stylesheet
there or embed a style block).
Is there any way to link a stylesheet within the page body? Can this
be done with Javascript? Any other ideas?
I think you can use a style/style block in the body.
It could also be done with JavaScript:
var anchors = document.getElementsByTagName(A);
var i;
for (i=0; ianchors.length; i++){
anchors[i].style.width = 100px;
anchors[i].onmouseover = this.style.backgroundImage =
\url('/images/highlighted.png')\;
anchors[i].onmouseout = this.style.backgroundImage =
\url('/images/regular.png')\;
}
That JS probably has syntax errors, but you get the idea.
There's guaranteed to be better ways to do it, but this will get the job done.
I don't know how to target the style of the :hover pseudo-element
using JavaScript, but if there's a way, that's probably better.
You could also use inline styles, but I also don't know if you can
target the hover pseudo-class inline.
All help gratefully received.
--
Geoff
--
Ghodmode
http://www.ghodmode.com/blog
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Inaccessible block at some screen resolutions
On Fri, Aug 5, 2011 at 1:18 AM, Beth Lee callib...@gmail.com wrote: On this page: http://www.callibeth.com/about.php the bottom of the div gmain3 is covered up by the footer when the height of the browser windows is between 305px and 750px tall. It's been 4 years, and it's time to redesign, but I'm looking for a quick fix in the meantime. Can anybody suggest something? I rue the day I foolishly embraced the sticky footer. What do you want it to do? What did you mean by a sticky footer? I tested in Firefox, Chrome, Safari, Opera, and IE9 and I didn't see the problem you describe. However, I looked at your code and noticed you have a negative bottom margin on your div#outer. That's exactly how you would make elements below it hide the bottom of it. I also noticed a negative top margin on your div#footer. I'm not sure exactly what you were trying to do. The bottom margin on the outer block would bring elements under it up so that they cover the bottom of the block. Then the top margin on the footer would bring the footer up so that it covers elements above it. The way I understand it, the footer should cover the bottom of div#outer. Since div#gmain3 is effectively at the bottom of div#outer, the bottom of it should be covered up regardless of the size of the window. ... But I'm wrong ... Something is wrong with my logic here. I must be missing something because, like I said, div#gmain3 isn't covered up in the browsers I've tested. Regards, Beth Lee -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
