Re: [css-d] Navigation Woes
Dear All Many thanks to Don and Els! I have played with the ideas a bit further and have now ended up with this. I feel the site is beginning to take shape and provides an excellent building platform. I am a bit worried that the header nav still drops down. Could folks check this for me please? http://www.theoldcoachworks.org.uk/ http://www.theoldcoachworks.org.uk/wp-content/themes/coachworks/ style.css On 10 Mar 2006, at 14:23, Don - htmlfixit.com wrote: As you can see it is a bit of a mess! What I would like to do is to produce a small photo with a word underneath. The whole to be contained within a border and to be the link. Is it possible to do this please and if so how? Here is the right direction ... perhaps. I note that the menu drops down in ie6. I suspect it may be a width issue or something. I didnt' bother to look. Here is my quick play at it: http://bestfoot.com/temp/temp3.html Note that I added br tags to all of these little picture/word links. I added some embedded css to do what I am doing (changing the background color on hover and so forth. Hope that makes sense. So the answer is you can do it. Many thanks -- Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] reducing left margins/indent in lists
Greetings, At a screen rez of 800x600 the menu list will wrap the longest lines in IE 6. I would like to reduce the left margin/indent for the menu list to try to eliminate this but I can get no further. http://mbreiding.us/2006/menu_new2/mine.html Any ideas?? Thanks, -Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Clearing in IE6
I can't replicate it either - IE6.0.2900.2180.xpsp_sp2_rtm.040803-2158 - but it might be worth changing the height: 1% fix to height:1px. The percent version is known to cause problems in some situations. Chris On 3/10/06, Bruce MacKay [EMAIL PROTECTED] wrote: Hi folks, Some IE 6 users of one of my sites are experiencing problems with the following page http://107writing.massey.ac.nz/test.htm Specifically, the yellow column is extending past the bottom of their browser and they cannot scroll to read the missing material. I cannot replicate the fault using IE 6.0.2900 but users of other v6. versions are apparently having difficulty. I cannot see the problem in FF or Opera 7/8. The CSS is at http://107writing.massey.ac.nz/scripts/master.css I thought I was doing the right thing for address the div clearing problems in IE 6 by applying height: 1% to the containing div, but apparently I'm wrong. I'll be grateful for pointers to better practice. Thanks, Bruce __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Template checks and an annoying little IE6 problem
J Hodge wrote:
This project is almost wrapped up, but I was hoping that I could get
some input regarding how it displays in the various browsers. I'm
particularly interested in how it displays for Mac and *nix.
http://mercury.walagata.com/w/freecyclemwo/6152750.html
http://mercury.walagata.com/w/freecyclemwo/layout3.css
Looks like you are hacking the list-display between Moz/FF, Opera and
IE6. I don't think that's a good idea...
1: those hacks are already breaking in Opera 9. Opera 9 have the same
defaults as Firefox, while earlier Opera-versions follow the old IE/win
model.
2: setting 'margin: 0' and *then* define 'padding: (whatever)' on
ul#newsitems will work in all browsers.
3: IE/win has problems with those paddings defined in 'percentages',
because it tends to loose track of what to calculate them from - a bug.
IE/win has no particular problems with 'pixels' though, since no
calculations are needed.
Example...
#content ul#newsitems {
padding: 0 100px 0 110px;
margin: 0;
}
...produces pretty much the same line-up in all browsers and versions -
once all the different hacks you have at present are commented out.
Didn't even need to serve separate styles to IE6 since it seems to end
up close enough for comfort.
A lot less code too.
Advice:
Since you have a fixed-width layout anyway, most 'percentage' values
acting on dimensions should be rewritten in 'pixels' for a more
cross-browser predictable result. Doing so will probably do away with
the need for any hacks (although one can never be sure when it comes to
IE ;-) ).
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Print styles problem
Dear list,
I have been struggling with setting up a print style sheet for a website
and preventing some sections from printing.
This is top of my stylesheet:
style type=text/css
#navigation, #header, #picture, #impressum
{
display: none;
}
I would expect that this would prevent any content in the sections
#navigation, #header, #picture, #impressum from printing and this is
exactly how Opera 8.5 works. Both Firefox 1.5 and IE 6.0, however, print
the content of the navigation.
The only workaround I've found is to explicitly set display: none for the
tags contained within these sections:
a, span {
display: none;
}
Can someone tell me why this is so. I assume there is a better way of
doing this.
I've based all my StyleSheets on Eric's book Eric Meyer on CSS.
Another question I have is: is there a good way of having dynamic elements
in CSS? I have some keyvisuals for my website which I would like to make
section specific.
div#picture {
background: #F0EFDD url(/images/image.jpg) no-repeat;
}
I would like to have something like portrait.jpg for pages about a
person, flower.jpg for pages about flowers, etc.
In addition to different stylesheets for each section, I can think of have
three solutions, which are for unsatisfactory for different reasons:
the first is to generate the stylesheet dynamically through a server side
process which will set the right image in the stylesheet. This allows the
browser to cache the image but as it usually caches the stylesheet the
images are only cleaned when a page is reloaded. In addition this muddies
the source of the stylesheet.
the second is to set the url of the image to a server side script. This
works best but as the image is a script, it can no longer be cached.
the third is to use Javascript to alter the stylesheet on the client side.
Apart from not working when Javascript is disabled this has the
disadvantage that the names and paths of the images have to be part of the
Javascript source. While a server side script could provide this
information for Javascript I think this complicates things unnecessarily
by requiring client and server side scripts.
Suggestions very much appreciated.
Charlie Clark
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Website critique
Keith Cox wrote: Would appreciate any comments or suggestions on any aspect of my (first) website design, I have tested using the most popular browsers on my Mac, but only IE5, Firefox 1.04 and Opera 8 on windows. http://website1.keithcoxdesign.com Thanks all! Hi Keith: very nice. one thing i noticed is the bottom scroll bar on this page. http://website1.keithcoxdesign.com/thehomes.html the page called to my attention by previous messages. to get rid of that, you want to call the image in the background, which i see that you're doing - but your h1 is determining the width of the page. if you put a wrapper on the whole page, set the width with that, then the h1 can be the size of the wrapper and the image coming from the background won't cause a horizontal scroll. also, another way to deal with people clicking on the homes for the floor plan and then coming back to the top of the previous page, use defined anchors (can never remember what to call them). if that is not enough to jog your memory about what i'm talking about, ask and i'll get more specific. also, noticed a englisho, as opposed to a typo - on this page. http://website1.keithcoxdesign.com/activities.html you have: Hiking Trails A brisk walk or a stroll its up to you. should be: Hiking Trails A brisk walk or a stroll, it's up to you. IE6 has an annoying image toolbar which comes on over the pictures of your houses, to get rid of it, add this is the meta tag area. meta http-equiv=imagetoolbar content=no also, noticed you don't have description and other meta tags, maybe they're to come, at any rate, you'll want more stuff there. cheers donna best Donna -- Donna Jones Portland, Maine 207 772 0266 http://www.westendwebs.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Bulletproof Web Design - Rounded Box
I am trying to replicate the rounded (edged) box technique from an example in Bulletproof Web Design, chapter 5. With minor changes I have a vertically expandable box working -- www.dottedi.biz/codesamples/expandable-rounded-fixed.html However I can't get the horizonally flexible example to come together. I used background images to work up to 400px wide. See it with CSS code at: www.dottedi.biz/codesamples/expandable-rounded-fluid.html Suggestions, flaws, second pair of eyes? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Navigation Woes
From: Richard Brown [EMAIL PROTECTED]
I am a bit worried
that the header nav still drops down. Could folks check this for me
please?
http://www.theoldcoachworks.org.uk/
http://www.theoldcoachworks.org.uk/wp-content/themes/coachworks/
style.css
The problem you're having in IE is that you've encountered the IE doubled
float-margin bug [1]. The usual fix is to give the element a non-sensical
{display: inline;}. Even if the .out divs weren't already (display:) block
elements, they take on that property by virtue of being floated and do not need
{display: block;} to be declared.
Therefore, you'll need to change your display property in the following
selector to overcome the margin bug. This fix is not likely to bother other
browsers, but certainly could be hidden from them if you so choose.
.out {
display: inline; /* change this */
background: #bbb;
border: 1px solid #ddd;
float: left;
margin: 1em;
}
I hope that helps,
~holly
[1] http://www.positioniseverything.net/explorer/doubled-margin.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] How to limit table cell height (GMail style)
Hope you can help me with this. I want to limit a table cell height to only
one line of text. My example below does not work - any height on td is
simply ignored if content is long.
Problem here (according to for instance
http://annevankesteren.nl/2004/01/css-tables ) is that CSS specification
requires table cell to expand to a minimum height of the containing
content.
So my question is: How is this solved in for instance GMail where content i
only one line high (and additional overflowing content is hidden). Please
share your thoughts on this, and if you could point me to any information on
how to solve this.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en
head
title/title
style type=text/css
table{
width:300px;
border:1px dashed red;
}
td{
vertical-align: top;
background-color: #dfc;
height: 10px;/* table cell does not obey this height */
display: block;
}
/style
/head
body
pI want table row to be the height of 1 text line./p
table
tr
td1. start cell not much content/td
td2. second cell has insanely long content that I know will always
wrap/td
/tr
/table
/body
/html
Any help appreciated,
Jesper
--
Jesper Rønn-Jensen
Capgemini Danmark A/S
http://justaddwater.dk/ (weblog)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] RH column flickers in IE/Win (repost)
Hi Website address is http://www.abglazing.co.uk/ CSS is http://www.abglazing.co.uk/stylesheets/main-style.css I have designed a liquid two column layout with the navbar contained in the RH column. In IE6/Win the right hand column flickers as you navigate around the site. This doesn't happen in FF or Netscape. If anyone has come across this before and can offer a solution it would be very much appreciated. Thanks Ian __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to limit table cell height (GMail style)
So my question is: How is this solved in for instance GMail where content i
only one line high (and additional overflowing content is hidden). Please
share your thoughts on this, and if you could point me to any information on
how to solve this.
I've run into similar problems, and my solution has been to put a div
inside the td
.cell-height {
height: 10px;
overflow: hidden; /* Or whatever you desire */
}
td
div class=cell-heightStuffs here/div
/td
While td's don't seem to respond to height, divs do, so the td will
only expand enough to fit the div. I'm not sure how GMail does it,
but this has worked for me in the past. Hope it helps. :)
--
Michael Clayton
www.twilighted.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] RH column flickers in IE/Win (repost)
On Sat, 11 Mar 2006 17:54:43 +0100, 2geedesign [EMAIL PROTECTED] wrote: Hi Website address is http://www.abglazing.co.uk/ CSS is http://www.abglazing.co.uk/stylesheets/main-style.css I have designed a liquid two column layout with the navbar contained in the RH column. In IE6/Win the right hand column flickers as you navigate around the site. This doesn't happen in FF or Netscape. If anyone has come across this before and can offer a solution it would be very much appreciated. I don't think there is a lot you can do about this as it is part of the way IE refreshes the screen - it seems to blank the screen first and then draw the new page so any pages with non-white backgrounds appear to flash. Charlie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Bulletproof Web Design - Rounded Box
[EMAIL PROTECTED] wrote: I am trying to replicate the rounded (edged) box technique from an example in Bulletproof Web Design, chapter 5. With minor changes I have a vertically expandable box working -- www.dottedi.biz/codesamples/expandable-rounded-fixed.html However I can't get the horizonally flexible example to come together. I used background images to work up to 400px wide. See it with CSS code at: www.dottedi.biz/codesamples/expandable-rounded-fluid.html Suggestions, flaws, second pair of eyes? Without looking at your code, I think I've something for every kind of flexible box: http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm A small combined image should be enough. Have a look and see what you can use! Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] RH Column flickers in IE
From: 2geedesign [EMAIL PROTECTED] Hi Website address is http://www.abglazing.co.uk/ CSS is http://www.abglazing.co.uk/stylesheets/main-style.css In IE6/Win the right hand column flickers as you navigate around the site. This doesn't happen in FF or Netscape. Cause and solution would be very much appreciated. The cause is that you have your - Tools Internet Options Temporary Internet Files Settings Check for newer versions of stored pages: - set to - Every visit to the page Change it to Automatcally and you'll no longer see the flash. IE goes and requests the image each time you move to another page using the navigation menu. Going using the Back and Forward buttons after clicking on the different links doesn't seem to require re-requesting the image. You might try setting background colors for those columns that are the same as the ones in your faux-column image. That would at least prevent the appearance of the white background when IE goes to request the image again. This will probably then show evidence of a 3-px jog problem on the right side of the content section. Float #content .gutter left to eliminate this. Popular wisdom says that /most/ people do not change the Settings options, so if you decide not to add the background colors it is probably not going to affect the view that most visitors to the pages will get. I hope that helps, ~holly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to limit table cell height (GMail style)
On 3/11/06, Michael Clayton [EMAIL PROTECTED] wrote: I've run into similar problems, and my solution has been to put a div inside the td Thank you very much for your feedback. I really appreciate it. Just one thing might prevent me from using your trick: The table in this particular case is generated with Java Server Faces, so I'm not suere I can control the HTML output. A possible workaround might then be to wrap td contents in a div via DOM scripting. However I'd prefer a simpler solution where only CSS is involved. Any pointers/articles describing the DOM technique or a CSS solution will be greatly appreciated. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] reducing left margins/indent in lists
WV Mike wrote: Greetings, At a screen rez of 800x600 the menu list will wrap the longest lines in IE 6. I would like to reduce the left margin/indent for the menu list to try to eliminate this but I can get no further. http://mbreiding.us/2006/menu_new2/mine.html Any ideas?? No. Sorry. Someone else will pitch in on that. Thanks, -Mike If you had asked about non css issues as well, I would have suggested making the content (text and animals) more important. Perhaps like this: http://www.dlaakso.com/florida.jpg. (nothing better to do) Best, ~davidLaakso __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] RH column flickers in IE/Win (repost)
Something I have found - and I don't know why this is - but if you remove the background-position from your #wrapper div in your stylesheet, the flicker will stop. For some reason - even if your page is set to reload every visit, in IE, if you have the background position set, it'll make the flicker - but if that line is not in your styelsheet, then the flicker goes away. Like I said, I don't know *why* it does that, but it works (I have to keep this in mind when I do CSS-based rollovers for navigation - if ever I put in that background-position thing, then the nav links flicker like crazy when moving around there - but I remove that line and all is well!) I've never had it happen to an entire page background before, but I would imagine it's the same issue I had with my rollover links. HTH ~Shelly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] RH column flickers in IE/Win (repost)
Hi Shelly Thanks for your response but I can't remove the background-position since the design is based upon using faux columns and so is needed to accurately position the background image. Cheers Ian - Original Message - From: Design Groups [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Saturday, March 11, 2006 7:52 PM Subject: Re: [css-d] RH column flickers in IE/Win (repost) Something I have found - and I don't know why this is - but if you remove the background-position from your #wrapper div in your stylesheet, the flicker will stop. For some reason - even if your page is set to reload every visit, in IE, if you have the background position set, it'll make the flicker - but if that line is not in your styelsheet, then the flicker goes away. Like I said, I don't know *why* it does that, but it works (I have to keep this in mind when I do CSS-based rollovers for navigation - if ever I put in that background-position thing, then the nav links flicker like crazy when moving around there - but I remove that line and all is well!) I've never had it happen to an entire page background before, but I would imagine it's the same issue I had with my rollover links. HTH ~Shelly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] reducing left margins/indent in lists
Mike, On Mar 11, 2006, at 8:12 AM, WV Mike wrote: At a screen rez of 800x600 the menu list will wrap the longest lines in IE 6. I would like to reduce the left margin/indent for the menu list to try to eliminate this but I can get no further. http://mbreiding.us/2006/menu_new2/mine.html Setting the margin-left and padding-left to 0 on both the ul and li should get you closer. hth -- Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] tools for determining results of the cascade
I'm trying to find CSS tools that help you determine the results of inheritance and the cascade for elements on a Web page. So far, I've only found a few tools that help with this: --Dreamweaver 8: CSS Styles Panel can 1. list all styles that are inherited by an element 2. determine the specificity of a particular style (I know, that's not so hard to do yourself) 3. show the results of the cascade for a particular element: that is, all of the properties affecting an element (including all inherited properties) --Style Master from Western Civ can show which styles effect a given element on a page --Web Developer's Toolbar for Firefox (CSS--View Style Information) will show the inheritance structure of a page element. --Xylescope for Mac lets you view all styles and properties that affect an element on the page. --Safari's Web Inspector (only available at this point by downloading the source code) looks like it will have a lot of tools for examining the cascade. Are there any other tools out there that you're using (besides your brains) that help you figure out the results of the cascade for elements on a Web page? thanks --dave mcfarland __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Print styles problem
On Sat, 11 Mar 2006 21:36:41 +0100, Roger Roelofs
[EMAIL PROTECTED] wrote:
I would expect that this would prevent any content in the sections
#navigation, #header, #picture, #impressum from printing and this is
exactly how Opera 8.5 works. Both Firefox 1.5 and IE 6.0, however, print
the content of the navigation.
We'll need a ulr to debug this. If the page isn't on a public server,
can you put up a test page?
the site is http://www.make-love-not-law.com
Another question I have is: is there a good way of having dynamic
elements
in CSS? I have some keyvisuals for my website which I would like to make
section specific.
div#picture {
background: #F0EFDD url(/images/image.jpg) no-repeat;
}
I would like to have something like portrait.jpg for pages about a
person, flower.jpg for pages about flowers, etc.
Option 4: add a section specific id to the body tag and include it in
the css like so...
#picture {
background: #F0EFDD url(/images/image.jpg) no-repeat;
}
#person #picture { background-image: url(/images/portrait.jpg); }
#flower #picture { background-image: url(/images/flower.jpg); }
That's an interesting suggestion which nearly does what I want. However,
as you will see on the website even my keyvisuals are dynamic.
Charlie
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Bulletproof Web Design - Rounded Box
francky wrote: [...] Without looking at your code, I think I've something for every kind of flexible box: http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm A small combined image should be enough. Have a look and see what you can use! Now had a look at your code: - Oops, css-validator remarks some typo's. - Because the div's for the bg-corners don't have a margin, they are overlapping and you can see the one behind the transparent part of the other. - I don't know Bulletproof Web Design, chapter 5, so can't see what was your starting point. - With the Liquid Corners-methods as a starting point, I made a testpage http://home.tiscali.nl/developerscorner/css-discuss/test-dottedi.htm. Working! (html-valid, css-valid, IEwin-proof anyway). francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Site Check
www.speakingofresults.com My first web site using WordPress. The rich text editor is suitable for the client who isn't very technical oriented. But the code produced by the editor is ugly. My main concern is that the site is optimized for 1024x768, and with smaller resolutions the center column is resized and the three photos doesn't stay on the same line. Could you please tell me if you use 1024x768 and whether the 3 photos on the home page stay on the same line? The client reported that most of her friends get a distorted layout but she doesn't know what screen resolution they use. Thank you! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check
Martin Petrov wrote: www.speakingofresults.com http://www.speakingofresults.com/ My first web site using WordPress. The rich text editor is suitable for the client who isn't very technical oriented. But the code produced by the editor is ugly. My main concern is that the site is optimized for 1024x768, and with smaller resolutions the center column is resized and the three photos doesn't stay on the same line. Could you please tell me if you use 1024x768 and whether the 3 photos on the home page stay on the same line? The client reported that most of her friends get a distorted layout but she doesn't know what screen resolution they use. Thank you! Hi Martin, Perhaps they are using a smaller resolution, but: - Viewing in 1024x768 is *only o.k.* if the window of the visitor has the maximal width. A not-maximalised window is giving problems. Because the width of the 3 (fixed width) photo's is eating almost all space between the fixed width of left and right sidebar, the 3rd photo has to wrap. It is fairly critical, with only 5px less then the max. window size the gap is already there. - And viewing in 1024x768 is *only o.k.* if the visitor doesn't use a sidebar (like a history bar). If the sidebar is on, 1 photo will drop; and if the sidebar it's scrollbar has some more width than 1 of the pictures (pretty soon), then 2 photo's are dropping down. With this layout I'm afraid the only solution is to place the photo's vertically (with text beside), as in the other pages. Then the text can shrink if needed. Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] tools for determining results of the cascade
Afternoon David You wrote I'm trying to find CSS tools that help you determine the results of inheritance and the cascade for elements on a Web page. So far, I've only found a few tools that help with this: --Dreamweaver 8: CSS Styles Panel can 1. list all styles that are inherited by an element 2. determine the specificity of a particular style (I know, that's not so hard to do yourself) 3. show the results of the cascade for a particular element: that is, all of the properties affecting an element (including all inherited properties) --Style Master from Western Civ can show which styles effect a given element on a page --Web Developer's Toolbar for Firefox (CSS--View Style Information) will show the inheritance structure of a page element. --Xylescope for Mac lets you view all styles and properties that affect an element on the page. --Safari's Web Inspector (only available at this point by downloading the source code) looks like it will have a lot of tools for examining the cascade. Are there any other tools out there that you're using (besides your brains) that help you figure out the results of the cascade for elements on a Web page? thanks grinning For our group, aside from the tools listed above it's, Brains R Us /grinning Hope you're having a great weekend Jim Nannery www.redfernenterprises.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check
Martin Petrov wrote: www.speakingofresults.com [...] My main concern is that the site is optimized for 1024x768, and with smaller resolutions the center column is resized and the three photos doesn't stay on the same line. [...] Thank you! I regret there are problems. Embracing the Web is not easy. Twenty-two captures: http://www.browsercam.com/public.aspx?proj_id=235253 Regards, ~davidLaakso __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Help with Search Bar Sizing
I'm trying to get a search bar at the top of each page. But I don't want it to take over the world... I want a relatively small entry field with a reasonably sized search button just to the right of the text entry box. This will live on the right side, with my breadcrumbs on the left. So I have a trivial form with an input type of text, and an input type of submit with Search on it. Easy stuff, and functionally it works fine. Then why is this so dang hard to position/size correctly? :) Research on the web has told a couple of things, some I find specious: 1) In order to get this lined up with anything to the left of it I have to make a table. I've done that, and it works, but is that the best, most CSS way to handle this? I've just left the world of tables for the wonderful world of CSS... seems like a regression. 2) I want to make the text field and button vertically smaller than the default. I can't for the life of me change the size of these things, and they are huge. I've tried shrinking the table row, I've tried putting height on the inputs, but nothing works. Oh, sure, I can get them bigger, or at least get a whole lot of padding around them, but nothing smaller. Do I have to resort to javascript shudder...? 3) If I can get #2 to work, what would be really cool is if I could size them wrt the current font (e.g. 1.3em) so that I can have browser font resizing work with them. Can this be done? Can anyone either help or point to an example/help page that works like this? Thanks in advance, Chris __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with Search Bar Sizing
Chris Williams wrote: ... So I have a trivial form with an input type of text, and an input type of submit with Search on it. Easy stuff, and functionally it works fine. Then why is this so dang hard to position/size correctly? :) Probably because you're not supposed to be able to do much to form elements. They belong to the OS/browser. For more information... http://css-discuss.incutio.com/?page=FormElements regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with Search Bar Sizing
Doh sound of hand hitting forehead... of course, I forgot to check the wiki first. Sorry... -Original Message- From: Gunlaug Sørtun [mailto:[EMAIL PROTECTED] For more information... http://css-discuss.incutio.com/?page=FormElements __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check - speaki
On 06/03/11 17:40 Martin Petrov apparently typed: www.speakingofresults.com My main concern is that the site is optimized for 1024x768, and with smaller resolutions the center column is resized and the three photos doesn't stay on the same line. Could you please tell me if you use 1024x768 and whether the 3 photos on the home page stay on the same line? The client reported that most of her friends get a distorted layout but she doesn't know what screen resolution they use. http://mrmazda.no-ip.com/SS/martip1.jpg (linux) http://mrmazda.no-ip.com/SS/martip2.jpg (OS/2) http://mrmazda.no-ip.com/tmp/showcaseh.html You don't need 1024x768 or less resolution to test. Just make the browser window smaller. Setting body and links to CSS small while #extra and image captions even smaller makes it look like your navigation is more important than your above the fold content. -- Blessed are they whose ways are blameless, who walk according to the law of the Lord.Psalm 119:11 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/auth/auth __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Print styles problem
Charlie,
On Mar 11, 2006, at 4:30 PM, Charlie Clark wrote:
On Sat, 11 Mar 2006 21:36:41 +0100, Roger Roelofs
[EMAIL PROTECTED] wrote:
I would expect that this would prevent any content in the sections
#navigation, #header, #picture, #impressum from printing and this is
exactly how Opera 8.5 works. Both Firefox 1.5 and IE 6.0, however,
print
the content of the navigation.
the site is http://www.make-love-not-law.com
The css validator is your friend. Fix the errors and it will likely
work just fine. Actually removing the style tags from the css files
might be all you need to to, but fixing the other errors would be good.
http://jigsaw.w3.org/css-validator/validator?
profile=css2warning=2uri=http%3A%2F%2Fwww.make-love-not-law.com
Another question I have is: is there a good way of having dynamic
elements
in CSS? I have some keyvisuals for my website which I would like to
make
section specific.
div#picture {
background: #F0EFDD url(/images/image.jpg) no-repeat;
}
I would like to have something like portrait.jpg for pages about a
person, flower.jpg for pages about flowers, etc.
Option 4: add a section specific id to the body tag and include it
in the css like so...
#picture {
background: #F0EFDD url(/images/image.jpg) no-repeat;
}
#person #picture { background-image: url(/images/portrait.jpg); }
#flower #picture { background-image: url(/images/flower.jpg); }
That's an interesting suggestion which nearly does what I want.
However, as you will see on the website even my keyvisuals are
dynamic.
How about
#person #picture { background-image: url(/images/kv.php?type=Portrait);
}
Assuming you can change the script to serve an image from a subset
related to the subject area. The script can send http caching headers
to control how long the browser should wait before re-requesting the
image (but that is off-topic for this list).
hth
--
Roger Roelofs
Remember, if you’re headed in the wrong direction,
God allows U-turns!
~Allison Gappa Bottke
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] tools for determining results of the cascade
Jim Nannery wrote: Afternoon David You wrote [...] I'm trying to find CSS tools that help you determine the results of inheritance and the cascade for elements on a Web page. So far, I've only found a few tools that help with this: --Dreamweaver 8: CSS Styles Panel [...] --Style Master from Western Civ [...] --Web Developer's Toolbar for Firefox [...] --Xylescope for Mac [...] --Safari's Web Inspector [...] Are there any other tools out there that you're using (besides your brains) that help you figure out the results of the cascade for elements on a Web page? thanks grinning For our group, aside from the tools listed above it's, Brains R Us /grinning Hope you're having a great weekend Hi David, Not so long ago, somebody in the list had this tip: The Mouseover DOM Inspector, or MODI for short, is a favelet (also known as a bookmarklet) that allows you to view and manipulate the DOM of a web page simply by mousing around the document. See example here http://home.tiscali.nl/developerscorner/css-discuss/images/modi.jpg. The link to get it is at Slayeroffice.com http://slayeroffice.com/tools/modi/v2.0/modi_help.html. Can be cooling down overheated brains, not bad at all! Tools 'r us, especially good free tools! ;-) francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site Check
On 3/11/06, Martin Petrov [EMAIL PROTECTED] wrote: www.speakingofresults.com My first web site using WordPress. The rich text editor is suitable for the client who isn't very technical oriented. But the code produced by the editor is ugly. What do you find wrong with the code? There are multiple editors that can be integrated with Wordpress, but I've never had any gripes with the code produced by any of them. Besides, it's a lot better than the font tags your client would pepper the markup with if they had the chance. My main concern is that the site is optimized for 1024x768, and with smaller resolutions the center column is resized and the three photos doesn't stay on the same line. At least it is usable at 800x600, which is more than I can say for most 1024x768 sites. Could you please tell me if you use 1024x768 and whether the 3 photos on the home page stay on the same line? The client reported that most of her friends get a distorted layout but she doesn't know what screen resolution they use. Definitely do not stay on the same line at 1024 x 768. All you really need to do is reduce some of the spacing between the images or make the right column a little more narrow. I would also discourage the use of text-align:justify. Browsers are not capable of doing the proper text formatting that makes justify look good in print, and you have big gaps and rivers going through the text on this site. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE6 Multiple Class Bug - Order of Declaration Seems to Matter?
Greetings all,
I think I've run into a another problematic behavior with IE6's classed divs.
It's the Multiple Class bug but this behavior is new to me. What I observed
was that IE seems to have a precise hierarchy for classed divs (which is all
good and well) but it creates all kinds of headaches if you have more than 1
classed div that you to work with. This is because the second classed div
gets
short-changed because each classed div has to immediately follow the opening
div declaration if it is to work correctly. Here's an example. I hope it will
clarify my muddled explanation:
#innerWrapper /* the div unclassed */
width:770px; /* child of innerWrapper */
margin:0 auto;
padding:0;
text-align:left;
}
#innerWrapper.HOGAR /* 1st instance of the div classed */
{
position:relative;
background:#fff;
width:770px; /* child of innerWrapper */
margin:0;
padding:0;
text-align:left;
}
#innerWrapper.sidebarBK /* /* 2nd instance of the div classed */ */
{
background:#fff url(../images/outterWrapperBk.jpg) right top
repeat-y;
width:770px; /* child of innerWrapper */
margin:0 auto;
padding:0;
text-align:left;
}
Here's the kicker. I have to choose which I want more in this scenario. I
can't get the background image to display in the 2nd classed declaration
#innerWrapper.sidebarBK{}. In order to get it, I would have to move it up so
that it
is directly under the #innerWrapper{} div. However, if I do this, I now lose
the positioning in the 1st declaration #innerWrapper.HOGAR{} but then I'd lose
the relative positioning that I need in this div.
Has anyone else has had to deal with this mess? If so, is what I think is
happening really happening or am I just overlooking something so obvious that I
just can't see it?
BTW, I did manage to workaround it once I understood what was happening by
declaring the second class as an entirely new div but I'm still curious. I'd
have liked to use any many classes as needed for this wrapper div. It just
seems
simpler that way.
Thanks so much!
Mary
Mary Villanueva
[EMAIL PROTECTED]
http://www.byronsbyte.com/libretos/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 Multiple Class Bug - Order of Declaration Seems toMatter?
[EMAIL PROTECTED] wrote: I think I've run into a another problematic behavior with IE6's classed divs. It's the Multiple Class bug but this behavior is new to me. #innerWrapper /* the div unclassed */ width:770px; /* child of innerWrapper */ #innerWrapper.HOGAR /* 1st instance of the div classed */ width:770px; /* child of innerWrapper */ #innerWrapper.sidebarBK /* /* 2nd instance of the div classed width:770px; /* child of innerWrapper */ You haven't given a URL, so it's quite difficult to be sure of what you want to do, but so far I'm guessing: You have 3 pages, each with an #innerWrapper you want 770px wide, and it has a different class on each page. However, the above mentioned comments let me think you have divs inside of #innerWrapper, and you're just using the wrong selectors. If the latter is the case, just put a space between #innerWrapper and the classname, like so: #innerWrapper .sidebarBK If the former, then it is only the bug playing up, and you can work around it by giving those classnames to the body element of each page, and use selectors like: body.HOGAR #innerwrapper and body.sidebarBK #innerWrapper -- Els http://locusmeus.com/ http://locusoptimus.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
