Re: [css-d] Page Centering and New Question
Thanks for all the help! Now that my page is centered in the browser
windows, how can I color the outside margins. I think I want the
center to stay white so I don't have to fiddle with compatibility
with the already chosen text colors, unless everyone says, no, no,
don't ever have a white background (for some reason).
Also, the style code for the footnotes isn't working in IE 7 as it
should (or at least, as I'd like it to), with a serif font:
sce {
color: #99;
font-size: 75%;
font-weight: bold;
font-family: Times New Roman, Times, serif;
}
Another thing I notice is the link menu has too much space between
the lines and text in IE 7 compared to Safari.
http://www.bowesltc.com
I am open to any more overall design suggestions. I would like this
to look as professional as possible on this do-it-myself budget. I am
not wedded to the tree photo as opposed to something else there, or
to the link menu as is, but I don't have a lot of time to really
rewrite things as opposed to tweaking.
Martha
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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 flow issue
Dear Ingo: Thank you! That fixed it in IE 6 and 7, but still slightly off in Firefox. I'm going to read up on this Quirksmode article that was suggested and see what that has to offer too. -- In peace, Amy M Ostrom Web Interface Designer [EMAIL PROTECTED] On 2/27/07, Ingo Chao [EMAIL PROTECTED] wrote: Amy Ostrom wrote: ... My issue is with floats not clearing completely so things start to stack. ... Examples: http://jocobusiness.jocolibrary.org/templates/JCL_Booklist.aspx?id=771 http://jocobusiness.jocolibrary.org/templates/JCL_Booklist.aspx?id=731 CSS: http://e.jocolibrary.org/business/s/templates.css I am not sure about the question since you are not clearing at all. Maybe Option 2 in [1] is what you need. Apply the complete code to the end of your templates.css stylesheet and change .clearfix to .booklistitem Ingo http://css-discuss.incutio.com/?page=ClearingSpace -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] POOF! Background image on link goes away in IE!
I have a short test program for this issue at
http://runwithmcp.org/poof.html, with entire code below.
I have an external link style defined, and all is well in FireFox. But in IE6
if the link wraps around an end-of-line, the background image vanishes! It
comes back as soon as the link is on a single line. I've tried several IE
voodoo-hacks (adding position: relative, etc.) with no success. Is there a
way to make this work in IE? (To see it, load the page and change the window
width until the link breaks.)
Weird. (But it's IE, so that's redundant.)
Complete code:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /
titleDisappearing Graphic/title
style type=text/css
!--
#content a.outside_link {padding-left: 12px; background:
url(images/external.gif) 2px 2px no-repeat;}
/* background image in link disappears in IE when link goes across end-of-line
*/
#content a.outside_link:hover {text-decoration: underline;}
--
/style
/head
body
div id=content
pCarderock is just north of the Beltway on the Maryland side of the Potomac.
You should take Beltway Exit 41. Directions are available at the Carderock
Recreation Area, or use this a class=outside_link href=#this Google Map
link/a and use the Directions to feature with your own requirements.
/p
/div
/body
/html
---
Mark Wilson, Computer Programming Unlimited
Web: http://www.cpuworks.com/
Email: [EMAIL PROTECTED] or [EMAIL PROTECTED]
Our motto: Getting the Job Done
Check out the new AOL. Most comprehensive set of free safety and security
tools, free access to millions of high-quality videos from across the web, free
AOL Mail and more.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Vanishing divs in IE6
Hi, I am developing a page that includes a small piece of javascript that make div appear or dissapear. This works perfectly on this page when 'info' is clicked next to each song: http://www.kateluckhille.com/index.php/music/ But when I change the layout in another section: http://www.kateluckhille.com/index.php/soundfactory/ the songs dissapear as one hovers over them in IE6. Does anyone have any ideas? I have removed the Javascript element and it still happens so I assume it is the css. Any help would be greatly appreciated. Kind regards. I am Paul __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] POOF! Background image on link goes away in IE!
[EMAIL PROTECTED] wrote: I have a short test program for this issue at http://runwithmcp.org/poof.html, with entire code below. I have an external link style defined, and all is well in FireFox. But in IE6 if the link wraps around an end-of-line, the background image vanishes! It comes back as soon as the link is on a single line. I've tried several IE voodoo-hacks (adding position: relative, etc.) with no success. Is there a way to make this work in IE? (To see it, load the page and change the window width until the link breaks.) Weird. (But it's IE, so that's redundant.) There is no CSS-only fix, and it is not a bug. The positioning of the background-image on inline elements is just not defined in CSS2.1 [1]. IE seems to follow the 'bounding-box' model for the 'background-break' property (CSS3) [2]. Ingo [1]http://www.satzansatz.de/cssd/wrappinglinkbg.html [2] http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-break -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 color on form w/ fieldset
Ingo Chao wrote:
Unicorn Design wrote:
http://www.excellenterprisesllc.com/contact.php
The problem is demoized here [1].
I think a fix could be to pull the legend with a negative margin, apply
position:relative to fix the clipping, and to apply position:relative to
the fieldset in order to fix the positioning of the legend itself. Sigh.
In your Conditional Comment:
#email fieldset { position:relative; }
#email legend { position:relative; margin-top: -1em; }
And remove the first br before the legend.
Ingo
[1]
http://www.456bereastreet.com/lab/styling-form-controls-revisited/fieldset/
Hi Denise,
Yes, a good fix (hear, hear, Ingo). - In practice it turns out to be a
margin-top of -1.55em in this case. And the legend is even maintaining
it's position in IE at different resolutions: pff! ;-)
Addendum: also a bit extra margin-bottom for the #email legend appears
to be needed for IE, to compensate the upwards shifting.
So besides the #email fieldset { P:R; } our never satisfied glutton
wants to eat in the Cond.Comm.:
#email legend {
position:relative;
margin-top: -1.55em;
margin-bottom: 10px;
}
Tested in IE6 under WinXP: testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-legend-in-form.htm
Greetings,
francky
btw:
Filling the empty label/label with a
labelnbsp;/label
is pushing the Submit Button under the text area in not-IE.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Netscape 7/AOL Float Issue in 3-Column Layout
Appreciate any help anyone can give. I¹m on the verge of switching to tables and feeling sort of desperate after spending two days on this one issue. This is my first real CSS layout and perhaps I bit off more than I can chew. THE INFO: Here is the link to the site in question: http://www.onmontauk.com/index-test.shtml Here is my CSS: http://www.onmontauk.com/cssstyles.css Here are screen shots of what is happening: http://www.onmontauk.com/screenshots.html I have several containers: -Wrapper -Outer (has large borders over which side1 and side2 float to create the column effect) -Inner (contains side1, content, and side2 all floated left) THE PROBLEM In Netscape and AOL the Outer layer doesn¹t stretch to fit the contents of Inner to create the appearance that all three columns are same height. WHAT I¹VE TRIED -HTML and CSS were validated no errors -I¹ve tried every possible combination of absolute and relative positioning I can think of -I started with the variation on Douglas Livingstone¹s 3-column layout provided in The CSS Anthology by Rachel Andrew. I¹ve tried the variations provided by Alan Pearce at www.alistapart.com/ (his example did not work in Netscape either http://alistapart.com/articles/multicolumnlayouts) -I¹ve searched for Netscape hacks specific to this issue and found none -I've removed Inner and used Outer only, but this caused issues with the footer I really appreciate your time. Thank you, Meaghen __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] layout breaks in IE 6
The following layout breaks in IE 6.o http://montrails.org/ http://montrails.org/mrtc_style.css Any suggestion on how to fix this would be appreciated. -Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] FW: Adjacent siblings
OK, my boo-boo, I had the Firefox tab set to use the IE rendering
engine. Once switched back it works fine.
However, without IE6 support that CSS formatting trick is no use
to me.
Anyone got any ideas about another (IE6-compatible) way to apply
formatting to an element, conditional upon the nature of the
preceding sibling?
TIA
- Bill
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of
Philippe Wittenbergh
Sent: Wednesday, February 28, 2007 9:58 AM
To: CSS-D
Subject: Re: [css-d] Adjacent siblings
Importance: High
On Feb 28, 2007, at 8:33 AM, Bill Hely wrote:
H3 {
margin-bottom: 0px;
padding-bottom: 0px;
}
H3+p{
margin-top: 0px;
padding-top: 0px;
}
There should be no margin/padding between any H3 and the
paragraph following it. So in...
[H3]Subheading[/H3]
[p]This is a paragraph after the subhead.[/p]
...the two lines of text should be (vertically) hard up
against
each other.
Yet in both Firefox and IE6 they are spaced apart.
Does this adjacent siblings thing actually work?
Test case URL, please ?
Those selectors work very well in Firefox, Opera, Safari,
Konqueror,
iCab, etc.
They *don't* work in IE 6 (no support for that kind of
selector, bug
fixed in IE 7).
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
--
We take security very seriously. All outgoing mail is
certified Virus Free. To boost YOUR security visit
The Hacker's Nightmare: http://HackersNightmare.com
How to keep hackers, worms and other germs out of your PC.
Checked by AVG Free Edition.
Version: 7.5.446 / Virus Database: 268.18.4/703 - Release Date:
26/02/2007 2:56 PM
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Vanishing divs in IE6
Paul Galatis schreef: Hi, I am developing a page that includes a small piece of javascript that make div appear or dissapear. This works perfectly on this page when 'info' is clicked next to each song: http://www.kateluckhille.com/index.php/music/ But when I change the layout in another section: http://www.kateluckhille.com/index.php/soundfactory/ the songs dissapear as one hovers over them in IE6. Does anyone have any ideas? I have removed the Javascript element and it still happens so I assume it is the css. Any help would be greatly appreciated. Kind regards. I am Paul Hi Paul, 1. The Music page. First I couldn't see at all the 'info' links to click on. Had to go in the source code to see where they must be. Back to screen, and found them! But on my CRT monitor these dark colored text links on the dark background are hardly visible. This is not only due to the too small contrast in the darks [1], but extra because of the very bright white of the top img, which is so brilliant that all details in brightness in the dark disappear. Scrolling upwards and hiding the top img is a bit better, but still almost impossible to see the Info links. Especially if the visitor doesn't know there are Info links! 2. The Soundfactory page. Here the Info tags are missing in the html at the moment - also FF doesn't display anything... Should be good to check the html-validator too: 5 missing /div's found. - If repaired, we can have a look what is going on in IE. Or maybe the problem is solved automatically! :-) Success, francky [1] See Colour Contrast Analyser http://juicystudio.com/services/colourcontrast.php Result is far below usability (not to speak about accessibility!), see screenshot results http://home.tiscali.nl/developerscorner/css-discuss/images/test-colorcontrast.gif __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] FW: Adjacent siblings
Bill Hely schreef:
OK, my boo-boo, I had the Firefox tab set to use the IE rendering
engine. Once switched back it works fine.
However, without IE6 support that CSS formatting trick is no use
to me.
Anyone got any ideas about another (IE6-compatible) way to apply
formatting to an element, conditional upon the nature of the
preceding sibling?
TIA
- Bill
Hi Bill,
If a separate use of the h3 is not needed, maybe a negative
margin-bottom for the h3?
p { padding: 0; margin: 10px 0; }
h3 { padding: 0; margin: 20px 0 -10px 0; }
Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] POOF! Background image on link goes away in IE!
Excellent! I used span tags rather than u, but the effect was the same. If I don't want to do the updates by hand, all is not lost: it's a dynamic site (PHP), so if need be I can run all text through a link-fixer before displaying it. For now, I'll do it manually. (Count me as another person who thought first-word was going to be in the specification because some older CSS books mentioned it as a coming thing; too bad it never arrived, would've fit this situation perfectly! (Heck, having thought of that, I tried :first-letter, but it doesn't apply to non-block elements like my links. Foo.) --- Mark Wilson, Computer Programming Unlimited Web: http://www.cpuworks.com/ Email: [EMAIL PROTECTED] or [EMAIL PROTECTED] Our motto: Getting the Job Done -Original Message- From: [EMAIL PROTECTED] To: [EMAIL PROTECTED] Cc: [EMAIL PROTECTED]; css-d@lists.css-discuss.org; [EMAIL PROTECTED] Sent: Tue, 27 Feb 2007 6:40 PM Subject: Re: [css-d] POOF! Background image on link goes away in IE! Ingo Chao wrote: [EMAIL PROTECTED] wrote: [...] issue at http://runwithmcp.org/poof.html [...] in IE6 if the link wraps around an end-of-line, the background image vanishes! [...] I've tried several IE voodoo-hacks ... [...] There is no CSS-only fix, and it is not a bug. The positioning of the background-image on inline elements is just not defined in CSS2.1 [1]. IE seems to follow the 'bounding-box' model for the 'background-break' property (CSS3) [2]. Ingo [1]http://www.satzansatz.de/cssd/wrappinglinkbg.html [2] http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-break Hi Mark, Some months ago I was Voodoo-ing IE as well for this problem, and found a dirty trick. * CSS workaround for external link with small icon http://home.tiscali.nl/developerscorner/css-discuss/test-link-iconEN.htm Can be used without scripting (css/html only): most handy if a new site/page (fresh html) is started. Or otherwise some work by hand, to change html (all external links have to be adapted). Small site, small problem; big amount of external links, big problem. ;-) And who knows, maybe also good starting point for a script builder to implement on existing sites. Hope you can use some of this, Success and greetings, francky Check out the new AOL. Most comprehensive set of free safety and security tools, free access to millions of high-quality videos from across the web, free AOL Mail and more. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Holy Grail issues
I am using the holy grail http://www.alistapart.com/articles/holygrail layout for a site because I want the source code in a particular order. The site is here http://www.syntony.org/ In IE6 strange things start to happen when the window becomes very small - the left sidebar (called #series_nav due to what will be there when the construction notice is removed) moves across over the center column - sometimes it snaps back, but at very small sizes it doesn't. I have a script running to simulate min/max width which may also be complicating the issue. I know negative margins are a bit of a lottery with older browsers - perhaps I need to try another layout. I am using an innerwrapper to add padding to the center column because when I add padding to the element itself (again following along with the holy grail tutorial) the 100% + padding seems to cause the #content_wrap to become 20px (the total padding) wider than the width of the window. This is a problem because the right hand vertical dots are positioned using a 220px wide image (mostly white) aligned with the right edge of #content_wrap. Besides which the horizontal scroll bar is annoying. As I said, I have fixed this issue with an extra div, but the cause is still bugging me. Did I miss something, or is this a known issue with the grail? On an unrelated matter, I noticed in FF1.0 the hr / I am using to clear #content_wrap doesn't when its height is declared in the CSS as height : 0 I have already set visiblity to hidden, and border-width to 0, do I need the height declaration for some browsers, or can I leave it out? FF1.5 seems to be fine. cheers, David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Holy Grail issues
David Sharp wrote: I am using the holy grail http://www.alistapart.com/articles/holygrail layout for a site because I want the source code in a particular order. The site is here http://www.syntony.org/ One more thing. IE7 (and maybe 6 as well - I haven't checked) seems to eat all my content without a hasLayout trigger on #content_wrap. I am currently using zoom : 1 but I would rather have the CSS validate. Is there another option? Again, this was something not mentioned in the article. Thanks David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 at end of a link not displaying properly when there's a line break in IE
Hi,
I am having a problem where a background-image at end of an a link is not
displaying properly in IE when it contains a line break. See
http://technology.berkeley.edu/msvista/, and after links like Minimum
Security Standards, significant hardware investment, and UC Berkeley
BearShare Windows Vista site there should be a little offsite icon,
similar to the one wikipedia uses. In IE when these links have a line break
in between them somewhere, it seems that IE tries to display the offsite
icon at the end of the first line that has part of the link in it, not at
the end of the link where I'd like it to be. When it does this, it almost
always displays a partial version of the icon, which looks very strange. You
may have to re-size your window to cause a line break in the middle of the
link to see this behavior.
The HTML in question is:
a
href=http://www.microsoft.com/windows/products/windowsvista/buyorupgrade/ca
pable.mspx class=offsite
significant hardware investment/a
And the CSS is:
a.offsite {
padding-right: 15px;
background-image: url(/images/offsite.gif);
background-position: right center;
background-repeat: no-repeat;
}
I've found a way to make the full icon appear, though it still appears at
the point of the line break in the middle of a link. To do this, in the
a.offsite style I changed:
background-position: right center;
To:
background-position: 100% 0%;
This solution is definitely not ideal because the icon overlaps the last
letter on the end of the first line, and there is an empty space where the
icon should really be right after the link.
Is there any way to make Internet Explorer display this background-image
correctly? It seems to be a problem with all versions, including 7.0.
Thanks for any help you can give me!
Allison Bloodworth
Principal Administrative Analyst
Technology Program Office
University of California, Berkeley
(415) 377-8243
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Netscape/AOL Float Issue 3-Column
In Netscape and AOL the Outer layer doesn?t stretch to fit the contents of Inner to create the appearance that all three columns are same height. ... In older Geckos like N7, the solid clearing element must not be empty. Adding a nbsp may help div class=clearnbsp;/div Ingo Ingo you are genius. Thank you so much. That fixed it. Meaghen __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 test please!! (44)
Hi list, Could I please have a cross browser check!! I have a positioning problem with the index page navigation and the alignment of the pic squares in the site map page in FF 1.5 and IE 6 http://users.ncable.net.au/~keno2/index.html Site address http://users.ncable.net.au/~keno2/JRA.css main page http://users.ncable.net.au/~keno2/corners.css sub pages Thanks in advance, Ken. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/
