[css-d] :: page review :
I have a semi-comp layout that I would appreciate your comments and suggestions on. Sorry, but a login/password required to view. login: dgdemo password: dgdemo uri: http://chelseacreekstudio.com/dg/ css: embedded Thanks. ~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/
Re: [css-d] grid without tables?
On 2009-10-04 David Laakso wrote:
* html .infobox {height: 100px;} /* Only IE/6.0 sees this
*/
Why?
/BP
__
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] Margin only in Firefox
Hello, I added a photo background to my header and I noticed a margin between this header and the top menu, which doesn't appear in Opera, IE or Safari, only in Firefox. I found that there is an issue with Firefox creating margins and I tried using border-collapse property to fix it, but with no success. What can I do? I think that Firefox can be creating more of these margins, but the website has mostly white background so they are not visible. Here is the url: http://klikerlab.pl/ Thanks in advance. Ania __ 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] Margin only in Firefox
On Oct 5, 2009, at 8:01 PM, Andzia wrote: I added a photo background to my header and I noticed a margin between this header and the top menu, which doesn't appear in Opera, IE or Safari, only in Firefox. I found that there is an issue with Firefox creating margins and I tried using border-collapse property to fix it, but with no success. What can I do? I think that Firefox can be creating more of these margins, but the website has mostly white background so they are not visible. Here is the url: http://klikerlab.pl/ That image background is actually a Flash object... The 'margin' you see is actually the space for descenders, as an object (and embed) is an inline element, and rest on the base-line. One possible solution is to remove all unnecessary white-space inside the object. IIRC. Instead of object /object write object/object The issue is tracked here: https://bugzilla.mozilla.org/show_bug.cgi?id=434174 it is not clear to me if this really is a bug. Philippe --- Philippe Wittenbergh http://l-c-n.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] Margin only in Firefox
On Monday, October 5, 2009 7:01:48 am Andzia wrote: Hello, I added a photo background to my header and I noticed a margin between this header and the top menu, which doesn't appear in Opera, IE or Safari, only in Firefox. I found that there is an issue with Firefox creating margins and I tried using border-collapse property to fix it, but with no success. What can I do? I think that Firefox can be creating more of these margins, but the website has mostly white background so they are not visible. Here is the url: http://klikerlab.pl/ It's from the object tag. It's not a margin, but but gutter space. Object is an inline element, so it rests on the text baseline. The space below it is for letters like p,q, and j that go below the baseline. You can make it go away by setting display: block in your css. ---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/
Re: [css-d] :: page review :
G.Sørtun wrote: David Laakso wrote: http://chelseacreekstudio.com/dg/ Looks like you need a min-width on the 'topnav', and some no-wrap control on its list-items. Otherwise not anything that's easily broken, AFAICS :-) regards Georg As always, good advice from Norway. I will soldier away at your suggestions this evening. Thanks. Aside: The initial specs for this proposal call for the 10-item top horizontal navigation. The clinker is it needs to be functional in Blackberry and iPhone as well. Turning the nav to block for handheld is not a problem. But, seems to me, it will present the user with something akin to leaping the Great Wall of China inorder access the primary content. ~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-d] Best way to include
Is it better to include with a list of link files or link a main stylesheet and @import all the css files into it? __ 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] @import css or link
I have multiple css files Which is better linking them in the header or using the @import in a main.css file and then linking that in the header? __ 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] grid without tables?
Benct Philip Jonsson wrote:
On 2009-10-04 David Laakso wrote:
* html .infobox {height: 100px;} /* Only IE/6.0 sees this
*/
Why?
/BP
Can you be more specific in your question. For what reasons do you ask
the why question?
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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 weird disappearing bug
hi and thanks for answer, things can always be simpler than they are now :) the thing is, i thought that a 2 (on other pages, 3) column design with a footer would be the simplest solution. the background image's size depends on the page's viewing resolution, so it would be proportionally the same on all monitors. on the image menu: i wanted to go with one div for the menu, as the same identifier can be used on both main page (2column) and subpages (3column). in subpages, the main (left) column from the main page is simply cut into two, offering left column space for text, the right one for images. by now, i still haven't found out the solution to the footer problem, so i leave the webpage as is on the host for later visitors to come/see and maybe help :) 2009/10/4 r...@catjuggling.com I'm fairly new to CSS, so I'm sure there are other people who can give better advice. So far, there are no responses so I will give it a shot. I felt like the CSS could be simpler and still achieve the same design. Since I'm not sure how to solve the problem you asked about, I thought about other ways I would approach the building of the page. First off, in the markup, I would put things in the order they appear on the page, which would eliminate a need for any relative or absolute positioning: It seems like the H1 and H2 text at the top would more naturally be put in a header instead of further down. The photo and the menu could go together in a div below that, floating the photo to the left, and the menu to the right. The background image can be centered in the background of the wrapper div. It's not an exact match, but here is what I came up with: http://www.mcmullincreative.com/u3/ I reduced the images sizes to actual size, which made the file sizes smaller. I had to use this doctype to allow IE6 to center the wrapper div: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd; Hope this helps. Russ I when you check the page in FF, and then in IE6, you will see the problem :) in words, basically i created a 2column design, which do not take up the full width of the page and are both floated left. when i want to create a footer, simply adding 'clear:left;' works for firefox, and in fact IE6 too. but the problem is, that the background image (sitting in its own div) and the menu (also another div) disappear in IE6 :) __ 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] Best way to include
That's what I do when a stylesheet gets too long and complex. In those cases, I break it down into typography.css for the fonts, structure.css for the layout and style.css for the colors etc; I might also have a separate navigation stylesheet. The I write a main.css that contains nothing but links to the other stylesheets. Makes it all easier to edit and troubleshoot. Val 2009/10/5 Atkinson, Sarah sarah.atkin...@cookmedical.com: Is it better to include with a list of link files or link a main stylesheet and @import all the css files into it? __ 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/ -- --- www.oakleafcircle.org.uk www.valdobson.co.uk www.astrodiary.co.uk __ 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] grid without tables?
Benct Philip Jonsson wrote:
On 2009-10-04 David Laakso wrote:
* html .infobox {height: 100px;} /* Only IE/6.0 sees this
*/
Why?
/BP
Can you be more specific in your question. For what reasons do you ask
the why question?
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] @import css or link
On Mon, Oct 5, 2009 at 8:43 AM, Atkinson, Sarah sarah.atkin...@cookmedical.com wrote: I have multiple css files Which is better linking them in the header or using the @import in a main.css file and then linking that in the header? I go with the former, link to a build file with imports in it... http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ -- iron sharpens iron __ 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] :: page review :
David Laakso wrote: http://chelseacreekstudio.com/dg/ Looks like you need a min-width on the 'topnav', and some no-wrap control on its list-items. Otherwise not anything that's easily broken, AFAICS :-) 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] grid without tables?
Can you be more specific in your question. For what reasons do you ask
the why question?
I'm pretty sure the question is Why does only IE6 see that rule?
Benct Philip Jonsson wrote:
On 2009-10-04 David Laakso wrote:
* html .infobox {height: 100px;} /* Only IE/6.0 sees this
*/
Why?
/BP
As a css newbie, I take it that you've never encountered CSS hacks before.
Essentially, these are rules that take advantage of bugs in particular browsers
to target a specific version. Using them tends to be risky, but there are a
couple of hacks (especially for IE) that are old, well tested, and (relatively)
safe. * html is one such hack for IE6.
It works (as I understand it) because in IE6, there is a wrapper tag of some
sort that goes around the entire HTML document. Usually (and correctly) the
html tag is the document root. But in IE6, it's not. The html tag has a
parent. So by saying * html, it selects any html tag that has a parent.
---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/
Re: [css-d] grid without tables?
Benct Philip Jonsson wrote:
On 2009-10-04 David Laakso wrote:
* html .infobox {height: 100px;} /* Only IE/6.0 sees this */
Why?
/BP
The original poster has a row of blocks to which he assigned assigned
height a of 100px so that they would all be uniform. All well and good.
Or is it?
In compliant browsers, when the fonts are scaled, the blocks do not
expand vertically to contain the content when a /fixed/ height is set.
Consequently, it was suggested that he change it to *min-height: 100px;*
for compliant browsers (enabling the blocks to expand vertically).
And further, that he feed the above hack to IE/6.0.
The reason for the hack is that IE/6.0 does not understand (does not
support min-height), and the blocks would be of unequal height when
landing on the page in that browser.
~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/
Re: [css-d] :: page review :
At 10:33 PM -0400 10/4/09, David Laakso wrote: I have a semi-comp layout that I would appreciate your comments and suggestions on. Sorry, but a login/password required to view. login: dgdemo password: dgdemo uri: http://chelseacreekstudio.com/dg/ css: embedded Thanks. ~d Looks good to me. Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.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] Need help with wonky vertical spacing
On this site: http://www.adlergiersch.com - please note the position of the Getting Started box in the left column under the menu. On this test page: http://www.adlergiersch.com/test the box is elongated vertically. The difference between the two pages is the coding for the menu. The original site pages use outdated 'coolmenus' to style the menu and I need to update it to a more modern css menu. But for some reason, the new menu css is interfering with the box below. I've tried quite a number of things but can't get it to behave. The css for both pages is here: http://www.adlergiersch.com/agstyles.css But the css for the old coolmenus style is here: http://www.adlergiersch.com/coolmenustyle.css The only errors I'm seeing when I validate are related to the translucency on the menu. Thank you! Jody -- TroutDream Graphics, Inc. Always fresh. Never canned. http://troutdream.com 425-686-8699 __ 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] :: page review :
Very nice. Theresa At 10:33 PM -0400 10/4/09, David Laakso wrote: I have a semi-comp layout that I would appreciate your comments and suggestions on. Sorry, but a login/password required to view. login: dgdemo password: dgdemo uri: http://chelseacreekstudio.com/dg/ css: embedded Thanks. ~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/
Re: [css-d] grid without tables?
Climis, Tim skrev:
Can you be more specific in your question. For what reasons
do you ask the why question?
I'm pretty sure the question is Why does only IE6 see that
rule?
Yes. The question referred to the last statement in the quotation.
Benct Philip Jonsson wrote:
On 2009-10-04 David Laakso wrote:
* html .infobox {height: 100px;} /* Only IE/6.0 sees this
*/
Why?
/BP
[snip]
It works (as I understand it) because in IE6, there is a
wrapper tag of some sort that goes around the entire HTML
document. Usually (and correctly) the html tag is the document
root. But in IE6, it's not. The html tag has a parent. So by
saying * html, it selects any html tag that has a parent.
Aha! I thought it was somesuch.
/BP
__
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] Need help with wonky vertical spacing
On Oct 5, 2009, at 1:04 PM, Jody Levinson wrote: On this site: http://www.adlergiersch.com - please note the position of the Getting Started box in the left column under the menu. On this test page: http://www.adlergiersch.com/test the box is elongated vertically. The difference between the two pages is the coding for the menu. The original site pages use outdated 'coolmenus' to style the menu and I need to update it to a more modern css menu. But for some reason, the new menu css is interfering with the box below. I've tried quite a number of things but can't get it to behave. The css for both pages is here: http://www.adlergiersch.com/agstyles.css But the css for the old coolmenus style is here: http://www.adlergiersch.com/coolmenustyle.css The only errors I'm seeing when I validate are related to the translucency on the menu. Update: I've managed to sort of fix the problem for the moment with absolute position of the FAQ and What's New boxes, but absolute positioning causes some problems. I was hoping not to have to set the left position as it makes it impossible to get to those elements when in admin mode (it's on a CMS platform). So if there's a way I can get those boxes to stay put under the menu without absolute positioning, I'd be happy to know it. Thank you! -- TroutDream Graphics, Inc. Always fresh. Never canned. http://troutdream.com 425-686-8699 __ 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/
