Re: [css-d] Problem with IE
Alan Chandler wrote: However, it is still not exactly right. The black band with the title in it should more or less (I think there is a couple of pixels out at the moment) line up with the top of the logo picture). On IE it seem to be about the third the way down the logo picture. zero the default margin-top of the h1 -if that's possible in the Tapestry Framework ;) Ingo -- http://www.satzansatz.de/css.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] background shadow tiles
Hi all again, I'm having a small problem now, to create the shadow effect in the main area, I cut a 1 px image with the shadowed border. When I put that image as background and set a repeat-y the shadow tiles funny, it's not a smooth and continue shadow as it should be. Any ideas why this is happening, I tried with a gif image instead of a jpg and the effect is the same? http://www.theniceweb.com/Zuka/lizet/Templates/test.html Thanks in advance, On 2/11/06, Lizet Pena de Sola [EMAIL PROTECTED] wrote: Thank you Christian, this br style=clear:both; definetely made the trick! On 2/11/06, Christian Montoya [EMAIL PROTECTED] wrote: On 2/11/06, Lizet Pena de Sola [EMAIL PROTECTED] wrote: Hi all: I have this page that 'm putting together and it currently breaks on Firefox http://www.theniceweb.com/Zuka/lizet/Templates/test.html The main problem is that the main content area #middle won't expand with the content or the divs inside this is #content2 Also there is a separation between the #top div and the #middle div. You have: height:600px applied to #content, which might work in IE but won't help any other browsers. You need instead: min-height:600px for all the good browsers to make this work. But it looks like you also need to clear your floats, so that the #content actually contains the floats; right now they are dropping out of it. Something like: br style=clear:both; before you close the #content div will do it. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com -- Lizet Pena de Sola The Nice Web http://lizet.theniceweb.com -- Lizet Pena de Sola The Nice Web http://lizet.theniceweb.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] Problem with IE
On Sunday 12 February 2006 10:29, Ingo Chao wrote: Alan Chandler wrote: However, it is still not exactly right. The black band with the title in it should more or less (I think there is a couple of pixels out at the moment) line up with the top of the logo picture). On IE it seem to be about the third the way down the logo picture. zero the default margin-top of the h1 It works thanks, but I don't understand why margin-top was ever non zero. My css guides say its default value is zero and its not inherited. -if that's possible in the Tapestry Framework ;) Almost everything is possible, some things take more time than others :-) But the CSS is all mine, I have a standardardized border component that takes a application level parameter of the url for the site CSS and another one, if I want, for each page and writes them into the header. Its my brain that gets fried, trying to follow all the problems browser differences occurs. Its made worse by the fact that I use Konqueror as my standard browser, which almost nobody takes account of and which occassionally does some strange things. -- Alan Chandler http://www.chandlerfamily.org.uk Open Source. It's the difference between trust and antitrust. __ 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] Problem with IE
Alan Chandler wrote:
On Sunday 12 February 2006 10:29, Ingo Chao wrote:
zero the default margin-top of the h1
It works thanks, but I don't understand why margin-top was ever non zero. My
css guides say its default value is zero and its not inherited.
Browser defaults are different, and, to complicate things, the
implementation of margin-collapsing is buggy in IE.
Some set all to zero and build up upon:
* {margin:0; padding:0}
Its my brain that gets fried, trying to follow all the problems browser
differences occurs. Its made worse by the fact that I use Konqueror as my
standard browser, which almost nobody takes account of and which
occassionally does some strange things.
You are right, it's boring to speak about the state of bug decay in
different IE versions like in a self-help group again and again, and it
would be fun to discuss more fresh stuff about Konqueror and Safari here.
Ingo
--
http://www.satzansatz.de/css.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/
Re: [css-d] Centred images, assistance please
I'm playing around with three centred columns each with two vertical images. Can't seem to get it right. How to do? I've put an example up on my dump site, www.qwqwk.com. Mike, Try replacing width: 195px; with width: 33%; on each of the columns - #imgbox1, #imgbox2, #imgbox3 - and see if that does the trick. I recently had a similar problem that I consulted the list on. My situation as slightly different than yours, but the page I put up, might still help you: Center Horizontal List in a Liquid Container http://www.charlestonwebsolutions.com/test_case/tester.html -- Jono Young Designer | Developer | Illustrator Charleston Web Solutions Bringing Higher Standards to the Lowcountry http://www.charlestonwebsolutions.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] background shadow tiles
Hi all again,
I'm having a small problem now, to create the shadow effect in the
main area, I cut a 1 px image with the shadowed border. When I put
that image as background and set a repeat-y the shadow tiles funny,
it's not a smooth and continue shadow as it should be.
The image you have specified for your background (main_background.jpg) is
not an even gradient from top to bottom.
Try downloading (right-click, save as, save to your images folder) and using
this image instead:
http://www.charlestonwebsolutions.com/examples/main_background.gif
This is a GIF, as opposed to the JPG that you are currently using, so be
sure to change your style sheet rule to make use if this image instead of
your JPG image.
#layout {
width: 850px;
margin: 0 auto;
background-image:url(../images/main_background.gif); /* new GIF */
background-repeat: repeat-y;
}
--
Jono Young
Designer | Developer | Illustrator
Charleston Web Solutions
Bringing Higher Standards to the Lowcountry
http://www.charlestonwebsolutions.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] problem vertically aligning div
Thanks for your help Georg. It works great.
--- Gunlaug S�rtun [EMAIL PROTECTED] wrote:
Travis Barden wrote:
I am having trouble getting my left nav div to
vertically align in
IE6. It works fine in Firefox 1.5. It is supposed
to be flush against
the header, but in IE it floats near the center
of the page.
http://omega-tek.com/willow/pie.html
Links in lists becomes too wide in IE6 when paddings
are added to 100%
width. That's correct rendering, but doesn't work
well here since it
runs into the 'expanding container bug' in IE. So
the entire left column
runs out of space and drops.
Solution: replace 'width: 100%;' with 'zoom: 1;' for
'#button li a' in
'pie.css', in order to get 'Layout'[1] in IE/win
without the overshot.
Alternatively - add:
#left {overflow: hidden;}
...to hide the overshot.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
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/
__
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.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: www.girlscantwhat.com - Followup
Here is my testpage http://home.tiscali.nl/developerscorner/css-discuss/gcw-liquid.htm. Under Win98SE it is working at least in IE6, FF1.07, Opera7.54, Opera8, Netscape6.2 and Mozilla1.7. About Safari / IEmac I cannot test. Anyway: html- and css-valid. francky francky: Sorry to report, the problem remains in Safari 2.0.3. It would work great if the overlay image was up, or down, (vertical) one brick. tedd -- http://sperling.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] Simple Headings
I have used a very simple css method for headings that you will be interested in. It could make other image replacement techniques obsolete. But proceed with caution because I am an amateur so I might be talking rubbish! The article is at http://4-ever.org/simple-headings __ 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] Can you style a block inside of an inline element?
Paul wrote:
Given that it's contrary to the W3C rules to nest a block-level
element inside an inline-level element, is it also contrary to the
spirit of those rules to use CSS to style a nested inline
element as block?
This doesn't fully anwer your question, but I think that using CSS to put a
block box inside an inline one is not forbidden by W3C. They even have an
example: http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level
where they mention:
body { display: inline }
p{ display: block }
Bruno
__
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] IE Line-height / Replaced Element Bug
Hello list, Anyone know a workaround for the bug described at http://www.positioniseverything.net/explorer/lineheightbug.html ? Very annoying as you can see here: http://www.humanrightsimpact.org/top/links/ Lineheight is supposed to be 200% but not in IE :( Thanks for your help! regards, Albert van der Veen __ 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] Can this menu be reproduced with pure CSS?
Zoe M. Gillenwater wrote: [...] http://www.charlestonwebsolutions.com/test_case/block_nav_01.html [...]did not test this in anything but Firefox on my Mac. Should be OK for other browsers, even IE, but check all the browsers you are concerned about to be sure. I can confirm that this works on IE6. :-) Hi all, Affirmative too for the Mozilla-family under Win98SE: Mozilla 1.7, Firefox1.07, Netscape6. :-) Also: Opera7.45 and Opera8.01. :-) Because this is a widely used and proved concept, and html- and css-validator are allright, I don't expect WinXP and/or newer browser versions of the above will give any problem. francky Tip 1: For future compatibility-safety you can change the * html IE-hack in a Conditional Comment: !--[if IE] and so on. Then if IE7 would go another way, you can differentiate and give additional IE-guidelines if needed: !--[if lte IE 7]. Tip 2: For accessibility-safety you can have a look at the css-validator warnings about some refinements in the color/background-color pairs. Tip 3: The html-valid image is borrowed from the w3c-site. While w3c can be pretty busy every now and then, this can slower the download. Tip 4: Combining images can also speed up the download. See testpage over here http://home.tiscali.nl/developerscorner/css-discuss/test-ih-footer.htm. __ 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] Page jumps when links clicked - why?
From: Theresa Mesa [EMAIL PROTECTED] Why, especially in IE6, do the pages (the content of the page, not the beans) jump when I click on the links? http://mdh-test.com/sips http://mdh-test.com/sips.css Thank you in advance. David has provided one suggestion regarding page shift. For IE, you're most likely encountering a bug caused by italic text, especially on the blends page. See the following for more information. http://www.positioniseverything.net/explorer/italicbug-ie.html 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/
[css-d] header tags and links
Ok, so I used to be rather into CSS, but I've been gone from the subject a long time and I am having trouble finding an answer to what I suspect is a rather simple question. I would like for my header tags h2, h3, etc. to also be links a, but I do not remember nor can I find a way to edit how they appear. For example, if I write h2a href=somethingheader two!/a/h2, how do I edit the properties of the way the link looks? Say, if I wanted to change the text decoration or the color. How would that look in the css file? Thanks, and I hope this isn't a tiresome question, scott __ 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] header tags and links
http://www.w3schools.com/css/css_examples.asp On 2/12/06, Scott Schumpert [EMAIL PROTECTED] wrote: [snip] Thanks, and I hope this isn't a tiresome question, scott -- Eric Ladner __ 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] header tags and links
I am not seeing on that page what I should be looking at ... the examples I found there that fit my description use class elements. Do I have to use a class element? -scott On Feb 12, 2006, at 2:44 PM, Eric Ladner wrote: http://www.w3schools.com/css/css_examples.asp On 2/12/06, Scott Schumpert [EMAIL PROTECTED] wrote: [snip] Thanks, and I hope this isn't a tiresome question, scott -- Eric Ladner __ 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] Floats and border. How does this work?
On 2/10/06, Michiel van der Blonk [EMAIL PROTECTED] wrote:
For long I have been looking for the easiest way to create forms without
tables. I found several methods:
- floating
- position:absolute
- display:inline-block display:-moz-inline-box
All come with their own caveats and problems. The floating is usually
considered the best. However, it's not easy to align the input's under
each other.
The problem is usually that even if I give the label a width, it is not
used by the browser. Recently I found out that if I give the label a
little bit of padding, or an invisible border (color same as background)
that the inputs are suddenly aligned correctly in both IE and FF.
look at the difference between:
form {width:20em}
label {float:left;width:10em;margin-bottom:1em;}
input {float:left;}
and
form {width:20em}
label {float:left;width:10em;margin-bottom:1em;padding:1px}
input {float:left;}
for this html
form action=
labelName/labelinput
labelAddress/labelinput
labelEmail/labelinput
/form
I explained my methods here:
http://michiel.wordpress.com/2006/02/09/floating-forms/
I know that it works. I just would like to know why this works.
I think it is related to label being an inline element, and
therefore width not being valid for it. While floating it turns it
into a block element, some browsers develop bugs, particularly IE,
which are overcome when borders are defined (drawing borders forces
the rendering engine to calculate a width). It may be related to the
IE concept of haslayout()
Explicitly declaring display:block on label may be another fix.
--
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
__
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] odd cross-browser behaviour in using print and screen css
Hi all, I ran into this problem and would like to know if there are others running into this as well. Summary: the title attribute in a link to a CSS file causes Firefox and Safari to ignore the print version, while it works fine in IE. And IE does not support @import with media indications. Extended version: I have an HTML file (XHTML 1.0 Strict) that contains a link to a CSS file: link href=theme.css title=theme.css rel=stylesheet type=text/css/ This works fine in Safari, Firefox (OS X and Win) and IE6. After adding the print version: link href=theme.css title=theme.css rel=stylesheet type=text/css media=screen/ link href=theme-print.css title=theme-print.css rel=stylesheet type=text/css media=print/ Firefox did display the screen version correctly, but displayed an unstyled print preview. Same goes for Safari. Internet Explorer displayed both correctly. I experimented with: link href=theme.css title=theme.css rel=stylesheet type=text/css/ with theme.css: @import url(theme-screen.css) screen; @import url(theme-print.css) print; This works in Firefox and Safari, but not in Internet Explorer. Finally: link href=theme.css rel=stylesheet type=text/css media=screen/ link href=theme-print.css rel=stylesheet type=text/css media=print/ i.e. without the title attribute, works as intended in all browsers. If I understand the XHTML 1.0 Strict correctly, a title attribute is perfectly allowed in a link tag. I hope someone can verify this and/or shed a light on it. Bye, Helma __ 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] content disappearing in IE/win
Hi there, I'm having problems with this site: http://www.jd-associates.com.au/ test/permissions/ The CSS is at http://www.jd-associates.com.au/jd.css In IE, the main column content gets lopped off / disappears below the line of the sidebar (you can see different examples on other pages). I've put some borders in place to give you a bit more idea of the page's structure. Is this the guillotine bug? (http://positioniseverything.net/ explorer/ guillotine.html) I've tried following the instructions on that page, but not got very far with it, since not all of it seems to apply here. I've also tried clearing elements in different ways, but haven't hit upon a combo that works. (Sorry to repost this message, if I have - I'd just reactivated my CSS-D subscription and it was erratic for the first 24 hours or so) Cheers, Virginia __ 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] odd cross-browser behaviour in using print and screen css
On 2/12/06, hepabolu [EMAIL PROTECTED] wrote: works as intended in all browsers. If I understand the XHTML 1.0 Strict correctly, a title attribute is perfectly allowed in a link tag. Yes, but I don't see any reason why you would use it on a link rel=stylesheet ... . This page has examples: http://www.w3.org/QA/Tips/use-links ... and in those examples the title attribute is usually used for linking to other pages or alternate content such as RSS. I've never seen it recommended for stylesheets. -- -- 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/
Re: [css-d] odd cross-browser behaviour in using print and screen css
hepabolu wrote: Summary: the title attribute in a link to a CSS file causes Firefox and Safari to ignore the print version, while it works fine in IE. I'm not sure. This https://bugzilla.mozilla.org/show_bug.cgi?id=238767 is indicated as a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=51848 Which can be interpreted as if Fx currently does not support title on print style sheets, therefore Fx defaults to none. Confirmed with Safari and Fx here. And IE does not support @import with media indications. http://www.dithered.com/css_filters/css_only/index.php says IE would not support @import url(styles.css) all; So yes, I think you are right, the cross-browser behavior is odd. Ingo -- http://www.satzansatz.de/css.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/
Re: [css-d] content disappearing in IE/win
Gunlaug Sørtun wrote:
Virginia Murdoch wrote:
http://www.jd-associates.com.au/test/permissions/
Follow-up on general CSS-hackery... :-)
I advice you to place a dummy-style after each rule where you use the
voice-family hack. The reason is that some older IE/win-versions (5+)
may eat and ignore the rule following such a hacked rule.
#footer is one such rule that might be ignored by those.
Placing something like this:
.nonexistent {background: red; /* no such class */}
...after each of those voice-family hacked rules, means that all the
real rules will be applied.
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] odd cross-browser behaviour in using print and screen css
On Feb 13, 2006, at 6:20 am, hepabolu wrote: Summary: the title attribute in a link to a CSS file causes Firefox and Safari to ignore the print version, while it works fine in IE. And IE does not support @import with media indications. Extended version: I have an HTML file (XHTML 1.0 Strict) that contains a link to a CSS file: link href=theme.css title=theme.css rel=stylesheet type=text/css/ This works fine in Safari, Firefox (OS X and Win) and IE6. After adding the print version: link href=theme.css title=theme.css rel=stylesheet type=text/css media=screen/ link href=theme-print.css title=theme-print.css rel=stylesheet type=text/css media=print/ You have to give the print style-sheet the *same* title as the screen style-sheet. i.e link href=theme-blue.css title=blue rel=stylesheet type=text/css media=screen / link href=theme-blue-print.css title=blue rel=stylesheet type=text/css media=print / link rel=alternate stylesheet type=text/css href=theme-red.css media=screen title=red / link rel=alternate stylesheet type=text/css href=theme-red-print.css media=print title=red / With the above, a well educated browser will select the 'theme-blue-print.css' for printing when the 'theme-blue.css' is the active screen style (Firefox, Opera, I think Safari but I haven't tested this for a while). The title attribute makes the stylesheet persistent; when used with multiple stylesheets, it is also used as a means of grouping the stylesheets. http://www.w3.org/TR/html401/present/styles.html#h-14.3 BTW, IE has a truck load of bugs with this (essentially ignoring the title attribute. Philippe --- Philippe Wittenbergh http://emps.l-c-n.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] Background image bleeding everywhere in IE
Hi all, On this page (and others like it): http://www.aao.com.au/new/people/ current_musicians/james_greening/ the background image and colour from the mailing list signup form is bleeding into the main content area. As far as I know, this is only happening in IE on Windows - I can't for the life of me work out how to stop it from happening. Anybody got any tips? The css is http://www.aao.com.au/new/aao.css For extra credit, where is the extra line-spacing in the sub- navigation coming from in IE? I've tried cutting out margins, reducing line-spacing, chanting mantras under my breath... nada. Cheers, Virginia -- Virginia Murdoch http://www.alertbutnotalarmed.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] IE Line-height / Replaced Element Bug
Albert van der Veen wrote: Hello list, Anyone know a workaround for the bug described at http://www.positioniseverything.net/explorer/lineheightbug.html ? Very annoying as you can see here: http://www.humanrightsimpact.org/top/links/ Lineheight is supposed to be 200% but not in IE :( Thanks for your help! regards, Albert van der Veen H(o)i Albert, The items are beautifull list-items, and with a list the line-height-problem is gone. This will make the html also a lot easier/smaller: no repeated calling of the bullets needed, just once in the css as bg-image. :-) Illustration is in a testpage http://home.tiscali.nl/developerscorner/css-discuss/test-hria-nw.htm. Comments (in Dutch) are in the source code. Perhaps also the print.css has to be adapted (didn't look). Greetings from Holland, francky btw: See you are using rather big images for the rounded corners of the #menukader. Perhaps the Flexibele ronde hoeken http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners-nl.htm (Liquid Round Corners) method can be usefull for speeding up the page. __ 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] hybrid layout, wide table (IE6)
Brett Leber wrote:
Please consider the table layout and nested divs to be a part of the
design requirements. Also, the following is an IE6 rendering issue, so
please view the examples in IE6.
Example 1: http://www.andrew.cmu.edu/user/bleber/css/table_test1.html
Example 2: http://www.andrew.cmu.edu/user/bleber/css/table_test2.html
[...]
How can I make example 2 display like example 1?
Hi Brett
Did you try:
* html body { width: 97%; overflow-x: auto; } ?
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/
[css-d] Bullets in IE
Hi All, As usual I'm going 'ten to the dozen' trying to complete a site... it's got a fairly chunky backend (php person doing that but I need the html and css working exactly before he gets it). I've going in circles trying to figure why IE is putting bullets in the li on this page http://www.4wdnsw-act.org.au/test_gallery.php CSS here: http://www.4wdnsw-act.org.au/styles/gallery.css It works fine in FF, looked up the books I have etc and just cannot get it working correctly in IE. Hope someone can see a really quick thing that I'm obviously doing wrong. Thanks Vicki __ 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] IE width difference making issues with floats
Hi guys,
I'm pretty sure I know what the problem is, I'm just having trouble fixing
it. I've played around with the numbers a bit, but I can't seem to get
things to stack up properly.
I'm using the 'One True Layout' mentod to lay out the three main columns of
the page. The problem I am having is in the right-most column when the ad
banner in there is the large one. I'm pretty sure that the problem is to do
with the differences between the IE box model and the real one. Here is the
CSS that controls the size and order of the three columns:
/***/
/* Content */
/***/
#content {
float: left;
width: 528px;
margin-left: 170px;
padding-bottom: 10px;
background-color: #FF;
}
//
/* Infobase */
//
#ibase {
float: left;
width: 170px;
margin-left: -698px;
border: 1px #FF solid;
border-bottom: none;
text-align: left;
font-size: .8em;
}
/***/
/* Teasers */
/***/
#teasers {
float: left;
width: 300px;
margin: 0;
border: 1px #FF solid;
border-bottom: none;
}
Everything inside #teasers has 0 side padding and side margins, but there is
that 1px border around it. When the ads showing up are the set of three
skinny ones, everything is fine. When the single large (300px wide) ad
appears, that column drops down underneath everything else.
I'm not entirely sure how coherent I've been here, but I'm not sure how to
express it any better. You can see the problem at:
http://staging.renovate.com.au - you might have to refresh a couple of
times until you get the wide ad.
If anyone can suggest how I need to change the widths of my columns to make
it all stay sitting nicely, it would be greatly appreciated.
Cheers,
Seona.
__
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] css-driven tabbing content
mean dspt wrote: Hello, At the moment I'm using http://webfx.eae.net/dhtml/tabpane/tabpane.html js solution for creating a tabbed content on my pages. But I'm not very happy about this. I'd like to have a css-only (or css-mainly :) ) solution to get similar behaviour. One of the solutions I know is using overflow-hidden and #anchors. Basic example goes like this: http://adukatar.net/reisio.htm [...] the good points - pure css, simple and elegant. bad points - works only in Gecko, doesn't work even in Opera for some reason. requires set height, equal for all the tabs. do you think this can be upgraded to eleminate bad points or may be you know some other nice css-tabs? Hi Yegor, AFAIK there are only javascript-solutions to toggle hidden content (with the DOM-method). [1] The easy alternative is (of course) to make as much pages as tabs, so a click leads to the next page. It is some more html than the webfx-method, but on the other hand you can miss all the javascript they use, and with copy/paste it is easy made. And always working! :-) So I think the question is: do you have an urgent reason to put all the tab-contents in just one (rather heavy) page? francky [1] Unless only showing the hidden content at hovering, like a css-popup/popaway http://home.tiscali.nl/developerscorner/css-discuss/showathover.htm. __ 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] IE Fixes
Hello! Still struggling with css. My right and left content divs are perfect on my Mac in all but IE... nor do they align on IE on a PC. Can anyone tell me what I am doing wrong. Also, my background image does not align correctly in IE but is fine on all browsers on my Mac. http://www.zdsign.com/gwp/tax.html http://www.zdsign.com/gwp/tax.css 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] Background image bleeding everywhere in IE
Virginia Murdoch wrote:
Hi all,
http://www.aao.com.au/new/people/current_musicians/james_greening/
the background image and colour from the mailing list signup form is
bleeding into the main content area. As far as I know, this is only
happening in IE on Windows - I can't for the life of me work out how
to stop it from happening. Anybody got any tips?
Get rid of the margin in #sub...
#sub {
width: 128px;
color: #18431B;
/*margin-right: 10px; -- this one */
float: left;
font-size: 70%;
}
...as it serves no purpose - and make IE/win loose track of the fact
that this is a simple float.
I have no idea which bug-number this is in IE/win's enormous arsenal,
but 'positive backside margins' on floats are known to cause problems in
certain layouts in that browser.
We can even make that bugger freeze by a combination of 'positive
backside margin' and 'negative bottom margin' on floats - so watch out.
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] Bullets in IE
Vicki Stebbins wrote
I've going in circles trying to figure why IE is putting bullets in the li
on this page
http://www.4wdnsw-act.org.au/test_gallery.php
CSS here: http://www.4wdnsw-act.org.au/styles/gallery.css
It works fine in FF, looked up the books I have etc and just cannot get it
working correctly in IE.
Hope someone can see a really quick thing that I'm obviously doing wrong.
Vicki
Vicki:
I cut and pasted all of your code into Crimson Editor, saved it onto my
desktop and opened in IE 6.0...and no bullets. The bullets are still in the
page on the website, in the same browser, though.
I'd start by adding at the end of the gallery.css,
.title li{
list-style: none;
}
.poster li{
list-style: none;
}
.description li{
list-style: none;
}
to see if that takes care of it, and work backwards from there...
I've had problems with IE getting all of this type of CSS declaration,
#gallery, #gallery li.title {
display: block;
list-style: none;
text-align: center;
font: bold 12px verdana, arial, helvetica, sans-serif;
line-height: 19px;
color: #000; /* this changes the colour of the title of the photo*/
}
applying the styles only to #gallery, not to both...although you would think
the list-style: none; would apply to all of #gallery.
Cheers,
Peter
[EMAIL PROTECTED]
__
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] Bullets in IE
Hope someone can see a really quick thing that I'm obviously doing wrong. Thanks Vicki Vicki: You should also validate your markup and CSS; the W3C validatior shows errors in both. http://validator.w3.org/ http://jigsaw.w3.org/css-validator/ Best Regards, Peter __ 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] Bullets in IE
Vicki Stebbins wrote:
I've going in circles trying to figure why IE is putting bullets in
the li on this page http://www.4wdnsw-act.org.au/test_gallery.php
Hope someone can see a really quick thing that I'm obviously doing
wrong.
One solution that'll work - add...
#gallery div ul li {float: left;}
...since there will be no bullets on floats.
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] scalable navigation from Cederholm's Bulletproof Sites
Hello all, This is my first posting, and it should be known that I'm pleased to join the discussion(s). That said, here's why I joined the list in the first place. I'm an English teacher at an ESL program affiliated with the University of Hawaii and one of my adjunct jobs is looking after our website. I'm currently trying to revamp the site, which means getting rid of all those tables and switching over to XHTML and CSS. Things have been going pretty well but I'm snagged on the navigation. I followed the Scalable Navigation example in chapter two of Dan Cederholm's and everything looked great in Safari... until I checked the site in Explore, Firefox, and Opera, all of which screwed up the nav tabs. Opera displays only two of the tabs (inline), while Explorer and Firefox stack all the tabs one on top of the other against the left side. I've been trying to troubleshoot this all day but my brain is shot and I just can't see what the problem might be. Here's a test page to look at: http://www.hawaii.edu/eslhelp/courses.html (if you click on home, the page will not be found because if I upload index.html it'll hijack our current home page, and right now I'm still just testing) The URL for my (messy) stylesheet is: http://www.hawaii.edu/eslhelp/styles.css If anyone else has run into this problem I'd really appreciate your insights as to how you got around it. Thanks in advance, David __ 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] scalable navigation from Cederholm's Bulletproof Sites
On 2/13/06, David Faulhaber [EMAIL PROTECTED] wrote:
I followed the Scalable Navigation
example in chapter two of Dan Cederholm's and everything looked great in
Safari... until I checked the site in Explore, Firefox, and Opera, all of
which screwed up the nav tabs. Opera displays only two of the tabs (inline),
while Explorer and Firefox stack all the tabs one on top of the other
against the left side. I've been trying to troubleshoot this all day but my
brain is shot and I just can't see what the problem might be.
Well, I didn't have much time to play with it but I did the following:
#nav {
float: left; /* formerly right */
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: url(images/nav_bg.jpg) repeat-x bottom left;
}
#nav li { /* float removed */
margin: 0;
padding: 0;
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
And it looked perfect in Firefox. I think the problem you had was that
the list items are floated right, but when you do that, whatever comes
lower in the source drops below what is before it... or something.
Actually I don't know if I have an explanation but basically just
using
display:inline;
on the list items is enough that you don't need to float them.
--
--
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] vertical alignment of photo boxes
Hi all,
I've gotten pretty far with getting photo/caption boxes to work at
http://www.vivagallery.org/exhibits/CAA_2006JuriedOpen/index.html
The only thing I can't figure out is how to align the boxes
vertically so that they align along their bottoms, not the top.
Because they are different heights (same widths) the flow is really
odd when you resize the browser window wide.
I read somewhere to use display: tablecell and then vertical align
bottom will work. But they remain flush to the tops.
The photoboxes are floated left (or they stack above each other), but
I'm open to other ideas.
relative css is:
/* *** styling for photoboxes *** */
div.photobox {
float: left;
margin: 0 10px 10px 0px;
background-color: #FF;
width: 240px;
height: auto;
border: 1px solid silver;
text-align: center;
padding-bottom: 6px;
display: table-cell;
vertical-align: bottom;
}
div.photobox img {
border: 1px solid #577199;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 4px;
}
full CSS is at
http://www.vivagallery.org/styles/viva3.css
thanks for any help,
Trish
PS. I hope by making a new message (rather than hitting reply and
changing the subject line) I am start a new thread? (I read/reply to
the list using Eudora mail software.) It seems before that my
questions were appearing in the middle of other threads. Sorry about
that.
--
--
Trish Meyer, Webmaster
VIVA Gallery
The Valley Institute of Visual Arts
http://www.vivagallery.org
Email: [EMAIL PROTECTED]
__
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] scalable navigation from Cederholm's Bulletproof Sites
David Faulhaber wrote:
This is my first posting, and it should be known that I'm pleased to
join the discussion(s). That said, here's why I joined the list in
the first place.
Welcome.
Yeah, I knew there had to be a reason... ;-)
I followed the Scalable Navigation example in chapter two of Dan
Cederholm's and everything looked great in Safari... until I checked
the site in Explore, Firefox, and Opera, all of which screwed up the
nav tabs. Opera displays only two of the tabs (inline), while
Explorer and Firefox stack all the tabs one on top of the other
against the left side.
http://www.hawaii.edu/eslhelp/courses.html
You should visit the html and CSS validators, and fix some minor
problems from the start, just to be on the safe side.
However, the CSS validator won't pick up this...
#nav a {
float: right;
}
...that will work much better in reverse, as...
#nav a {
float: left;
}
...and only IE/win needs those anchors to float at all, as a mean to get
its proprietary 'Layout'[1] to work and make the whole tab clickable.
IE/win can't live without its bugs :-)
Floats give 'Layout' by default in IE, but the proper standard-term is
'block formatting context'[2] which describes what really should happen,
and standard compliant browsers can do without that on an anchor, as
'display: block' should do.
The problem in your page is that floating a container one way and the
content the same way may have some buggy side-effects in some cases. By
reversing direction on the content - the anchor - the whole thing
becomes a bit more stable across browser-land.
You can use this information to separate IE/win from the standard
compliant browsers, and feed such extras to IE/win only, in case some
standard compliant browser choke on them. That happens quite often.
Opera 8.5 and 9tp2, Firefox 1.5.0.1 and IE6 will render the corrected
navigation just fine. Didn't check in others.
Opera 9tp2 managed to render your original styles perfectly also, btw.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
[2]http://www.w3.org/TR/CSS21/visuren.html#q15
--
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/
