Re: [css-d] navigate site
My reference point is a galaxy s3, jellybean 1.4.2. I like the general layout of the home page. Flows well and is pleasing to the eye. The menu icon gets attention immediately. Works well on s3 and on desktop. Font size fits both s3 and desktop. Very effective. I'd like to see the drop down menu icon div width confined to the size of the icon plus margins/padding (on both s3 and desktop the upper nav bar stretches the entire width, not a big deal on desktop but takes up a lot of real estate on s3). I think the icon can be smaller, reducing the height of the nav bar. With Russel's name to the right of the menu icon, his credentials can remain where they are (full width), and the content can move up toward the top of the physical screen. Bill On 7/15/2013 11:13 PM, David Laakso wrote: Seeking constructive comments and suggestions on the method used to navigate a responsive [desktop, tablet, and mobile] site. html http://ccstudi.com/russ/ css http://ccstudi.com/russ/r/r.css Best, David Laakso -- 216.978.5063 | bill.braun3 (Skype) __ 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] Use of brackets
I am working with a style sheet that makes wide use of this syntax:
TABLE.BODY{
border-style: solid;
border-color: LOGOCOLOR;
background-color: BGCOLOR;
}
I have done a good deal of searching on CSS sites without finding
anything that addresses this. I assume that the brackets refer to a
previously defined value, but I thus far I don't have any idea where to
look.
Any suggestions?
Bill Braun
--
216.978.5063 | bill.braun3 (Skype)
__
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] Use of brackets
Follow-on...
Pulled the trigger just a minute too soon. It was defined in another
file using the str_replace() function. At least I assume this is where
it is defined. It looks like this:
$text=str_replace(LOGOCOLOR,#.$logocolor,$text);
I have not yet tracked down the other variables.
Bill Braun
On 6/2/2011 5:57 PM, Bill Braun wrote:
I am working with a style sheet that makes wide use of this syntax:
TABLE.BODY{
border-style: solid;
border-color: LOGOCOLOR;
background-color: BGCOLOR;
}
I have done a good deal of searching on CSS sites without finding
anything that addresses this. I assume that the brackets refer to a
previously defined value, but I thus far I don't have any idea where
to look.
Any suggestions?
Bill Braun
__
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] Use of brackets
Apologies for the initial top post. Running too fast.
Michael, many thanks for the explanation, it has served to open some
insights about the difference between generated and server code, which I
had not understood clearly.
Bill
On 6/2/2011 6:55 PM, Michael Geary wrote:
It's an easy mistake to make.
Remember that CSS is a browser-side language, just like HTML and
JavaScript. The code you're looking at on your server is not CSS code
- it's a template (or PHP code, or whatever) that your server uses to
*generate* HTML, CSS, and JavaScript.
The browser doesn't see any of that server code. It doesn't know about
PHP or those substitution variables or anything like that. All it sees
is the final output.
So if you're troubleshooting CSS, look at the generated CSS, not the
server code. Use View Source or other browser tools so that you see
what the browser is seeing. Then if something is amiss, you can refer
back to the server template or code that generated your CSS.
-Mike
(top-posted for consistency with the existing thread)
On Thu, Jun 2, 2011 at 3:02 PM, Bill Braun bbr...@hlthsys.com
mailto:bbr...@hlthsys.com wrote:
Follow-on...
Pulled the trigger just a minute too soon. It was defined in
another file using the str_replace() function. At least I assume
this is where it is defined. It looks like this:
$text=str_replace(LOGOCOLOR,#.$logocolor,$text);
I have not yet tracked down the other variables.
Bill Braun
On 6/2/2011 5:57 PM, Bill Braun wrote:
I am working with a style sheet that makes wide use of this
syntax:
TABLE.BODY{
border-style: solid;
border-color: LOGOCOLOR;
background-color: BGCOLOR;
}
I have done a good deal of searching on CSS sites without
finding anything that addresses this. I assume that the
brackets refer to a previously defined value, but I thus far I
don't have any idea where to look.
Any suggestions?
Bill Braun
__
css-discuss [css-d@lists.css-discuss.org
mailto: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://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] Drop-down navigation without javascript
On 1/27/2011 5:27 PM, David Laakso wrote: On 1/27/11 5:16 PM, Jess Hardy wrote: Hello everyone, I am currently looking for a solution for creating a single level drop-down that can be activated by the keyboard but does not use the standard suckerfish approach. I had come across one previously but can not find the article. This should be possible using the :focus and/or :active functions, or am I wrong? I think TJK's drop-down may meet your requirement... Script-free modern browsers / keyboard-friendly http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp Best, ~d I cannot find it, but I thought that Gabriel Romanato offered up such a navigation bar not too long ago. Bill B __ 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] Span Style Inside Div with PHP Code
Good Afternoon, Everything I've research tells me this ought to be valid, but the span style seems to have no effect. div class=registercolright span style=padding-top:20px; ?php // some code that writes an unordered list ? /span /div !-- close registercolright -- I am using this approach (rather than just change the registercolright class) because each page where that class is used requires some adjustment and I'd prefer, if possible, not to create a large number of similar classes. Apologies for not supplying a URL; I am in the middle of development and there are a host of PHP related issues that I'd rather were not set loose by testing the page. Thank you, Bill -- 216.978.5063 __ 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] Span Style Inside Div with PHP Code
Many thanks, Thierry. Will settle for additional classes. Bill On 12/3/2010 12:41 PM, Thierry Koblentz wrote: Everything I've research tells me this ought to be valid, but thespan style seems to have no effect. div class=registercolright span style=padding-top:20px; ?php // some code that writes an unordered list ? /span /div !-- close registercolright -- vertical padding will not create vertical space on inline elements -- 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/ __ 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] Span Style Inside Div with PHP Code
On 12/3/2010 12:51 PM, Climis, Tim wrote: I am using this approach (rather than just change the registercolright class) because each page where that class is used requires some adjustment and I'd prefer, if possible, not to create a large number of similar classes. Then don't Apply multiple classes instead. div class=registercolright lotsOfSpace div class=registercolright littleSpace div class=registercolright oodlesOSpace The point here is that your registercolright class stays the same and gets called everywhere, and then you apply a second class to the div that applies varying amounts of whitespace. You do have lots of very similar classes, (they're all margin-top: something), but they're also very small. Thanks, Tim. Yes, you are quire right about the proliferation of classes, and I did not know about applying a second class. This has been the result of learn as I go and it seemed easier (at the time) to simply copy a class and make a few adjustment. Your point is well taken and I'll use it in the future. Thank you, Bill __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Span Style Inside Div with PHP Code
On 12/3/2010 12:51 PM, Thierry Koblentz wrote: Hi Bill, Many thanks, Thierry. Will settle for additional classes. Actually, you should not have a list/list items in that span. So rather than adding a class you'd better replace that span with a div (which will take the padding). As a side note, do you need that additional wrapper? Can't you style registercolright with some padding-top? Hi Thierry, Tim's comments apply here, I think. I use registercolright on multiple pages, but the padding requirements of each page vary a little based on the content that is being written by the PHP code. In some cases I want the ul to write near the natural top of the div class=registercolright and on other pages to write farther down from the natural top. Bill __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Stumped on font style
I am adapting a Word Press style to integrate a blog into my web site. I have just about everything except the top navigation font style. This is the reference style: http://basicbusinesssim.com/ This is the blog page I am trying to match: http://www.basicbusinesssim.com/bbsimblog/ Note that the horizontal letter spacing in the top navigation in the reference style is narrower, and the horizontal letter spacing in the top navigation on the blog page is wider. I've concluded that I am simply missing the obvious, but I cannot spot it. Any pointers? Best regards, Bill B __ 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] Stumped on font style
David Laakso wrote: Bill Braun wrote: I am adapting a Word Press style to integrate a blog into my web site. I have just about everything except the top navigation font style. This is the reference style: http://basicbusinesssim.com/ This is the blog page I am trying to match: http://www.basicbusinesssim.com/bbsimblog/ Note that the horizontal letter spacing in the top navigation in the reference style is narrower, and the horizontal letter spacing in the top navigation on the blog page is wider. I've concluded that I am simply missing the obvious, but I cannot spot it. They receive a different font-family. I'm thoroughly embarrassed to say that I checked the font-family styles - but not extensively enough. Thank you, David, and to Patricia also. Bill B __ 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] Absolute Positioning for all page containers okay?
Anne McKinsey wrote: Greetings, I'm setting up numerous web pages with a jquery photo gallery that needs AP for its main images. Is it okay to set up every container on the page with AP or are there potential problems with doing so? The pages look okay on various browsers and no errors on W3C validator, but I can't help but think I'm doing something horribly wrong. Here is a page: http://www.amckwebandprint.com/macdonald/portfolio/portfolio-knit- process.html http://www.amckwebandprint.com/macdonald/portfolio/portfolio.css Your advice is much appreciated, A. McKinsey The trade off is between precision design and the wide variety of preferences users have in how they configure their browsers. What looks great to you based on the screen size, screen resolution, and browser settings you used during design and coding may look unsightly to people who have different monitors and browser preferences. I use absolute positioning myself. No one so far has complained, but I suspect that the easier response from people who find your site (or mine) unsightly is to simply leave. I am actively considering removing absolute positioning in the next site redesign. Bill B __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] styling text inside a div
Andy B. wrote:
I have some questions about creating styles for 3 lines of text that are in
a div that is 298px wide and 75px tall.
1. For each line of text, what container would you use? For an example, p,
div or span?
2. I need to create the styles, but don't quite know where to start.
Line 1: The text Eternity Records presents should:
- Be horozontally centered in the div containing it.
- Be black in color.
- Be on a line all by itself.
- be significantlly larger than the rest of the text on the page.
- have it's font-family be sans serif.
Line 2: The text In Him should:
- Be the color #60.
- be the same font as line 1.
- be horozontally centered in the div below line 1
- Be on a line all by itself.
- be 25% smaller than line 1.
Line3: The text For in Him we move and live and have our being... (Acts
17:28) should:
- Be #60 in color.
- Be the same font as line 1 and 2.
- Be horozontally centered in the div below line 2
- Be on a line all by itself.
- Be the same font size as the text on the rest of the page.
How would I make these styles?
For a very rudimentary explanations of different approaches to styling
see http://www.w3schools.com/css/css_howto.asp.
My response is germane to using an external style sheet. I would create
one p selector for properties that are common to all three (if in
fact there are common properties). I would create three classes, one for
each line described above.
p {
add properties here common to all lines;
}
.plineone {
add properties unique to line one here;
}
.plinetwo {
add properties unique to line two here;
}
.plinethree {
add properties unique to line three here;
}
Use p class=[insert class name her]/p for the content for each
line. All in all:
div
p class=.plineoneBlah blah blah line one./p
p class=.plinetwoBlah blah blah line two./p
p class=.plinethreeBlah blah blah line three./p
/div
The div itself can had an ID or a class, as befits your overall design.
Bill B
__
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] help needed
TriState Advantage, Kris Jacobson wrote: I have been trying to improve my CSS. Several times I have downloaded layouts from layout Gala to jumpstart my web pages but then I have to take time to go through the layout and identify the div's and change them accordingly. So this time I tried to create my own CSS stylesheet. I am trying to get a centered page. I have a div around the page with 800px size and auto margins but it isn't centered. I did validate the css and html just to double check and they came up clean. I also went back to my layout gala templates and compared CSS but that didn't tell me anything either. So I have to be missing some attribute. Can you tell me what I am missing in centering this page? This page is just in the beginnings so I don't have a lot of content yet. http://www.tristateadvantage.com/woolynpurses/index.html http://www.tristateadvantage.com/woolynpurses/woolynstyles.css Thank you for any help you give me. This list has been a great help in trying to comprehend CSS and I still have long way to go. Kris J In what browser is the page not centering? FF 3.6.3 seems to render it properly, including changing the size of the browser window. Bill B __ 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] re-need help
TriState Advantage, Kris Jacobson wrote: Message: 18 TriState Advantage, Kris Jacobson wrote: I have been trying to improve my CSS. Several times I have downloaded layouts from layout Gala to jumpstart my web pages but then I have to take time to go through the layout and identify the div's and change them accordingly. So this time I tried to create my own CSS stylesheet. I am trying to get a centered page. I have a div around the page with 800px size and auto margins but it isn't centered. I did validate the css and html just to double check and they came up clean. I also went back to my layout gala templates and compared CSS but that didn't tell me anything either. So I have to be missing some attribute. Can you tell me what I am missing in centering this page? This page is just in the beginnings so I don't have a lot of content yet. http://www.tristateadvantage.com/woolynpurses/index.html http://www.tristateadvantage.com/woolynpurses/woolynstyles.css Thank you for any help you give me. This list has been a great help in trying to comprehend CSS and I still have long way to go. Kris J In what browser is the page not centering? FF 3.6.3 seems to render it properly, including changing the size of the browser window. Bill B I am using IE8. I also checked IE6 with the same result. I did not check Firefox as the layout gala templet I am trying to emulate worked in IE8. Is there a fix for IE that I am missing? Kris J __ This is a roundabout, and may not get you where you want to go. Are you perchance using Firefox? If so, there is a marvelous add-on, Web Developer 1.1.8, that has a very nice CSS feature. When you are viewing a web page, you can view style information for a particular element by clicking on it. The corresponding CSS code is displayed at the bottom. Using this with the template that does work may lead you to the code that will make your edited template likewise work. Bill B __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox wont align content in a table properly -- SAFARI issue
Matthew wrote: Is this the how dare you make so many HTML/CSS violations and still seek our knowledge?!?!11? missive? If so, sorry for wasting your time. If not, please help me understand why my site doesn't work in Safari. Your message does nothing to help! Thanks! The eternal CSS n00b, Matthew It may or may not be, depending on your interpretation. Inclusive of your feelings on the subject, validating your site it is excellent advice. Seeking knowledge is just fine, but rejecting part of that knowledge (validating your site first) and expecting people to sort through an unvalidated site to help you fix your problem is off course. You are coming across as cherry picking the knowledge you think you want and then getting testy when people challenge you on that. Expecting you to validate your site (HTML and CSS) as a precursor to offering other help is a very reasonable request. Take it, you will like the results. Bill B __ 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] Top Menus and Positioning Bookmarks
Dixie Dean wrote:
Hi everyone
I have a mobile device version of a web based product that has a div
which appears across the top of the page with a menu in it. Currently,
if the user clicks on a hyperlink in a page which goes to a bookmark in
that or another page, the bookmark by default appears at the top of the
page, which will, of course, be hidden under the menu. In fact the menu
hides the first two lines of any page but only when it is scrolled
upwards. The page is normally displayed as starting immediately below
the menu.
Does anyone have any thoughts as to how the top of the page might be
shifted down by the depth of the div area?
Dixie Dean
Can you provide a URL?
If I understand what you describe, try placing something like this at
the top of the page.
pnbsp;/p
You may, based on circumstances, want to place that in its own div:
div
pnbsp;/p
/div
This is obviously an HTML solution, not a CSS one. It may be enough to
accomplish what you want.
From a CSS point of view, you can consider the position property value.
.topspacer {
position: absolute;
top: Npx;
}
div class=topspacer
stuff/stuff
/div
where N equals the number that will achieve the spacing you want.
Bill B
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop downs behind content
Shanna Cramer wrote: On some versions of Win7/EI8 the drop down menu falls behind the content. I have two (probably three) websites this is happening on. I have raised the z-index to 9 and it still happens. This is something that I can¹t see. The Win7/IE8 PC I have access to does not show this issue. Customers are telling me about it. The websites I have gotten complaints on are: http://titanoutletstore.com/ - menu falls behind the video http://www.valleyseniorservices.org/ - menu falls behind the content Is this something I can fix? How? FF 3.5.9 XP, SP3 I can duplicate what you describe for titanoutletstore but not for valleyseniorservices. Related but different...on vallyseniorservices the menu for Sargent is chopped off on the right side by the body container. Bill B __ 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] doctype
Thierry Koblentz wrote: As a side note, one advantage of XHTML over HTML is that XHTML allows authors to use an ID on html (which can be handy). That's another mystery to me. Could you unpack a few details? Thank you, Bill B __ 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] doctype
I have struggled for the longest time to understand the obvious. For some reason the differences between HTML 4.01 and XHTML were completely lost on me. And now? Eureka, the dawn finally breaks. Thanks to Chris, Norman, Thierry, MB, and Philip. I don't know that you said anything terribly different that what I've read before, but it was laid out in a real clear manner. And thanks to Chris for the initial post. Bill B __ 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] Unwanted horizontal scroll in IE 7/6
Tom Livingston wrote: List, Can anyone see where the horizontal scrollbar is coming from in IE 6 and 7 at this address? I can't find it and i'm going nuts... http://www.mlinc.com/products/zpache/ Thanks! I was only able to duplicate this in IE Tester, simulating IE7. I have IE6 installed that I use for testing; I was not able to duplicate the horizontal scroll bar. Bill B __ 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] New to css
MB wrote: Bill Braun said: Setting aside the moral implications, having made a transition from a site built completely around tables to one based on div, the latter, in my experience and opinion, takes much better advantage of CSS. I have been able to do everything using div as I did using table, in a much more flexible manner, and, again in my opinion, with a slight edge in favor of design aesthetics. Based on divs? Hello? What about based on structural semantic markup and CSS-layout techniques? You guys - Bill, Claude - sound like you have contracted divitis* in your migration to CSS-layout techniques. Better find a cure. Your interpretation is a bit on the literal side, but I am grateful for your kind words nevertheless. Bill B __ 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] New to css
Ed Seedhouse wrote: And I close with a recommendation to read the links provided by Bill. Credit goes to MB for the links. Bill B __ 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] New to css
MB wrote: Bill Braun said: Your interpretation is a bit on the literal side, but I am grateful for your kind words nevertheless. My apologies. I forgot the smiley. Digital communication can be difficult when writing on the run. I've impaled myself on that hook a time or two... Bill B __ 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] New to css
Lineberger, Scott wrote: Thanks, Tim, that did the trick and put me on the right track. Now, if I could only decide is tables are really all that evil! Thanks, Scott Setting aside the moral implications, having made a transition from a site built completely around tables to one based on div, the latter, in my experience and opinion, takes much better advantage of CSS. I have been able to do everything using div as I did using table, in a much more flexible manner, and, again in my opinion, with a slight edge in favor of design aesthetics. Bill B __ 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] fix border on some list items?
Rory Bernstein wrote:
Hello,
http://dev.bossyfrog.com/
I have a blue, horizontal nav bar on my site, the URL is above. You will see
that there are white borders that separate the items on the nav bar. They are
coded as an unordered list. The rule for the border is included in this style
info below:
.nav li {
border-right:1px solid #FF;
color:#FF;
display:inline;
font-family:Verdana,Geneva,sans-serif;
font-size:1em;
margin:0;
padding:0 10px;
}
I want the borders to be centered vertically, in line with the text-images.
How can I move those borders up so that they line up correctly?
Try using the pipe character | rather than styling the border to
separate menu items, see if that makes a difference. You have two
validation errors related to onMouseOver and onMouseOut. Correct those,
see if they are contributing factors.
Bill B
__
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] fix border on some list items?
Rory Bernstein wrote: hi Bill, Yes, I saw those validation errors for the mouseovers. I don't know how to correct those... any suggestions? I like your suggestion about using the pipe character instead of border. I will play with that. Thanks! This might help. http://www.webdevelopersnotes.com/tutorials/javascript/changing_images_on_mouseover_mouseout_javascript.php3 Bill B __ 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] fix border on some list items?
Rory Bernstein wrote: Thanks so much, Kata. I will try this! I am getting 2 of each emails from the list. Is this happening to others as well? Rory If people Reply-All the list and the OP receive a response. Bill B __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE problem
CSS validation is pointing to a style sheet that cannot be found. Also, there are some HTML validation errors. About half refer to how the phrase b b is being treated, but there are some div related errors. Bill B Atkinson, Sarah wrote: I have been working on this yesterday and today And I simply can't figure it out. It is a wordpress site. And it just is giving me some very weird giant white box display problems win IE6 and 7. http://test.grantstinn.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-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE problem
Atkinson, Sarah wrote: I have been working on this yesterday and today And I simply can't figure it out. It is a wordpress site. And it just is giving me some very weird giant white box display problems win IE6 and 7. http://test.grantstinn.com/ __ I'll tread very lightly here, Sarah. There seems to be a lot of styles that are either redundant or conflicting. I did not examine them with any rigor, it is a first impression. Also, it looks like you are linked to five different external style sheets. Are they all necessary? There may be conflicts between/among them that would be hard to track down. Bill B __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE problem
Atkinson, Sarah wrote: I'll tread very lightly here, Sarah. There seems to be a lot of styles that are either redundant or conflicting. I did not examine them with any rigor, it is a first impression. Also, it looks like you are linked to five different external style sheets. Are they all necessary? There may be conflicts between/among them that would be hard to track down. Bill B Those have to do with Wordpress Plugins... Some of the plugins auto load their own stylesheets. Wordpress is a decent CMS but it does have issues with massive amounts of loaded files and it makes a mess of CSS files and JS files. Can you remove the link rel=stylesheet... references from your HTML documents? Bill B __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image text box
Brian M. Curran wrote: Brian M. Curran wrote: Hi All, I've never done this before... I made a bordered text box around an image using a paragraph. It can be found here: http://www.draftingservices.com/building_survey.html Would this be considered acceptable CSS or make-shift? Sincerely, Brian David Laakso wrote: Then I guess all I can suggest is that you do it differently and change the css/markup following the above provided tutorial? Why would I do that, if what I've done works. ...This basically harkens back to my original question. I don't mean this as nit-picking...your original question was Would this be considered acceptable CSS or make-shift?, not whether it works or not. That is the question to which David is responding. Bill B __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background color
Tom Livingston wrote:
List,
What is the reasons for using:
background: #fff;
instead of:
background-color: #fff;
I've seen this lately, and wonder why the preference for the first
one. I've only used 'background' as shorthand for something like:
background: #fff url(images/image.png) left top no-repeat;
Which is better or more correct?
Background is for HTML markup and is reserved for images,
background-color is for CSS.
HTML:
html
body background=your_image.jpg
h1Hello world!/h1
/body
/html
To control background color in HTML use bgcolor:
html
body bgcolor=#fff
h1Hello world!/h1
/body
/html
See http://www.w3schools.com/tags/tag_body.asp for a summary of HTML
attributes for the body tag.
CSS:
body {
background-color:#fff;
}
Bill B
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background color
Tom Livingston wrote:
On Tue, Feb 23, 2010 at 10:18 AM, Bill Braun bbr...@hlthsys.com wrote:
Tom Livingston wrote:
List,
What is the reasons for using:
background: #fff;
instead of:
background-color: #fff;
I've seen this lately, and wonder why the preference for the first
one. I've only used 'background' as shorthand for something like:
background: #fff url(images/image.png) left top no-repeat;
Which is better or more correct?
Background is for HTML markup and is reserved for images,
background-color is for CSS.
So in an article I was reading, this code example was shown when
discussing a stylesheet:
body {
color:#000;
background:#fff;
}
By your assessment, this is wrong. I find it hard to believe the
author would not use correct syntax as he is fairly well known in the
front-end/CSS world. Alas, he is human, but you know what I mean...
No, it is OK. In CSS you can use background and list a number of
property values consecutively. See:
http://www.w3schools.com/css/pr_background.asp
Or you can break out background into separate properties:
background-color,
background-image,
background-position,
background-repeat
Bill B
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background color
Tom Livingston wrote: On Tue, Feb 23, 2010 at 10:38 AM, David Laakso da...@chelseacreekstudio.com wrote: In CSS this background: #fff; is more lean and mean than this background-color: #fff; Both are valid CSS. ~d Thanks David. That says it all. I see I misunderstood the initial question. David is quite right, and is the better answer. Bill B __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background color
Tom Livingston wrote: On Tue, Feb 23, 2010 at 10:38 AM, David Laakso da...@chelseacreekstudio.com wrote: In CSS this background: #fff; is more lean and mean than this background-color: #fff; Both are valid CSS. ~d Thanks David. That says it all. I see I misunderstood the initial question. David is quite right, and is the better answer. Bill B __ 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] IE6 doesn't see styles [solved]
Peter Bradley wrote: Many thanks to everybody who replied and helped with this. I've re-written the page, using floats instead of absolute positioning, and ems instead of percentages: http://www.peredur.net/swanwick It now doesn't need any conditional styles. It's not going to win any design awards, but it'll make a good demonstration, I think. Cheers, and thanks again, Congrats, Peter. BTW, those writers sure look happy. Bill B __ 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] Fraction bar
Troy Harshman wrote: Although it may not be the best application for lists, I think using my method isn't too bad and it is attractive. Try this, see if it works. math xmlns=http://www.w3.org/1998/Math/MathML; mfrac mn2/mn mn3/mn /mfrac /math Bill B __ 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] Fraction bar
Eduardo Varela wrote: Hi, first time I write here. I am Eduardo, from Buenos Aires. I have a site at http://notasdematematicaelemental.7p.com/matel_ejemplos.html#PotenciaDefinicion Eduardo, Norton Internet Security is reporting 47 virus threats coming from this site. Are you aware of that? Bill B __ 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] 4 part question about lining up 'boxes' of information
Lisa Frost wrote: 4. My biggest problem i am having with css, is that i know exactly how i want something to look, like in this case i just want a series of boxes lined up next and under each other and centered but then i have no idea how to do it and even less of an idea as to what to google for to point me in the right direction. I don't want to be emailing you all for every little thing that stumps me. Any tips on what to search for on the web for basic layout techniques such as this? Lisa, some general resources that might be helpful (they helped me): CSS Tutorial http://www.w3schools.com/css/default.asp CSS Reference by Categories of Properties http://www.w3schools.com/css/css_reference.asp CSS Reference - Alphabetical http://www.w3schools.com/css/css_reference_atoz.asp The Box Model http://www.w3schools.com/CSS/css_boxmodel.asp Bill B __ 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] Help with Horizontal List in IE
Denise McLaurin wrote: Bill Braun wrote: Wild hunch - try separating the words Exam Master Online with non-breakable spaces (nbsp;). Bill B Thanks Bill. I dismissed that initially since this involves a CMS, but decided to give it a try since the output is created by my own module ... it worked! Many thanks. Thanks for letting us know. Bill B __ 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] Screen shot or list an entire site
On 31.12.2009 12:44, Rob freeman wrote: Hi everyone, I am planning a new website, but first I would like to take a snapshot of the old site including all the pages as png/gifs if not graphics a list, like a site map So I can a keep a record of them.. does anyone know any software which can screen shot a whole site, like follow the links and snapshot each page automatically? Adobe Acrobat can capture an entire site. Contact me privately if you want me to do that. Acrobat is a bit expensive just for one project. Bill Braun __ 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] Screen shot or list an entire site
On 31.12.2009 12:44, Rob freeman wrote: Hi everyone, I am planning a new website, but first I would like to take a snapshot of the old site including all the pages as png/gifs if not graphics a list, like a site map So I can a keep a record of them.. does anyone know any software which can screen shot a whole site, like follow the links and snapshot each page automatically? Another thought... If the site is not large and you have the patience, you can do it with the software you already have. Point your browser to the page you want, press the Print Screen key, open paint.exe, Edit Paste, then save the file. Depending on the size of the site, this could be laborious, but the price is right. Regards, Bill Braun __ 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] strict vs. transitional doctype and rendering differences
For starters...http://www.w3schools.com/tags/tag_doctype.asp.
Ingo Chao wrote:
Hi
can someone point me to a reference about rendering differences
between strict and transitional doctype?
or: what would you expect?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en
head
meta http-equiv=Content-Type content=text/html;
charset=utf-8;charset=utf-8 /
titlestrict vs. transitional/title
style type=text/css
span {
background: red;
border: 1px solid black;
display: inline-block;
font-size: 12px;
padding: 0 2px;
}
em {
background: yellow;
display: inline-block;
font-style:normal;
height: 24px;
line-height:48px;
}
/style
/head
body
divspanemText/em/span/div
/body
/html
In Strict mode, the red span encloses the text - in transitional mode,
it dosn't.
Why?
thanks,
Ingo
__
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] :: makeready ::
Hi David, I particularly like the visual impact of the site. It is both engaging and minimalist at the same time. The upper part of each page is consistent. I have mixed feelings about large images (the lights) pushing content lower on the page. The images of the lights are attractive, but become tiring. The About page includes (or will include) some examples of your work; I suggest they move to the Portfolio, and leave About straight-forward. The Portfolio section loses the consistency of the upper part of the page. I had to check to see where I was, and pause for a minute and wonder what changed. I think I know what you want to accomplish with the smaller and larger images of sites you've designed, but I find it odd to view only part of a page. I suggest presenting the entire image. The Resources part of the site, which I think is wonderful, also seems (to me) to visually fall apart. There is a mix of pages that are completely different (I realize this is a WIP) and links that just take me away from your site (sometimes inevitable). Most suggestions I would offer are arguably their own set of problems (open in separate window or tab, open in a frame, etc.). Contact page likewise changes layout and is distracting. Kudos for making address and phone accessible from every page. Not sure you need to repeat the bouquet image from above. The expanding/contracting feature (on the Journal page, fro example) is counter intuitive for me. Personally I am comfortable with longer pages; they do not detract from attractiveness. On the technical side, the Home and About links both point to /index.php. I did not mean to dwell on the negative, David. There is a comfort to the design and the colors. The more time I spent on the site, the more I was attracted to its positive features. Warm regards, Bill B David Laakso wrote: I'd appreciate your comments and suggestions on this site. http://chelseacreekstudio.com/ Best, ~d __ 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] :: makeready ::
When the Portfolio page is selected, and all the examples push out to the left, the content is nearly perfectly centered. Bill B Theresa Newman wrote: it seems to lean to the right (more white space on left than right) On Tue, Dec 22, 2009 at 2:01 PM, David Laakso da...@chelseacreekstudio.comwrote: I'd appreciate your comments and suggestions on this site. http://chelseacreekstudio.com/ Best, ~d __ 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/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div Open/Close [was Strange display in Safari]
David Laakso wrote: I will try (even though your question has nothing whatsoever to do with CSS). Thank you. I realize that div is HTML markup code. I thought that the properties of the div - CSS - had a bearing on how they were displayed. Bill B __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div Open/Close [was Strange display in Safari]
David Laakso wrote: I will try (even though your question has nothing whatsoever to do with CSS). I just reread your post and now get why my question was OT. Apologies. Bill B __ 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] Div Open/Close [was Strange display in Safari]
David Laakso wrote: It is often a painfully slow, laborious, and frustrating process to get the divisions to open and close in their correct order. The number of open divisions must equal the number that close; and, they must do so in the correct order. No need to take a coil of rope to the woods. Coffee helps. David, can you comment on div openings and closings a bit more, along the lines of general principles and practices? . New to CSS, and I suspect that I may be struggling with this. Thank you, Bill B __ 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] Strange display in Safari
I think, but am not certain, that Column can be read as Character. So, it sound like it is drawing your attention to the fourth character, near the beginning of the line. Bill Andzia wrote: Hello, I reduced the number of errors to 9: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fklikerlab.pl%2F and now I have some questions. First, what is a column in this report? Like: *Line 170, Column 4*. I found somewhere that it refers to the database, is that correct? Or does it refer to layout? __ 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] Weird display in Safari
Chris Blake wrote: Thanks David, I've been ignoring validation a bit too much recently. I recently started using Amaya from W3 for markup (http://www.w3.org/Amaya/User/BinDist.html). While it has its quirks and idiosyncrasies, it only gives the green light when the code (HTML and CSS) is valid. Very handy. Bill B __ 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] apply float:left and links stop working
I'm not certain, but try this. Your HTML code refers to div
class=box_clear_float_left. In your CSS you named the class
div.box_clear_float_left {}. Remove the div from the CSS code so
that it reads,
.box_clear_float_left {
float: left;
line-height: 1.2em;
font-style: italic;
color: #00;
border-color: #00;
border-width: 1px;
border-style: solid;
padding: 10px 10px 10px 10px;
margin: 0px 3px 20px 0px;
font-family: Californian FB, Times New Roman, serif;
font-size: 12pt;
font-weight: normal;
width: 256px;
}
Regards,
Bill B
Scott Brasted wrote:
Greetings,
http://www.stpeterswestfield.org/index.php
http://www.stpeterswestfield.org/css/st_peters.css
Both the page and the css validate.
Bottom of the page, two clear (white background) div boxes side by side
on the left side of page (one title says TO OUR VISITORS and the other
Title is HOMEBOUND OR JUST ...). Float works fine except that when divs
are floated, the links in the right hand of the two boxes do not work.
Unfloat and voila', they work like a charm. Here is css for the 2
classes directly affecting the divs.
div.box_clear_float_left {
float: left;
line-height: 1.2em;
font-style: italic;
color: #00;
border-color: #00;
border-width: 1px;
border-style: solid;
padding: 10px 10px 10px 10px;
margin: 0px 3px 20px 0px;
font-family: Californian FB, Times New Roman, serif;
font-size: 12pt;
font-weight: normal;
width: 256px;
}
.sbar_link a:link {
text-decoration: none;
color: #4b0082;
font-weight: bold;
}
.sbar_link a:visited {
text-decoration: none;
color: #800080;
font-weight: bold;
}
.sbar_link a:hover {
text-decoration: underline;
color: #4b0082;
border-bottom: none;
font-size: 12pt;
}
Here is the html for the div boxes:
div class=box_clear_float_left
div class=sbar_link
h3TO OUR VISITORS/h3
pWe welcome you to our worship and to our
parish life. Please
know that whoever you are and wherever you find yourself on your journey
in faith there is a place for you here at St. Peter’s Episcopal Church./p
pAll baptized persons are invited to receive the
sacrament of Holy
Communion. If you prefer not to receive communion, we invite you to come
to the altar rail, cross your arms on your chest and receive the
blessing of God. If you are unfamiliar with the Episcopal worship
service, ask someone for help, or merely relax and enjoy the beauty and
power of the service by observing what goes on. Come again . . . soon
and often./p
pPlease join us in Bailey Hall immediately following
the service
for food, fellowship and fun./p
/div !--end link--
/div !-- end box/float --
div class=box_clear_float_left
div class=sbar_link
h3HOMEBOUND OR JUST UNABLE TO ATTEND SERVICE?/h3
pIf you were not able to join us this Sunday for
Church, you can
watch the service on Time Warner Cable - Westfield Channel 21 on
Tuesdays at 1:00 p.m. (thank you Tom). You can a
ref=../weekly_services/service.php title=Read This Week's Bulletin
read this week's service bulletin here/a or use it to follow along
with the service on Public Access. If you, or someone you know, is
unable to come to church and would like a clergy visit, please let the
a href=mailto:ad...@stpeterswestfield.org; title=E-Mail your Request
to the Church Office church office know/a and the office will
schedule a clergy visit and bring communion if you desire./p
/div !--end link--
/div !-- end box/float --
Anyone know why this might be the case?
Puzzled,
__
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] Limit of content in an element
I am new to CSS.
I am using an element as follows:
#spdisplay {
width: 550px;
float: right;
display:block;
margin-top: 10px;
}
#spdisplay .box {
width: 545px;
background: #F6F9FB;
border: 1px solid #E1E1E1;
padding:10px 10px 15px 10px;
float: right;
}
#spdisplay .box a {
margin: 10px 0 10px 0;
color: #56677C;
font-size: 0.625em;
}
#spdisplay .box p {
margin: 5px 0 10px 0;
line-height: 15px;
font-size: 0.875em;
}
#spdisplay .box ul {
padding: 0 0 7px 20px;
margin:10px 0 10px 0;
}
#spdisplay .box li {
margin-top:5px;
}
The element #spdisplay is contained in:
#content {
width: 100%;
margin-top:10px;
}
which itself is contained in:
#wrap {
margin-left: auto;
margin-right: auto;
width: 730px;
}
I inherited this so I cannot explain the design.
In HTML it appears as:
div id=spdisplay
div class=box
a name=philosophy/a
h2ITEM 1/h2
pblah, blah, blah./p
pblah, blah, blah./p
h2ITEM 2/h2
pblah, blah, blah./p
pblah, blah, blah./p
/div!-- end div box --
/div!-- end div spdisplay --
This works flawlessly until I exceed a certain amount of content in div
class=box. It then causes the entire page to shift to the left about
10px or so. I've ruled out bad markup by simply taking content that
displays well and copying it to create more content. Same result.
I tested the same thing with minimal CSS:
#wrap {
margin-left: auto;
margin-right: auto;
width: 250px;
display: block;
}
#content {
width: 100%;
margin-top:0px;
display: block;
}
#left {
width: 100px;
float:left;
display: block;
}
#right {
width: 100px;
float: right;
display: block;
}
Same result.
I'm baffled. Any suggestions on where to look?
Regards and thank you,
Bill B
__
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/
