Re: [css-d] simple stop wrapping
Hi,
Or another solution would be to put a div around everything you want to the
right of the float left image and put it in a float left div with a width.
(Obviously not with css inline like I've done it tho)
img style=float:left
div style=float:left;width:300px;
h4Stuff here/h4
ulliHere's my list/li/ul
/div
(If you want to see it in example... I've done that here with pictures on left
and the text to the right http://www.quizzle.co.uk/quizzle_guide_to_london.asp )
~ Lacuna
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Gunlaug Sørtun
Sent: 08 August 2007 03:03
To: Amy Drayer
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] simple stop wrapping
Amy Drayer wrote:
I have an image floating to the left and an h4 and p/ul I want sitting next
to it. Right now it's wrapping under the image if the paragraph or list is
longer than the image.
http://new.jocolibrary.org/research (need it quick box)
Add...
#needitquick div img {margin-bottom: 2em; display: inline;}
#needitquick div form img {margin-bottom: .5em;}
#needitquick div h4 {overflow: hidden; margin: 0;}
* html #needitquick div h4 {overflow: visible; height: 100%;}
#needitquick div p {overflow: hidden;}
* html #needitquick div p {overflow: visible; height: 100%;}
...which will introduce 'block formatting' in standard-aware browsers,
and add a 'hasLayout' trigger for old IE6. The result is self-adjusting
line-up with no wrapping under the image.
The 2em margin bottom on images will secure the effect even when
subjected to a reasonable amount of font resizing.
And what's up with ul/li wrapping weird in the More research tools in IE
at:
http://new.jocolibrary.org/default.aspx?id=2150
IE's reaction to...
#moretools li {
list-style-position:inside;
}
Delete that style and IE will render ok.
regards
Georg
--
http://www.gunlaug.no
__
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-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] Help, Please: Another CSS Image Gallery, Positioning Issues
Hi, I would recommend using float:left (or float:right) on the thumbnails instead of display:inline, and then give them a width as well ~ Lacuna. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of J Hodge Sent: 08 August 2007 02:02 To: css-d@lists.css-discuss.org Subject: [css-d] Help, Please: Another CSS Image Gallery, Positioning Issues Good evening to everyone. I am working on implementing another CSS photo gallery, this time utilizing the one found on Dynamic Drive at the following URL: http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/ My live test is at: http://www.lostinxlation.net/sandbox2/ddrive.html The applicable styles are at: http://www.lostinxlation.net/sandbox2/ddrive.css http://www.lostinxlation.net/sandbox2/css/primary.css As it sits, the full size image is properly located when displayed. However, the *thumbnails* need to be positioned on the right side, to mimic a right sidebar. When I attempt to position them using a margin-left, they display in a stack, even if using display: inline. Attempts at absolute positioning display them piled on top of one another. Relative positioning attempts displace the position of the full image. If anybody has any ideas, they would be greatly appreciated. Thank you in advance for your time and attention. ~~J. treswife -at- gmail -dot- com __ 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-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] Help, Please: Another CSS Image Gallery, Positioning Issues
Also... your large image does not pop up in IE6 for me but does work in FireFox 2. ~ Lacuna -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Andrea Black Sent: 08 August 2007 09:03 To: J Hodge; css-d@lists.css-discuss.org Subject: Re: [css-d] Help, Please: Another CSS Image Gallery,Positioning Issues Hi, I would recommend using float:left (or float:right) on the thumbnails instead of display:inline, and then give them a width as well ~ Lacuna. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of J Hodge Sent: 08 August 2007 02:02 To: css-d@lists.css-discuss.org Subject: [css-d] Help, Please: Another CSS Image Gallery, Positioning Issues Good evening to everyone. I am working on implementing another CSS photo gallery, this time utilizing the one found on Dynamic Drive at the following URL: http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/ My live test is at: http://www.lostinxlation.net/sandbox2/ddrive.html The applicable styles are at: http://www.lostinxlation.net/sandbox2/ddrive.css http://www.lostinxlation.net/sandbox2/css/primary.css As it sits, the full size image is properly located when displayed. However, the *thumbnails* need to be positioned on the right side, to mimic a right sidebar. When I attempt to position them using a margin-left, they display in a stack, even if using display: inline. Attempts at absolute positioning display them piled on top of one another. Relative positioning attempts displace the position of the full image. If anybody has any ideas, they would be greatly appreciated. Thank you in advance for your time and attention. ~~J. treswife -at- gmail -dot- com __ 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-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-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] Layout fixed, new problem with background-position
Hi Nick,
I would recommend that instead of background-position you use the hover
attribute.
So sort of like this:
A {
background-image:none;
width: 130px;
}
A:hover {
background-image:url(mynewimage.jpg);
}
Now I've not actually tested that method this moment but I believe
that's how I did mine last time. Also just a small mention that since
your menu is in fact a list I'd recommend that in the future you use UL
and LI for your menu items instead of DIV's and it will help you out
greatly when sorting your CSS.
~ Lacuna
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Nicholas
Karnick
Sent: 07 August 2007 20:47
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Layout fixed, new problem with background-position
Ray Leventhal wrote:
Hi Nicholas,
I'll assume the issue is IE6 only as I've just looked in Win/FF2,
Win/FF1.5 and Win/IE7 and the site looks great.
~Ray
Hello Ray,
Correct, it seems to work in every browser I have tested (Firefox 2.0,
Opera 9.21, Navigator 9.0, and IE7) except IE6.
Nick
__
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-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] Missing content in IE6, it doesn't scroll al the way down...[fixed]
Thanks for the info, it fixed the problem! Pretty weird bug if, you haven't read about it yet. On 8/7/07, Holly Bergevin [EMAIL PROTECTED] wrote: From: Sido van Gennip [EMAIL PROTECTED] http://www.paardenverzekeringvergelijker.nl/ in IE6, the bottom of the page seems to be missing... In - /* reset.css */ - remove the position: relative from the universal selector's declarations. Automatically declaring that property value for everything can have unpredictable and, as you've discovered, undesirable, consequences. Set it only where needed. __ 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 disapearing in IE
Hi list, I have a problem with a site I made, in flash and with simple css, that I can't figure out why the background of the site doesn't show up when the user refresh ( F5 ) the page. It simply don't show The url is www.bottero.net Any advices would be good TIA Marcelo Wolfgang __ 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 disapearing in IE
Try adding position Thanks Hakan http://wirefan.com On 8/8/07, Marcelo Wolfgang [EMAIL PROTECTED] wrote: Hi list, I have a problem with a site I made, in flash and with simple css, that I can't figure out why the background of the site doesn't show up when the user refresh ( F5 ) the page. It simply don't show The url is www.bottero.net Any advices would be good TIA Marcelo Wolfgang __ 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-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] simple stop wrapping
Dear Georg and Lacuna:
Thank you! I've tried both methods and am still having some small issues.
The double float made the nifty corners borders unhappy (they're very
touchy), so I'm working with the hasLayout code Georg sent (thank you for
the tip on moretools, that was left over from a previous idea and I totally
missed it!). There's some nesting problems now, so I'm looking for a
solution to get the divs to clear without screwing with the borders. Mucho
gracias! :-D
--
In peace,
Amy M. Drayer
Web Interface Designer
[EMAIL PROTECTED]
http://www.puzumaki.com
On 8/8/07, Andrea Black [EMAIL PROTECTED] wrote:
Hi,
Or another solution would be to put a div around everything you want to
the right of the float left image and put it in a float left div with a
width.
(Obviously not with css inline like I've done it tho)
img style=float:left
div style=float:left;width:300px;
h4Stuff here/h4
ulliHere's my list/li/ul
/div
(If you want to see it in example... I've done that here with pictures on
left and the text to the right
http://www.quizzle.co.uk/quizzle_guide_to_london.asp )
~ Lacuna
-Original Message-
From: [EMAIL PROTECTED] [mailto:
[EMAIL PROTECTED] On Behalf Of Gunlaug Sørtun
Sent: 08 August 2007 03:03
To: Amy Drayer
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] simple stop wrapping
Amy Drayer wrote:
I have an image floating to the left and an h4 and p/ul I want sitting
next
to it. Right now it's wrapping under the image if the paragraph or list
is
longer than the image.
http://new.jocolibrary.org/research (need it quick box)
Add...
#needitquick div img {margin-bottom: 2em; display: inline;}
#needitquick div form img {margin-bottom: .5em;}
#needitquick div h4 {overflow: hidden; margin: 0;}
* html #needitquick div h4 {overflow: visible; height: 100%;}
#needitquick div p {overflow: hidden;}
* html #needitquick div p {overflow: visible; height: 100%;}
...which will introduce 'block formatting' in standard-aware browsers,
and add a 'hasLayout' trigger for old IE6. The result is self-adjusting
line-up with no wrapping under the image.
The 2em margin bottom on images will secure the effect even when
subjected to a reasonable amount of font resizing.
And what's up with ul/li wrapping weird in the More research tools in
IE
at:
http://new.jocolibrary.org/default.aspx?id=2150
IE's reaction to...
#moretools li {
list-style-position:inside;
}
Delete that style and IE will render ok.
regards
Georg
--
http://www.gunlaug.no
__
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-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] Z-index problem in Internet Explorer
Hi everyone, Is there a solution for this problem in IE? http://www.fjordaan.net/tests/z-index.html It seems that position: relative puts an element higher than any absolutely positioned elements earlier in the DOM tree. An example of where this problem occurs is with dynamic dropdown menus in the header div, going behind the content div because the latter has position: relative. Help appreciated, francois __ 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] Problems with Firefox and horizontal menu
Sucker Tree Horizontal Menu www.ttcollectiblegifts.com/dynamicdrive.html I'm satisfied with the way my menu looks in IE browser, but not in Firefox. As I hover on a top level list item, the background shortens, making the next top list item overlap the top of the top link. Any ideas on why this is happening? Also, in Firefox, my menu is not nearly as wide as it looks in IE. How can I change this? I would love to be able to center the menu on my webpages, and not have to worry about placing it. Can I do this? All help is appreciated. teresamar2 __ 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] RFC: printing backgrounds by default
Hello! I'm a Mozilla developer, and I have a slightly off-topic question for the members of css-discuss. As I'm sure many of you have noticed, browsers don't print backgrounds by default. As David Dorward notes [1], this is in large part to avoid wasting ink printing pages that weren't designed to be printed. We'd like to make it possible for designers who /do/ take the time to consider printing to use backgrounds and have them printed by default. My suggestion was to automatically allow background printing for any pages that import an explicit 'print' style sheet, the logic being that if you've taken the trouble to provide a dedicated style sheet for print, then we should trust that you are not going to abuse the printer and allow you use of its ink for your backgrounds. (This is similar to how Opera employs lots of heuristics to tweak layouts for display on cell phones, but gives the designer full control if he or she has specified a style sheet explicitly for 'handheld'.) My superreviewer David Baron is concerned that this kind of switch would be confusing to web authors. E.g. importing an empty print style sheet would suddenly cause all backgrounds to print. So we want to know what you think: would a switch like this be confusing? Is there a better way to handle this kind of switch? What are your thoughts on this problem? For those who want more details, the bug report is here: https://bugzilla.mozilla.org/show_bug.cgi?id=381466 ~fantasai [1] http://archivist.incutio.com/viewlist/css-discuss/91007 __ 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] Photo grid with captions in CSS. Any ideas?
Hi all, I have been asked to do a page with about 18 image thumbnails with captions underneath. Now I know it would be easy to do with tables but is there a way to do this in CSS? I have done some searching and a lot seem to position the captions with javascript. Is there a complete CSS solution? Many thanks Karl __ 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] CSS Styled form not displaying properly in IE
Hi all,
A small issue here.
My CSS Styled form works 100% In Firefox but in IE the form is a bit wacky
Here is a screenshot, Top section is FF, Bottom is IE
http://www.johnsz.com/ieproblem.JPG
I have tried so much but cant resolve this,
Here is the code for the form in HTML
fieldset
legendUpload a Image/legend
form method=post enctype=multipart/form-data action=process.php
label for=fileuFile:/label input type=file id=fileu
class=input-box name=imagefile /br
label for=commentComment:/label input type=text id=comment
class=input-box name=comments /br
input type=hidden name=MAX_FILE_SIZE value=2097152 /br
input type=submit value=submit class=submit-button name=upload /
/form
/fieldset
and the CSS for the Form
label
{
width: 4em;
float: left;
text-align: left;
clear: both
}
.input-box
{
margin-left: 20px;
color: #26a;
background: #feb;
border: #26a solid 1px
}
.submit-button
{
margin-left: 1em;
clear: both
color: #000;
background: #fb0;
border: 2px #9cf outset
}
fieldset
{
display: inline;
border: #26a solid 1px;
width: 25em
}
legend
{
background: #fb0;
border: #26a solid 1px;
padding: 1px 10px
}
Any ideas? Am quite stuck on this one,
Cheers
--
Regards,
John Szaszvari
__
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] 2 things: z-index in IE6,7 and mysterious border behavior
Hello css-discuss list, There are 2 issues in IE7 and 1 issue in IE6 with this page (and it's many websitemates): http://lfhs.org/lfhs/services/index2.html http://lfhs.org/lfhs/css/lfhs.css (sorry the CSS file is so long) The main bugaboo is the one that occurs in both IE6 and 7: If you mouse over the last item in the left menu (Service Opportunities), the flyout displays BEHIND the Quick Links border. I tried addressing this with z-index declarations, but to no avail. The other issue is that in IE7, from the time that page first loads until you mouse over the menu items, three of the borders of the center table (id=bodytable and please don't yell at me for using the table) which are: 3px #70 double; display as if they are: 3px #70 solid; Sometimes it even looks like there's text lurking in those borders. But I am more concerned about the flyout behavior mentioned above. TIA, Nancy __ 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] P7 menu -- drops behind div -- BUT ONLY IN NETSCAPE?
From: Peggy Coats [EMAIL PROTECTED] I had a problem where the P7 menu was dropping behind the #content div, and, thanks to Gunlaug, got that fixed by adjusting the z-index of the #nav. It seems now to work correctly in all but Netscape browsers. Any suggestions? Here's the page: http://ambientglow.com/garage/floorguy/Web/sample.html# It's working in Firefox. A question, though... You've changed the CSS from our tutorial to float your root LIs right, instead of left, which makes your menu render backwards. Did you want to do that? -- Al Sparber - PVII http://www.projectseven.com Extending Dreamweaver - Nav Systems | Galleries | Widgets Authors: 42nd Street: Mastering the Art of CSS Design __ 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] IE6 Contained Div not Expanding
Good morning, I have a problem with a site I'm working on when viewed in IE6 - http://sandbox.policyunplugged.net. It's a 3 column layout with a central fluid width column. In IE7 and Firefox my central column expands nicely filling the space between the left and right columns but in IE6 there's a gap between the central content and the right column. Any ideas as to the cause? Best Regards, Chris Maiden __ 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] IE6 Contained Div not Expanding
Hi I seem to have fixed this by placing a margin-right: 0; on #container-node and width: 100%, display: inline; and a margin-right: 0; on #node Sorry if I wasted anyones time. Best Regards, Chris On 06/08/07, Samatason Ltd [EMAIL PROTECTED] wrote: Good morning, I have a problem with a site I'm working on when viewed in IE6 - http://sandbox.policyunplugged.net. It's a 3 column layout with a central fluid width column. In IE7 and Firefox my central column expands nicely filling the space between the left and right columns but in IE6 there's a gap between the central content and the right column. Any ideas as to the cause? Best Regards, Chris Maiden __ 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] Table cell border color in Firefox
James Eaton wrote: My apologies ahead of time if this is a JavaScript problem rather than CSS. It appears to me to be CSS, but... http://zolx.com/test/test.html This works correctly in IE6, but not in Firefox 2.0.0.6. The issue is that when mousing over the header row in Firefox, the effect only works correctly in column one. In all columns, both the background color and the bottom border color should change, but only the background is changing. Looks to me like a bug in Firefox. (Our border-collapse handling is a mess.) Opera handles it correctly. BTW, you might want to consider using :hover instead of JavaScript. Anyway, I added your testcase to https://bugzilla.mozilla.org/show_bug.cgi?id=286797 hope you don't mind. :) ~fantasai __ 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] IE's filter property can affect unreleated css rendering
Hello fellow designers,I'm using IE's filter CSS property and have found that
when I use it, IE has problems rendering positioned elements on a completely
different part of the page. I also tried experimenting with IE's expression
value and have found the same problem. Basically anytime I have something
like:#toolbar {filter:...}or#toolbar {...:expression(...)}it bombs out on
me.Here is a little testcase. Run it and comment/uncomment the filter CSS and
see that it affects the positioning of the red box. Also try replacing it with
width:expression(20px) and see the same effect.==htmlstyle
type=text/css.box {position:relative; left:100px}.box .outer {border:1px
solid blue; width:100px; height:100px}.box .outer .inner {border:1px dashed
red;position:absolute;left:0px;top:0px;margin-left:-20px;
width:20px;height:100px;}.image {border:1px solid orange;
width:50px;height:50px;/* affected line */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png');}/stylebody
tabletrtddiv class=boxdiv class=outer
div class=inner/div/div/div
tabletrtddiv
class=image/div/td/tr/table
/td/tr/table/body/html==Has anyone experienced this
before?Regards,Nathar
_
Messenger Café — open for fun 24/7. Hot games, cool activities served daily.
Visit now.
http://cafemessenger.com?ocid=TXT_TAGLM_AugWLtagline
__
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] Menu broken in IE - Please help!
Hi all, I have a double horizontal drop down menu that I've finally gotten to work in Firefox and Safari, but fails miserably in MS IE 5.5-7. It seems I have 2 issues: 1. The background behind the menu bar repeats itself and is not properly positioned under the above background image. 2. The menu items do not list horizontally, but vertically. The site is at: http://www.yogabasics.com/cms Any ideas on what the problem could be??? Thanks, Timothy __ 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] Trouble with display of background in IE
Greetings all, I'm scratching my head trying to figure out why IE 7 6 are cutting off the first line of text in the quotes display. Here is the page http://staging.williscoatings.com/. Actually it's any page on the site since they all contain the sidebar code. The quote box appears fine in FF2. But in IE the first line is chopped. I'm sure this is some conflict with the quote box top image, http://staging.williscoatings.com/wp-content/themes/willis/images/ quote-top.png, the negative margin on the div container for the quote text and the background repeating image, http:// staging.williscoatings.com/wp-content/themes/willis/images/quote.png I'm not seeing a solutions but thought I would ask the group. the client really wants the text adjacent to the double quotes not under it. 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/
[css-d] indenting text not in a tag.
I have a news page like this
div id=container
span class=headingArchive News 1/span
span class=sub_headingitem 1/span
This is ny news item
span class=headingArchive News 2/span
span class=sub_headingItem 2/span
This is another news item
span class=headingArchive News 3/span
span class=sub_headingItem 3/span
This is another news item
/div
This goes on forever. I need to indent all the text but when I use
#container {
text-indent :30px;
}
the two spans indent but the ordinary text does not indent. Is there a way
other than wrapping in P tags to get them to indent. This page is very long
so adding p tags would take ages.
R.
__
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] Centered, 100% height div in FF, IE6, IE7 when text overflows
I have a page (http://sdemo.safedataisp.net/test.html) With a very simple setup: HTML 4.01 Strict All style information via css I want to create a page that has a white center with blue borders. If the contents of the page are less then the screen height I want the white to continue to the bottom of the screen, if the contents of the page are more then the screen height I want the white to continue to the end of the contents. If you look at the example link it looks correct in IE6 but incorrect in both FF and IE7. While the IE6 rendering is how I want it to look, IE7 matches how I would expect it to look the way the css is currently written. FF looks correct until I put some text in the div then it doesn't do anything I would expect. I want to learn more so if anyone can not only tell me what to do but why I would be very grateful. Thanks, David Ruggles CCNA MCSE (NT) CNA A+ Network EngineerSafe Data, Inc. (910) 285-7200 [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/
Re: [css-d] Photo grid with captions in CSS. Any ideas?
I am just seeing this thread now. So perhaps you already have all the answers you need. But if not, take a look at Thierry's simple css solution: http://tjkdesign.com/articles/how_to_style_thumbnail_and_caption.asp -- E. Michael Brandt www.divaHTML.com divaGPS : you-are-here menu highlighting divaFAQ : FAQ pages with pizazz www.valleywebdesigns.com JustSo PictureWindow JustSo PhotoAlbum -- -- E. Michael Brandt www.divaHTML.com divaGPS : you-are-here menu highlighting divaFAQ : FAQ pages with pizazz www.valleywebdesigns.com JustSo PictureWindow JustSo PhotoAlbum -- __ 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] Tables problem in a two columns layout.
I'm making a two columns layout for my website... I face a problem in internet explorer when I used tables in the contents column (the right one) As the left column is floating to the left, the tables clears the right side of that column, although all other contents sucha s text or images are place correctly.. What can i do? you can check the page on http://www.ahm531.com/archfoundation.html See it on IE, thats where the problem occures. _ Express yourself instantly with MSN Messenger! Download today it's FREE! http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/ __ 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] problem with opera and moved div
I made a theme for php-nuke based on css and divs. This is sample page http://www.nsst.pl/wakacje/modules.php?name=ZClassifieds I have problem with Opera Browser. Other browsers like IE or Firefox display this page correctly. In Opera div named tres is moved on the left. CSS for this site: http://www.nsst.pl/wakacje/themes/wakacjev1/style/style.css What is wrong? __ 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] 3px IE bug with images
I could be wrong, but it looks like it's more of a body issue. Try setting
body {margin:0; padding:0; border:0;}
(which might be overkill)
--Nancy
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Travis Killen
Sent: Tuesday, August 07, 2007 10:25 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] 3px IE bug with images
Hi - I'm having some 3px bug in IE. The images are floated left, but
are off by 3px, only in IE. I don't know which hack to use.
http://936webdesign.com/env/
Kind Regards,
Travis Killen
936 Web Design
http://936webdesign.com
__
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-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] IE6 will not drop down a list.... please help
I have been working at converting our webpage to pure xml and css and I though I had accomplished this until yesterday. I have a drop down horizontal menu at the top of my page that I created with css and xml but IE6 will not drop the list down when you hover over it. Any Ideas??? www.autodata.com/test/test Thank you, Roelf D. Kuitse __ 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] CSS Styled form not displaying properly in IE
Hi John,
I can not see your code but I would make sure that 'File' and 'Comment'
are in labels and then apply float:left and width's to both label and
input styles
label for='file'File/label
input for your file here/
labelComment/label
input for your comment here/
I.E.
LABEL {
clear:both;
float:left;
width: 130px;
}
LABEL {
float:left;
width: 130px;
}
~ Lacuna
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of John Szaszvari
Sent: 05 August 2007 07:53
To: css-d@lists.css-discuss.org
Subject: [css-d] CSS Styled form not displaying properly in IE
Hi all,
A small issue here.
My CSS Styled form works 100% In Firefox but in IE the form is a bit
wacky
Here is a screenshot, Top section is FF, Bottom is IE
http://www.johnsz.com/ieproblem.JPG
I have tried so much but cant resolve this,
Here is the code for the form in HTML
fieldset
legendUpload a Image/legend
form method=post enctype=multipart/form-data action=process.php
label for=fileuFile:/label input type=file id=fileu
class=input-box name=imagefile /br
label for=commentComment:/label input type=text id=comment
class=input-box name=comments /br
input type=hidden name=MAX_FILE_SIZE value=2097152 /br
input type=submit value=submit class=submit-button name=upload
/
/form
/fieldset
and the CSS for the Form
label
{
width: 4em;
float: left;
text-align: left;
clear: both
}
.input-box
{
margin-left: 20px;
color: #26a;
background: #feb;
border: #26a solid 1px
}
.submit-button
{
margin-left: 1em;
clear: both
color: #000;
background: #fb0;
border: 2px #9cf outset
}
fieldset
{
display: inline;
border: #26a solid 1px;
width: 25em
}
legend
{
background: #fb0;
border: #26a solid 1px;
padding: 1px 10px
}
Any ideas? Am quite stuck on this one,
Cheers
--
Regards,
John Szaszvari
__
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-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] image replacement techniques and CSS
Michael Leibson wrote: Hi, I've a question about image replacement techniques and CSS. For details, please see: http://members.distributel.net/~leibson/Gilder-Levin.htm Thanks. - Michael I am not sure how to answer your question /or/ if I can answer it at all. In a situation where you want to use a /particular heading font/ that is not available on any or all cross user operating systems, you can set that font (providing you have on your system) as an image using Photoshop. Image replacement is more a means of putting heading content in your file as text. And then overlaying that text /with an image of the text in the particular font/ that is not available on any or all cross user operating systems. You get the advantage of providing the particular font /you/ want in your headings without compromising (maybe) the benefits of accessibility. Best, ~dL -- http://chelseacreekstudio.com/ __ 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] How a div can expand according to its content?
I might be misunderstanding but why do you want the container width to be 300px wide and expect the 400px input box to not poke out the side? If you stick a large box in a small bag the box will have to poke out the top of the bag ~ Lacuna -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of tao yang Sent: 07 August 2007 08:30 To: css-d@lists.css-discuss.org Subject: [css-d] How a div can expand according to its content? Hi all. I am a new guy in this list, and this is my first e-mail.When I write the HTML, I met a problem: when I put a input type=text with width, for example 400px, into a Div with a shorter width(300px), the Input will poke the right edge of the div. In IE6, this will not happen.input is wrapped just well in div. I know this is IE6'bug, but that's the way I want.In firefox and IE7, disaster happen, input just poke the Div'right edge. I try to use the style display: table-cell to the outer div, firefox works well. But IE7 dosen't support this table-cell. I wonder if there is a way for IE7 which could fix the problem?Thank you very much. And here is the HTML files. HTML--- !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en headtitle test文件 /title link href=basic.css type=text/css rel=stylesheet / style type=text/css /style /head body div id=tdd style=width: 400px; max-width: 600px;background: red; height: 50px; display: table-cell form input name=df id=df type=text style=width:600px;/ /form /div /body /html - Thanks again for tolerating my poor ENGLISH. - 抢注雅虎免费邮箱3.5G容量，20M附件！ __ 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] IE6 will not drop down a list.... please help
Roelf D. Kuitse wrote: I have been working at converting our webpage to pure xml and css and I though I had accomplished this until yesterday. I have a drop down horizontal menu at the top of my page that I created with css and xml but IE6 will not drop the list down when you hover over it. Any Ideas??? www.autodata.com/test/test snip Hi Roelf, I ran into something like this recently and with the moderator's permission, I'll post this though it is a markup issue, not a CSS issue. As it happens, when you nest one ul within another, the nested ul must be in an li from the parent ul: example ul id=parentlist liSome item/li liSome item/li liSome item/li li ul id=childlist liSome child item/li liSome child item/li liSome child item/li ul !--end child list -- /li /ul --end parentlist -- This should help, at least somewhat. Regards, ~Ray __ 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] Trouble with display of background in IE
Hi Paul, Firstly I would say completely take out the wp_quotes div and where you have the div with the 'wp_quotes_quote' class it doesn't have to be a div tag, it could be a P tag and this would also help with validation. Secondly I would say to put a float:left; on the image, put it within the new p tag and then you should have your solution. Maybe kind of like this div id=wp_quotes_wrapper pimg style=float:left src=http://staging.williscoatings.com/wp- content/themes/willis/images/quote-top.png alt= / I am so pleased withthe results! I can#x27;t say enough about the professionalism of Allen#x27;s team. It was a great experience and I will work with you allagain in the future. div class=wp_quotes_authormdash; Sally Hayes/div img style=float:right; src=http://staging.williscoatings.com/wp- content/themes/willis/images/quote-bot.png alt= / /div!-- END wp_quotes_wrapper-- Hope this helps... ~ Lacuna -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Paul Menard Sent: 07 August 2007 20:51 To: css-d@lists.css-discuss.org Subject: [css-d] Trouble with display of background in IE Greetings all, I'm scratching my head trying to figure out why IE 7 6 are cutting off the first line of text in the quotes display. Here is the page http://staging.williscoatings.com/. Actually it's any page on the site since they all contain the sidebar code. The quote box appears fine in FF2. But in IE the first line is chopped. I'm sure this is some conflict with the quote box top image, http://staging.williscoatings.com/wp-content/themes/willis/images/ quote-top.png, the negative margin on the div container for the quote text and the background repeating image, http:// staging.williscoatings.com/wp-content/themes/willis/images/quote.png I'm not seeing a solutions but thought I would ask the group. the client really wants the text adjacent to the double quotes not under it. 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/ __ 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] indenting text not in a tag.
Hi Ross,
Is there a reason why you can't use margin's instead? Are the graphics
to not indent as well? Do you have a link we can see?
~ Lacuna
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Ross Hulford
Sent: 08 August 2007 09:17
To: css-d@lists.css-discuss.org
Subject: [css-d] indenting text not in a tag.
I have a news page like this
div id=container
span class=headingArchive News 1/span
span class=sub_headingitem 1/span
This is ny news item
span class=headingArchive News 2/span
span class=sub_headingItem 2/span
This is another news item
span class=headingArchive News 3/span
span class=sub_headingItem 3/span
This is another news item
/div
This goes on forever. I need to indent all the text but when I use
#container {
text-indent :30px;
}
the two spans indent but the ordinary text does not indent. Is there a
way other than wrapping in P tags to get them to indent. This page is
very long so adding p tags would take ages.
R.
__
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-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] Help, Please: Another CSS Image Gallery, Positioning Issues
Thank you to Michael McEwen, Andrea Black, and Fora. I managed to get things positioned roughly the way I would like and displaying reasonably correctly in Firefox 2, IE7, Opera 9, and Safari for PC. However, as Andrea and myself have both noted, it does not seem to be displaying correctly in IE6. Specifically, mousing over the thumbnails does not produce anything in the full image area or the description area, unlike in the other browsers. Current test code is located at: http://www.lostinxlation.net/sandbox2/gallery1a.html And current test CSS is located at: http://www.lostinxlation.net/sandbox2/css/primary.css (look near the bottom of the file for the styles applicable to the gallery) And, again, this is based from Dynamic Drive's example: http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/ which states that it works in IE6+. Any thoughts on what may be causing the lack of display in IE6? Is this an issue of needing positioning overrides for IE6? Thank you to all who have assisted so far, and in advance to everyone for your time and attention. ~~J. treswife -at- gmail -dot- com __ 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] mixed units for table padding
I hope this requirement is simple!
I am trying to align a table caption with a table cell.
The table has a 2 pixel border.
The table cell has 0.25em padding.
This means that the table caption needs padding of 0.25em + 2px.
The browser is IE.
Is this possible without making assumptions about font sizes?
Relevant lines from the current CSS file:
body {
font-size: small;
}
table {
/* NB */
/* IE tables don't inherit font-size */
font-size: 1em;
border: thin solid black;
}
th, td {
padding: 0.25em;
}
table caption {
caption-side: top;
/* NB *
/* padding needs extra allowance for border */
padding: 0.25em;
}
Cheers
Trevor
__
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] Menu broken in IE - Please help!
Timothy Burgin wrote: Hi all, I have a double horizontal drop down menu that I've finally gotten to work in Firefox and Safari, but fails miserably in MS IE 5.5-7. It seems I have 2 issues: 1. The background behind the menu bar repeats itself and is not properly positioned under the above background image. 2. The menu items do not list horizontally, but vertically. The site is at: http://www.yogabasics.com/cms Any ideas on what the problem could be??? Thanks, Timothy __ 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/ Hi Tim, A couple of things. I looked at the code and css, but the fact that your css has many errors [1] will definitely inhibit any debugging, or at very least, make it much more difficult to obtain help. Of particular concern are the errors regarding margin syntax which should not have commas between the values, but spaces. Perhaps some of the IE woes will go away when this is straightened out. [1] http://jigsaw.w3.org/css-validator/validator?profile=css21warning=0uri=http%3A%2F%2Fwww.yogabasics.com%2Fcms%2F HTH, ~Ray __ 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] Photo grid with captions in CSS. Any ideas?
Have you read More Eric Meyer on CSS yet? Project 2 addresses exactly this situation. Regards! - Toby __ 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] content little off in FF
Hello, My 2nd message today...;-) I had trouble in the past displaying my content right in IE7, but that I solved 2 days ago...The funny thing now it though, that my content is a little off in FF, while before that was not a problem at all... It has to do with this little piece of coding: margin-left:80px !important; /* was 103, for IE only */ margin-left:100px; /* was 80, FF */ As you can see I have been playing around with the numbers, but cannot seem to get it perfectly played in both browsers?! See: http://www.cmamali.org/koutiala.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] Centered, 100% height div in FF, IE6, IE7 when text overflows
I've very sorry to waste your time. Thank you for trying to look at this for me. I sent this email on Mon Aug 6th and then figured out the problem on my own. Since I didn't see the email show up on the list I assumed I hadn't sent it correctly so I didn't send an email saying I had figured it out. Thanks, David Ruggles CCNA MCSE (NT) CNA A+ Network EngineerSafe Data, Inc. (910) 285-7200 [EMAIL PROTECTED] -Original Message- From: Andrea Black [mailto:[EMAIL PROTECTED] Sent: Wednesday, August 08, 2007 11:20 AM To: David Ruggles; css-d@lists.css-discuss.org Subject: RE: [css-d] Centered, 100% height div in FF, IE6,IE7 when text overflows Sorry but your link is broken... ~ Lacuna __ 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] Photo grid with captions in CSS. Any ideas?
On Wed, 08 Aug 2007 10:40:37 -0400, E Michael Brandt [EMAIL PROTECTED] wrote: I am just seeing this thread now. So perhaps you already have all the answers you need. But if not, take a look at Thierry's simple css solution: http://tjkdesign.com/articles/how_to_style_thumbnail_and_caption.asp Interesting idea Michael I tried using it with images rather larger - i.e 340 x 250 px and it broke I did change the + / - 10.5em margin to suit - but the text is on top of the image and the images misalign Will this technique work for this larger image size ? Malcolm __ 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] Menu broken in IE - Please help!
Timothy Burgin wrote: Hi Ray, I thought I had validated the CSS before, but now all is fixed and validates fine. I don't have MS IE on my iMac yet, so I'm waiting on a screen shot from browsershots.org to see if this has helped. Thanks, Timothy Hi Tim, Sadly, even though the CSS does now validate, I'm still seeing the same vertical layout of your menus as before. (Win/IE7) I really love the look of your double horizontal menus in FF (and Opera and Safari), though, and am eagerly waiting for someone who's more experienced than I am at this to help find a solution. Best, ~Ray __ 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] mixed units for table padding
Trevor Nicholls wrote:
I hope this requirement is simple!
I am trying to align a table caption with a table cell.
The table has a 2 pixel border.
The table cell has 0.25em padding.
This means that the table caption needs padding of 0.25em + 2px.
The browser is IE.
Is this possible without making assumptions about font sizes?
Relevant lines from the current CSS file:
body {
font-size: small;
}
table {
/* NB */
/* IE tables don't inherit font-size */
font-size: 1em;
border: thin solid black;
}
th, td {
padding: 0.25em;
}
table caption {
caption-side: top;
/* NB *
/* padding needs extra allowance for border */
padding: 0.25em;
}
Fractional ems combined with pixels? I think you're just asking for
rounding errors ...
--
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
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] IE6 will not drop down a list.... please help
From: Roelf D. Kuitse [EMAIL PROTECTED] IE6 will not drop the list down when you hover over it. Any Ideas??? www.autodata.com/test/test Well, I could not find the csshover.htc file, (which may be what you are using to control the dropdowns in IE6) so perhaps the browser is having the same difficulty. Check the path to the file and make sure that it's really there. ~holly __ 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] Photo grid with captions in CSS. Any ideas?
On Wed, 08 Aug 2007 13:43:56 -0400, E Michael Brandt [EMAIL PROTECTED] wrote: I will tinker with it later when I get a chance, but really don't you think 340 by 250 is humungous for a thumbnail? Perhaps you are not really looking for thumbnail page styling? -- Yes - humungus is the word. ;-) No - I was rather looking for better way to display a small photo album - say a page with 10 images about that size and not use thumbnails. Up until now I have been giving each photo a div - floated left div class=leftimg img src=/img/x.jpg alt=xxx width=xxx height=xxx border=0 / p class=photolegendxxx/p /div keeping to keep the text photo legend within the same width as the photo I have had to use a selection of css rules or determine the size with php - but as I say this must be inefficient / bloated etc. I thought your idea rather better - __ 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] Trouble with display of background in IE
From: Paul Menard [EMAIL PROTECTED]
why IE 7 6 are cutting
off the first line of text in the quotes display. Here is the page
http://staging.williscoatings.com/
Try adding the two properties below -
#l_sidebar #wp_quotes .wp_quotes_quote {
background: url(images/quote.png) repeat-y;
padding: 0px 15px;
text-indent: 45px;
text-align: left;
margin-top: -15px;
line-height: 140%;
position: relative; /* add this */
z-index: 2; /*also add this */
}
To help IE get the stacking order right.
~holly
__
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] Looks fine on my IE6 but not others
I'm hoping someone can detect and substantiate this issue for me because I'm flying blind. The site is http://www.rst.uiuc.edu. It validates fine and looks fine in IE6 on my desktop but another person on campus says when they look at the site (also in IE6), the main content is pushed down until it clears the left-hand menu. Relevant CSS is http://www.rst.uiuc.edu/css/fonts.css and base.css. Any help is greatly appreciated. -Tim -- Tim Offenstein *** College of Applied Health Sciences *** (217) 244-2700 CITES Departmental Services Web Specialist *** www.uiuc.edu/goto/offenstein __ 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] Looks fine on my IE6 but not others
Afternoon Tim You wrote I'm hoping someone can detect and substantiate this issue for me because I'm flying blind. The site is http://www.rst.uiuc.edu. It validates fine and looks fine in IE6 on my desktop but another person on campus says when they look at the site (also in IE6), the main content is pushed down until it clears the left-hand menu. Relevant CSS is http://www.rst.uiuc.edu/css/fonts.css and base.css. Any help is greatly appreciated. -Tim -- I don't see any problems in IE 6 Win XP Pro SP 2. Holds together from font size medium to largest and at a variety of screen resolutions from 800 x 600 to 1280 x 1024... iow... It's not dropping content that I can see. I didn't look at any other browsers One small nit to pick at 800 x 600 the text next to the photo of Director McDonald wraps to several lines.. It starts Th e Dep art me nt etc. until it clears the photo. A similar situation exists with the text next to the photo in the Graduation Celebration section. hth Jim Nannery www.redfernenterprises.com __ 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] My Sliding Door's Stuck!
Hi, folks! I'm working up a template site you can see here: http:// www.rchseaglesnest.org/new The Feature tab on the left side of the page is new for me. Rather than cheat and include it as part of the header graphic, I decided to try making it float over top of the layout and have live type (instead of graphic) in it. I'm using the sliding door technique for the first time, and have some questions, if anyone has a minute to answer them: (1) Functionally, the tab is there only as an attention-grabber, to break up the grid a little. I'm using the link on top of a list element structure from A List Apart, though, so it's not quite what you'd call semantically marked-up, I guess. Is there another way to achieve this effect without making a list of one element? (2) Try as I might, I can't get the left edge of the tab clear of the rounded-corner edge (if you look closely, you can see the straight edge poking out on the left side). I'm not sure what I'm doing wrong. If I add a margin to the left side of the li, it just seems to shove the whole thing over, and padding, of course, doesn't affect the background... The page's stylesheet is at http://www.rchseaglesnest.org/new/ style.css -- the section for the tab is marked with a comment, about half-way down. Thanks for any help! Jeff. __ 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] IE background position bug demo
Recently I needed to set a background image on body in order to create full height faux columns. I found that if font size is set on body that IE still uses the default font size to position the background image. To get around it I ended up putting the background image on a div instead. Here is a demo: http://snadden.com/demo/ie-background.htm Has anyone else come across this before? Are there any other ways around this? Thanks, Tim This email with any attachments is confidential and may be subject to legal privilege. If it is not intended for you please reply immediately, destroy it and do not copy, disclose or use it in any way. __ 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] image replacement techniques and CSS
- Original Message From: David Laakso [EMAIL PROTECTED] To: Michael Leibson [EMAIL PROTECTED] Cc: css discuss css-d@lists.css-discuss.org Sent: Wednesday, August 8, 2007 11:03:10 AM Subject: Re: [css-d] image replacement techniques and CSS Michael Leibson wrote: I've a question about image replacement techniques and CSS. For details, please see: http://members.distributel.net/~leibson/Gilder-Levin.htm Image replacement is more a means of putting heading content in your file as text. . . . Hi, David. Thanks for replying. Yes, I'm aware of its use, and am having no trouble using it. The question I have is strictly about how to add padding to the h# that contains the text without, in the process, also adding padding around the image. As far as I can tell, those two effects are inseparable, so I imagine there must be another way to do it -- eg, somehow using more than just the h# and the span. I'm surprised that yours has been the only response on this topic. From the many well-written (and well-presented) web-sites on the subject, I'd gotten the impression that image replacement is fairly commonly used, and expected that it would be well-known among the number of really good web designers using this list. I'll put this particular problem on the back burner, for now. All the best, Michael Get news delivered with the All new Yahoo! Mail. Enjoy RSS feeds right on your Mail page. Start today at http://mrd.mail.yahoo.com/try_beta?.intl=ca __ 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] Baseline ruled background
How do I make ruled background ? Something like a z-index'ed div with ruled baselines. Many thanks in advance, Aaron __ 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] CSS validation warnings question
On 8/8/07, Brian Cummiskey [EMAIL PROTECTED] wrote: Terri Chicko wrote: It says my CSS validates but I have 22 warnings all similar. Sorry, I know these are dumb... but I don't understand. Warning Same colors for color and background-color in two contexts #headline and h1 Thanks Terri This means you have a background color that equals the foreground color, ie White on White. It gives you a warning, as technically, this text is not visible. I'll just add that the validator has no knowledge that you have no intention of ever combining #headline and h1 in the same element. The irony is that if you have #fe on #ff, the validator won't issue a warning, but it will still be invisible. -- Richard Grevers, New Plymouth, New Zealand Dramatic Design www.dramatic.co.nz __ 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] IE background position bug demo
Snadden Tim wrote: Recently I needed to set a background image on body in order to create full height faux columns. I found that if font size is set on body that IE still uses the default font size to position the background image. To get around it I ended up putting the background image on a div instead. Here is a demo: http://snadden.com/demo/ie-background.htm ... Did you try to set font-size on html instead of body? Ingo -- 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] loading order of divs?
Hello, I'm working with a shopping cart program which assembles pages from a number of PHP files and applies styles to them. In most browsers, what will become the left column of the page loads just after the header area -- but it's in the middle of the window. Then when the middle content area is loaded the left column relocates to where it's supposed to be, on the left. I asked about this on the program's support forum and someone replied that they used to know a simple CSS fix for this but couldn't recall it. Does someone here know what to do? I don't mind different parts of the page appearing sequentially -- most people have fast enough connections that that is not a problem. But I would prefer the left column to become visible where it's going to stay. You can see the effect here if you wish... http://www.thistledance.com/store Click the Artists category, then one of the artists names. You can return to the home page and do it again usiing the same category and artist, and the same thing will happen, so it's not a browser cache issue. The effect can be seen in FF, Opera and Safari -- on both Mac OS X and Win XP. In IE, the effect is slightly different. The header loads and the border of the eventual content draws wrapped around the header. Then when the left column and the center content are loaded, the border bottom moves down where it's supposed to be. In short, I'd like things to draw as if their sizes and locations have been pre-calculated. Can this be assured using CSS? Rob __ 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] problem with opera and moved div
Tomasz Tybusz wrote:
I made a theme for php-nuke based on css and divs. This is sample
page http://www.nsst.pl/wakacje/modules.php?name=ZClassifieds I have
problem with Opera Browser. Other browsers like IE or Firefox display
this page correctly. In Opera div named tres is moved on the left.
CSS for this site:
http://www.nsst.pl/wakacje/themes/wakacjev1/style/style.css
What is wrong?
Your CSS doesn't make sense, so browsers are guessing. We call it
error-recovery and it isn't standardized across browser-land.
Correct the relevant styles to...
.tresc {
font-family : Tahoma, Verdana, arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #588fc7;
z-index : 4;
background-color : #ff;
width : 395px;
padding : 0 15px 0 5px;
margin : 0 0 0 2px;
overflow : auto;
position : absolute;
left: auto;
top: 150px;
right: 6px;
bottom: 10px;
height: auto;
}
...and add...
* html .tresc {
height: 100%;
}
#main {
position: relative;
}
This will establish a relationship between the #main container and the
.tresc container, and use proper positioning for the latter to solve the
height-issue in the good browsers. IE6 gets the '* html' hacked
workaround since it doesn't understand 4-edge positioning.
The doctype you use triggers old 'quirks mode'. Although the differences
between 'quirks mode' and 'standard mode' rendering are few for your
page, I'll advise you to use a 'standard mode' triggering doctype.
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
...will work just fine.
regards
Georg
--
http://www.gunlaug.no
__
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] Site check Major blow out in IE6 and 7
Terri Chicko wrote: Hi Friends I'm ready to pull my hair out. My new site works great in FF and mac programs, but it's really on the fritz with IE 7 and 6 www.hotniniz.com Before you start pulling your hair out, I'd advise a revision of the source-code. It's too messy at the moment to bother to debug for cross-browser reliable rendering... http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http://www.hotniniz.com/warnings=yes The stylesheet is also in need of some clean-up it seems... http://jigsaw.w3.org/css-validator/validator?uri=http://www.hotniniz.com/warning=1profile=css21 It is mostly the table that is giving me headaches. I need to use a table in this site. So... any help would be appreciated. I don't know whether you need to use a table, or not, for that line-up, but once you have fixed the source-code and CSS a bit, you can worry about how to use clear on the table without clearing the sidebar and having to compensate for that. It's a case for 'hasLayout'[1] triggers and 'block formatting'[2]. Simplified styling is even more important, as many of the properties/values, and elements, you have used serve no purpose other than to complicate things without making much of an impression on any browser. It may turn out somewhat like this... http://www.gunlaug.no/tos/alien/tc/test_07_080504.html ...once you have finished the clean-up. The test-case I've provided is what I got when I let my Tidy (with my own settings) have a go at it, and Tidy just cleaned out enough to make it work and become somewhat valid, and changed the doctype to reflect what was left. That's not enough. Also, doesn't IE 6 see PNGs? Not without its proprietary filters. (I didn't bother with those for a test-case like this, so pardon my substitutes.) regards Georg [1]http://www.satzansatz.de/cssd/onhavinglayout.html [2]http://www.w3.org/TR/CSS21/visuren.html#block-formatting -- http://www.gunlaug.no __ 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] IE background position bug demo
http://snadden.com/demo/ie-background.htm Did you try to set font-size on html instead of body? Good point. Setting the font size on html does work. However, one limitation is that in IE7 blowing up the page with CTRL-+ increases the font size but doesn't move the background across proportionally. If you but the background on a wrapper div it changes position in proportion to the font size as it gets blown up or down. This is what you need if you are going for that faux column effect. It looks like somehow the background image position is being calculated before the font size. This email with any attachments is confidential and may be subject to legal privilege. If it is not intended for you please reply immediately, destroy it and do not copy, disclose or use it in any way. __ 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] Tables problem in a two columns layout.
Ahmed Essam wrote: I'm making a two columns layout for my website... I face a problem in internet explorer when I used tables in the contents column (the right one) As the left column is floating to the left, the tables clears the right side of that column, although all other contents sucha s text or images are place correctly.. What can i do? http://www.ahm531.com/archfoundation.html IE can't handle overflow properly - especially in 'quirks mode', and the elements with margins are too wide with the given styles. Change the styles on the div around those tables, so they read... div style=margin:30px auto; text-align:center; padding:3px; border:#369 thin solid; width: 455px; ...and it will work. regards Georg -- http://www.gunlaug.no __ 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] Z-index problem in Internet Explorer
Francois Jordaan wrote: http://www.fjordaan.net/tests/z-index.html It seems that position: relative puts an element higher than any absolutely positioned elements earlier in the DOM tree. Is there a solution for this problem in IE? Sure. Layer the relative positioned _container_ for the element that should stay on top, one level higher. Add... z-index: 1; ...to Div B, which will also lift its child: Div Z. regards Georg -- http://www.gunlaug.no __ 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] image replacement techniques and CSS
Michael Leibson wrote: I've a question about image replacement techniques and CSS. For details, please see: http://members.distributel.net/~leibson/Gilder-Levin.htm From the many well-written (and well-presented) web-sites on the subject, I'd gotten the impression that image replacement is fairly commonly used, and expected that it would be well-known among the number of really good web designers using this list. Your test with paddings fails on two points: 1: padding is added to dimensions. 2: at least two actual _positions_ must be used for a 'position: absolute' positioned element to land where it's supposed to under those conditions. So, you image is too small, and the span ends up in being positioned by the padding on the h3, instead of overlapping it as it should. I've corrected these issues here... http://www.gunlaug.no/tos/alien/ml/test_07_080902.html ...and you can clearly see that both dimensions and positions are different from your original, with padding in place. regards Georg -- http://www.gunlaug.no __ 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] Looks fine on my IE6 but not others
On 8/8/07, Tim Offenstein [EMAIL PROTECTED] wrote: I'm hoping someone can detect and substantiate this issue for me because I'm flying blind. The site is http://www.rst.uiuc.edu. It validates fine and looks fine in IE6 on my desktop but another person on campus says when they look at the site (also in IE6), the main content is pushed down until it clears the left-hand menu. Relevant CSS is http://www.rst.uiuc.edu/css/fonts.css and base.css. Any help is greatly appreciated. Looks fine in FF linux, even at 800x600. __ 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] Photo grid with captions in CSS. Any ideas?
Just play around a little bit with the image sizes that you have.
This worked for me using images of size 340x250.
dl {float:left;text-align:center;}
dt,dd {width:35em;float:left;}
dt {margin-bottom:4em;}/* vertical space between the images */
dd {margin:250px 0 0 -35em;}
img {vertical-align:bottom;border:0;}
em { display: block; font-weight: bold; margin-bottom: 5px; }
Note
- the margin on dd should be the height of your images (if they're of
different sizes, the maximum height among all of them).
- the width on dt,dd and the negative margin dd should be large
enough to be bigger than the widest of your images.
Unfortunately, because you're images are so much larger than the
original example, if you use ems (as I've done above) and then
increase the font size, the dds will get so large, they'll be off the
page to the right. So in your case, you might consider using a pixel
size, say 365px and then just live with the fact that it isn't quite
as scalable anymore. In this case, that's really not that big a deal
because most resolutions won't fit more than 3 365px images (with
spacing) side by side anyway.
Rob
On 8/8/07, Malcolm N [EMAIL PROTECTED] wrote:
On Wed, 08 Aug 2007 13:43:56 -0400, E Michael Brandt
[EMAIL PROTECTED] wrote:
I will tinker with it later when I get a chance, but really don't you
think 340 by 250 is humungous for a thumbnail? Perhaps you are not
really looking for thumbnail page styling?
--
Yes - humungus is the word. ;-)
No - I was rather looking for better way to display a small photo
album - say a page with 10 images about that size and not use
thumbnails.
Up until now I have been giving each photo a div - floated left
div class=leftimg img src=/img/x.jpg alt=xxx width=xxx
height=xxx border=0 /
p class=photolegendxxx/p
/div
keeping to keep the text photo legend within the same width as the
photo I have had to use a selection of css rules or determine the size
with php - but as I say this must be inefficient / bloated etc.
I thought your idea rather better -
__
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-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] Looks fine on my IE6 but not others
Looks great on FF, IE7 .. Ask that another person to get you a screen shot next time.. Thanks Hakan http://dominor.com On 8/8/07, Robert Van Dam [EMAIL PROTECTED] wrote: On 8/8/07, Tim Offenstein [EMAIL PROTECTED] wrote: I'm hoping someone can detect and substantiate this issue for me because I'm flying blind. The site is http://www.rst.uiuc.edu. It validates fine and looks fine in IE6 on my desktop but another person on campus says when they look at the site (also in IE6), the main content is pushed down until it clears the left-hand menu. Relevant CSS is http://www.rst.uiuc.edu/css/fonts.css and base.css. Any help is greatly appreciated. Looks fine in FF linux, even at 800x600. __ 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-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] indenting text not in a tag.
On 8/8/07, Ross Hulford [EMAIL PROTECTED] wrote:
I have a news page like this
div id=container
span class=headingArchive News 1/span
span class=sub_headingitem 1/span
This is ny news item
span class=headingArchive News 2/span
span class=sub_headingItem 2/span
This is another news item
span class=headingArchive News 3/span
span class=sub_headingItem 3/span
This is another news item
/div
This goes on forever. I need to indent all the text but when I use
#container {
text-indent :30px;
}
the two spans indent but the ordinary text does not indent. Is there a way
other than wrapping in P tags to get them to indent. This page is very long
so adding p tags would take ages.
Would something as simple as this work?
#container {
text-indent: 30px;
}
#container span {
text-indent: 0px;
}
__
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] RFC: printing backgrounds by default
On 8/4/07, fantasai [EMAIL PROTECTED] wrote: Hello! I'm a Mozilla developer, and I have a slightly off-topic question for the members of css-discuss. As I'm sure many of you have noticed, browsers don't print backgrounds by default. As David Dorward notes [1], this is in large part to avoid wasting ink printing pages that weren't designed to be printed. We'd like to make it possible for designers who /do/ take the time to consider printing to use backgrounds and have them printed by default. My suggestion was to automatically allow background printing for any pages that import an explicit 'print' style sheet, the logic being that if you've taken the trouble to provide a dedicated style sheet for print, then we should trust that you are not going to abuse the printer and allow you use of its ink for your backgrounds. (This is similar to how Opera employs lots of heuristics to tweak layouts for display on cell phones, but gives the designer full control if he or she has specified a style sheet explicitly for 'handheld'.) My superreviewer David Baron is concerned that this kind of switch would be confusing to web authors. E.g. importing an empty print style sheet would suddenly cause all backgrounds to print. So we want to know what you think: would a switch like this be confusing? Is there a better way to handle this kind of switch? What are your thoughts on this problem? For those who want more details, the bug report is here: https://bugzilla.mozilla.org/show_bug.cgi?id=381466 ~fantasai I don't see anything confusing in it*. I suppose it might catch a few developers off guard at first but going forward, I would imagine the existing method is far more confusing to anyone unfamiliar with this problem. What's more confusing, I said show a background for printed versions of the page and so you printed it or I said show a background for printed versions of the page and so you ignored me? * caveat: After rereading what you wrote I realized that I misinterpreted your plan. My above comment would apply if and only if the background was specified in the print style sheet. That would seem to indicate to me that a developer knows what they want (as in your opera example). Printing a background specified elsewhere just because there is a print style sheet could easily catch a lot more developers off guard and be more confusing (though probably still less surprising/confusing than failing silently). Would it be reasonable to be that specific about when to print or not to print a background? Rob __ 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] IE6 will not drop down a list.... please help
-Original Message-
From: Holly Bergevin
From: Roelf D. Kuitse [EMAIL PROTECTED]
IE6 will not drop the list down when you hover over it. Any Ideas???
www.autodata.com/test/test
Well, I could not find the csshover.htc file, (which may be what you are
using to control the dropdowns in IE6) so perhaps the browser is having
the same difficulty. Check the path to the file and make sure that it's
really there.
From: Roelf D. Kuitse [EMAIL PROTECTED]
I actually don't have a csshover.htc file.. I run the hovers and the
drop downs with a file called menuh.css
Exactly. As I said, I couldn't find the .htc file. But to make IE6 obey :hover
on an element other than an anchor, which you do have a number of instances in
your menuh.css [1], you will need the csshover.htc file that is called for in
your HTML document. See the conditional comment in the head of your document
for the following (snipped other parts of the CC) -
body{behavior:url(/css/csshover.htc);
If you don't want to use the .htc file, you will need to find another way to
get those menus to display in IE6.
~holly
[1] from your menuh.css style sheet -
/* Begin non-anchor hover selectors */
/* Enter the more specific element (div) selector
on non-anchor hovers for IE5.x to comply with the
older version of csshover.htc - V1.21.041022. It
improves IE's performance speed to use the older
file and this method */
div#menu h2:hover{
background: #ff no-repeat -999px -px;
}
div#menu li:hover{
cursor:pointer;
z-index:100;
}
div#menu li:hover ul ul,
div#menu li li:hover ul ul,
div#menu li li li:hover ul ul,
div#menu li li li li:hover ul ul
{display:none;}
div#menu li:hover ul,
div#menu li li:hover ul,
div#menu li li li:hover ul,
div#menu li li li li:hover ul
{display:block;}
__
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/
