Re: [css-d] h2 flush left 'tbnt
On 09.10.2010 06:41, David Laakso wrote: This is a first-pass at tight but not touch [ing] on h2 http://chelseacreekstudio.com/ Visually there is a vertical imbalance, because the bottom of first letter is in perfect balance with next letter. First letter down a pixel or so, will make it *appear* more in balance. Intentional imbalance often looks better than perfect balance in such line-ups. H2's font-family not consistent across my browsers, which makes it important not to go horizontally too tight - looks acceptable in my browsers now. Your comments and suggestions are [almost :-) ] always appreciated. Almost will have to do then... ;-) regards Georg __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Setting the width of an image
Hi All,
I've got a hybrid layout for one of my sites (i.e. part CSS, part
'old-style'). I'm trying to get an image to take up 95% of the
content column width. Important styles are:
body {
padding: 0px;
margin: 0px;
background-color: #408040;
font-family: arial, helvetica, sans-serif;
}
#bodycontent {
position:relative;
margin:0;
left: 13%;
width: 75%;
padding: 3px;
background-color: #ff;
border-color: #e0ffe0;
border-style: outset;
border-width: 5px;
}
td {
text-align: left;
vertical-align: top;
}
td.masthead {
text-align: center;
vertical-align: middle;
font-family: uechi, 'Monotype Corsiva', cursive;
font-size: 48pt;
}
td.content {
vertical-align: top;
font-size: 75%;
padding-right: 20px;
}
table.outer {
border-color: #e0ffe0;
border-style: groove;
border-width: 3px;
margin-left: auto;
margin-right: auto;
}
I'm using ORB to assemble the site, and the following is from the ORB
source (hence the weird includes). In the body, I've got:
body
div id=bodycontent
table class=outer width=100%
[[$include masthead.orh]]
tr
td class=no_print width=25% valign=top
pnbsp;/p
[[$include navigation.orh]]
/td
td class=content
h1Page Heading/h1
pblah, blah, blah/p
pimg src=myimage.png alt=Description style=width:95%br
span style=font-style:italic;Image caption/span/p
pBlah, blah, blah./p
/td
/tr
/table
/div
[[$include footer.orh]]
/body
This works as expected in Firefox 3.6 and Opera 10.62 but IE8 renders
the image at actual size. For info, I'm using HTML 4.01 Transitional
and I've tried changing the DTD declaration to:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
While IE8 then rendered the image at approx the correct size, it also
positioned the border of the table.outer outside the border of the
bodycontent div. So I then tried changing the bodycontent div
positioning viz:
#bodycontent {
position:relative;
margin:0;
/*left: 13%;*/
margin-left:auto;
margin-right:auto;
width: 75%;
padding: 3px;
background-color: #ff;
border-color: #e0ffe0;
border-style: outset;
border-width: 5px;
}
FF and Opera continued behaving as expected but IE8 reverted to
rendering the image actual size. I changed the image width to 75% and
IE8 reduced the image size but positioned it in a space that was
actual width (so the text flowed off the right-hand edge of the
content field and the border of the outer table moved accordingly).
FWIW, the reason why I originally used left:13%;width:75% for the
bodycontent div was because the layout wouldn't work properly in IE
with the more usual setting of left and right margins to auto.
This is driving me round the twist, so all help gratefully received.
--
Geoff
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] h2 flush left 'tbnt
G.Sørtun wrote: On 09.10.2010 06:41, David Laakso wrote: This is a first-pass at tight but not touch [ing] on h2 http://chelseacreekstudio.com/ Visually there is a vertical imbalance, because the bottom of first letter is in perfect balance with next letter. First letter down a pixel or so, will make it *appear* more in balance. Maybe... but the difference between the first letter and the rest is so big that it would disturb be, independently of vertical balancing. I'm especially referring to the rendering I see on IE 8 and Chrome, on which the font embedding techniques apparently don't work - and a serif default font is used in 700% size. (I don't understand why they use a serif font, but they do.) H2's font-family not consistent across my browsers, On Firefox 3.6.10 (Vista), the site's H2 font-family behaves very oddly. On the main page, I see the embedded sans-serif font (I guess), but when I click on Portfolio, I first see the heading that way but then the rendering automatically changes to the same style that I see on IE 8. -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Photoshop drop shadow and CSS3 box-shadow equivalent
just curious, how does css box-shadow values corresponds to photoshop’s drop shadow/inner shadow settings? i mean, let’s say in photoshop i have a button that has a drop shadow with 90deg angle, 4px distance, 0% spread and 3px size.. how do i recreate it using css? this is how the button looked like photoshop: http://db.tt/ccazg8l here's the button made with css: http://db.tt/a1rk08F i get the result with this box-shadow settings.. box-shadow: 0 2px 3px 0 rgba(0,0,0,0.45); https://developer.mozilla.org/en/CSS/box-shadow http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html%23//apple_ref/doc/uid/TP30001266--webkit-box-shadow i still think it's a bit off somehow. i don't know, maybe it's just me :P i'm doing more testing at the moment. i'll share it once i get an exact formula. but does someone figure this out yet? i think we all could really use a reference on this.. thx -- Rizky Syazuli Senior Front-End Developer rizkysyaz...@gmail.com http://id.linkedin.com/in/rizky __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] h2 flush left 'tbnt
On 10/9/10 12:41 AM, David Laakso wrote:
This is a first-pass at tight but not touch [ing] on h2 for this
site [signature link].
CSS is in or around line 24 through 28
http://chelseacreekstudio.com/site/css/sisu.css
Thanks to all who replied.
Suffice it to say that for whatever unknown and mysterious reasons
@fontface {...} h2:first-letter {...} is not ready for prime-time
cross OSes/browsers :-) .
Consequently, h2:first-letter {...} has been abandoned.
The @fontface slab-serif holding as intended now at least on this end
--` Mac OS X 10.4 and XP Parallels with these exceptions:
SeaMonkey 2.0.6 and 2.0.6 on XP Parallels rendering Helvetica Neue on
the index and the intended slab-serif on all inside pages.
IE/7.0 stand alone on XP Parallels showing the slab-serif on all pages
but the Journal page crashes the browser due to a video rather than
a font issue.
If anyone is still getting different results than mine, please let me
know...
Best,
~d
--
:: desktop and mobile ::
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Setting the width of an image
On Saturday, October 9, 2010, 11:07:11 AM, I wrote:
This is driving me round the twist, so all help gratefully received.
---
Sorry to reply to my own post, but I've hopefully sorted it out.
Microsoft (as per usual IME) are not being helpful as the behaviour of
Internet Explorer is different dependent on whether the page being
rendered is local (i.e. file protocol or on your intranet) or from the
Internet. I'd found what looked to be a reasonable solution in the
commented backslash work-around, but it wasn't working for me in IE8
when viewed over my local network. With the DTD explicitly specified
as HTML 4.01 Transitional using http://www.w3.org/TR/html4/loose.dtd,
I tried the following styles:
style type=text/css
img.fullwidth {
width: 100%;
}
/* comment with escaped ending to work around IE mess \*/
* html img.fullwidth {
width: 350px;
}
/* end of work-around */
/style
and removed the inline style from the img tag.
Unfortunately, this wasn't working for me as IE8 rendered the image at
actual size. So I removed the link to the DTD in the declaration and
IE8 then rendered the image at 350px as expected. I uploaded the
result to http://www.friendsofthanckespark.org.uk/history.html but
some time later I read about IE8 treating local pages differently and
so put back the full path to the DTD. IE8 now renders the page
correctly and it's pretty close to what I get in Firefox 3.6 and Opera
10.62.
Thanks and HTH,
--
Geoff
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] address element with classes
I'm trying to address an LI which has two classes (it's part of the nav): li class=page-item-7 current_page_item Is there any way to address the li ONLY when it has both these classes? On other pages, it has a different combination of classes. The page in question is http://clients.pixelalchemy.com/rsl2/?page_id=7 The client wants the sub-nav for the portfolio section to only show after you are in one of the sub-pages (yes, stupid, but they insist). The site is in wordpress, so I don't have great control over the html. Dave Solko Pixel Alchemy d...@pixelalchemy.com 513.300.2165 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] address element with classes
I'm trying to address an LI which has two classes (it's part of the
nav):
li class=page-item-7 current_page_item
Is there any way to address the li ONLY when it has both these
classes? On other pages, it has a different combination of classes.
Yes, you can use the selector below, but note that it won't work in IE6:
.page-item-7.current_page_item {}
Because ie6 will only see:
.current_page_item {}
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
