[css-d] mobile devices friendly
I have been studing the info lately about making a site mobile device friendly. I would like to take an existing site and create a seperate style sheet so that it is mobile friendly. On the tutorial I studied, you replace the existing header graphic with a smaller one by using the background-image tag for the div in the CSS in the new stylesheet. What I have a question about is the original header. It is a graphic placed there by the image tag in the html. To change this site over I would have to remove the image tag in the html and replace it with the background-image selector in the CSS style sheet of the original site? Is this correct usage of the background-image selector? Would I need to change the doc-type to do this? I usually use transitional as I quite often prefer to have certain pages open up in their own window. (I have read all the discussions about this and I disagree) Thanks for any advice. Kris __ 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] mobile devices friendly
On 11/9/10 12:40 PM, TriState Advantage, Kris Jacobson wrote: I have been studing the info lately about making a site mobile device friendly. I would like to take an existing site and create a seperate style sheet so that it is mobile friendly. On the tutorial I studied, you replace the existing header graphic with a smaller one by using the background-image tag for the div in the CSS in the new stylesheet. What I have a question about is the original header. It is a graphic placed there by the image tag in the html. To change this site over I would have to remove the image tag in the html and replace it with the background-image selector in the CSS style sheet of the original site? Is this correct usage of the background-image selector? Would I need to change the doc-type to do this? I usually use transitional as I quite often prefer to have certain pages open up in their own window. (I have read all the discussions about this and I disagree) Thanks for any advice. Kris I am not familiar with that particular tutorial. If the existing header desktop image is in the markup, then one way to do it is to place the mobile image in the markup, too. In the styles for desktop assign display:none; to the mobile image. And in the styles for mobile assign display:none; to the desktop image. Use CSS3 Media Queries http://www.w3.org/TR/css3-mediaqueries/ The URL, doctype, and stylesheet is the same for desktop and mobile. 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] mobile devices friendly :: ec
On 11/9/10 1:11 PM, David Laakso wrote: Error Control The URL, doctype, and stylesheet is the same for desktop and mobile. What I meant to say is that the URI and doctype are the same regardless of the media you are attempting to hit *And* that the styles [ media queries ] for both desktop and mobile may be in the same style sheet. ~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/
[css-d] Simple (I hope) styling question
I think there's something here that I don't understand - though I have done a lot of reading about
how CSS works. Fortunately, I have a very simple example below. I have tried this in both Firefox
3.6.12 and IE8 and the behavior is the same.
In the HTML file below, I'm expecting the label on the submit button to be red, 11px text. My
reasoning is that even though the 2nd rule is more specific, and therefore would take precedence
over the 1st rule, since the 2nd rule doesn't set the color, font-size and font-family attributes,
the submit button (an input element) should inherit those settings from the 1st rule.
If I move the color, font-size and font-family attributes from the 1st rule to the 2nd rule, the
label is, in fact, red and 11px.
(While composing this e-mail, I tried simply removing the 2nd rule below entirely. When I did, the
label of the submit button was still not red nor 11px, so I conclude that the more specific 2nd rule
isn't responsible for hiding the attributes in the 1st rule)
html
head
style type=text/css
div.buttonmenu table {
background: #BFBFBF;
color: red;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
}
div.buttonmenu table input {
margin: 0px;
padding: 0px 2px 0px 2px;
width: 100%;
}
/style
/head
body class=buttonmenu
center
div class=buttonmenu
table
tr
th
form
action=/help/h-index.htm
input value=Help
type=submit
/form
/th
/tr
/table
/div
/center
/body
__
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] mobile devices friendly
On 09.11.2010 18:40, TriState Advantage, Kris Jacobson wrote: What I have a question about is the original header. It is a graphic placed there by the image tag in the html. To change this site over I would have to remove the image tag in the html and replace it with the background-image selector in the CSS style sheet of the original site? What format is the existing image in the html? I ask because images can take background, and if the image is a .gif or .png it can be transparent, resizable, and have an easily replaceable background image show up. Perfect for what you're asking for, me thinks - I use the technique a lot. Non-transparent image formats will of course not work. 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/
Re: [css-d] Simple (I hope) styling question
-Original Message-
From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
boun...@lists.css-discuss.org] On Behalf Of John Deighan
Sent: Tuesday, November 09, 2010 1:51 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] Simple (I hope) styling question
I think there's something here that I don't understand - though I have
done a lot of reading about how CSS works. Fortunately, I have a very
simple example below. I have tried this in both Firefox
3.6.12 and IE8 and the behavior is the same.
In the HTML file below, I'm expecting the label on the submit button to
be red, 11px text. My reasoning is that even though the 2nd rule is
more specific, and therefore would take precedence over the 1st rule,
since the 2nd rule doesn't set the color, font-size and font-family
attributes, the submit button (an input element) should inherit
those settings from the 1st rule.
If I move the color, font-size and font-family attributes from the 1st
rule to the 2nd rule, the label is, in fact, red and 11px.
(While composing this e-mail, I tried simply removing the 2nd rule
below entirely. When I did, the label of the submit button was still not
red nor 11px, so I conclude that the more specific 2nd rule isn't
responsible for hiding the attributes in the 1st rule)
html
head
style type=text/css
div.buttonmenu table {
background: #BFBFBF;
color: red;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
}
div.buttonmenu table input {
margin: 0px;
padding: 0px 2px 0px 2px;
width: 100%;
}
/style
/head
The first rule affects text in the table, but only if there is no default
styling for a subelement. For example, making the color red on the table
doesn't change that links in the table are blue, because a rule that targets
table does not target a.
The default styling for a submit button (in firefox 4.0b) is:
button, input[type=reset], input[type=button], input[type=submit] {
-moz-appearance: button;
-moz-binding: none;
-moz-box-sizing: border-box;
-moz-user-select: none;
background-color: buttonface;
border: 2px outset buttonface;
color: buttontext;
cursor: default;
font: -moz-button;
line-height: normal !important;
padding: 0 6px;
text-align: center;
text-shadow: none;
white-space: pre;
}
It appears that buttontext is a synonym for black and that -moz-button is
13.px MS Shell Dlg.
If you want the submit button to take the properties, you can use:
div.buttonmenu table input {
margin: 0px;
padding: 0px 2px;
width: 100%;
font: inherit;
color: inherit;
}
---Tim
__
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] Son of Suckerfish problems
URL: http://www.numcchildren.org/new/index.html CSS: http://numcchildren.org/new/children.css Browsers that display the site correctly: Firefox, Opera, IE8 Browsers that have problems: Safari, Chrome, IE8 in compatibility view I¹m trying to use the son of suckerfish method for the drop-down navigation. In IE8 compatibility view, the sub-menus appear to the right of their parents, rather than underneath them. In Safari and Chrome, the sub-menu items don¹t change color when hovered over, but they¹re supposed to. Test the site in the latest versions of FF, Opera, or IE8 to see the site functioning properly. Any insight on causes for the issues and/or solutions for them are much appreciated. Thanks in advance, Daniel Hammond Objective Designs dan...@objectivedesigns.com www.objectivedesigns.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] 2-column definition list - when floated DT is longer than DD?
Dev monkey wrote: the typical way to format definition lists as a 2-column table is to float the DTs (left column) and give the DDs a left margin larger than the DT width. This works fine when all DDs are equal to, or longer than, their matching DT. In my case, all my definition-list elements are one line long, except for the top DT which wraps onto two lines. This throws off the vertical alignment of DT/DD pairs: I don't remembers the details, but I have this rather old page attempting to solve this problem http://brunildo.org/test/float_clear2.html Essentially you can float the DTs, add to the DDs an after rule with a clear, plus some corrections for IE7- browsers... Bruno -- Bruno Fassino http://www.brunildo.org/test __ 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] why aren't these 2 divs on top of each other?
my goal is for blackbar to be underneath header and for it to
remain at the left of header as the browser window gets wider...
what I'll do after the 750px is exceeded, I haven't figured out, but
why is the blackbar div not underneath (in the Z dimension) the
header div?
thank you!
John
div#header {
position: relative;
width: 750px;
height: 100px;
background-color: #601603;
margin: 4em Auto;
border-left: 15px solid black;
}
div#blackbar{
position: fixed;
width: 750px;
height: 100px;
background-color: #00;
margin: 0;
z-index: -1;
}
__
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] why aren't these 2 divs on top of each other?
On Tue, Nov 9, 2010 at 2:21 PM, John j...@coffeeonmars.com wrote: my goal is for blackbar to be underneath header and for it to remain at the left of header as the browser window gets wider... what I'll do after the 750px is exceeded, I haven't figured out, but why is the blackbar div not underneath (in the Z dimension) the header div? thank you! John John, I suggest that you send a link to a web page that illustrates the problem. I used your css in a Try It window on w3schools.com and it worked for me. Admittedly, this may not duplicate a working environment. But in this one situation it worked. So it would be good to see a live example of your problem for reference. Your problem might be related to the interaction of the html and the css. Regards, Claude Needham __ 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] Son of Suckerfish problems
On 11/9/10 3:11 PM, Daniel Hammond wrote: URL: http://www.numcchildren.org/new/index.html CSS: http://numcchildren.org/new/children.css I¹m trying to use the son of suckerfish method for the drop-down navigation. Any insight on causes for the issues and/or solutions for them are much appreciated. Daniel Hammond Daniel, I seem to remember the Son of Suckerfish hover issue as a long-standing Safari bug that is perhaps now shared with Chrome since they are of the sane ilk. I regret other than to pursue Google for a fix your best bet may be to hope for someone else on the list who has personal experience with it and its correction. 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] why aren't these 2 divs on top of each other?
On 11/9/10 5:21 PM, John wrote: my goal is for blackbar to be underneath header and for it to remain at the left of header as the browser window gets wider... what I'll do after the 750px is exceeded, I haven't figured out, but why is the blackbar div not underneath (in the Z dimension) the header div? thank you! John Dunno. But guessing at is always a pleasure...:-) . http://chelseacreekstudio.com/ca/cssd/13.html Send clues. 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] why aren't these 2 divs on top of each other?
On 11/9/10 9:36 PM, John wrote: Dunno. But guessing at is always a pleasure...:-) . http://chelseacreekstudio.com/ca/cssd/13.html Send clues. thanks, Dave! Your example is what I am aiming for. Claude pointed out a number of errors in my code which could explain why things weren't behaving properly. I am probably looking at weeks of tough climbing to learn what I need to learn about writing well-behaved code... I can learn from your example; thanks for posting it! John O.K. Good luck. 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/
