[css-d] Default Styling for / iBooks Hack
Is there any conventional default for ? I am thinking there is not, though perhaps a case could be made for text-transform:uppercase. The reason I ask is this: There is an ad hoc convention among many who style CSS for EPUBs in iBooks to work around the fact that iBooks will ignore font/font-family properties in body-text tags such as , , etc. UNLESS they are properties of a child inline tag OTHER THAN . So in the service of sacrificing the least needed inline tag for this non-semantic hack, I use . Others use , , or , but to me, each of these has default style which must be overridden, and are more semantically valuable. I'd be interested in the opinions of others as to the least offensive workaround. This is a topic that has been discussed at some length in the Twitter hashtag forum for ebook production: #ePrdctn. CAVEAT: Since this falls within the context of a somewhat closed-system use, I consider it appropriate to veer from ideal practices to make a non-standards-based behavior work, as we routinely have to do with past versions of Internet Explorer; so I would hope that feedback will refrain from maintaining that it is never permissible to veer from semantic conventions, even if it is not targeted for multi-browser use, and there is no other way to attain the end goal. I already understand that it is an less-than-optimal solution. Thanks in advance for your feedback. -- ___ RICK GORDON EMERALD VALLEY GRAPHICS AND CONSULTING ___ WWW: http://www.shelterpub.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] Logo in a div
Hi Brian, CSS works better when the page structure is not minimal. Putting a logo inside a div allows you to add further styles to the context you're currently using. For example, you could add a background image (or more images with CSS3) to the div, thus creating a more visually appealing effect for your logo. It's a design choice, not a semantic choice in the strict sense of the term. HTH :-) Gabriele Romanato Thanks Gabriele. .Given the different responses I received, all of which were helpful, I just added a div around my logo. Perhaps I'll use it for styling purposes in the future. - Time will tell. -- Brian =) __ 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] Logo in a div
On 7/18/11 2:00 PM, Brian M. Curran wrote: Why does www.seobook.com put his logo in a div? It seems like its' only purpose is to hold the code class="logo". Wouldn't it have been easier to put the class="logo" in the img tag like how I did on my site: www.draftingservices.com ? Brian Less is more. Best, Ludwig Mies van der Rohe Chicago -- http://chelseacreekstudio.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] Logo in a div
On Mon, Jul 18, 2011 at 11:00 AM, Brian M. Curran wrote: > Hello, > > Why does www.seobook.com put his logo in a div? It seems like its' only > purpose is to hold the code class="logo". Wouldn't it have been easier to > put the class="logo" in the img tag like how I did on my site: > www.draftingservices.com ? For myself, I find that using an enclosing div rather than the raw img makes it that much easier to extend the layout with background or text elements. Personal preference I suppose. But often I will do things that might not make sense in the immediate layout but provide a stepping stone toward later development -- a bit of agile programming. Regards, Claude Needham __ 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] Logo in a div
Brian M. Curran wrote: > Why does www.seobook.com put his logo in a div? It seems like its' only > purpose is to hold the code class="logo". Wouldn't it have been easier to > put the class="logo" in the img tag like how I did on my site: > www.draftingservices.com ? Well, clearly I don't /know/ why he did it that way, but looking at the code it is not only an that is within the -- there is a surrounding as well. Which means that he can style (e.g.) .logo A and .logo IMG which would not be possible if the class were associated solely with the . Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Logo in a div
Hi Brian, CSS works better when the page structure is not minimal. Putting a logo inside a div allows you to add further styles to the context you're currently using. For example, you could add a background image (or more images with CSS3) to the div, thus creating a more visually appealing effect for your logo. It's a design choice, not a semantic choice in the strict sense of the term. HTH :-) Gabriele Romanato -- http://www.css-zibaldone.com/ http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ 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] Logo in a div
Hello, Why does www.seobook.com put his logo in a div? It seems like its' only purpose is to hold the code class="logo". Wouldn't it have been easier to put the class="logo" in the img tag like how I did on my site: www.draftingservices.com ? I'm not criticizing here. Rather, I'm just trying to see if I'm missing something. Thanks, Brian __ 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 are the properties disappearing?
18.07.2011 18:38, onno de jong wrote:
In the following example: http://circularcreation.com/sprites.html
> I've created a single image rollover using a sprite, but when
> I duplicate that (3x) and give each link a different id and then
> update the coordinates, the other three do not show up.
If you use the W3C CSS Validator on your stylesheet, it says things like
"Value Error : background Too many values or values are not recognized :
url('images/sprite-example.png') no-repeat -24px ýýý181px
url('images/sprite-example.png') no-repeat -24px ýýý181px"
This may look mystic, but the Validator just doesn't process UTF-8 data
properly. What it renders as ýýý is actually MINUS SIGN U+2212, which is
not allowed in CSS. Replacing the minus signs by common hyphens (the
ASCII hyphen, i.e. HYPHEN-MINUS U+002D, fixes the problem.
The minus sign can be visually very similar or even identical to the
common hyphen, depending on the font.
In firebug, it shows the background properties of the other three are
> missing from the CSS, and in Chrome, Inspect Element, they are
crossed out.
That's understandable and correct, as CSS error handling rules require
the entire declaration to be ignored when there is a value error.
I have no idea where the minus signs have come, but maybe some editor or
other tool automatically converts common hyphens to minus signs. In
human-readable text, the minus sign is in many ways superior to the use
of the common hyphen as the sign of negative numbers. But almost all
computer languages use the common hyphen as the negation and subtraction
operator, not the minus sign.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
__
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 are the properties disappearing?
On Mon, Jul 18, 2011 at 8:38 AM, onno de jong wrote:
> In the following example: http://circularcreation.com/sprites.html I've
> created a single image rollover using a sprite, but when I duplicate that
> (3x) and give each link a different id and then update the coordinates, the
> other three do not show up. In firebug, it shows the background properties of
> the other three are missing from the CSS, and in Chrome, Inspect Element,
> they are crossed out. What error causes that? It has to be obvious but I
> guess I'm too tired to see it at the moment. Thanks for any help.
> odej
When I used the Firefox "save page as" feature to create a local copy
for testing purposes, I noticed the following in the html file
#navi-1 a:link {
width:102px;
height:102px;
display:block;
background:url('images/sprite-example.png') no-repeat -24px -43px;
}
#navi-2 a:link {
width:103px;
height:103px;
display:block;
background:url('images/sprite-example.png') no-repeat -24px −181px;
}
Somehow what looks like "-" is not really a minus sign as far as
Firefox is concerned.
Fix that and this should all work out much better.
Regards,
Claude Needham
__
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] Why are the properties disappearing?
In the following example: http://circularcreation.com/sprites.html I've created a single image rollover using a sprite, but when I duplicate that (3x) and give each link a different id and then update the coordinates, the other three do not show up. In firebug, it shows the background properties of the other three are missing from the CSS, and in Chrome, Inspect Element, they are crossed out. What error causes that? It has to be obvious but I guess I'm too tired to see it at the moment. Thanks for any help. odej __ 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/
